feat(wms): 添加次品标签页并优化钢卷统计表格

refactor(LeftList): 移除表单包装简化对话框结构
feat(Perspective): 新增宽度分类统计组件
perf(TrimStatistics): 优化表格宽度分组和过滤逻辑

klp-ui/src/views/wms/coil/panels/Perspective/TrimStatistics.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="trim-statistics-table">
     <el-table
-      :data="tableData"
+      :data="filteredTableData"
       border
       stripe
       :span-method="objectSpanMethod"
@@ -15,7 +15,7 @@
         align="center"
       />
 
-      <!-- 冷硬卷板净边料现货库存 表头组 -->
+      <!-- 冷硬卷板净边料现货库存 独立表头组 -->
       <el-table-column
         label="冷硬卷板净边料现货库存"
         align="center"
@@ -27,18 +27,19 @@
           <el-table-column label="数量(件)" prop="trimmedTotalCount" width="80" align="center" />
           <el-table-column label="重量(吨)" prop="trimmedTotalWeight" width="80" align="center" />
         </el-table-column>
+        <!-- 净边料独立宽度列（合并后的分组） -->
         <el-table-column
-          v-for="width in widthList"
-          :key="'trimmed-' + width"
-          :label="width"
+          v-for="group in trimmedWidthGroups"
+          :key="'trimmed-' + group.key"
+          :label="group.label"
           align="center"
         >
-          <el-table-column label="数量(件)" :prop="`trimmed_${width}_count`" width="80" align="center" />
-          <el-table-column label="重量(吨)" :prop="`trimmed_${width}_weight`" width="80" align="center" />
+          <el-table-column label="数量(件)" :prop="`trimmed_${group.key}_count`" width="80" align="center" />
+          <el-table-column label="重量(吨)" :prop="`trimmed_${group.key}_weight`" width="80" align="center" />
         </el-table-column>
       </el-table-column>
 
-      <!-- 冷硬卷板毛边料现货库存 表头组 -->
+      <!-- 冷硬卷板毛边料现货库存 独立表头组 -->
       <el-table-column
         label="冷硬卷板毛边料现货库存"
         align="center"
@@ -50,14 +51,15 @@
           <el-table-column label="数量(件)" prop="untrimmedTotalCount" width="80" align="center" />
           <el-table-column label="重量(吨)" prop="untrimmedTotalWeight" width="80" align="center" />
         </el-table-column>
+        <!-- 毛边料独立宽度列（合并后的分组） -->
         <el-table-column
-          v-for="width in widthList"
-          :key="'untrimmed-' + width"
-          :label="width"
+          v-for="group in untrimmedWidthGroups"
+          :key="'untrimmed-' + group.key"
+          :label="group.label"
           align="center"
         >
-          <el-table-column label="数量(件)" :prop="`untrimmed_${width}_count`" width="80" align="center" />
-          <el-table-column label="重量(吨)" :prop="`untrimmed_${width}_weight`" width="80" align="center" />
+          <el-table-column label="数量(件)" :prop="`untrimmed_${group.key}_count`" width="80" align="center" />
+          <el-table-column label="重量(吨)" :prop="`untrimmed_${group.key}_weight`" width="80" align="center" />
         </el-table-column>
       </el-table-column>
     </el-table>
