feat(wms): 新增仓储售后流程页面，添加beautiful-mermaid依赖
1. 新增wms售后流程可视化页面，支持生产全链路和售后处理两种流程图切换展示 2. 安装beautiful-mermaid依赖并配置到transpileDependencies中
This commit is contained in:
@@ -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",
|
||||
|
||||
206
klp-ui/src/views/wms/post/flow.vue
Normal file
206
klp-ui/src/views/wms/post/flow.vue
Normal file
@@ -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>
|
||||
@@ -29,7 +29,8 @@ module.exports = {
|
||||
productionSourceMap: false,
|
||||
transpileDependencies: [
|
||||
'frappe-gantt',
|
||||
'pdfjs-dist'
|
||||
'pdfjs-dist',
|
||||
'beautiful-mermaid'
|
||||
],
|
||||
// webpack-dev-server 相关配置
|
||||
devServer: {
|
||||
|
||||
Reference in New Issue
Block a user