feat(wms): 新增多项功能并优化标签展示逻辑

1. 异常管理页面默认显示继承按钮,新增继承弹窗传参
2. 多标签页优化订货单位展示:移除"有限公司"后缀并自适应字体大小
3. 基础面板新增备注查询条件和表格列展示
4. 流程页面新增节点点击交互和悬停效果
This commit is contained in:
2026-06-19 12:30:18 +08:00
parent d0afe5eaaf
commit c8c2523fe7
6 changed files with 79 additions and 23 deletions

View File

@@ -14,7 +14,7 @@
</div>
<div v-loading="loading" class="flow-content">
<div class="flow-diagram" v-html="currentSvg"></div>
<div ref="diagram" class="flow-diagram" v-html="currentSvg" @click="onNodeClick"></div>
</div>
</div>
</template>
@@ -120,8 +120,16 @@ export default {
{ key: 'afterSales', label: '售后处理流程', icon: 'el-icon-s-claim' },
],
svgCache: {},
selectedNode: null,
}
},
watch: {
currentSvg() {
this.$nextTick(() => {
this.bindNodeEvents()
})
},
},
computed: {
currentSvg() {
const code = diagrams[this.activeTab]
@@ -140,6 +148,38 @@ export default {
methods: {
switchTab(key) {
this.activeTab = key
this.selectedNode = null
},
bindNodeEvents() {
const el = this.$refs.diagram
if (!el) return
const svg = el.querySelector('svg')
if (!svg) return
const groups = svg.querySelectorAll('g:not([class*="edge"])')
groups.forEach(g => {
const hasRect = g.querySelector('rect, path, ellipse, polygon')
const text = g.querySelector('text, span')
if (hasRect && text) {
g.style.cursor = 'pointer'
}
})
},
onNodeClick(e) {
let target = e.target
while (target && target !== e.currentTarget) {
if (target.tagName === 'g') {
const textEl = target.querySelector('text, span')
if (textEl) {
const label = textEl.textContent.replace(/\s+/g, ' ').trim()
if (label) {
this.selectedNode = label
this.$message({ message: label, type: 'info', duration: 1500 })
return
}
}
}
target = target.parentElement
}
},
},
}
@@ -203,4 +243,12 @@ export default {
max-width: 100%;
height: auto;
}
.flow-diagram :deep(svg g) {
transition: opacity 0.15s ease;
}
.flow-diagram :deep(svg g:hover) {
opacity: 0.8;
}
</style>