labsop_h5/src/view/entry/detail.vue

<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-29 14:15:09
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-04-16 15:25:17
 * @FilePath: \labsop_h5\src\view\entry\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: wanglj wanglijie@dashoo.cn
 * @Date: 2025-03-24 09:17:15
 * @LastEditors: wanglj wanglijie@dashoo.cn
 * @LastEditTime: 2025-03-29 14:28:02
 * @FilePath: \labsop_h5\src\view\instr\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="instr-detail">
    <header class="flex">
      <div class="i-right ml10">
        <div class="h100 flex flex-top flex-column flex-between">
          <div class="flex flex-top mb4 ml2">
            <div class="detailTxt name">{{ `${state.form.memberName}的${state.form.platformName}入室申请` }}</div>
          </div>
          <footer>
            <div class="flex flex-top mt-auto">
              <img
                class="i-r-icon"
                src="../../assets/img/user.png"
              />
              <div class="detailTxt">{{ state.form.createdName }}</div>
            </div>
            <div class="flex flex-top">
              <div class="detailTxt">{{ state.form.createdTime }}</div>
            </div>
          </footer>
        </div>
      </div>
    </header>
    <div class="content">
      <div class="card">
        <h4>申请人信息</h4>
        <ul>
          <li>
            <div class="label">申请人姓名:</div>
            <div class="value">{{ state.form.memberName }}</div>
          </li>
          <li>
            <div class="label">人员类型:</div>
            <div class="value">{{ getDictLabel(userTypeList, state.form.memberType) }}</div>
          </li>
          <li>
            <div class="label">申请人手机号:</div>
            <div class="value">{{ state.form.memberPhone }}</div>
          </li>
          <li>
            <div class="label">申请人科室:</div>
            <div class="value">{{ state.form.deptName }}</div>
          </li>
        </ul>
      </div>

      <div class="card">
        <h4>申请人课题组信息</h4>
        <ul>
          <li>
            <div class="label">课题组:</div>
            <div class="value">{{ state.form.pgName }}</div>
          </li>
          <li>
            <div class="label">课题组负责人:</div>
            <div class="value">{{ state.form.mentorName }}</div>
          </li>
          <li>
            <div class="label">课题组负责人科室:</div>
            <div class="value">{{ state.form.mentorDeptName }}</div>
          </li>
          <li>
            <div class="label">课题组负责人电话:</div>
            <div class="value">{{ state.form.mentorPhone }}</div>
          </li>
          <li>
            <div class="label">课题组负责人电话:</div>
            <div class="value">{{ state.form.mentorPhone }}</div>
          </li>
        </ul>
      </div>

      <div class="card">
        <h4>申请入室平台</h4>
        <ul v-if="state.form.platPlatformAppointCellRes && state.form.platPlatformAppointCellRes.length">
          <li>
            <div class="label">申请平台:</div>
            <div class="value">{{ state.form.platPlatformAppointCellRes[0].platformName }}</div>
          </li>
          <li>
            <div class="label">申请时长:</div>
            <div class="value">{{ state.form.platPlatformAppointCellRes[0].platformTime }}个月</div>
          </li>
          <li>
            <div class="label">费用:</div>
            <div class="value">{{ state.form.platPlatformAppointCellRes[0].price }}元</div>
          </li>
          <li>
            <div class="label">拟培养细胞种类:</div>
            <div class="value">{{ state.form.cellType }}</div>
          </li>
          <li>
            <div class="label">细胞房预约需求:</div>
            <div class="value">{{ state.form.cellSourceType == '10' ? '普通' : '层流' }}</div>
          </li>
        </ul>
        <ul v-if="state.form.platPlatformAppointMolecularRes && state.form.platPlatformAppointMolecularRes.length">
          <li>
            <div class="label">申请平台:</div>
            <div class="value">{{ state.form.platPlatformAppointMolecularRes[0].platformName }}</div>
          </li>
          <li>
            <div class="label">申请时长:</div>
            <div class="value">{{ state.form.platPlatformAppointMolecularRes[0].platformTime }}个月</div>
          </li>
          <li>
            <div class="label">费用:</div>
            <div class="value">{{ state.form.platPlatformAppointMolecularRes[0].price }}元</div>
          </li>
          <li>
            <div class="label">其他需求:</div>
            <div class="value">{{ state.form.platOtherNeed }}</div>
          </li>
        </ul>
      </div>

      <div class="card">
        <h4>审批记录</h4>
        <FlowTable
          :id="state.form.id"
          :businessCode="`${route.query.id}`"
          defCode="plat_platform_appoint"
        />
      </div>
      <div
        class="card"
        v-if="state.form.appointStatus === '20'"
      >
        <van-form
          class="mb20"
          ref="formRef"
          required="auto"
        >
          <van-cell-group>
            <van-field
              v-model="state.auditForm.approveDesc"
              label="审批意见"
              placeholder="请输入审批意见"
              :rules="[{ required: true, message: '请输入审批意见' }]"
              rows="3"
              type="textarea"
            />
            <van-field
              v-model="state.auditForm.approveResult"
              label="审批结果"
              placeholder="请选择审批结果"
              :rules="[{ required: true, message: '请选择审批结果' }]"
            >
              <template #input>
                <van-radio-group
                  v-model="state.auditForm.approveResult"
                  direction="horizontal"
                >
                  <van-radio name="10">通过</van-radio>
                  <van-radio name="20">不通过</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </van-cell-group>
        </van-form>
      </div>
    </div>
    <van-action-bar
      v-if="state.form.appointStatus === '10'"
      placeholder
    >
      <van-action-bar-icon
        icon="wap-home-o"
        text="首页"
        @click="onRouterPush('/home')"
      />
      <van-action-bar-icon
        icon="send-gift-o"
        text="入室申请"
        @click="onRouterPush('/entry')"
      />
      <van-action-bar-button
        class="w100"
        type="primary"
        text="上传缴费单"
        @click="openUpload()"
      />
    </van-action-bar>
    <van-action-bar
      v-else-if="state.form.appointStatus === '20'"
      placeholder
    >
      <van-action-bar-icon
        icon="wap-home-o"
        text="首页"
        @click="onRouterPush('/home')"
      />
      <van-action-bar-icon
        icon="send-gift-o"
        text="入室申请"
        @click="onRouterPush('/entry')"
      />
      <van-action-bar-button
        class="w100"
        type="primary"
        text="审核"
        @click="onAudit()"
      />
    </van-action-bar>
  </div>
  <van-popup
    v-model:show="showBottom"
    round
    closeable
    position="bottom"
    :style="{ height: '90vh' }"
  >
    <template #default>
      <div class="upload-container">
        <div class="content">
          <h4>上传须知</h4>
          <p>
            根据遵义医科大学附属医院临床医学公共实验中心要求，申请入室人员需要上传缴费单：通过审批后，点击缴费单按钮下载缴费单模板，打印并带到财务处完成缴费和确认后经财务盖章，将盖章的单据拍照上传。
          </p>
          <h4>信息上传</h4>
          <div class="file-card">
            <h4>缴费单</h4>
            <van-uploader
              v-model="state.uploadForm.billList"
              :after-read="afterRead"
              preview-size="60"
              :preview-full-image="false"
              :max-count="1"
            />
          </div>
          <div class="file-card">
            <h4>其它附件</h4>
            <van-uploader
              v-model="state.uploadForm.fileList"
              :after-read="afterRead"
              preview-size="60"
              :preview-full-image="false"
              multiple
            />
          </div>
        </div>
        <footer>
          <van-button
            type="primary"
            class="w100"
            round
            @click="onSubmit"
          >
            提交
          </van-button>
        </footer>
      </div>
    </template>
  </van-popup>
