From 6120e879661f193bf8daa2d724457b96d876bb21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Thu, 18 Jun 2026 14:50:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E6=96=B0=E5=A2=9E=E4=BB=93?=
 =?UTF-8?q?=E5=82=A8=E5=94=AE=E5=90=8E=E6=B5=81=E7=A8=8B=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0beautiful-mermaid=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增wms售后流程可视化页面，支持生产全链路和售后处理两种流程图切换展示
2. 安装beautiful-mermaid依赖并配置到transpileDependencies中
---
 klp-ui/package.json                |   1 +
 klp-ui/src/views/wms/post/flow.vue | 206 +++++++++++++++++++++++++++++
 klp-ui/vue.config.js               |   3 +-
 3 files changed, 209 insertions(+), 1 deletion(-)
 create mode 100644 klp-ui/src/views/wms/post/flow.vue

diff --git a/klp-ui/package.json b/klp-ui/package.json
index ff0f71b4..262f9d40 100644
--- a/klp-ui/package.json
+++ b/klp-ui/package.json
@@ -44,6 +44,7 @@
     "@vue-office/excel": "^1.7.14",
     "@vue/composition-api": "^1.7.2",
     "axios": "0.24.0",
+    "beautiful-mermaid": "^1.1.3",
     "bpmn-js-token-simulation": "0.10.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
