From 10490610d1821d03bc0a13c5f144801006763443 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Thu, 2 Jul 2026 09:32:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor(wms/flow):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E9=A1=B5=E9=9D=A2=E8=8A=82=E7=82=B9=E8=B7=B3?=
 =?UTF-8?q?=E8=BD=AC=E9=80=BB=E8=BE=91=EF=BC=8C=E6=94=B9=E4=B8=BA=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E5=BC=B9=E7=AA=97=E5=8A=A0=E8=BD=BD=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增弹窗组件容器，实现节点点击后动态加载对应页面组件
2. 替换原有硬编码的跳转逻辑，统一使用handleOpen方法处理节点点击
3. 注释暂时不需要的流程节点配置，简化当前可用流程
4. 新增弹窗相关状态与样式，优化弹窗展示效果
---
 klp-ui/src/views/wms/post/flow.vue | 118 +++++++++++++++++++++++------
 1 file changed, 95 insertions(+), 23 deletions(-)

diff --git a/klp-ui/src/views/wms/post/flow.vue b/klp-ui/src/views/wms/post/flow.vue
index eac1bf431..8b70eace8 100644
--- a/klp-ui/src/views/wms/post/flow.vue
+++ b/klp-ui/src/views/wms/post/flow.vue
@@ -29,6 +29,24 @@
     <div v-loading="loading" class="flow-content">
       <div ref="diagram" class="flow-diagram" v-html="currentSvg"></div>
     </div>
