<!-- 标识打印 --> <script lang="ts" setup name="BusinessTaskMeasurePrintList"> import type { Ref } from 'vue' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import type { DateModelType } from 'element-plus' import type { IList, IListQuery } from './print-interface' import { exportFile } from '@/utils/exportUtils' import type { TableColumn } from '@/components/NormalTable/table_interface' import { delPrintList, exportPrintList, getPrintList } from '@/api/business/taskMeasure/print' const $router = useRouter() const loadingTable = ref(false) // 查询条件 const listQuery: Ref<IListQuery> = ref({ createTimeEnd: '', // 打印结束时间 createTimeStart: '', // 打印开始时间 deviceName: '', // 设备名称 deviceNo: '', // 统一编号 identifyType: '', // 标志类型 limit: 20, offset: 1, }) // 表头 const columns = ref<TableColumn[]>([ { text: '记录编号', value: 'recordNo', align: 'center', width: '160' }, { text: '标志类型', value: 'identifyType', align: 'center' }, { text: '统一编号', value: 'deviceNo', align: 'center', width: '160' }, { text: '设备名称', value: 'deviceName', align: 'center' }, { text: '检定员', value: 'measurePerson', align: 'center' }, { text: '打印时间', value: 'updateTime', align: 'center', width: '180' }, ]) const list = ref<IList[]>([]) // 列表 const total = ref(0) // 数据总条数 // 选中的内容 const checkoutList = ref<IList[]>([]) const timeRange = ref<[DateModelType, DateModelType]>(['', ''])// 筛选时间段数据 // 多选发生改变时 function handleSelectionChange(e: any) { checkoutList.value = e.map((item: { id: string }) => item.id) } // 数据查询 function fetchData(isNowPage = false) { loadingTable.value = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 listQuery.value.offset = 1 } getPrintList(listQuery.value).then((response) => { list.value = response.data.rows total.value = parseInt(response.data.total) loadingTable.value = false }) } // 清除条件 const clearList = () => { listQuery.value = { createTimeEnd: '', // 打印结束时间 createTimeStart: '', // 打印开始时间 deviceName: '', // 设备名称 deviceNo: '', // 统一编号 identifyType: '', // 标志类型 limit: 20, offset: 1, } timeRange.value = ['', ''] // 清空时间 fetchData() } // 搜索 const searchList = () => { fetchData(true) } // 新建 const add = () => { $router.push({ path: 'print/add', }) } // 页数发生变化后的操作,可能是页码变化,可能是每页容量变化,此函数必写 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 handleEdit = (row: IList, type: 'edit' | 'detail' | 'del') => { if (type === 'detail' || type === 'edit') { $router.push({ path: `print/${type}/${row.id}`, }) } else if (type === 'del') { ElMessageBox.confirm( '确认删除吗?', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ) .then(() => { delPrintList({ id: row.id }).then((res) => { ElMessage({ type: 'success', message: '删除成功', }) fetchData(true) }) }) } } // 导出 const exportAll = () => { const loading = ElLoading.service({ lock: true, text: '下载中请稍后', background: 'rgba(255, 255, 255, 0.6)', }) if (list.value.length > 0) { const params = { createTimeEnd: listQuery.value.createTimeEnd, // 打印结束时间 createTimeStart: listQuery.value.createTimeStart, // 打印开始时间 deviceName: listQuery.value.deviceName, // 设备名称 deviceNo: listQuery.value.deviceNo, // 统一编号 identifyType: listQuery.value.identifyType, // 标志类型 offset: 1, limit: 20, ids: checkoutList.value.map(item => item.id), } exportPrintList(params).then((res) => { const blob = new Blob([res.data]) loading.close() exportFile(blob, '标识打印.xlsx') }) } else { loading.close() ElMessage.warning('无数据可导出数据') } } // ---------------------------------------钩子----------------------------------------------- watch(timeRange, (val) => { if (val) { listQuery.value.createTimeStart = `${val[0]}` listQuery.value.createTimeEnd = `${val[1]}` } else { listQuery.value.createTimeStart = '' listQuery.value.createTimeEnd = '' } }) onMounted(async () => { fetchData(false) }) </script> <template> <div> <!-- 布局 --> <app-container> <search-area :need-clear="true" @search="searchList" @clear="clearList"> <search-item> <el-select v-model.trim="listQuery.identifyType" class="short-input" placeholder="标注类型" clearable> <el-option v-for="item in identifyTypeList" :key="item.id" :label="item.name" :value="item.value" /> </el-select> </search-item> <search-item> <el-input v-model.trim="listQuery.deviceNo" placeholder="统一编号" class="short-input" clearable /> </search-item> <search-item> <el-input v-model.trim="listQuery.deviceName" placeholder="设备名称" class="short-input" clearable /> </search-item> <search-item> <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="打印时间(开始)" end-placeholder="打印时间(结束)" /> </search-item> </search-area> <table-container> <template #btns-right> <icon-button icon="icon-add" title="新建" type="primary" @click="add" /> <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="handleEdit(row, 'edit')" > 编辑 </el-button> <el-button size="small" type="primary" link @click="handleEdit(row, 'detail')" > 详情 </el-button> <el-button size="small" type="danger" link @click="handleEdit(row, 'del')" > 删除 </el-button> </template> </el-table-column> </template> </normal-table> </table-container> </app-container> </div> </template>