feat(报表): 添加钢卷表格行高亮功能以标记共用卷

在分条线报表中,产出钢卷和投入钢卷可能存在共用卷的情况。添加高亮功能以便直观区分这些共用卷:
1. 在day.vue中计算共用卷ID列表
2. 在coilTable组件中实现行高亮逻辑和样式
This commit is contained in:
砂糖
2026-04-13 14:37:23 +08:00
parent 116d79e7c2
commit 5ee730bffa
2 changed files with 78 additions and 3 deletions

View File

@@ -101,10 +101,10 @@
</el-descriptions>
<el-tabs v-model="activeTab">
<el-tab-pane label="产出钢卷" name="output">
<coil-table :columns="outputColumns" :data="list"></coil-table>
<coil-table :columns="outputColumns" :data="list" :highlight-config="{ rows: commonCoilIds }"></coil-table>
</el-tab-pane>
<el-tab-pane label="投入钢卷" name="loss">
<coil-table :columns="lossColumns" :data="lossList"></coil-table>
<coil-table :columns="lossColumns" :data="lossList" :highlight-config="{ rows: commonCoilIds }"></coil-table>
</el-tab-pane>
</el-tabs>
@@ -243,6 +243,27 @@ export default {
mSummary() {
return calcMSummary(this.list, this.lossList)
},
// 找出list和lossList中id相同的卷
commonCoilIds() {
if (this.productionLine !== '分条线') {
return []
}
// 获取list中的coilId集合
const outputCoilIds = new Set(this.list.map(item => item.coilId))
// 获取lossList中的coilId集合
const lossCoilIds = new Set(this.lossList.map(item => item.coilId))
// 找出两个集合中相同的coilId
const commonIds = []
outputCoilIds.forEach(id => {
if (lossCoilIds.has(id)) {
commonIds.push(id)
}
})
return commonIds
},
},
methods: {
// 加载列设置