labsop_h5/src/view/entry/index.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-11 18:02:10
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-03-29 14:16:50
 * @FilePath: \vant-demo-master\vant\vue3-ts\src\view\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="entry-container">
    <van-tabs v-model:active="state.queryParams.approveStatus" @change="changeType">
      <van-tab title="审批中" name="20"></van-tab>
      <van-tab title="已通过" name="30"></van-tab>
      <van-tab title="全部申请" name=""></van-tab>
    </van-tabs>
    <div class="list-container">
      <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in state.list" :key="item" @click="toDetail(item.id)">
          <template #default>
            <div class="list">
              <header class="flex justify-between">
                <strong class="title">{{ `${item.memberName}的${item.platformName}入室申请` }}</strong>
                <van-tag v-if="item.approveStatus == 10" type="warning">待提交</van-tag>
                <van-tag v-else-if="item.approveStatus == 20" type="primary">审批中</van-tag>
                <van-tag v-else-if="item.approveStatus == 30" type="success">审批通过</van-tag>
                <van-tag v-else-if="item.approveStatus == 40" type="danger">审批退回</van-tag>
              </header>
              <p class="inst-title">
                <span>课题名称</span>
                <span class="title ml8">{{ item.pgName }}</span>
              </p>
              <p class="inst-title">
                <span>申请平台</span>
                <span class="title ml8">{{ item.platformName }}</span>
              </p>
              <p class="inst-title">
                <span>申请时长</span>
                <span class="title ml8">{{ item.platformTime }}个月</span>
              </p>
              <p class="inst-title">
                <span>入室周期</span>
                <span class="title ml8">{{
                  item.appointEndDate
                    ? `${formatDate(new Date(item.appointEndDate), 'YYYY-mm-dd')}~${formatDate(new Date(item.appointEndDate), 'YYYY-mm-dd')}`
                    : '-'
                }}</span>
              </p>
              <footer class="flex justify-between mt4">
                <span class="title">{{ item.memberName }}</span>
                <span class="time">{{ formatDate(new Date(item.createdTime), 'YYYY-mm-dd') }}</span>
              </footer>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
    <van-floating-bubble v-model:offset="offset" icon="plus" @click="onClick" axis="y" />
  </div>
</template>

<script name="home" lang="ts" setup>
  import to from 'await-to-js'
  import { formatDate } from '/@/utils/formatTime'
  import { onMounted, reactive, ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { usePlatformAppointApi } from '/@/api/platform/appoint'
  const platformAppointApi = usePlatformAppointApi()
  const router = useRouter()
  const route = useRoute()
  const offset = ref({ x: -80, y: 600 })
  const state = reactive({
    queryParams: {
      approveStatus: '20',
      pageNum: 1,
      pageSize: 10
    },
    finished: false,
    loading: true,
    list: [] as any[]
  })
  const changeType = (name: string) => {
    state.queryParams.pageNum = 1
    state.list = []
    onLoad()
  }
  const onLoad = async () => {
    const [err, res]: ToResponse = await to(platformAppointApi.getList(state.queryParams))
    if (err) return
    const list = res?.data?.list || []
    for (const item of list) {
      state.list.push(item)
    }
    state.loading = false
    state.queryParams.pageNum++
    if (list.length < state.queryParams.pageSize) {
      state.finished = true
    }
  }
  const toDetail = (id: number) => {
    router.push({
      path: '/entry/detail',
      query: {
        id
      }
    })
  }
  const onClick = () => {
    router.push('/entry/add')
  }
  onMounted(() => {
    const type = route.query.type
    if (type) {
      state.queryParams.approveStatus = type as string
    }
    onLoad()
  })
</script>

<style lang="scss" scoped>
  .entry-container {
    position: relative;
    display: flex;
    flex-direction: column;
    .list-container {
      overflow-y: auto;
      padding: 10px;
      border-radius: 4px;
      flex: 1;
    }
    .van-list {
      .van-cell {
        background-color: #fff;
        + .van-cell {
          margin-top: 10px;
        }
        header,
        footer {
          color: #333;
        }
        .title {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
        }
        .inst-title {
          color: #333;
          text-align: left;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 4px;
          span:first-child {
            color: rgb(120, 120, 120);
          }
        }
        .time {
          color: #f69a4d;
        }
      }
    }
  }
</style>