feat(wms): 新增多项功能并优化标签展示逻辑
1. 异常管理页面默认显示继承按钮,新增继承弹窗传参 2. 多标签页优化订货单位展示:移除"有限公司"后缀并自适应字体大小 3. 基础面板新增备注查询条件和表格列展示 4. 流程页面新增节点点击交互和悬停效果
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user