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

在分条线报表中，产出钢卷和投入钢卷可能存在共用卷的情况。添加高亮功能以便直观区分这些共用卷：
1. 在day.vue中计算共用卷ID列表
2. 在coilTable组件中实现行高亮逻辑和样式

klp-ui/src/views/wms/report/components/coilTable/index.vue

@@ -24,7 +24,7 @@
         @current-change="handleCurrentChange" />
     </div>
 
-    <el-table :data="tableData" style="width: 100%" height="calc(100vh - 320px)" border>
+    <el-table :data="tableData" style="width: 100%" height="calc(100vh - 320px)" border row-key="coilId" :row-class-name="getRowClassName">
       <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.title"
         :width="column.width" :align="column.align">
         <template slot-scope="scope">
@@ -93,6 +93,18 @@ export default {
       type: Array,
       default: () => [],
     },
+    // 高亮配置
+    highlightConfig: {
+      type: Object,
+      default: () => ({
+        // 需要高亮的行的条件函数或行ID数组
+        rows: [],
+        // 高亮样式类名
+        className: 'highlight-row',
+        // 自定义高亮样式
+        style: {}
+      })
+    }
   },
   dicts: ['coil_quality_status', 'coil_abnormal_code', 'coil_abnormal_degree'],
   data() {
@@ -235,6 +247,43 @@ export default {
       }).finally(() => {
         this.abmornal.loading = false
       })
+    },
+    // 获取行类名
+    getRowClassName({ row, rowIndex }) {
+      const { rows } = this.highlightConfig
+      if (!rows || (Array.isArray(rows) && rows.length === 0)) {
+        return ''
+      }
+      
+      // 检查是否需要高亮
+      let shouldHighlight = false
+      if (typeof rows === 'function') {
+        // 如果是函数，调用函数判断
+        shouldHighlight = rows(row, rowIndex)
+      } else if (Array.isArray(rows)) {
+        // 如果是数组，检查row.coilId是否在数组中
+        shouldHighlight = rows.includes(row.coilId)
+        console.log('判断是否应该高亮', shouldHighlight, rows, row.coilId)
+      }
+      
+      return shouldHighlight ? 'warning-row' : ''
+    },
+    // 获取行样式
+    getRowStyle({ row, rowIndex }) {
+      const { rows, style } = this.highlightConfig
+      if (!rows || (Array.isArray(rows) && rows.length === 0)) {
+        return {}
+      }
+      
+      // 检查是否需要高亮
+      let shouldHighlight = false
+      if (typeof rows === 'function') {
+        shouldHighlight = rows(row, rowIndex)
+      } else if (Array.isArray(rows)) {
+        shouldHighlight = rows.includes(row.coilId)
+      }
+      
+      return shouldHighlight ? style : {}
     }
   }
 }
@@ -276,4 +325,9 @@ export default {
     width: 100%;
   }
 }
+
+/* 行高亮样式 */
+::v-deep .el-table__row.warning-row {
+  background: oldlace !important;
+}
 </style>

klp-ui/src/views/wms/report/template/day.vue

@@ -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: {
     // 加载列设置