museums-ui/src/views/museums/specimenoutbound/OutboundForm/outboundDetail.vue

<template>
  <el-skeleton :loading="loading" animated>
    <el-row :gutter="8" justify="space-between">

      <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <el-card style="margin-bottom: 10px">

          <template #header>
            <div class="card-header" style="text-align: center">
              <h1 class="text1">标本出库入库详情</h1>
            </div>
          </template>

          <el-row>
            <el-col :xl="11" :lg="11" :md="24" :sm="24" :xs="24">
              <el-descriptions
                :column="1"
                v-if="outboundData"
                :size="size"

                border>
                <el-descriptions-item label="申请人姓名:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.applicantName
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="申请单位:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.applicationUsage
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="电话号码:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.phoneNumber
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="研究项目名称:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.projectName
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="项目开始时间:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.startTime
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="项目结束时间:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.endTime
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="一级审批时间:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.approvalTime
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="一级审批员:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.approveUsers
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="一级审批建议:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.processInstanceId
                  }}
                </el-descriptions-item>
              </el-descriptions>
            </el-col>
            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
              <el-descriptions
                :column="1"
                v-if="outboundData"
                :size="size"
                border>
                <el-descriptions-item label="二级审批时间:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.twoApprovalTime
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="二级审批员:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.twoApproveUsers
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="二级审批建议" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.rejectionReasons
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="出库时间:" label-align="right"
                                      label-class-name="my-label">{{ outboundData.outgoingTime }}
                </el-descriptions-item>
                <el-descriptions-item label="出库员:" label-align="right">
                  {{ outboundData.operator }}
                </el-descriptions-item>

                <el-descriptions-item label="退还日期:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.returnDate
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="退还人:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.returner
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="点收人:" label-align="right"
                                      label-class-name="my-label">{{
                    outboundData.receiver
                  }}
                </el-descriptions-item>

                <el-descriptions-item label="回库备注信息:" label-align="right"
                                      label-class-name="my-label">{{ outboundData.remarks }}
                </el-descriptions-item>


              </el-descriptions>
            </el-col>

            <el-col :xl="3" :lg="3" :md="24" :sm="24" :xs="24">
              <el-descriptions
                v-if="outboundData"
                direction="vertical"
                :column="1"
                :size="size"
                border
              >

                <el-descriptions-item
                  :rowspan="4"
                  :width="140"
                  label="申请附件"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                >
                  <!--                    <div v-if="outboundData.attachments && outboundData.attachments.type && outboundData.attachments.type.includes('image')" class="image-container">-->
                  <!--                      <el-image-->
                  <!--                        class="h-80px w-80px"-->
                  <!--                        lazy-->
                  <!--                        :src="outboundData.attachments"-->
                  <!--                        :preview-src-list="outboundData.attachments ? [outboundData.attachments] : []"-->
                  <!--                        preview-teleported-->
                  <!--                        fit="cover"-->
                  <!--                      />-->
                  <!--                    </div>-->
                  <!--                    <el-link-->
                  <!--                      v-else-if="outboundData.attachments"-->
                  <!--                      type="primary"-->
                  <!--                      :href="outboundData.attachments"-->
                  <!--                      :underline="false"-->
                  <!--                      target="_blank"-->
                  <!--                    >下载</el-link>-->
                  <div class="demo-image__preview" v-if="outboundData && outboundData.attachments">
<!--                    <a :href="outboundData.attachments" style="color: #dcb56d-->
<!--                ; text-decoration: none;" download>下载附件</a>-->
<!--                    <el-link type="primary" download :href="outboundData.attachments" :underline="false" target="_blank"-->
<!--                    >下载</el-link-->
<!--                    >-->
                    <el-image
                      v-if="outboundData.attachments.includes('image')"
                      class="h-80px w-80px"
                      lazy
                      :src="outboundData.attachments"
                      :preview-src-list="[outboundData.attachments]"
                      preview-teleported
                      fit="cover"
                    />
                    <el-link
                      v-else-if="outboundData.attachments.includes('pdf')"
                      type="primary"
                      :href="outboundData.attachments"
                      :underline="false"
                      target="_blank"
                    >预览</el-link
                    >
                    <el-link v-else type="primary" download :href="outboundData.attachments" :underline="false" target="_blank"
                    >下载</el-link
                    >


                  </div>
                </el-descriptions-item>
                <el-descriptions-item
                  :rowspan="4"
                  :width="140"
                  label="回库附件"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                >

                  <div class="demo-image__preview" v-if="outboundData && outboundData.sampleStatus">
