| | |
| | | value="3" /> |
| | | <el-option label="已取消" |
| | | value="4" /> |
| | | <el-option label="已结束" |
| | | value="5" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | |
| | | :tableLoading="tableLoading" |
| | | :row-class-name="tableRowClassName" |
| | | :isSelection="true" |
| | | :selectable="row => !row.endOrder" |
| | | @selection-change="handleSelectionChange" |
| | | @pagination="pagination"> |
| | | <template #completionStatus="{ row }"> |
| | | <el-progress :percentage="toProgressPercentage(row?.completionStatus)" |
| | | :color="progressColor(toProgressPercentage(row?.completionStatus))" |
| | | :status="toProgressPercentage(row?.completionStatus) >= 100 ? 'success' : ''" /> |
| | | </template> |
| | | <template #processRouteStatus="{ row }"> |
| | | <div v-if="row.processRouteStatus && row.processRouteStatus.length" |
| | | class="process-progress-container"> |
| | | <div v-for="(item, index) in row.processRouteStatus" |
| | | :key="index" |
| | | class="process-step"> |
| | | <div class="step-content"> |
| | | <div class="step-circle" |
| | | :class="{ 'is-completed': item.percentage >= 100 }"> |
| | | <span class="step-percentage" |
| | | :style="{ color: item.percentage >= 70 ? item.percentage >= 100 ? '#67c23a' : '#f56c6c' : '#000' }">{{ item.percentage }}%</span> |
| | | </div> |
| | | <div class="step-name">{{ item.name }}</div> |
| | | </div> |
| | | <div v-if="index < row.processRouteStatus.length - 1" |
| | | class="step-line"></div> |
| | | </div> |
| | | </div> |
| | | <span v-else>-</span> |
| | | </template> |
| | | </PIMTable> |
| | | </div> |
| | |
| | | <MaterialDetailDialog v-model="materialDetailDialogVisible" |
| | | :order-row="currentMaterialDetailOrder" |
| | | @confirmed="getList" /> |
| | | <MaterialSupplementDialog v-model="materialSupplementDialogVisible" |
| | | :order-row="currentMaterialSupplementOrder" |
| | | @saved="getList" /> |
| | | <new-product-order v-if="isShowNewModal" |
| | | v-model:visible="isShowNewModal" |
| | | @completed="handleQuery" /> |
| | | <!-- 打印领料单组件 --> |
| | | <div class="print-requisition-wrapper"> |
| | | <PrintMaterialRequisition ref="printRef" |
| | | :order-row="printOrderRow" |
| | | :material-list="printMaterialList" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | listProcessBom, |
| | | delProductOrder, |
| | | getProductOrderSource, |
| | | updateProductOrder, |
| | | } from "@/api/productionManagement/productionOrder.js"; |
| | | import { productWorkOrderPage } from "@/api/productionManagement/workOrder.js"; |
| | | import { listMain as getOrderProcessRouteMain } from "@/api/productionManagement/productProcessRoute.js"; |
| | | import MaterialLedgerDialog from "@/views/productionManagement/productionOrder/components/MaterialLedgerDialog.vue"; |
| | | import MaterialDetailDialog from "@/views/productionManagement/productionOrder/components/MaterialDetailDialog.vue"; |
| | | import MaterialSupplementDialog from "@/views/productionManagement/productionOrder/components/MaterialSupplementDialog.vue"; |
| | | import PrintMaterialRequisition from "@/views/productionManagement/productionOrder/components/PrintMaterialRequisition.vue"; |
| | | import PIMTable from "@/components/PIMTable/PIMTable.vue"; |
| | | import { listPage } from "@/api/productionManagement/processRoute.js"; |
| | | import { |
| | | listMaterialPickingDetail, |
| | | listMaterialPickingBom, |
| | | } from "@/api/productionManagement/productionOrder.js"; |
| | | const NewProductOrder = defineAsyncComponent(() => |
| | | import("@/views/productionManagement/productionOrder/New.vue") |
| | | ); |
| | |
| | | total: 0, |
| | | }); |
| | | |
| | | const tableColumn = ref([ |
| | | const processColumnWidth = computed(() => { |
| | | if (!tableData.value || tableData.value.length === 0) return "200px"; |
| | | const maxProcesses = Math.max( |
| | | ...tableData.value.map(row => row.processRouteStatus?.length || 0) |
| | | ); |
| | | if (maxProcesses === 0) return "100px"; |
| | | // 每个工序圆圈 36px + 线条 30px = 66px,额外加 60px 边距和文字空间 |
| | | return `${maxProcesses * 66 + 60}px`; |
| | | }); |
| | | |
| | | const tableColumn = computed(() => [ |
| | | { |
| | | label: "生产订单号", |
| | | prop: "npsNo", |
| | | width: "150px", |
| | | }, |
| | | // 1.待开始、2.进行中、3.已完成、4.已取消 |
| | | // 1.待开始、2.进行中、3.已完成、4.已取消、5.已结束 |
| | | { |
| | | label: "状态", |
| | | prop: "status", |
| | |
| | | ? "进行中" |
| | | : val === 3 |
| | | ? "已完成" |
| | | : val === 5 |
| | | ? "已结束" |
| | | : "已取消", |
| | | formatType: val => |
| | | val === 1 |
| | |
| | | ? "warning" |
| | | : val === 3 |
| | | ? "success" |
| | | : "danger", |
| | | : val === 5 |
| | | ? "danger" |
| | | : "info", |
| | | }, |
| | | { |
| | | label: "产品名称", |
| | |
| | | { |
| | | label: "完成数量", |
| | | prop: "completeQuantity", |
| | | }, |
| | | { |
| | | label: "工序生产进度", |
| | | prop: "processRouteStatus", |
| | | dataType: "slot", |
| | | slot: "processRouteStatus", |
| | | width: processColumnWidth.value, |
| | | }, |
| | | { |
| | | dataType: "slot", |
| | |
| | | label: "操作", |
| | | align: "center", |
| | | fixed: "right", |
| | | width: 340, |
| | | width: 280, |
| | | operation: [ |
| | | { |
| | | name: "工艺路线", |
| | |
| | | { |
| | | name: "绑定工艺路线", |
| | | type: "text", |
| | | showHide: row => !row.processRouteCode, |
| | | showHide: row => !row.processRouteCode && !row.endOrder, |
| | | clickFun: row => { |
| | | openBindRouteDialog(row, "add"); |
| | | }, |
| | |
| | | { |
| | | name: "更换工艺路线", |
| | | type: "text", |
| | | showHide: row => row.processRouteCode, |
| | | showHide: row => row.processRouteCode && !row.endOrder, |
| | | clickFun: row => { |
| | | openBindRouteDialog(row, "change"); |
| | | }, |
| | |
| | | showSourceData(row); |
| | | }, |
| | | }, |
| | | // { |
| | | // name: "产品结构", |
| | | // type: "text", |
| | | // clickFun: row => { |
| | | // showProductStructure(row); |
| | | // }, |
| | | // }, |
| | | // { |
| | | // name: "领料", |
| | | // type: "text", |
| | | // clickFun: row => { |
| | | // openMaterialDialog(row); |
| | | // }, |
| | | // }, |
| | | // { |
| | | // name: "领料详情", |
| | | // type: "text", |
| | | // clickFun: row => { |
| | | // openMaterialDetailDialog(row); |
| | | // }, |
| | | // }, |
| | | { |
| | | name: "领料", |
| | | type: "text", |
| | | color: "#5EC7AB", |
| | | showHide: row => !row.endOrder && !row.returned, |
| | | clickFun: row => { |
| | | openMaterialDialog(row); |
| | | }, |
| | | }, |
| | | { |
| | | name: "补料", |
| | | type: "text", |
| | | color: "#5EC7AB", |
| | | showHide: row => !row.endOrder && !row.returned, |
| | | clickFun: row => { |
| | | openMaterialSupplementDialog(row); |
| | | }, |
| | | }, |
| | | { |
| | | name: "领料详情", |
| | | type: "text", |
| | | color: "#5EC7AB", |
| | | clickFun: row => { |
| | | openMaterialDetailDialog(row); |
| | | }, |
| | | }, |
| | | { |
| | | name: "打印领料单", |
| | | type: "text", |
| | | color: "#5EC7AB", |
| | | showHide: row => !row.endOrder, |
| | | clickFun: row => { |
| | | handlePrint(row); |
| | | }, |
| | | }, |
| | | { |
| | | name: "生产追溯", |
| | | type: "text", |
| | | color: "#409eff", |
| | | clickFun: row => { |
| | | router.push({ |
| | | path: "/productionManagement/productionTraceability", |
| | | query: { |
| | | npsNo: row.npsNo, |
| | | productName: row.productName, |
| | | model: row.model, |
| | | }, |
| | | }); |
| | | }, |
| | | }, |
| | | { |
| | | name: "结束订单", |
| | | type: "text", |
| | | color: "red", |
| | | showHide: row => !row.endOrder, |
| | | clickFun: row => { |
| | | handleEndOrder(row); |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | ]); |
| | |
| | | const currentMaterialOrder = ref(null); |
| | | const materialDetailDialogVisible = ref(false); |
| | | const currentMaterialDetailOrder = ref(null); |
| | | const materialSupplementDialogVisible = ref(false); |
| | | const currentMaterialSupplementOrder = ref(null); |
| | | |
| | | // 打印相关 |
| | | const printOrderRow = ref(null); |
| | | const printMaterialList = ref([]); |
| | | const handlePrint = async row => { |
| | | printOrderRow.value = row; |
| | | proxy.$modal.loading("正在获取领料数据..."); |
| | | try { |
| | | printMaterialList.value = []; |
| | | const detailRes = await listMaterialPickingDetail(row.id); |
| | | const detailList = Array.isArray(detailRes?.data) |
| | | ? detailRes.data |
| | | : detailRes?.data?.records || []; |
| | | |
| | | if (detailList.length > 0) { |
| | | printMaterialList.value = detailList; |
| | | } |
| | | |
| | | if (printMaterialList.value.length === 0) { |
| | | proxy.$modal.msgWarning("暂无领料数据"); |
| | | return; |
| | | } |
| | | |
| | | // 等待 DOM 更新后执行打印 |
| | | proxy.$nextTick(() => { |
| | | setTimeout(() => { |
| | | window.print(); |
| | | }, 800); |
| | | }); |
| | | } catch (e) { |
| | | console.error("获取领料数据失败:", e); |
| | | proxy.$modal.msgError("获取领料数据失败"); |
| | | } finally { |
| | | proxy.$modal.closeLoading(); |
| | | } |
| | | }; |
| | | |
| | | const openBindRouteDialog = async (row, type) => { |
| | | bindForm.orderId = row.id; |
| | | bindForm.routeId = type === "add" ? null : row.processRouteCode; |
| | | bindForm.routeId = type === "add" ? null : row.technologyRoutingId; |
| | | bindRouteDialogVisible.value = true; |
| | | routeOptions.value = []; |
| | | if (!row.productModelId) { |
| | |
| | | materialDetailDialogVisible.value = true; |
| | | }; |
| | | |
| | | const openMaterialSupplementDialog = row => { |
| | | currentMaterialSupplementOrder.value = row; |
| | | materialSupplementDialogVisible.value = true; |
| | | }; |
| | | |
| | | const handleReset = () => { |
| | | searchForm.value = { |
| | | ...searchForm.value, |
| | |
| | | const params = { ...searchForm.value, ...page }; |
| | | params.entryDate = undefined; |
| | | productOrderListPage(params) |
| | | .then(res => { |
| | | tableLoading.value = false; |
| | | tableData.value = res.data.records; |
| | | .then(async res => { |
| | | const records = res.data.records || []; |
| | | // 为每个订单查询对应的工序进度数据 |
| | | const processPromises = records.map(async item => { |
| | | if (item.npsNo) { |
| | | try { |
| | | const workOrderRes = await productWorkOrderPage({ |
| | | npsNo: item.npsNo, |
| | | size: 100, |
| | | }); |
| | | const workOrders = workOrderRes.data.records || []; |
| | | // 按照工序顺序排序(如果有顺序字段,假设为 orderNum 或按返回顺序) |
| | | // 转换为 processRouteStatus 格式 |
| | | const processRouteStatus = workOrders.map(wo => ({ |
| | | name: wo.operationName || "未知工序", |
| | | percentage: wo.completionStatus > 100 ? 100 : wo.completionStatus, |
| | | })); |
| | | return { ...item, processRouteStatus }; |
| | | } catch (error) { |
| | | console.error(`获取工单 ${item.npsNo} 进度失败:`, error); |
| | | return { ...item, processRouteStatus: [] }; |
| | | } |
| | | } |
| | | return { ...item, processRouteStatus: [] }; |
| | | }); |
| | | |
| | | tableData.value = await Promise.all(processPromises); |
| | | page.total = res.data.total; |
| | | tableLoading.value = false; |
| | | }) |
| | | .catch(() => { |
| | | tableLoading.value = false; |
| | |
| | | quantity: row.quantity || 0, |
| | | orderId, |
| | | type: "order", |
| | | editable: !row.endOrder, |
| | | }, |
| | | }); |
| | | } catch (e) { |
| | |
| | | }) |
| | | .then(() => { |
| | | proxy.download( |
| | | "/productOrder/export", |
| | | "/productionOrder/export", |
| | | { ...searchForm.value }, |
| | | "生产订单.xlsx" |
| | | "生产订单数据.xlsx" |
| | | ); |
| | | }) |
| | | .catch(() => { |
| | | proxy.$modal.msg("已取消"); |
| | | }); |
| | | }; |
| | | |
| | | // 结束订单 |
| | | const handleEndOrder = row => { |
| | | ElMessageBox.confirm(`是否确认结束订单:${row.npsNo}?`, "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | const params = { |
| | | id: row.id, |
| | | endOrder: true, |
| | | }; |
| | | updateProductOrder(params).then(() => { |
| | | proxy.$modal.msgSuccess("结束订单成功"); |
| | | getList(); |
| | | }); |
| | | }) |
| | | .catch(() => {}); |
| | | }; |
| | | |
| | | const handleConfirmRoute = () => {}; |
| | |
| | | .table_list { |
| | | margin-top: unset; |
| | | } |
| | | |
| | | .process-progress-container { |
| | | display: inline-flex; |
| | | align-items: center; |
| | | padding: 10px 0; |
| | | white-space: nowrap; |
| | | |
| | | .process-step { |
| | | display: flex; |
| | | align-items: center; |
| | | position: relative; |
| | | |
| | | .step-content { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | z-index: 1; |
| | | |
| | | .step-circle { |
| | | width: 36px; |
| | | height: 36px; |
| | | border-radius: 50%; |
| | | border: 2px solid #409eff; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background-color: #fff; |
| | | margin-bottom: 4px; |
| | | |
| | | .step-percentage { |
| | | font-size: 11px; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | &.is-completed { |
| | | border-color: #67c23a; |
| | | .step-percentage { |
| | | color: #67c23a; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .step-name { |
| | | font-size: 12px; |
| | | color: #606266; |
| | | white-space: nowrap; |
| | | } |
| | | } |
| | | |
| | | .step-line { |
| | | width: 30px; |
| | | height: 1px; |
| | | background-color: #dcdfe6; |
| | | margin: 0 -2px; |
| | | margin-top: -20px; // 向上偏移以对齐圆心 |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | <style lang="scss"> |
| | | .status-cell { |