<!-- 证书逾期提醒详情 --> <script name="RemindList" lang="ts" setup> import { dayjs } from 'element-plus' import type { IStaffVerifierInfo } from '../register/person-regitster' import type { ICertInfo } from './remind-interface' import { getVerifierList } from '@/api/resource/register' import type { TableColumn } from '@/components/NormalTable/table_interface' const type = ref<string>('') const id = ref<string>('') const route = useRoute() const router = useRouter() const certInfo = ref<ICertInfo>({ id: '', certNo: '', certName: '', staffId: '', staffNo: '', staffName: '', deptId: '', deptName: '', station: '', major: '', staffType: '', staffTypeName: '', }) const certColumns = ref<Array<TableColumn>>([ { text: '证书号', value: 'certNo', align: 'center', width: '160' }, { text: '证书名称', value: 'certName', align: 'center' }, { text: '发放日期', value: 'grantDate', align: 'center', width: '160' }, { text: '有效日期', value: 'effectiveDate', align: 'center', width: '160' }, { text: '发放单位', value: 'grantCompany', align: 'center' }, { text: '附件', value: 'file', align: 'center' }, ]) // 表头 const staffCertList = ref<IStaffVerifierInfo[]>([]) // 表格数据 // 逻辑 // 关闭 const resetForm = () => { sessionStorage.removeItem('certInfo') router.go(-1) } const getCertListByStaffId = (staffId: string) => { getVerifierList({ id: staffId, limit: 1200, offset: 1 }).then((res) => { if (res.code === 200) { staffCertList.value = res.data.rows.map((item: any) => ({ ...item, grantDate: dayjs(item.grantDate).format('YYYY-MM-DD'), effectiveDate: dayjs(item.effectiveDate).format('YYYY-MM-DD'), })) } }) } const initDialog = (params: any) => { type.value = params.type id.value = params.id switch (params.type) { case 'detail': certInfo.value = JSON.parse(sessionStorage.getItem('certInfo')!) getCertListByStaffId(certInfo.value.staffId) break default: break } } onMounted(async () => { initDialog(route.query) }) </script> <template> <app-container> <detail-page title="证书逾期提醒"> <template #btns> <el-button type="info" @click="resetForm()"> 关闭 </el-button> </template> <el-form ref="basicFormRef" :model="certInfo" label-position="right" label-width="110px" border stripe> <el-row :gutter="24"> <!-- 第一行 第一列 --> <el-col :span="6"> <el-form-item label="人员编号"> <el-input v-model="certInfo.staffNo" :disabled="true" /> </el-form-item> <el-form-item label="计量专业"> <el-input v-model="certInfo.major" :disabled="true" /> </el-form-item> </el-col> <!-- 第一行 第二列 --> <el-col :span="6"> <el-form-item label="姓名"> <el-input v-model="certInfo.staffName" :disabled="true" /> </el-form-item> <el-form-item label="人员类别"> <el-input v-model="certInfo.staffTypeName" :disabled="true" /> </el-form-item> </el-col> <!-- 第一行 第三列 --> <el-col :span="6"> <el-form-item label="工作部门"> <el-input v-model="certInfo.deptName" :disabled="true" /> </el-form-item> </el-col> <!-- 第一行 第四列 --> <el-col :span="6"> <el-form-item label="岗位"> <el-input v-model="certInfo.station" :disabled="true" /> </el-form-item> </el-col> </el-row> </el-form> <el-form ref="certFormRef" label-position="right" label-width="110px" border stripe> <table-container title="检定员证书" style="margin-top: 20px;"> <!-- 表格区域 --> <el-table :data="staffCertList" :columns="certColumns" border> <el-table-column align="center" label="序号" width="55" type="index" /> <el-table-column v-for="item in certColumns" :key="item.value" :prop="item.value" :label="item.text" align="center" > <template #header> <span>{{ item.text }}</span> </template> </el-table-column> </el-table> </table-container> </el-form> </detail-page> </app-container> </template>