<!-- 分包证书管理列表 --> <script lang="ts" setup name="CertificateList"> import type { Ref } from 'vue' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import type { DateModelType } from 'element-plus' import dayjs from 'dayjs' import type { IList, IListQuery } from './certificate-interface' import { printJSON, printPdf } from '@/utils/printUtils' import { exportFile } from '@/utils/exportUtils' import { getDictByCode } from '@/api/system/dict' import type { dictType } from '@/global' import { download } from '@/utils/download' import { getPhotoUrl } from '@/api/system/tool' import type { TableColumn } from '@/components/NormalTable/table_interface' import { deleteCertificateList, exportCertificateList, getCertificateList } from '@/api/business/subpackage/certificate' const $router = useRouter() const { proxy } = getCurrentInstance() as any // 查询条件 const listQuery: Ref<IListQuery> = ref({ certificateName: '', // 证书名称 certificateNo: '', // 证书号 certificateValidEnd: '', // 证书有效期结束 certificateValidStart: '', // 证书有效期开始 checkDateEnd: '', // 检定(校准)日期 checkDateStart: '', // 检定(校准)日期 conclusion: '', // 检定结论 contacts: '', // 分包方联系人 createTimeEnd: '', // 创建时间结束 createTimeStart: '', // 创建时间开始 customerName: '', // 委托方名称 manufactureNo: '', // 出厂编号 manufacturer: '', // 生产厂家 meterIdentify: '', // 计量标识(字典code) model: '', // 规格型号 orderNo: '', // 任务单编号 outsourcerName: '', // 分包方名称/检测单位名称 sampleName: '', // 受检设备名称 sampleNo: '', // 受检设备编号 offset: 1, limit: 20, }) const loadingTable = ref(false) const dateRange = ref<[DateModelType, DateModelType]>(['', '']) // 筛选时间段数据 const columns = ref<TableColumn[]>([// 表头 { text: '证书编号', value: 'certificateNo', align: 'center', width: '160' }, { text: '证书名称', value: 'certificateName', align: 'center' }, { text: '受检设备名称', value: 'sampleName', align: 'center' }, { text: '规格型号', value: 'model', align: 'center' }, { text: '出厂编号', value: 'manufactureNo', align: 'center' }, { text: '生产厂家', value: 'manufacturer', align: 'center' }, { text: '任务单编号', value: 'orderNo', align: 'center' }, { text: '委托方', value: 'customerName', align: 'center' }, { text: '分包方名称', value: 'outsourcerName', align: 'center' }, { text: '联系人', value: 'contacts', align: 'center' }, { text: '检定日期', value: 'checkDate', align: 'center', width: '120' }, { text: '检定有效期', value: 'certificateValid', align: 'center', width: '120' }, { text: '检定结论', value: 'conclusion', align: 'center' }, { text: '计量标识', value: 'meterIdentifyName', align: 'center' }, ]) const list = ref<IList[]>([]) // 表格数据 const total = ref(0) // 数据总数 const checkoutIdList = ref<string[]>([]) // 选中的内容 const checkoutList = ref<string[]>([]) // 选中的内容 const dateRangeCertificateValid = ref<[DateModelType, DateModelType]>(['', '']) const timeRange = ref<[DateModelType, DateModelType]>(['', '']) // --------------------------------------------字典-------------------------------------- const conclusionList = ref({}) as any // 检定结论 const meterIdentifyDict = ref({}) as any // 计量标识 async function getDict() { // 计量标识 getDictByCode('eqptMeterIdentify').then((response) => { meterIdentifyDict.value = response.data }) // 检定结论 getDictByCode('bizConclusion').then((response) => { conclusionList.value = response.data }) } getDict() // --------------------------------------------字典-------------------------------------- // 数据查询 function fetchData(isNowPage = false) { loadingTable.value = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 listQuery.value.offset = 1 } getCertificateList(listQuery.value).then((response) => { list.value = response.data.rows.map((item: { certificateValid: string; checkDate: string }) => { return { ...item, certificateValid: item.certificateValid ? dayjs(item.certificateValid).format('YYYY-MM-DD') : item.certificateValid, checkDate: item.checkDate ? dayjs(item.checkDate).format('YYYY-MM-DD') : item.checkDate, } }) total.value = parseInt(response.data.total) loadingTable.value = false }) } // 搜索 const searchList = () => { fetchData(true) } // 清除条件 const clearList = () => { listQuery.value = { certificateName: '', // 证书名称 certificateNo: '', // 证书号 certificateValidEnd: '', // 证书有效期结束 certificateValidStart: '', // 证书有效期开始 checkDateEnd: '', // 检定(校准)日期 checkDateStart: '', // 检定(校准)日期 conclusion: '', // 检定结论 contacts: '', // 分包方联系人 createTimeEnd: '', // 创建时间结束 createTimeStart: '', // 创建时间开始 customerName: '', // 委托方名称 manufactureNo: '', // 出厂编号 manufacturer: '', // 生产厂家 meterIdentify: '', // 计量标识(字典code) model: '', // 规格型号 orderNo: '', // 任务单编号 outsourcerName: '', // 分包方名称/检测单位名称 sampleName: '', // 受检设备名称 sampleNo: '', // 受检设备编号 offset: 1, limit: 20, } timeRange.value = ['', ''] dateRangeCertificateValid.value = ['', ''] fetchData(true) } // 多选发生改变时 function handleSelectionChange(e: any) { checkoutIdList.value = e.map((item: { id: string }) => item.id) checkoutList.value = e } // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 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 exportCert = (file: string, fileName: string) => { getPhotoUrl(file).then((res) => { download(res.data, `${fileName}`) }).catch(() => { ElMessage.error('下载失败') }) } // 导出 const exportAll = () => { const loading = ElLoading.service({ lock: true, text: '下载中请稍后', background: 'rgba(255, 255, 255, 0.8)', }) if (checkoutList.value.length) { checkoutList.value.forEach((item: any) => { if (item.certificateReportFile) { exportCert(item.certificateReportFile, `${item.certificateName}`) } }) } else { list.value.forEach((item: any) => { if (item.certificateReportFile) { exportCert(item.certificateReportFile, `${item.certificateName}`) } }) } if (list.value.length > 0) { const params = { certificateName: listQuery.value.certificateName, // 证书名称 certificateNo: listQuery.value.certificateNo, // 证书号 certificateValidEnd: listQuery.value.certificateValidEnd, // 证书有效期结束 certificateValidStart: listQuery.value.certificateValidStart, // 证书有效期开始 checkDateEnd: listQuery.value.checkDateEnd, // 检定(校准)日期 checkDateStart: listQuery.value.checkDateStart, // 检定(校准)日期 conclusion: listQuery.value.conclusion, // 检定结论 contacts: listQuery.value.contacts, // 分包方联系人 createTimeEnd: listQuery.value.createTimeEnd, // 创建时间结束 createTimeStart: listQuery.value.createTimeStart, // 创建时间开始 customerName: listQuery.value.customerName, // 委托方名称 manufactureNo: listQuery.value.manufactureNo, // 出厂编号 manufacturer: listQuery.value.manufacturer, // 生产厂家 meterIdentify: listQuery.value.meterIdentify, // 计量标识(字典code) model: listQuery.value.model, // 规格型号 orderNo: listQuery.value.orderNo, // 任务单编号 outsourcerName: listQuery.value.outsourcerName, // 分包方名称/检测单位名称 sampleName: listQuery.value.sampleName, // 受检设备名称 sampleNo: listQuery.value.sampleNo, // 受检设备编号 offset: 1, limit: 20, ids: checkoutIdList.value, } exportCertificateList(params).then((res) => { const blob = new Blob([res.data]) loading.close() exportFile(blob, '分包证书管理.xlsx') }) } else { loading.close() ElMessage.warning('无数据可导出数据') } } // 点击详情 const handleDetail = (row: any, type: 'detail') => { $router.push({ path: `certificate/${type}/${row.id}`, query: { row: JSON.stringify(row), }, }) } watch(timeRange, (val) => { // 监听检定日期变化 if (val) { listQuery.value.checkDateStart = `${val[0]}` listQuery.value.checkDateEnd = `${val[1]}` } else { listQuery.value.checkDateStart = '' listQuery.value.checkDateEnd = '' } }) // 证书有效期 watch(dateRangeCertificateValid, (val) => { // 检定有效期变化 if (val) { listQuery.value.certificateValidStart = `${val[0]}` listQuery.value.certificateValidEnd = `${val[1]}` } else { listQuery.value.certificateValidStart = '' listQuery.value.certificateValidEnd = '' } }) onMounted(async () => { fetchData() }) </script> <template> <div> <!-- 布局 --> <app-container> <search-area :need-clear="true" @search="searchList" @clear="clearList"> <search-item> <el-input v-model.trim="listQuery.certificateNo" placeholder="证书编号" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.certificateName" placeholder="证书名称" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.sampleName" placeholder="设备名称" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.model" placeholder="规格型号" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.manufactureNo" placeholder="出厂编号" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.manufacturer" placeholder="生产厂家" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.orderNo" placeholder="任务单编号" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.customerName" placeholder="委托方" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.outsourcerName" placeholder="分包方名称" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.contacts" placeholder="联系人" class="short-input" clearable /> </search-item> <search-item> <el-date-picker v-model="timeRange" type="daterange" range-separator="至" format="YYYY-MM-DD" value-format="YYYY-MM-DD" start-placeholder="检定日期(开始)" end-placeholder="检定日期(结束)" style="width: 480px;" /> </search-item> <search-item> <el-date-picker v-model="dateRangeCertificateValid" type="daterange" range-separator="至" format="YYYY-MM-DD" value-format="YYYY-MM-DD" start-placeholder="检定有效期(开始)" end-placeholder="检定有效期(结束)" class="short-input" /> </search-item> <search-item> <el-select v-model="listQuery.conclusion" placeholder="检定结论" filterable style="width: 220px;" clearable > <el-option v-for="item in conclusionList" :key="item.id" :label="item.name" :value="item.name" /> </el-select> </search-item> <search-item> <el-select v-model="listQuery.meterIdentify" class="short-input" placeholder="计量标识" clearable style="width: 220px;" > <el-option v-for="item of meterIdentifyDict" :key="item.value" :label="item.name" :value="item.value" /> </el-select> </search-item> </search-area> <table-container> <template #btns-right> <icon-button icon="icon-export" title="导出" type="primary" @click="exportAll" /> </template> <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable" is-showmulti-select @change="changePage" @multi-select="handleSelectionChange" > <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> <template #columns> <el-table-column label="操作" align="center" fixed="right" width="120"> <template #default="{ row }"> <el-button size="small" link type="primary" @click="handleDetail(row, 'detail')"> 详情 </el-button> </template> </el-table-column> </template> </normal-table> </table-container> </app-container> </div> </template>