<!--                    <a :href="outboundData.sampleStatus" style="color: #dcb56d-->
<!--                ; text-decoration: none;" download>下载附件</a>-->
                    <el-image
                      v-if="outboundData.sampleStatus.includes('image')"
                      class="h-80px w-80px"
                      lazy
                      :src="outboundData.sampleStatus"
                      :preview-src-list="[outboundData.sampleStatus]"
                      preview-teleported
                      fit="cover"
                    />
                    <el-link
                      v-else-if="outboundData.sampleStatus.includes('pdf')"
                      type="primary"
                      :href="outboundData.sampleStatus"
                      :underline="false"
                      target="_blank"
                    >预览</el-link
                    >
                    <el-link v-else type="primary" download :href="outboundData.sampleStatus" :underline="false" target="_blank"
                    >下载</el-link
                    >

                  </div>

                </el-descriptions-item>
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>
      </el-col>


      <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
        <!-- 列表 -->

        <el-card>
          <template #header>
            <div class="card-header" style="text-align: center">
              <h1 class="text1">标本信息</h1>
            </div>
          </template>
          <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
            <el-table-column label="标本编号" align="center" prop="specimenNumber"/>
            <el-table-column label="中文名称" align="center" prop="chineseName"/>
            <el-table-column label="标本类型" align="center" prop="specimenType">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.MUSEUMS_SPECIMEN_TYPE" :value="scope.row.specimenType"/>
              </template>
            </el-table-column>
            <el-table-column label="标本重量（g）" align="center" prop="weight"/>
            <el-table-column label="保存位置" align="center" prop="storageLocation"/>
            <el-table-column label="保存类型" align="center" prop="preservationType">
              <template #default="scope">
                <dict-tag :type="DICT_TYPE.MUSEUMS_SPECIMEN_INFO"
                          :value="scope.row.preservationType"/>
              </template>
            </el-table-column>
            <el-table-column label="标本图片" align="center" prop="url">
              <template #default="{ row }">
                <div class="demo-image__preview" v-if="pageParams">
                  <block v-for="(image, index) in row.imagePath" :key="index">
                    <el-image
                      style="width: 40px; height:40px;margin-right: 5px"
                      class="image-class"
                      lazy
                      :src="image"
                      :preview-src-list="row.imagePath"
                      preview-teleported
                      fit="cover"/>
                  </block>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <Pagination
            :total="total"
            v-model:page="pageParams.pageNo"
            v-model:limit="pageParams.pageSize"
            @pagination="getList"
          />
        </el-card>

      </el-col>
    </el-row>
  </el-skeleton>
</template>
<script setup lang="ts">
import {type ComponentSize, ElCol} from "element-plus";
import {ref, reactive, onMounted, computed} from "vue";
import {SpecimenOutboundApi, SpecimenOutboundVO} from "@/api/museums/specimenoutbound";
import {formatDate} from "@/utils/formatTime";
import {DICT_TYPE} from "@/utils/dict";


defineOptions({name: 'outboundDetail'})
const size = ref<ComponentSize>('large')
const {query} = useRoute() // 查询参数
const loading = ref(true) // 列表的加载中
const list = ref<SpecimenOutboundVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数

let outboundData = ref(null); // 初始化响应式数据
const pageParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: query.dataId,
  infoId: undefined,
  chineseName: undefined,
  specimenNumber: undefined,
  attachments: undefined,
  processInstanceId: undefined,
  specimenCondition: undefined,
  imagePath: undefined
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const id = query.dataId as unknown as number

    const data = await SpecimenOutboundApi.getSpecimenOutboundDetailsPage(id, pageParams)
    console.log('t27348932', data)
    list.value = data.specimenInfoList.list
    total.value = data.specimenInfoList.total
  } finally {
    loading.value = false
  }
}
const fetchData = async () => {
  try {
    console.log(query.dataId)
    let res: any = await SpecimenOutboundApi.getSpecimenOutboundDetails(query.dataId)
    console.log(res)
    outboundData.value = res
    console.log(outboundData.value)
    res.startTime = formatDate(res.startTime)
    res.endTime = formatDate(res.endTime)
    res.approvalTime = formatDate(res.approvalTime)
    res.twoApprovalTime = formatDate(res.twoApprovalTime)
    res.outgoingTime = formatDate(res.outgoingTime)
    res.returnDate = formatDate(res.returnDate)

  } finally {
  }
}

// // 在组件加载时获取数据
onMounted(async () => {
  await fetchData()
  await getList()
})

/**审批状态**/
const statusText = computed(() => {
  if (outboundData.value === null) {
    return '';
  }
  switch (outboundData.value.status) {
    case 0:
      return '审批中';
    case 1:
      return '一级审批通过';
    case 2:
      return '一级审批驳回';
    case 3:
      return '已出库';
    case 4:
      return '已回库';
    case 5:
      return '二级审批通过';
    case 6:
      return '二级审批驳回';
    default:
      return '';
  }
});

</script>

<style scoped>
:deep(.my-label) {
  background: #FAF8F7 !important;
  width: 180px;
}

:deep(.my-content) {
  height: 167px;
}

</style>