</template>

<script lang="ts" setup>
  import to from 'await-to-js'
  import { useRoute, useRouter } from 'vue-router'
  import { defineAsyncComponent, onMounted, reactive, ref } from 'vue'
  import { useTrainingApi } from '/@/api/training'
  import { useDictApi } from '/@/api/system/dict'
  import { getDictLabel } from '/@/utils/other'
  import { usePlatformAppointApi } from '/@/api/platform/appoint'
  import { useFlowApi } from '/@/api/execution/flow'
  import { handleUpload } from '/@/utils/upload'
  import { showNotify } from 'vant'
  const FlowTable = defineAsyncComponent(() => import('/@/components/FlowTable.vue'))
  const platformAppointApi = usePlatformAppointApi()
  const flowApi = useFlowApi()
  const route = useRoute()
  const router = useRouter()
  const dictApi = useDictApi()
  const apprList = ref<any[]>([])
  const userTypeList = ref(<RowDicDataType[]>[])
  const showBottom = ref(false)
  const formRef = ref()
  const state = reactive({
    detailsLoading: false,
    form: {
      id: 0,
      deptId: null,
      deptName: '',
      isTemporary: '10',
      memberId: 0,
      memberName: '',
      memberPhone: '',
      memberType: '',
      mentorObj: null,
      pgId: null,
      pgName: '',
      mentorId: null,
      mentorName: '',
      mentorDeptName: '',
      mentorPhone: '',
      platformId: null,
      platformName: '',
      platformTime: null,
      platformType: '',
      platformList: [] as any[],
      isCellChecked: '20',
      cellType: '',
      cellSourceType: '',
      isMolecularChecked: '20',
      molecularTime: null,
      platOtherNeed: '',
      createdName: '',
      createdTime: '',
      approveStatus: '',
      appointStatus: '',
      platPlatformAppointCellRes: [],
      platPlatformAppointMolecularRes: [],
    },
    uploadForm: {
      billList: [] as any[],
      fileList: [] as any[],
    },
    auditForm: {
      id: 0,
      approveResult: '',
      approveDesc: '',
    },
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      appointStatus: [],
    },
  })
  const getDicts = () => {
    Promise.all([dictApi.getDictDataByType('sys_user_type')]).then(([type]) => {
      userTypeList.value = type?.data?.values || []
    })
  }
  //详情
  const getDetail = async (id: number) => {
    const { entryType, platformType } = route.query

    state.detailsLoading = true

    let request = platformAppointApi.getDetail

    if (entryType === 'manageGetDetail' || entryType === 'audit') {
      request = platformType === '10' ? platformAppointApi.getCellEntityById : platformAppointApi.getMolecularEntityById
    }
    
    const [err, res]: ToResponse = await to(request({ id }))
    state.detailsLoading = false
    if (err) return
    if (res?.code === 200) {
      state.form = res.data
    }
  }
  const onRouterPush = (val: string) => {
    router.push(val)
  }
  const openUpload = () => {
    showBottom.value = true
  }
  const afterRead = async (files: any) => {
    if (files.length) {
      for (const file of files) {
        file.status = 'uploading'
        const [err, res]: ToResponse = await to(handleUpload(file.file))
        if (err) {
          file.status = 'failed'
          return
        }
        file.status = 'success'
        file.url = res
        file.name = file.file.name
      }
    } else {
      const file = files
      file.status = 'uploading'
      const [err, res]: ToResponse = await to(handleUpload(file.file))
      if (err) {
        file.status = 'failed'
        return
      }
      file.status = 'success'
      file.url = res
      file.name = file.file.name
    }
  }
  // 提交
  const onSubmit = async () => {
    const params = JSON.parse(JSON.stringify(state.uploadForm))
    params.fileList = [...params.billList, ...params.fileList].map((item) => {
      return {
        fileName: item.name,
        fileUrl: item.url,
      }
    })
    delete params.billList
    params.appointId = state.form.id
    const [err]: ToResponse = await to(platformAppointApi.createFile(params))
    if (err) return
    showNotify({
      type: 'success',
      message: '操作成功',
    })
    router.push({
      path: '/entry',
    })
  }
  const onAudit = async () => {
    const [errValid] = await to(formRef.value.validate())
    if (errValid) return
    const params = JSON.parse(JSON.stringify(state.auditForm))
    params.id = state.form.id
    const [err]: ToResponse = await to(platformAppointApi.updateById(params))
    if (err) return
    showNotify({
      type: 'success',
      message: '操作成功',
    })
    router.push({
      path: '/entry',
    })
  }
  onMounted(() => {
    const id = route.query.id ? +route.query.id : 0
    getDicts()
    getDetail(id)
  })
