<!-- 到期提醒列表页 --> <script name="EquipmentInfoRemindList" lang="ts" setup> import type { Ref } from 'vue' import { getCurrentInstance, onMounted, ref, watch } from 'vue' import type { DateModelType } from 'element-plus' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import dayjs from 'dayjs' import type { IList, IListQuery } from '../book/book-interface' import type { deptType, dictType } from '@/global' import type { TableColumn } from '@/components/NormalTable/table_interface' import { SCHEDULE } from '@/utils/scheduleDict' import { getDeptTreeList } from '@/api/system/dept' import { getUserList } from '@/api/system/user' import { toTreeList } from '@/utils/structure' import { getEquipmentList, remind } from '@/api/equipment/info/book' const $router = useRouter() const { proxy } = getCurrentInstance() as any const operateWidth = ref('110') // 操作栏的宽度 // 查询条件 const listQuery: Ref<IListQuery> = ref({ approvalStatus: '0', // 审批状态 deptId: '', // 所属部门id directorId: '', // 负责人id equipmentNo: '', // 统一编号 equipmentName: '', // 设备名称 formId: SCHEDULE.EQUIPMENT_BOOK_APPROVAL, // 表单id manufactureNo: '', // 出厂编号 traceCompany: '', // 溯源单位 measureValidDateEnd: '', // 检定有效期(结束) measureValidDateStart: '', // 检定有效期(开始) offset: 1, limit: 20, }) const total = ref(0) // 数据条数 const loadingTable = ref(false) // 表格loading // 表头 const columns = ref<TableColumn[]>([ { text: '统一编号', value: 'equipmentNo', align: 'center', width: '160' }, { text: '设备名称', value: 'equipmentName', align: 'center' }, { text: '规格型号', value: 'model', align: 'center' }, { text: '设备单价(万元)', value: 'unitPrice', align: 'center' }, { text: '生产厂家', value: 'manufacturer', align: 'center' }, { text: '出厂编号', value: 'manufactureNo', align: 'center' }, { text: '所属部门', value: 'deptName', align: 'center' }, { text: '负责人', value: 'directorName', align: 'center', width: '120' }, { text: '使用状态', value: 'usageStatusName', align: 'center', width: '90' }, { text: '检定有效期', value: 'measureValidDate', align: 'center', width: '120' }, { text: '溯源单位', value: 'traceCompany', align: 'center' }, ]) const list = ref<IList[]>([]) // 表格数据 const dateRange = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据 const checkoutList = ref<string[]>([])// 选中的内容 // -----------------------------------------字典-------------------------------------------------------------- const useDeptList = ref<deptType[]>([]) // 所属部门列表 const userList = ref<{ [key: string]: string }[]>([]) // 用户列表 // 查询字典 const getDict = async () => { // 获取部门列表 getDeptTreeList().then((res) => { // 转成树结构 useDeptList.value = toTreeList(res.data, '0', true) }) // 获取用户列表 getUserList({ offset: 1, limit: 999999 }).then((res: any) => { userList.value = res.data.rows }) } // ------------------------------------------------------------------------------------------------------- // 数据查询 function fetchData(isNowPage = false) { loadingTable.value = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 listQuery.value.offset = 1 } getEquipmentList(listQuery.value).then((response) => { list.value = response.data.rows.map((item: { estimateSignDate: string; agreementAmount: number; measureValidDate: string }) => { return { ...item, measureValidDate: item.measureValidDate ? dayjs(item.measureValidDate).format('YYYY-MM-DD') : item.measureValidDate, } }) total.value = parseInt(response.data.total) loadingTable.value = false }).catch(() => { loadingTable.value = false }) } // 搜索 const searchList = () => { fetchData(true) } // 重置 const clearList = () => { listQuery.value = { approvalStatus: '0', // 审批状态 deptId: '', // 所属部门id directorId: '', // 负责人id equipmentNo: '', // 统一编号 equipmentName: '', // 设备名称 formId: SCHEDULE.EQUIPMENT_BOOK_APPROVAL, // 表单id manufactureNo: '', // 出厂编号 traceCompany: '', // 溯源单位 measureValidDateEnd: '', // 检定有效期(结束) measureValidDateStart: '', // 检定有效期(开始) offset: 1, limit: 20, } dateRange.value = ['', ''] fetchData(true) } // 多选发生改变时 function handleSelectionChange(e: any) { checkoutList.value = e.map((item: { id: string }) => item.id) } // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 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) } // 导出word const exportWord = () => {} // 导出excel const exportExcel = () => {} // ----------------------------------------------操作--------------------------------------------------- const handleEdit = (row: IList, type: string) => { if (type === 'detail') { $router.push({ path: `/equipmentInfo/${type}/${row.id}`, query: { approvalStatusName: '全部', // 审批状态名称 equipmentNo: row.equipmentNo, // 设备编号 processId: row.processId, // 流程实例id taskId: row.taskId, // 任务id }, }) } else if (type === 'remind') { const loading = ElLoading.service({ lock: true, text: '下载中请稍后', background: 'rgba(255, 255, 255, 0.8)', }) ElMessageBox.confirm( '确认提醒吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ) .then(() => { // 调提醒接口,成功后刷新列表 remind({ id: row.id }).then(() => { ElMessage.success('已提醒') loading.close() }) }).catch(() => { loading.close() }) } } // ----------------------------------------------钩子------------------------------------------------------ watch(dateRange, (val) => { if (val) { listQuery.value.measureValidDateStart = `${val[0]}` listQuery.value.measureValidDateEnd = `${val[1]}` } else { listQuery.value.measureValidDateStart = '' listQuery.value.measureValidDateEnd = '' } }) onMounted(async () => { await getDict() fetchData(true) }) </script> <template> <app-container> <search-area :need-clear="true" @search="searchList" @clear="clearList"> <search-item> <el-input v-model.trim="listQuery.equipmentNo" placeholder="统一编号" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.equipmentName" 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> <dept-select v-model="listQuery.deptId" :data="useDeptList" placeholder="所属部门" class="short-input" /> </search-item> <search-item> <el-select v-model="listQuery.directorId" placeholder="负责人" class="short-input" filterable > <el-option v-for="item in userList" :key="item.id" :label="item.staffName" :value="item.id" /> </el-select> </search-item> <search-item> <el-input v-model.trim="listQuery.traceCompany" placeholder="溯源单位" class="short-input" clearable /> </search-item> <search-item> <el-date-picker v-model="dateRange" class="short-input" type="daterange" range-separator="至" format="YYYY-MM-DD" value-format="YYYY-MM-DD" start-placeholder="检定有效期(开始)" end-placeholder="检定有效期(结束)" /> </search-item> </search-area> <table-container> <template #btns-right> <icon-button icon="icon-word" title="导出word" type="primary" @click="exportWord" /> <icon-button icon="icon-excel" title="导出excel" type="primary" @click="exportExcel" /> </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="operateWidth" > <template #default="{ row }"> <el-button size="small" type="primary" link @click="handleEdit(row, 'detail')" > 详情 </el-button> <el-button size="small" type="danger" link @click="handleEdit(row, 'remind')" > 提醒 </el-button> </template> </el-table-column> </template> </normal-table> </table-container> </app-container> </template> <style lang="ts" scoped> </style>