museums-ui/src/views/museums/specimenoutbound/OutboundForm/ApproalDetails.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"
           border
           :size="size"
           v-if="outboundData"
         >
           <el-descriptions-item label="审批状态:"  label-align="right" label-class-name="my-label">{{ outboundData.status }}</el-descriptions-item>
           <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>
       </el-col>
         <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24" >
           <el-descriptions
             :column="1"
             border
             :size="size"
             v-if="outboundData"
           >
           <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.outboundRemarks}}</el-descriptions-item>
           </el-descriptions>
         </el-col>
         <el-col :xl="2" :lg="2" :md="24" :sm="24" :xs="24" >
           <el-descriptions
             v-if="outboundData"
             direction="vertical"
             :size="size"
             border

           >
             <el-descriptions-item
               :width="200"
               label="申请附件"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
             >
               <div class="demo-image__preview" v-if="outboundData" >


               </div>
             </el-descriptions-item>
           </el-descriptions>
<!--           <div class="demo-image__preview" v-if="outboundData ">-->
<!--             <el-image-->

<!--               style=" align-items: center"-->
<!--               :src="outboundData.attachments"-->
<!--               :zoom-rate="1.2"-->
<!--               :max-scale="7"-->
<!--               :min-scale="0.2"-->
<!--               :preview-src-list="outboundData.attachments"-->
<!--               :initial-index="index"-->
<!--               fit="cover"-->
<!--             />-->
<!--           </div>-->
         </el-col>
         </el-row>
<!--         <div style="text-align: right; margin-top: 20px;margin-right: 30px">-->

<!--           <el-button-->
<!--             v-if="outboundData.status !== 1 && outboundData.status !== 2 && outboundData.status !== 3 && outboundData.status !== 4"-->
<!--             link-->
<!--             type="danger"-->
<!--             plain-->
<!--             @click="handleApproval(outboundData.id)"-->
<!--           >-->
<!--             审批-->
<!--           </el-button>-->
<!--         </div>-->
         </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="outboundData.specimenInfoList" :stripe="true" :show-overflow-tooltip="true" >
<!--           <el-table-column label="标本ID" align="center" prop="id" />-->
           <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="标本数量" align="center" prop="specimenAmount" />
           <el-table-column label="标本重量" 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="queryParams" >
                 <block  v-for="(image, index) in row.imagePath" :key="index">
                   <el-image
                     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="queryParams.pageNo"-->
<!--           v-model:limit="queryParams.pageSize"-->
<!--           @pagination="getList"-->
<!--         />-->
         <div v-if="outboundData.status === 0 || outboundData.status === 1 ">
         <el-button
           @click="handleApproval"
           type="primary"
           style="float: right; margin-left: 20px;margin-top: 20px;margin-bottom: 20px"
         > 审批
         </el-button>
         </div>
       </el-card>
     </el-col>


   </el-row>

    <Approval ref="ApprovalRef" @success="getList" />
  </el-skeleton>
</template>


<script setup lang="ts">
import {type ComponentSize, ElCol, ElImage} from "element-plus";
import {SpecimenOutboundApi, SpecimenOutboundVO} from "@/api/museums/specimenoutbound";
import {formatDate} from "@/utils/formatTime";
import {reactive, ref} from "vue";
import {DICT_TYPE} from "@/utils/dict";
import Approval from "@/views/museums/specimenoutbound/approval.vue"

const size = ref<ComponentSize>('large')
let outboundData = ref(null); // 初始化响应式数据
const {query} = useRoute() // 查询参数
const loading = ref(true) // 列表的加载中
const list = ref<SpecimenOutboundVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  infoId: undefined,
  chineseName: undefined,
  specimenNumber: undefined,
  attachments: undefined,
  processInstanceId: undefined,
  specimenCondition: undefined,
  imagePath:undefined
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await SpecimenOutboundApi.getSpecimenOutboundDetailsPage(queryParams)
    list.value = data.list
    total.value = data.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)
  }  finally {
  }
}

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

/** 审批按钮操作 */

// 检查用户权限的方法
const ApprovalRef = ref()
const handleApproval = () => {
  ApprovalRef.value.open(query.dataId)
}
</script>

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