<!-- 智能模型台账信息详情 证书报告 --> <script name="StandardBookCertificate" lang="ts" setup> import { onMounted, ref } from 'vue' import dayjs from 'dayjs' import { ElLoading, ElMessage } from 'element-plus' import type { ICertificate } from '../book-interface' import { getDictByCode } from '@/api/system/dict' import type { TableColumn } from '@/components/NormalTable/table_interface' import useUserStore from '@/store/modules/user' import type { deptType, dictType } from '@/global' import { getCertificateList } from '@/api/equipment/info/book' const props = defineProps({ equipmentId: String, // 智能模型id }) // 查询条件 const listQuery = ref({ id: '', // 智能模型id offset: 1, limit: 20, }) const loadingTable = ref(false) // 表格loading const total = ref(0) // 数据总条数 const user = useUserStore() // 用户信息 const list = ref<ICertificate[]>([]) // 表格数据 const columns = ref<TableColumn[]>([ // 表头 { text: '证书编号', value: 'certificateNo_hide', align: 'center', width: '160', followLink: true }, { text: '证书名称', value: 'certificateName', align: 'center' }, { text: '溯源单位', value: 'traceCompany', align: 'center' }, { text: '检定日期', value: 'traceDate', align: 'center', width: '120' }, { text: '检定有效期', value: 'validDate', align: 'center', width: '120' }, { text: '证书附件', value: 'certificateFile_hide', align: 'center', isLink: true }, ]) // -----------------------------------------方法-------------------------------------------------- // 数据查询 function fetchData(isNowPage = false) { loadingTable.value = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 listQuery.value.offset = 1 } listQuery.value.id = props.equipmentId! getCertificateList(listQuery.value).then((response) => { list.value = response.data.rows.map((item: any) => { return { ...item, followLinkArr: [item.certificateNo], fileArr: [item.certificateFile], traceDate: item.traceDate ? dayjs(item.traceDate).format('YYYY-MM-DD') : item.traceDate, // 检定日期 validDate: item.validDate ? dayjs(item.validDate).format('YYYY-MM-DD') : item.validDate, // 检定日期 } }) total.value = parseInt(response.data.total) loadingTable.value = false }).catch(() => { loadingTable.value = false }) } // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 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) } const $router = useRouter() // 点击证书编号 const handleClickFollowLink = (row: any, title: string) => { $router.push({ path: `/source/resultConfirmDoc/detail/${row.confirmId}`, query: { approvalStatusName: '全部', // 审批状态名称 }, }) } // -------------------------------------------钩子------------------------------------------------ onMounted(async () => { fetchData() }) </script> <template> <detail-block title="证书报告"> <normal-table :data="list" :total="total" :columns="columns" :query="{ limit: listQuery.limit, offset: listQuery.offset }" :list-loading="loadingTable" @change="changePage" @handle-click-follow-link="handleClickFollowLink" > <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> </detail-block> </template>