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 v-if="outboundData.attachments && outboundData.attachments.type('image')" class="image-container">-->
<!--                      <el-image-->
<!--                        class="h-80px w-80px"-->
<!--                        lazy-->
<!--                        :src="outboundData.attachments.url"-->
<!--                        :preview-src-list="[attachments]"-->
<!--                        preview-teleported-->
<!--                        fit="cover"-->
<!--                      />-->
<!--                    </div>-->
<!--                    <el-link-->
<!--                      v-else-if="outboundData.attachments && outboundData.attachments.type.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 class="demo-image__preview" v-if="outboundData" >-->

                    <!--                      <el-image-->
                    <!--                        style="width: 40px; height:40px;margin-right: 5px"-->
                    <!--                        class="h-80px w-80px"-->
                    <!--                        lazy-->
                    <!--                        :src="outboundData.attachments"-->
                    <!--                        :preview-src-list="outboundData.attachments"-->
                    <!--                        preview-teleported-->
                    <!--                        fit="cover"-->


                    <!--                      />-->

                    <!--                  </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" >

<!--                    <el-image-->
<!--                      style="width: 40px; height:40px;margin-right: 5px"-->
<!--                      class="h-80px w-80px"-->
<!--                      lazy-->
<!--                      :src="outboundData.sampleStatus"-->
<!--                      :preview-src-list="outboundData.sampleStatus"-->
<!--                      preview-teleported-->
<!--                      fit="cover"-->


<!--                    />-->
                    <div v-if="outboundData.sampleStatus && outboundData.sampleStatus.type && outboundData.sampleStatus.type.includes('image')" class="image-container">
                      <el-image
                        class="h-80px w-80px"
                        lazy
                        :src="outboundData.sampleStatus"
                        :preview-src-list="outboundData.sampleStatus ? [outboundData.sampleStatus] : []"
                        preview-teleported
                        fit="cover"
                      />
                    </div>
                    <el-link
                      v-else-if="outboundData.sampleStatus"
                      type="primary"
                      :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>