</script>

<style lang="scss" scoped>
  .instr-detail {
    flex: 1;
    overflow-y: auto;
    background-color: #f7f8fa;
    .my-swipe {
      background-color: #fff;
      height: 30px !important;
      line-height: 30px !important;
      :deep(.flex) {
        height: 30px;
        overflow: hidden;
        padding: 0 12px;
        span {
          display: inline-block;
          height: 30px;
          line-height: 30px;
        }
        span:first-child {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    > header {
      height: 40px;
      background-color: #fff;
      padding: 12px;
    }
    .inst-info {
      display: flex;
    }
    .i-right {
      flex: 1;
      font-size: 14px;
      height: 40px;
      .i-r-icon {
        width: 15px;
        height: 15px;
        margin-right: 10px;
      }
      footer {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .detailTxt {
      font-size: 12px;
      color: #333333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &.name {
        font-weight: bold;
        font-size: 16px;
      }
    }
    .content {
      padding: 10px;
    }
    .card {
      border-radius: 4px;
      background-color: #fff;
      padding: 10px;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
      & + .card {
        margin-top: 10px;
      }
      h4 {
        height: 18px;
        line-height: 18px;
        display: flex;
        margin-bottom: 10px;
        span {
          font-weight: normal;
          margin-left: auto;
        }
        &::before {
          display: inline-block;
          content: '';
          width: 3px;
          height: 18px;
          background-color: #1c9bfd;
          margin-right: 4px;
          vertical-align: middle;
        }
      }
      > ul {
        li {
          /* display: flex;
          align-items: center; */
          padding: 6px 0;
          .label {
            color: #969799;
            margin-bottom: 8px;
          }
          label {
            width: 100px;
            min-width: 80px;
            color: #969799;
          }
          span {
            word-break: break-all;
          }
        }
      }
      .text {
        white-space: pre-wrap;
      }
    }
    .van-list {
      padding: 10px;
      border-radius: 4px;
      flex: 1;
      .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 {
            display: inline-block;
            width: 80px;
            min-width: 80px;
            color: rgb(120, 120, 120);
          }
        }
        .time {
          color: #f69a4d;
        }
      }
    }
  }
  .btns {
    flex: 1;
    display: flex;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      font-size: 12px;
      i {
        margin-bottom: 4px;
      }
    }
  }
  :deep(.follow .van-icon) {
    color: #fdc33e;
  }
  .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;
    }
  }
  .upload-container {
    height: calc(100% - 40px);
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content {
      flex: 1;
      overflow-y: auto;
      > h4 {
        height: 18px;
        line-height: 18px;
        margin: 10px 0;
        display: flex;
        align-items: center;
        &::before {
          display: inline-block;
          content: '';
          width: 3px;
          height: 18px;
          background-color: #1c9bfd;
          margin-right: 4px;
          vertical-align: middle;
        }
      }
      .file-card {
        background: #fff;
        h4 {
          margin-bottom: 4px;
        }
      }
    }
  }
</style>