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-04-16 16:19:33
 * @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.appointId, item.platformType)"
        >
          <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>
                <!-- 05 待确认 10 待上传 20 待审核 30 已驳回 35 已撤回 40 待分配 50 可入室 60 已出室 -->
                <van-tag
                  v-if="item.appointStatus == '05'"
                  class="ml4"
                >
                  待确认
                </van-tag>
                <van-tag
                  v-else-if="item.appointStatus == '10'"
                  class="ml4"
                >
                  待上传
                </van-tag>
                <van-tag
                  v-else-if="item.appointStatus == '20'"
                  type="primary"
                  class="ml4"
                >
                  待审核
                </van-tag>
                <van-tag
                  v-else-if="item.appointStatus == '30'"
                  type="danger"
                  class="ml4"
                >
                  已驳回
                </van-tag>
                <van-tag
                  v-else-if="item.appointStatus == '35'"
                  type="warning"
                  class="ml4"
                >
                  已撤回
                </van-tag>
                <van-tag
                  v-else-if="item.appointStatus == '40'"
                  class="ml4"
                >
                  待分配
                </van-tag>
                <van-tag
                  v-else-if="item.appointStatus == '50'"
                  type="success"
                  class="ml4"
                >
                  可入室
                </van-tag>
                <van-tag
                  v-else-if="item.appointStatus == '60'"
                  class="ml4"
                >
                  已出室
                </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">
                  {{ formatData(item.platPlatformAppointCellRes, item.platPlatformAppointMolecularRes).platformName }}
                </span>
              </p>
              <p class="inst-title">
                <span>申请时长</span>
                <span class="title ml8">
                  {{ formatData(item.platPlatformAppointCellRes, item.platPlatformAppointMolecularRes).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"
    />
    <!-- <van-popup v-model:show="showEntryAddDialog" position="bottom" :style="{ padding: '64px' }">
      <EntryAdd @entry-add-success="handleEntryAddSuccess" />
    </van-popup> -->
    
    <!-- 申请须知弹窗 -->
    <van-popup
      v-model:show="needToKnowShow"
      round
      :closeable="true"
      position="bottom"
      :style="{ height: '90vh' }"
    >
      <div class="need-to-know">
        <h4 class="mt8 mb8">{{ noticeInfo.noticeTitle }}</h4>
        <div
          class="ck-editor"
          v-html="noticeInfo.noticeContent"
        ></div>
        <footer>
          <van-button
            class="w100"
            type="primary"
            round
            :disabled="confirmDisabled"
            :loading="confirmDisabled"
            @click="confirmAppoint"
          >
            我知道了
          </van-button>
        </footer>
      </div>
    </van-popup>
  </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'
  import { usePlatformApi } from '/@/api/platform/home'
  // import EntryAdd from './add.vue'
  import { showNotify } from 'vant'

  const platformAppointApi = usePlatformAppointApi()
  const platformApi = usePlatformApi()
  const router = useRouter()
  const route = useRoute()
  const offset = ref({ x: -80, y: 450 })
  const state = reactive({
    queryParams: {
      approveStatus: '20',
      pageNum: 1,
      pageSize: 10,
    },
    finished: false,
    loading: true,
    list: [] as any[],
  })

  const formatData = (cellRes: any[], molecularRes: any[]) => {
    if (cellRes && cellRes.length && (!molecularRes || !molecularRes.length)) {
      return { platformName: cellRes[0].platformName, platformTime: cellRes[0].platformTime }
    }
    if (molecularRes && molecularRes.length && (!cellRes || !cellRes.length)) {
      return { platformName: molecularRes[0].platformName, platformTime: molecularRes[0].platformTime }
    }
    if (!cellRes || !molecularRes) {
      return { platformName: '', platformTime: '' }
    }
    return {
      platformName: `${cellRes[0].platformName} / ${molecularRes[0].platformName}`,
      platformTime: `${cellRes[0].platformTime}个月 / ${molecularRes[0].platformTime}个月`,
    }
  }

  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, platformType: string) => {
    router.push({
      path: '/entry/detail',
      query: {
        id,
        entryType: 'getDetail',
        platformType,
      },
    })
  }
  // 申请须知弹窗相关状态
  const needToKnowShow = ref(false)
  const confirmDisabled = ref(false)
  const noticeInfo = reactive({
    noticeTitle: '',
    noticeContent: '',
  })
  
  // 获取申请须知内容
  const getNoticeContent = async () => {
    // 这里可以调用API获取申请须知内容，暂时使用默认内容
    noticeInfo.noticeTitle = '入室申请须知'
    noticeInfo.noticeContent = '请仔细阅读以下入室申请须知：\n\n1. 申请人需遵守实验室各项规章制度\n2. 申请需经过审核流程\n3. 请确保填写信息准确无误\n4. 申请通过后需按时完成相关手续'
  }
  
  // 确认申请须知
  const confirmAppoint = () => {
    confirmDisabled.value = true
    // 确认后跳转到入室申请页面
    router.push('/entry/add')
    confirmDisabled.value = false
    needToKnowShow.value = false
  }
  
  const onClick = async () => {
    const [err, res]: ToResponse = await to(platformApi.onCheckUserCertificate({}))
    if (err) return
    const { check, message } = res.data
    if (check) {
      // 先显示申请须知弹窗
      await getNoticeContent()
      needToKnowShow.value = true
    } else {
      showNotify({
        type: 'warning',
        message,
      })
    }
  }
  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;
        }
      }
    }
  }
  
  // 申请须知弹窗样式
  .ck-editor {
    height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 0 10px;
  }
  .need-to-know {
    height: calc(100% - 20px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    white-space: pre-wrap;
    p {
      flex: 1;
      overflow-y: auto;
    }
    footer {
      flex: 0 0 45px;
      margin-top: 4px;
      border-top: 1px solid #f7f8fa;
    }
  }
</style>