<!-- 任务单管理列表 --> <script lang="ts" setup name="OrderList"> import type { Ref } from 'vue' import { getCurrentInstance, ref } from 'vue' import { ElLoading, ElMessage, ElMessageBox } from 'element-plus' import type { DateModelType } from 'element-plus' import backReasonDialog from './dialog/backReasonDialog.vue' import type { IList, IListQuery } from './order-interface' import type { TableColumn } from '@/components/NormalTable/table_interface' import { usePrintList } from '@/commonMethods/usePrintList' import { exportFile } from '@/utils/exportUtils' import { uploadApi } from '@/api/system/notice' import { exportOrderList, getOrderList, receiveOrder, } from '@/api/business/manager/order' const $router = useRouter() const operateWidth = ref('160') // 操作栏的宽度 // 查询条件 const listQuery: Ref<IListQuery> = ref({ orderNo: '', // 任务单编号 customerName: '', // 委托方名称 createUserName: '', // 创建人 deliverer: '', // 送样人 createStartTime: '', // 创建开始时间 createEndTime: '', // 创建结束时间 receiveStatus: '', // 接收状态 offset: 1, limit: 20, }) const backReasonDialogRef = ref() // 退回弹出框ref const columns = ref<TableColumn[]>([ // 表头 { text: '任务单编号', value: 'orderNo', align: 'center', width: '160' }, { text: '委托方', value: 'customerName', align: 'center' }, { text: '受检设备数量', value: 'sampleCount', align: 'center' }, { text: '创建人', value: 'createUserName', align: 'center' }, { text: '创建时间', value: 'createTime', align: 'center', width: '180' }, { text: '送检人', value: 'deliverer', align: 'center' }, { text: '接收状态', value: 'receiveStatusName', align: 'center', width: '100' }, ]) const list = ref<IList[]>([]) // 表格数据 const total = ref(0) // 数据总数 const loadingTable = ref(false) // 表格加载状态 const checkoutList = ref<IList[]>([]) // 选中的内容 const dateRange = ref<[DateModelType, DateModelType]>(['', '']) // 筛选时间段数据 // -------------------------------------------文件上传\表格右上角几个图标方法----------------------------------------------- const fileRef = ref() // 文件上传input // 上传文件/批量导入 const onFileChange = (event: any) => { // todo: 校验文件类型,调用上传接口 if (event.target.files[0].type === 'application/pdf') { if (event.target.files?.length !== 0) { // 创建formdata对象 const fd = new FormData() fd.append('multipartFile', event.target.files[0]) uploadApi(fd).then((res) => { if (res.code === 200) { ElMessage.success('上传成功') } else { ElMessage.error(res.message) } }) } } else { ElMessage.error('请上传pdf格式') } } // 点击批量导入 const uploadAll = () => { fileRef.value.click() } // 导出 const exportAll = () => { const loading = ElLoading.service({ lock: true, text: '下载中请稍后', background: 'rgba(255, 255, 255, 0.8)', }) if (list.value.length > 0) { const params = { orderNo: listQuery.value.orderNo, // 任务单编号 customerName: listQuery.value.customerName, // 委托方名称 createUserName: listQuery.value.createUserName, // 创建人 deliverer: listQuery.value.deliverer, // 送样人 createStartTime: listQuery.value.createStartTime, // 创建开始时间 createEndTime: listQuery.value.createEndTime, // 创建结束时间 receiveStatus: listQuery.value.receiveStatus, // 接收状态 offset: 1, limit: 20, ids: checkoutList.value, } exportOrderList(params).then((res) => { const blob = new Blob([res.data]) loading.close() exportFile(blob, '任务单列表.xlsx') }) } else { loading.close() ElMessage.warning('无数据可导出数据') } } // 打印列表 function printList() { usePrintList(list.value, columns.value, checkoutList.value, '任务单列表') } // 模板下载 const templateDownload = () => {} // 点击新建 const add = () => { $router.push('/manager/add') } // ------------------------------------------------------------------------------------------------- // 数据查询 function fetchData(isNowPage = false) { loadingTable.value = true if (!isNowPage) { // 是否显示当前页,否则跳转第一页 listQuery.value.offset = 1 } getOrderList(listQuery.value).then((response) => { list.value = response.data.rows total.value = parseInt(response.data.total) loadingTable.value = false }) } // 点击搜索 const searchList = () => { fetchData(true) } // 点击重置 const clearList = () => { listQuery.value = { orderNo: '', // 任务单编号 customerName: '', // 委托方名称 createUserName: '', // 创建人 deliverer: '', // 送样人 createStartTime: '', // 创建开始时间 createEndTime: '', // 创建结束时间 receiveStatus: '', // 接收状态 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) } // --------------------------------------------操作------------------------------------------ // 退回成功 const backSuccess = () => { fetchData(true) } // 操作 const handleEdit = (row: IList, type: string, title: string) => { if (type === 'receive') { // 接收 ElMessageBox.confirm( `确认${title}吗?`, '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', }, ) .then(() => { receiveOrder({ id: row.id }).then(() => { ElMessage.success(`已${title}`) fetchData(true) }) }) } else if (type === 'back') { // 退回 backReasonDialogRef.value.initDialog(row) } } // 点击编辑详情 const goEdit = (row: IList, pageType: 'edit' | 'detail') => { $router.push({ path: `/manager/${pageType}/${row.id}`, // query: { // statusName: row.receiveStatusName, // }, }) } // ----------------------------------------------钩子------------------------------------------------------ watch(dateRange, (val) => { // 监听创建时间改变 if (val) { listQuery.value.createStartTime = `${val[0]}` listQuery.value.createEndTime = `${val[1]}` } else { listQuery.value.createStartTime = '' listQuery.value.createEndTime = '' } }) onMounted(async () => { fetchData(true) // 获取列表数据 }) </script> <template> <app-container> <search-area :need-clear="true" @search="searchList" @clear="clearList"> <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.createUserName" placeholder="创建人" class="short-input" clearable /> </search-item> <search-item> <el-date-picker v-model="dateRange" 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-import" title="批量导入" type="primary" @click="uploadAll" /> --> <!-- <icon-button icon="icon-template" title="模板下载" type="primary" @click="templateDownload" /> --> <icon-button icon="icon-add" title="新建" type="primary" @click="add" /> <icon-button icon="icon-export" title="导出" type="primary" @click="exportAll" /> <icon-button icon="icon-print" title="打印" type="primary" @click="printList" /> </template> <input v-show="false" ref="fileRef" type="file" accept="pdf/*" @change="onFileChange"> <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" link type="primary" @click="goEdit(row, 'detail')" > 详情 </el-button> <el-button v-if="row.receiveStatusName !== '已取消' && row.receiveStatusName !== '已退回'" size="small" type="primary" link @click="goEdit(row, 'edit')" > 编辑 </el-button> <el-button v-if="row.receiveStatusName !== '已取消' && row.receiveStatusName !== '已接收' && row.receiveStatusName !== '已退回'" size="small" link type="primary" @click="handleEdit(row, 'receive', '接收')" > 接收 </el-button> <el-button v-if="row.receiveStatusName !== '已取消' && row.receiveStatusName !== '已接收' && row.receiveStatusName !== '已退回'" size="small" link type="primary" @click="handleEdit(row, 'back', '退回')" > 退回 </el-button> </template> </el-table-column> </template> </normal-table> </table-container> <back-reason-dialog ref="backReasonDialogRef" @back-success="backSuccess" /> </app-container> </template> <style lang="scss" scoped> // 样式 .short-input { width: 180px !important; } </style>