<!-- 证书监控 --> <script lang="ts" setup name="CertificationMonitor"> import type { TableColumn } from '@/components/NormalTable/table_interface' // import { certificateMonitorsById } from '@/api/business/schedule/task' const props = defineProps({ sampleId: { // 样品id type: String, required: true, // 设置之后,props必须要接收到这个数据 default: '', }, customerId: { // 客户id type: String, required: true, default: '', }, }) // 查询条件 const ListQuery = ref({ sampleId: props.sampleId, // 样品id customerId: props.customerId, // 委托方id limit: 10, offset: 1, }) // 表格表头 const columns = ref<TableColumn[]>([ { text: '证书编号', value: 'certificationReportCode', align: 'center', width: '160' }, { text: '证书名称', value: 'certificationReportName', align: 'center' }, // { text: '证书类型', value: 'certificationReportCategoryName', align: 'center' }, { text: '证书状态', value: 'certificationState', align: 'center' }, { text: '初次提交审核时间', value: 'text', align: 'center', width: '180' }, { text: '完成时间', value: 'text', align: 'center', width: '180' }, { text: '退回次数', value: 'text', align: 'center' }, { text: '检定员', value: 'text', align: 'center' }, ]) const requireCertifications = ref(0) // 应出具证书数 const currentCertifications = ref(0) // 当前证书数 const list = ref([]) // 证书列表 const total = ref(0) // 数据总数 const loading = ref(false) // 加载状态 // 查找证书状态及列表 function fetchData(isNowPage = false) { if (!isNowPage) { // 是否显示当前页,否则跳转第一页 ListQuery.value.offset = 1 } loading.value = true list.value = [] ListQuery.value.customerId = props.customerId ListQuery.value.sampleId = props.sampleId // certificateMonitorsById({ ...ListQuery.value }).then((res) => { // list.value = res.data.rows // total.value = parseInt(res.data.total) // }) loading.value = false } watch(() => props.sampleId, () => { if (props.sampleId && props.customerId) { fetchData() } }) watch(() => props.customerId, () => { if (props.sampleId && props.customerId) { fetchData() } }) // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 const changePage = (val: { size?: number; page?: number }) => { if (val && val.size) { ListQuery.value.limit = val.size } if (val && val.page) { ListQuery.value.offset = val.page } fetchData(true) } onMounted(() => { if (props.sampleId && props.customerId) { fetchData() } }) </script> <template> <div class="certification-monitor"> <div class="certification"> <div><span>本次检定应出具证书:</span> <span class="number">{{ requireCertifications }}</span></div> <div class="finish"> <span>已完成:</span> <span class="number">{{ currentCertifications }}</span> </div> </div> <normal-table :data="list" :total="total" :query="ListQuery" :columns="columns" :list-loading="loading" :pagination="true" :page-sizes="[10, 20, 30]" @change="changePage" > <template #preColumns> <el-table-column label="序号" width="55" align="center"> <template #default="scope"> {{ (ListQuery.offset - 1) * ListQuery.limit + scope.$index + 1 }} </template> </el-table-column> </template> </normal-table> </div> </template> <style lang="scss" scoped> .certification-monitor { .certification { display: flex; justify-content: flex-end; .finish { margin-left: 40px; } .number { font-weight: 600; } } } </style>