diff --git a/klp-ui/src/views/wms/post/flow.vue b/klp-ui/src/views/wms/post/flow.vue
new file mode 100644
index 00000000..cfc16518
--- /dev/null
+++ b/klp-ui/src/views/wms/post/flow.vue
@@ -0,0 +1,206 @@
+<template>
+  <div class="app-container flow-page">
+    <div class="flow-tabs">
+      <span
+        v-for="tab in tabs"
+        :key="tab.key"
+        class="flow-tab-item"
+        :class="{ active: activeTab === tab.key }"
+        @click="switchTab(tab.key)"
+      >
+        <i :class="tab.icon"></i>
+        {{ tab.label }}
+      </span>
+    </div>
+
+    <div v-loading="loading" class="flow-content">
+      <div class="flow-diagram" v-html="currentSvg"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { renderMermaidSVG, THEMES } from 'beautiful-mermaid'
+
+const theme = {
+  ...THEMES['zinc-light'],
+  padding: 24,
+  nodeSpacing: 28,
+  layerSpacing: 44,
+  font: 'Inter, "Microsoft YaHei", sans-serif',
+}
+
+const diagrams = {
+  afterSales: `
+graph TD
+  A["<b>创建售后单</b><br/>填写基本信息<br/>选择需售后处理的钢卷"]:::step
+  A --> B["<b>多部门并行处理</b>"]:::fork
+  B --> C["<b>生产部</b><br/>出具处理意见"]:::dept1
+  B --> D["<b>质量部</b><br/>出具处理意见"]:::dept2
+  B --> E["<b>销售部</b><br/>出具处理意见"]:::dept3
+  C --> F{"三个部门<br/>全部提交?"}:::decision
+  D --> F
+  E --> F
+  F -->|已全部提交| G["<b>售后负责人</b><br/>汇总各部门意见<br/>形成最终处理方案<br/>指定执行部门"]:::approve
+  G --> H["<b>部门执行</b><br/>执行处理方案"]:::execute
+  H --> I["<b>返回执行结果</b><br/>提交执行报告"]:::result
+  I --> J(["<b>售后单封存</b><br/>流程结束"]):::end
+
+  classDef step fill:#409eff,stroke:#337ecc,color:#fff,stroke-width:2px
+  classDef fork fill:#f0f5ff,stroke:#409eff,color:#303133,stroke-width:2px
+  classDef dept1 fill:#e6fffa,stroke:#00b4a0,color:#303133,stroke-width:2px
+  classDef dept2 fill:#fff7e6,stroke:#fa8c16,color:#303133,stroke-width:2px
+  classDef dept3 fill:#fff0f6,stroke:#eb2f96,color:#303133,stroke-width:2px
+  classDef decision fill:#f9f0ff,stroke:#722ed1,color:#303133,stroke-width:2px
+  classDef approve fill:#e6f7ff,stroke:#1890ff,color:#303133,stroke-width:2px
+  classDef execute fill:#fffbe6,stroke:#fadb14,color:#303133,stroke-width:2px
+  classDef result fill:#f6ffed,stroke:#52c41a,color:#303133,stroke-width:2px
+  classDef end fill:#dcf7e8,stroke:#52c41a,color:#303133,stroke-width:2px,rx:10,ry:10
+  linkStyle default stroke:#bfbfbf,stroke-width:2px
+`,
+
+  steelFullChain: `
+graph TD
+  A["<b>销售部创建合同</b><br/>录入成品钢卷<br/>规格/数量/技术标准"]:::s1
+
+  A --> B["<b>原料卷到货</b>"]:::s2
+  B --> C["<b>入库验收</b>"]:::s2
+  C --> D["<b>登记原料库存</b>"]:::s2
+
+  D --> E["<b>成品钢卷加工</b>"]:::s3
+
+  E --> F["加工前质检"]:::s3qc
+  E --> G["加工中质检"]:::s3qc
+  E --> H["加工完工质检"]:::s3qc
+
+  F --> I["<b>登记质量缺陷</b><br/>各工序均可录入"]:::s3
+  G --> I
+  H --> I
+
+  I --> J["<b>质量等级判定</b><br/>依据质检标准"]:::s3
+  J --> K["<b>单卷档案</b><br/>缺陷记录与等级<br/>全程绑定留存"]:::s3
+
+  K --> L["<b>编排发货计划</b><br/>基于合同信息"]:::s4
+  L --> M["<b>生成发货单</b>"]:::s4
+  M --> N{"<b>发货质量校验</b><br/>缺陷/等级检查"}:::dec
+  N -->|达标| O["<b>出库发货</b>"]:::s4
+  N -->|不达标| P["<b>禁止出库</b>"]:::s5
+
+  K --> Q["<b>钢卷库存管理</b>"]:::s4
+  Q --> R["<b>逻辑库</b><br/>按功能/用途分类"]:::s4
+  Q --> S["<b>物理库</b><br/>实际存放场地"]:::s4
+  R --> T["<b>跨库/跨区调拨</b>"]:::s4
+  S --> T
+  T --> U["<b>实时更新库存数据</b>"]:::s4
+
+  E --> V{"<b>生产过程<br/>数据异常检测</b>"}:::dec
+  V -->|异常| W["<b>自动触发告警</b><br/>推送异常信息至<br/>业务人员核查处置"]:::s5
+
+  K --> X["<b>生产数据报表统计</b><br/>原料/加工/质检<br/>库存/发货全周期汇总"]:::s4
+
+  classDef s1 fill:#409eff,stroke:#337ecc,color:#fff,stroke-width:2px
+  classDef s2 fill:#e6fffa,stroke:#13c2c2,color:#303133,stroke-width:2px
+  classDef s3 fill:#fff7e6,stroke:#fa8c16,color:#303133,stroke-width:2px
+  classDef s3qc fill:#fffbe6,stroke:#fadb14,color:#303133,stroke-width:2px
+  classDef s4 fill:#f0f5ff,stroke:#597ef7,color:#303133,stroke-width:2px
+  classDef s5 fill:#fff1f0,stroke:#f5222d,color:#303133,stroke-width:2px
+  classDef dec fill:#f9f0ff,stroke:#722ed1,color:#303133,stroke-width:2px
+  linkStyle default stroke:#bfbfbf,stroke-width:2px
+`
+}
+
+export default {
+  name: 'FlowChart',
+  data() {
+    return {
+      loading: false,
+      activeTab: 'steelFullChain',
+      tabs: [
+        { key: 'steelFullChain', label: '生产全链路流程', icon: 'el-icon-s-operation' },
+        { key: 'afterSales', label: '售后处理流程', icon: 'el-icon-s-claim' },
+      ],
+      svgCache: {},
+    }
+  },
+  computed: {
+    currentSvg() {
+      const code = diagrams[this.activeTab]
+      if (!code) return ''
+      if (!this.svgCache[this.activeTab]) {
+        try {
+          this.svgCache[this.activeTab] = renderMermaidSVG(code, theme)
+        } catch (e) {
+          console.error('Mermaid render error:', e)
+          return '<p style="color:#f5222d;text-align:center;">流程图渲染失败: ' + e.message + '</p>'
+        }
+      }
+      return this.svgCache[this.activeTab]
+    },
+  },
+  methods: {
+    switchTab(key) {
+      this.activeTab = key
+    },
+  },
+}
+</script>
+
+<style scoped>
+.flow-page {
+  padding: 0;
+}
+
+.flow-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 8px 12px;
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.flow-tab-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 16px;
+  font-size: 13px;
+  color: #606266;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.flow-tab-item:hover {
+  color: #409eff;
+  background: rgba(64, 158, 255, 0.06);
+}
+
+.flow-tab-item.active {
+  color: #409eff;
+  background: #e6f0fd;
+}
+
+.flow-tab-item i {
+  font-size: 13px;
+}
+
+.flow-content {
+  min-height: 480px;
+  background: #fff;
+  overflow: auto;
+}
+
+.flow-diagram {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+}
+
+.flow-diagram :deep(svg) {
+  max-width: 100%;
+  height: auto;
+}
+</style>
diff --git a/klp-ui/vue.config.js b/klp-ui/vue.config.js
index 89feb2ed..8d9cb0d7 100644
--- a/klp-ui/vue.config.js
+++ b/klp-ui/vue.config.js
@@ -29,7 +29,8 @@ module.exports = {
   productionSourceMap: false,
   transpileDependencies: [
     'frappe-gantt',
-    'pdfjs-dist'
+    'pdfjs-dist',
+    'beautiful-mermaid'
   ],
   // webpack-dev-server 相关配置
   devServer: {