+
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      :width="dialogWidth"
+      top="5vh"
+      fullscreen
+      :close-on-click-modal="false"
+      @closed="handleDialogClosed"
+    >
+      <div v-loading="dialogLoading" class="flow-dialog-body">
+        <component
+          v-if="dynamicComponent && !dialogLoading"
+          :is="dynamicComponent"
+          :key="dialogKey"
+        />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -48,35 +66,35 @@ const TAB_LIST = [
   { key: 'afterSales', label: '售后处理流程', icon: 'el-icon-s-claim' },
   { key: 'inventoryCheck', label: '盘库流程', icon: 'el-icon-s-check' },
   { key: 'productionSchedule', label: '排产流程', icon: 'el-icon-s-order' },
-  { key: 'equipmentRepair', label: '设备维修流程', icon: 'el-icon-s-tools' },
+  // { key: 'equipmentRepair', label: '设备维修流程', icon: 'el-icon-s-tools' },
 ]
 
 const NODE_EVENT_CONFIG = {
   steelFullChain: [
-    { id: 'A', label: '销售部创建合同', handler: 'handleClick', params: { action: 'openContract' } },
-    { id: 'B', label: '原料卷到货', handler: 'handleClick', params: { action: 'openRawMaterial' } },
-    { id: 'C', label: '入库验收', handler: 'handleClick', params: { action: 'openWarehouse' } },
-    { id: 'D', label: '登记原料库存', handler: 'handleClick', params: { action: 'openWarehouse' } },
-    { id: 'E', label: '成品钢卷加工', handler: 'handleClick', params: { action: 'openProduction' } },
-    { id: 'I', label: '登记质量缺陷', handler: 'handleClick', params: { action: 'openQuality' } },
-    { id: 'J', label: '质量等级判定', handler: 'handleClick', params: { action: 'openQuality' } },
-    { id: 'K', label: '单卷档案', handler: 'handleClick', params: { action: 'openArchive' } },
-    { id: 'L', label: '编排发货计划', handler: 'handleClick', params: { action: 'openShipping' } },
-    { id: 'M', label: '生成发货单', handler: 'handleClick', params: { action: 'openShipping' } },
-    { id: 'N', label: '发货质量校验', handler: 'handleClick', params: { action: 'openQuality' } },
-    { id: 'O', label: '出库发货', handler: 'handleClick', params: { action: 'openShipping' } },
-    { id: 'P', label: '禁止出库', handler: 'handleClick', params: { action: 'openShipping' } },
-    { id: 'Q', label: '钢卷库存管理', handler: 'handleClick', params: { action: 'openInventory' } },
-    { id: 'V', label: '生产过程数据异常检测', handler: 'handleClick', params: { action: 'openAlert' } },
-    { id: 'W', label: '自动触发告警', handler: 'handleClick', params: { action: 'openAlert' } },
-    { id: 'X', label: '生产数据报表统计', handler: 'handleClick', params: { action: 'openReport' } },
+    { id: 'A', label: '销售部创建合同', handler: 'handleOpen', params: { componentPath: 'crm/contract/index' } },
+    { id: 'B', label: '原料卷到货', handler: 'handleOpen', params: { componentPath: 'wms/receive/plan/index' } },
+    { id: 'C', label: '入库验收', handler: 'handleOpen', params: { componentPath: 'wms/coil/do/warehousing' } },
+    { id: 'D', label: '登记原料库存', handler: 'handleOpen', params: { componentPath: 'wms/coil/do/warehousing' } },
+    // { id: 'E', label: '成品钢卷加工', handler: 'handleClick', params: { action: 'openProduction' } },
+    { id: 'I', label: '登记质量缺陷', handler: 'handleOpen', params: { componentPath: 'wms/coil/abnormal/extend' } },
+    { id: 'J', label: '质量等级判定', handler: 'handleOpen', params: { componentPath: 'wms/coil/abnormal/extend' } },
+    // { id: 'K', label: '单卷档案', handler: 'handleClick', params: { action: 'openArchive' } },
+    { id: 'L', label: '编排发货计划', handler: 'handleOpen', params: { componentPath: 'wms/delivery/waybill/index' } },
+    { id: 'M', label: '生成发货单', handler: 'handleOpen', params: { componentPath: 'wms/delivery/bills/index' } },
+    // { id: 'N', label: '发货质量校验', handler: 'handleClick', params: { action: 'openQuality' } },
+    // { id: 'O', label: '出库发货', handler: 'handleClick', params: { action: 'openShipping' } },
+    // { id: 'P', label: '禁止出库', handler: 'handleClick', params: { action: 'openShipping' } },
+    // { id: 'Q', label: '钢卷库存管理', handler: 'handleClick', params: { action: 'openInventory' } },
+    // { id: 'V', label: '生产过程数据异常检测', handler: 'handleClick', params: { action: 'openAlert' } },
+    { id: 'W', label: '自动触发告警', handler: 'handleOpen', params: { componentPath: 'wms/coil/materialWarning/index' } },
+    // { id: 'X', label: '生产数据报表统计', handler: 'handleClick', params: { action: 'openReport' } },
   ],
   afterSales: [
-    { id: 'A', label: '创建售后单', handler: 'handleClick', params: { action: 'openAfterSalesCreate' } },
-    { id: 'C', label: '生产部出具处理意见', handler: 'handleClick', params: { action: 'openAfterSalesDept', dept: 'production' } },
-    { id: 'D', label: '质量部出具处理意见', handler: 'handleClick', params: { action: 'openAfterSalesDept', dept: 'quality' } },
-    { id: 'E', label: '销售部出具处理意见', handler: 'handleClick', params: { action: 'openAfterSalesDept', dept: 'sales' } },
-    { id: 'G', label: '售后负责人汇总', handler: 'handleClick', params: { action: 'openAfterSalesSummary' } },
+    { id: 'A', label: '创建售后单', handler: 'handleOpen', params: { componentPath: 'wms/post/objection/index' } },
+    // { id: 'C', label: '生产部出具处理意见', handler: 'handleOpen', params: { action: 'openAfterSalesDept', dept: 'production' } },
+    // { id: 'D', label: '质量部出具处理意见', handler: 'handleOpen', params: { action: 'openAfterSalesDept', dept: 'quality' } },
+    // { id: 'E', label: '销售部出具处理意见', handler: 'handleOpen', params: { action: 'openAfterSalesDept', dept: 'sales' } },
+    { id: 'G', label: '售后负责人汇总', handler: 'handleOpen', params: { componentPath: 'wms/post/objection/summary' } },
   ],
   inventoryCheck: [
     { id: 'A', label: '创建盘库计划', handler: 'handleClick', params: { action: 'openInventoryPlan' } },
@@ -292,6 +310,7 @@ graph TD
 `,
 }
 
+
 export default {
   name: 'FlowChart',
 
@@ -303,6 +322,12 @@ export default {
       svgCache: {},
       selectedNode: null,
       downloadLoading: false,
+      dialogVisible: false,
+      dialogTitle: '',
+      dialogWidth: '70%',
+      dialogLoading: false,
+      dynamicComponent: null,
+      dialogKey: 0,
     }
   },
 
@@ -458,6 +483,49 @@ export default {
       console.log('[FlowChart] Node clicked:', { id, label, params })
       this.$message({ message: `${label}`, type: 'info', duration: 1500 })
     },
+
+    handleOpen({ id, label, params }) {
+      const { componentPath, dialogWidth = '70%' } = params || {}
+      if (!componentPath) {
+        this.$message.warning('组件路径不能为空')
+        return
+      }
+
+      this.dialogVisible = true
+      this.dialogTitle = label
+      this.dialogWidth = dialogWidth
+      this.dialogLoading = true
+      this.dynamicComponent = null
+
+      this.resolveImport(componentPath)
+        .then(module => {
+          this.dynamicComponent = module.default || module
+        })
+        .catch(err => {
+          console.error('[FlowChart] Component load error:', err)
+          this.$message.error('组件加载失败: ' + (err.message || '未知错误'))
+          this.dialogVisible = false
+        })
+        .finally(() => {
+          this.dialogLoading = false
+        })
+    },
+
+    resolveImport(componentPath) {
+      // 与 src/store/modules/permission.js 的 loadView 同款模式
+      // componentPath 相对于 @/views/，如 'crm/order/index'
+      if (process.env.NODE_ENV === 'development') {
+        return new Promise((resolve, reject) => {
+          require([`@/views/${componentPath}`], resolve, reject)
+        })
+      }
+      return import(`@/views/${componentPath}`)
+    },
+
+    handleDialogClosed() {
+      this.dynamicComponent = null
+      this.dialogKey++
+    },
   },
 }
 </script>
@@ -536,4 +604,8 @@ export default {
   background: #fafafa;
   border-bottom: 1px solid #e8e8e8;
 }
+
+.flow-dialog-body {
+  min-height: 300px;
+}
 </style>