From 14817696a26eb142ccae03fa7c43050840e057f5 Mon Sep 17 00:00:00 2001
From: hsy <1029150275@qq.com>
Date: 星期一, 17 八月 2026 09:35:03 +0800
Subject: [PATCH] feat(mes): 优化生产订单与排产任务列表显示，新增启停工及校验逻辑 1. 生产订单列表展示优化 (WorkOrder) - 新增「生产状态」列，全局注册 `ORDER_PRODUCTION_STATUS` 常量并绑定系统动态字典。 - 彻底重构「工序生产进度」单元格显示：弃用臃肿的 Steps 组件，改为极简横向布局（彩色状态圆点 + 进度百分比），解决表格行高被强行撑开及内容截断问题，支持横向滚动。 - 优化「完成进度」列宽及展示样式，将百分比数值外置同行显示，更加直观。 2. 排产任务列表改造 (Task) - 顶部表头重构，由单一标题重构为「全部 / 未完成 / 已完成」的 Tabs 标签页切换结构。 - 重写数据过滤逻辑，剥离写死的 status 查询，改为使用 `scheduleStatus` 字段动态响应 Tabs 切换 (0: 未完成, 1: 已完成)。 3. 工单业务逻辑增强与状态流转 - 落实「工单查询逻辑设计方案」，优化底层的工单条件检索逻辑。 - 实现「添加工单启停功能」与「停工状态」，支持工单在执行过程中的暂停与恢复业务流转。 - 强化容错与防呆设计：操作「完成订单」时增加前置校验 `handleCheckFinish`，若生产状态为未完成，强制弹出二次确认 Modal，避免误操作。 # 相关讨论/参考方案 # - 添加工单启停功能 # - 停工状态功能设计方案 # - 工单查询逻辑设计方案 # - 工单完成进度显示优化
---
src/views/mes/pro/workorder/index.vue | 125 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 123 insertions(+), 2 deletions(-)
diff --git a/src/views/mes/pro/workorder/index.vue b/src/views/mes/pro/workorder/index.vue
index 9a388d0..05d1c44 100644
--- a/src/views/mes/pro/workorder/index.vue
+++ b/src/views/mes/pro/workorder/index.vue
@@ -11,7 +11,7 @@
} from "@vben/constants";
import { downloadFileFromBlobPart } from "@vben/utils";
- import { Button, message } from "ant-design-vue";
+ import { Button, message, Progress, Steps, Popover, Modal } from "ant-design-vue";
import { ACTION_ICON, TableAction, useVbenVxeGrid } from "#/adapter/vxe-table";
import {
@@ -63,6 +63,21 @@
/** 瀹屾垚璁㈠崟 */
function handleFinish(row: MesProWorkOrderApi.WorkOrder) {
formModalApi.setData({ formType: "finish", id: row.id }).open();
+ }
+
+ /** 瀹屾垚璁㈠崟鍓嶆牎楠� */
+ function handleCheckFinish(row: MesProWorkOrderApi.WorkOrder) {
+ if (row.productionStatus !== 2) {
+ Modal.confirm({
+ title: '鎿嶄綔纭',
+ content: '璇ヨ鍗曟湭瀹屾垚锛屾槸鍚︾‘璁よ缁х画瀹屾垚锛�',
+ onOk() {
+ handleFinish(row);
+ },
+ });
+ } else {
+ handleFinish(row);
+ }
}
/** 鍒犻櫎璁㈠崟 */
@@ -139,6 +154,13 @@
},
} as VxeTableGridOptions<MesProWorkOrderApi.WorkOrder>,
});
+
+ /** 鑾峰彇宸ュ簭鑺傜偣鐘舵�佹牱寮忕被 */
+ function getProcessNodeStatus(percent: number) {
+ if (percent >= 100) return 'completed';
+ if (percent > 0) return 'in-progress';
+ return 'pending';
+ }
</script>
<template>
@@ -168,6 +190,29 @@
@click="handleDetail(row)">
{{ row.code }}
</Button>
+ </template>
+ <template #processProgressList="{ row }">
+ <div v-if="row.processProgressList && row.processProgressList.length > 0" class="process-node-list">
+ <div
+ v-for="(item, index) in row.processProgressList"
+ :key="index"
+ class="process-node-item"
+ >
+ <div class="process-node-dot" :class="getProcessNodeStatus(item.progressPercent || item.progress || 0)"></div>
+ <div class="process-node-info">
+ <span class="process-node-name" :title="item.processName ">{{ item.processName }}</span>
+ <span class="process-node-percent">{{ item.progress || 0 }}%</span>
+ </div>
+ <div v-if="index !== row.processProgressList.length - 1" class="process-node-line"></div>
+ </div>
+ </div>
+ <span v-else>-</span>
+ </template>
+ <template #completionProgress="{ row }">
+ <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
+ <Progress :percent="row.completionProgress || 0" :show-info="false" size="small" style="flex: 1; margin: 0;" />
+ <span style="white-space: nowrap; min-width: 40px; text-align: left;">{{ row.completionProgress || 0 }}%</span>
+ </div>
</template>
<template #actions="{ row }">
<TableAction :actions="[
@@ -207,7 +252,7 @@
ifShow:
row.status === MesProWorkOrderStatusEnum.CONFIRMED &&
!!row.quantityProduced,
- onClick: handleFinish.bind(null, row),
+ onClick: handleCheckFinish.bind(null, row),
},
{
label: '鍙栨秷',
@@ -238,3 +283,79 @@
<ArchiveDetail ref="archiveDetailRef" />
</Page>
</template>
+
+<style scoped>
+.process-node-list {
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+ overflow-y: hidden;
+ max-width: 100%;
+ padding-bottom: 4px;
+}
+
+/* Custom scrollbar to make it sleek */
+.process-node-list::-webkit-scrollbar {
+ height: 4px;
+}
+.process-node-list::-webkit-scrollbar-thumb {
+ background-color: #d9d9d9;
+ border-radius: 4px;
+}
+.process-node-list::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.process-node-item {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+}
+
+.process-node-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ margin-right: 6px;
+}
+
+.process-node-dot.completed {
+ background-color: #52c41a;
+}
+.process-node-dot.in-progress {
+ background-color: #1890ff;
+}
+.process-node-dot.pending {
+ background-color: #d9d9d9;
+}
+
+.process-node-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-right: 12px;
+ font-size: 12px;
+ line-height: 1.2;
+}
+
+.process-node-name {
+ color: #333;
+ max-width: 80px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.process-node-percent {
+ color: #888;
+ font-size: 11px;
+}
+
+.process-node-line {
+ width: 20px;
+ height: 1px;
+ background-color: #e8e8e8;
+ margin-right: 12px;
+}
+
+</style>
--
Gitblit v1.9.3