@@ -71,69 +73,202 @@ export default {
     data: {
       type: Array,
       default: () => []
+    },
+    // 可配置的宽度分组规则（支持自定义）
+    widthGroupRules: {
+      type: Object,
+      default: () => ({
+        '1000系列': ['1000', '1000~1005', '1010/1015'],
+        '1200基础系列': ['1200/1202', '1200~1215'],
+        '1218基础系列': ['1218/1220', '1218~1235', '1210/1215'],
+        '1240系列': ['1240/1252'],
+        '1225系列': ['1225/1235'],
+        '1250+系列': ['1250~1265', '1260-1265']
+      })
     }
   },
   computed: {
-    // 定义表格中需要展示的宽度规格（与图片中一致）
-    widthList() {
-      return [
-        '1000', '1200/1202', '1218/1220', '1240/1252', 
-        '1010/1015', '1210/1215', '1225/1235', '1260-1265',
-        '1000~1005', '1200~1215', '1218~1235', '1250~1265'
-      ];
+    // ========== 净边料相关计算 ==========
+    // 提取净边料所有原始宽度
+    rawTrimmedWidths() {
+      const widthSet = new Set();
+      this.data.forEach(item => {
+        item.trimmedList.forEach(trimmed => {
+          if (trimmed.width) widthSet.add(trimmed.width);
+        });
+      });
+      return Array.from(widthSet);
     },
-    // 处理后的数据（适配表格列结构）
+    // 净边料宽度分组（合并相近宽度）
+    trimmedWidthGroups() {
+      return this.generateWidthGroups(this.rawTrimmedWidths);
+    },
+
+    // ========== 毛边料相关计算 ==========
+    // 提取毛边料所有原始宽度
+    rawUntrimmedWidths() {
+      const widthSet = new Set();
+      this.data.forEach(item => {
+        item.untrimmedList.forEach(untrimmed => {
+          if (untrimmed.width) widthSet.add(untrimmed.width);
+        });
+      });
+      return Array.from(widthSet);
+    },
+    // 毛边料宽度分组（合并相近宽度）
+    untrimmedWidthGroups() {
+      return this.generateWidthGroups(this.rawUntrimmedWidths);
+    },
+
+    // 处理后的原始表格数据
     tableData() {
       return this.data.map(item => {
         const row = {
           thickness: item.thickness,
-          trimmedTotalCount: 0, // 净边料总计数量
-          trimmedTotalWeight: 0, // 净边料总计重量
-          untrimmedTotalCount: 0, // 毛边料总计数量
-          untrimmedTotalWeight: 0 // 毛边料总计重量
+          trimmedTotalCount: 0,
+          trimmedTotalWeight: 0,
+          untrimmedTotalCount: 0,
+          untrimmedTotalWeight: 0
         };
 
-        // 初始化所有宽度的数量和重量为0
-        this.widthList.forEach(width => {
-          row[`trimmed_${width}_count`] = 0;
-          row[`trimmed_${width}_weight`] = 0;
-          row[`untrimmed_${width}_count`] = 0;
-          row[`untrimmed_${width}_weight`] = 0;
+        // 初始化净边料分组数据
+        this.trimmedWidthGroups.forEach(group => {
+          row[`trimmed_${group.key}_count`] = 0;
+          row[`trimmed_${group.key}_weight`] = 0;
         });
 
-        // 处理净边料数据
+        // 初始化毛边料分组数据
+        this.untrimmedWidthGroups.forEach(group => {
+          row[`untrimmed_${group.key}_count`] = 0;
+          row[`untrimmed_${group.key}_weight`] = 0;
+        });
+
+        // 处理净边料数据（按分组求和）
         item.trimmedList.forEach(trimmed => {
-          const widthKey = trimmed.width;
-          if (this.widthList.includes(widthKey)) {
-            row[`trimmed_${widthKey}_count`] = trimmed.coilCount;
-            row[`trimmed_${widthKey}_weight`] = trimmed.totalWeight;
-            // 累加总计
-            row.trimmedTotalCount += trimmed.coilCount;
-            row.trimmedTotalWeight = (Number(row.trimmedTotalWeight) + Number(trimmed.totalWeight)).toFixed(3);
-          }
+          const width = trimmed.width;
+          const count = Number(trimmed.coilCount) || 0;
+          const weight = Number(trimmed.totalWeight) || 0;
+
+          // 找到宽度所属的分组并累加
+          this.trimmedWidthGroups.forEach(group => {
+            if (group.includesWidth(width)) {
+              row[`trimmed_${group.key}_count`] += count;
+              row[`trimmed_${group.key}_weight`] = (row[`trimmed_${group.key}_weight`] + weight).toFixed(3);
+            }
+          });
+
+          // 累加总计
+          row.trimmedTotalCount += count;
+          row.trimmedTotalWeight = (Number(row.trimmedTotalWeight) + weight).toFixed(3);
         });
 
-        // 处理毛边料数据
+        // 处理毛边料数据（按分组求和）
         item.untrimmedList.forEach(untrimmed => {
-          const widthKey = untrimmed.width;
-          if (this.widthList.includes(widthKey)) {
-            row[`untrimmed_${widthKey}_count`] = untrimmed.coilCount;
-            row[`untrimmed_${widthKey}_weight`] = untrimmed.totalWeight;
-            // 累加总计
-            row.untrimmedTotalCount += untrimmed.coilCount;
-            row.untrimmedTotalWeight = (Number(row.untrimmedTotalWeight) + Number(untrimmed.totalWeight)).toFixed(3);
-          }
+          const width = untrimmed.width;
+          const count = Number(untrimmed.coilCount) || 0;
+          const weight = Number(untrimmed.totalWeight) || 0;
+
+          // 找到宽度所属的分组并累加
+          this.untrimmedWidthGroups.forEach(group => {
+            if (group.includesWidth(width)) {
+              row[`untrimmed_${group.key}_count`] += count;
+              row[`untrimmed_${group.key}_weight`] = (row[`untrimmed_${group.key}_weight`] + weight).toFixed(3);
+            }
+          });
+
+          // 累加总计
+          row.untrimmedTotalCount += count;
+          row.untrimmedTotalWeight = (Number(row.untrimmedTotalWeight) + weight).toFixed(3);
         });
 
         return row;
       });
+    },
+
+    // 过滤掉全0的行
+    filteredTableData() {
+      return this.tableData.filter(row => {
+        let hasNonZeroData = false;
+
+        // 检查净边料总计
+        if (Number(row.trimmedTotalCount) > 0 || Number(row.trimmedTotalWeight) > 0) {
+          hasNonZeroData = true;
+        }
+
+        // 检查毛边料总计
+        if (Number(row.untrimmedTotalCount) > 0 || Number(row.untrimmedTotalWeight) > 0) {
+          hasNonZeroData = true;
+        }
+
+        // 检查净边料分组列
+        if (!hasNonZeroData) {
+          this.trimmedWidthGroups.forEach(group => {
+            if (Number(row[`trimmed_${group.key}_count`]) > 0 || Number(row[`trimmed_${group.key}_weight`]) > 0) {
+              hasNonZeroData = true;
+            }
+          });
+        }
+
+        // 检查毛边料分组列
+        if (!hasNonZeroData) {
+          this.untrimmedWidthGroups.forEach(group => {
+            if (Number(row[`untrimmed_${group.key}_count`]) > 0 || Number(row[`untrimmed_${group.key}_weight`]) > 0) {
+              hasNonZeroData = true;
+            }
+          });
+        }
+
+        return hasNonZeroData;
+      });
     }
   },
   methods: {
-    // 合并表头的跨度方法（可选，若需要合并行/列可扩展）
+    // 生成宽度分组（核心方法）
+    generateWidthGroups(rawWidths) {
+      const groups = [];
+      const usedWidths = new Set();
+
+      // 遍历分组规则，匹配原始宽度
+      Object.entries(this.widthGroupRules).forEach(([groupLabel, widthList]) => {
+        // 筛选出当前分组包含的原始宽度
+        const matchedWidths = rawWidths.filter(width => widthList.includes(width));
+        if (matchedWidths.length === 0) return;
+
+        // 创建分组对象
+        const groupKey = groupLabel.replace(/[^a-zA-Z0-9]/g, '_');
+        groups.push({
+          key: groupKey,
+          label: groupLabel,
+          widths: matchedWidths,
+          includesWidth: function(width) {
+            return this.widths.includes(width);
+          }
+        });
+
+        // 标记已使用的宽度
+        matchedWidths.forEach(width => usedWidths.add(width));
+      });
+
+      // 处理未匹配到分组的宽度（单独成组）
+      rawWidths.forEach(width => {
+        if (!usedWidths.has(width)) {
+          const groupKey = width.replace(/[^a-zA-Z0-9]/g, '_');
+          groups.push({
+            key: groupKey,
+            label: width,
+            widths: [width],
+            includesWidth: function(width) {
+              return this.widths.includes(width);
+            }
+          });
+        }
+      });
+
+      return groups;
+    },
+
+    // 合并表头的跨度方法
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-      // 可根据需求实现行/列合并逻辑，例如合并重复的厚度行
-      // 示例：若需合并相同厚度的行，可在此处返回 { rowspan: n, colspan: m }
       return { rowspan: 1, colspan: 1 };
     }
   }