feat(报表): 添加钢卷表格行高亮功能以标记共用卷
在分条线报表中,产出钢卷和投入钢卷可能存在共用卷的情况。添加高亮功能以便直观区分这些共用卷: 1. 在day.vue中计算共用卷ID列表 2. 在coilTable组件中实现行高亮逻辑和样式
This commit is contained in:
@@ -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: {
|
||||
// 加载列设置
|
||||
|
||||
Reference in New Issue
Block a user