refactor(wms/coil/trace): 重构钢卷追溯页面布局与数据逻辑

将原单列表格拆分为当前/已发货/历史/未入库四栏2x2网格布局，并行请求四类钢卷数据优化加载效率，简化搜索和重置逻辑

klp-ui/src/views/wms/coil/do/trace.vue

@@ -29,45 +29,138 @@
 
     <!-- 搜索结果区域 -->
     <div v-else>
-      <!-- 上部：钢卷信息 -->
+      <!-- 2×2 钢卷信息 -->
-      <div class="section-card material-section mb20">
+      <div class="two-by-two-layout mb20">
-        <div class="section-header">
+        <!-- 当前钢卷 -->
-          <h3 class="section-title">钢卷信息</h3>
+        <div class="coil-column">
+          <div class="column-header column-header--now">
+            <h4 class="column-title">当前钢卷</h4>
+            <span class="column-count">{{ nowCoilList.length }}</span>
+          </div>
+          <div v-loading="nowLoading" class="column-body">
+            <template v-if="nowCoilList.length > 0">
+              <KLPTable :data="nowCoilList" :max-height="280" :float-layer="true"
+                :float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
+                <el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <current-coil-no :current-coil-no="scope.row.currentCoilNo" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
+                <el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
+                <el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
+                <el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
+                <el-table-column label="操作" width="80">
+                  <template slot-scope="scope">
+                    <el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
+                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
+                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
+                    <el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
+                  </template>
+                </el-table-column>
+              </KLPTable>
+            </template>
+            <div v-else class="column-empty">暂无数据</div>
+          </div>
         </div>
 
-        <!-- 钢卷信息卡片 -->
+        <!-- 已发货钢卷 -->
-        <div v-loading="materialLoading">
+        <div class="coil-column">
-          <KLPTable :data="materialCoilList" height="calc(100vh - 340px)" :floatLayer="true"
+          <div class="column-header column-header--trans">
-            :floatLayerConfig="floatLayerConfig" :row-style="getRowStyle">
+            <h4 class="column-title">已发货钢卷</h4>
-            <el-table-column prop="status" label="钢卷状态" width="100" show-overflow-tooltip>
+            <span class="column-count">{{ transCoilList.length }}</span>
-              <template slot-scope="scope">
+          </div>
-                <el-tag size="small" :style="getBorderStyle(scope.row)">{{ getTypeLabel(scope.row) }}</el-tag>
+          <div v-loading="transLoading" class="column-body">
-              </template>
+            <template v-if="transCoilList.length > 0">
-            </el-table-column>
+              <KLPTable :data="transCoilList" :max-height="280" :float-layer="true"
-            <el-table-column prop="currentCoilNo" label="当前钢卷号">
+                :float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
-              <template slot-scope="scope">
+                <el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
-                <current-coil-no :current-coil-no="scope.row.currentCoilNo" />
+                  <template slot-scope="scope">
-              </template>
+                    <current-coil-no :current-coil-no="scope.row.currentCoilNo" />
-            </el-table-column>
+                  </template>
-            <el-table-column prop="enterCoilNo" label="入场钢卷号" show-overflow-tooltip></el-table-column>
+                </el-table-column>
-            <el-table-column prop="supplierCoilNo" label="厂家卷号" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
-            <el-table-column prop="warehouseName" label="逻辑库区" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
-            <el-table-column prop="specification" label="规格" width="100" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
-            <el-table-column prop="netWeight" label="净重" width="100" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
+                <el-table-column label="操作" width="80">
+                  <template slot-scope="scope">
+                    <el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
+                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
+                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
+                    <el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
+                  </template>
+                </el-table-column>
+              </KLPTable>
+            </template>
+            <div v-else class="column-empty">暂无数据</div>
+          </div>
+        </div>
 
-            <el-table-column prop="action" label="操作" width="460">
+        <!-- 历史钢卷 -->
-              <template slot-scope="scope">
+        <div class="coil-column">
-                <el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="default"
+          <div class="column-header column-header--history">
-                  size="mini" icon="el-icon-view" @click="handlePreviewLabel(scope.row)" title="预览标签">预览</el-button>
+            <h4 class="column-title">历史钢卷</h4>
-                <el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="default"
+            <span class="column-count">{{ historyCoilList.length }}</span>
-                  size="mini" icon="el-icon-printer" @click="handlePrintLabel(scope.row)" title="打印标签">打印</el-button>
+          </div>
-                <el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="default"
+          <div v-loading="historyLoading" class="column-body">
-                  size="mini" icon="el-icon-printer" @click="handleNumberCoilClick(scope.row)" title="数字钢卷">数字钢卷</el-button>
+            <template v-if="historyCoilList.length > 0">
-                <el-button type="warning" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)"
+              <KLPTable :data="historyCoilList" :max-height="280" :float-layer="true"
-                  :loading="scope.row.picking" class="action-btn">追溯</el-button>
+                :float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
-              </template>
+                <el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
-            </el-table-column>
+                  <template slot-scope="scope">
-          </KLPTable>
+                    <current-coil-no :current-coil-no="scope.row.currentCoilNo" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
+                <el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
+                <el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
+                <el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
+                <el-table-column label="操作" width="80">
+                  <template slot-scope="scope">
+                    <el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
+                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
+                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
+                    <el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
+                  </template>
+                </el-table-column>
+              </KLPTable>
+            </template>
+            <div v-else class="column-empty">暂无数据</div>
+          </div>
+        </div>
+
+        <!-- 未入库钢卷 -->
+        <div class="coil-column">
+          <div class="column-header column-header--unIn">
+            <h4 class="column-title">未入库钢卷</h4>
+            <span class="column-count">{{ unInCoilList.length }}</span>
+          </div>
+          <div v-loading="unInLoading" class="column-body">
+            <template v-if="unInCoilList.length > 0">
+              <KLPTable :data="unInCoilList" max-height="280" :float-layer="true"
+                :float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
+                <el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <current-coil-no :current-coil-no="scope.row.currentCoilNo" />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
+                <el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
+                <el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
+                <el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
+                <el-table-column label="操作" width="80">
+                  <template slot-scope="scope">
+                    <el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
+                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
+                    <el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
+                    <el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
+                  </template>
+                </el-table-column>
+              </KLPTable>
+            </template>
+            <div v-else class="column-empty">暂无数据</div>
+          </div>
         </div>
       </div>
 
@@ -128,13 +221,6 @@
 
             <el-table-column label="操作状态" align="center" prop="actionStatus" width="120">
               <template slot-scope="scope">
-                <!-- <el-select v-model="scope.row.actionStatus" placeholder="请选择操作状态"
-                  @change="handleStatusChange(scope.row)">
-                  <el-option label="待处理" :value="0" />
-                  <el-option label="处理中" :value="1" />
-                  <el-option label="已完成" :value="2" />
-                  <el-option label="已取消" :value="3" />
-                </el-select> -->
                 <el-tag v-if="scope.row.actionStatus === 0" type="info" size="mini">待处理</el-tag>
                 <el-tag v-else-if="scope.row.actionStatus === 1" type="warning" size="mini">处理中</el-tag>
                 <el-tag v-else-if="scope.row.actionStatus === 2" type="success" size="mini">已完成</el-tag>
@@ -475,13 +561,17 @@ export default {
       searched: false,
 
       // 钢卷类型
-      coilType: 'all',
+      nowCoilList: [],
+      transCoilList: [],
+      historyCoilList: [],
+      unInCoilList: [],
+      nowLoading: false,
+      transLoading: false,
+      historyLoading: false,
+      unInLoading: false,
       title: '钢卷信息修正',
 
       // 物料列表相关
-      materialLoading: false,
-      materialCoilList: [],
-      materialTotal: 0,
       materialQueryParams: {
         pageNum: 1,
         pageSize: 20,
@@ -807,37 +897,48 @@ export default {
     },
 
     // ========== 物料列表相关方法 ==========
-    /** 查询物料列表 */
+    /** 查询物料列表（四栏并行） */
     getMaterialCoil() {
-      this.materialLoading = true
+      this.nowLoading = true;
-      const payload = { ...this.materialQueryParams }
+      this.transLoading = true;
-      if (this.coilType == 'now') {
+      this.historyLoading = true;
-        payload.dataType = 1;
+      this.unInLoading = true;
-        payload.status = 0;
-      } else if (this.coilType == 'history') {
-        payload.dataType = 0;
-      } else if (this.coilType == 'trans') {
-        payload.status = 1;
-      } else if (this.coilType == 'unIn') {
-        payload.dataType = 10;
-      }
-      listMaterialCoil(payload).then(response => {
-        this.materialCoilList = response.rows || []
-        this.materialTotal = response.total || 0
-        this.materialLoading = false
 
-        // 如果有钢卷数据，自动获取第一个钢卷的操作记录
+      const basePayload = { ...this.materialQueryParams };
-        if (this.materialCoilList.length > 0) {
+
-          this.coilIds = this.materialCoilList.map(item => item.coilId).join(',');
+      const fetchNow = listMaterialCoil({ ...basePayload, dataType: 1, status: 0 });
+      const fetchTrans = listMaterialCoil({ ...basePayload, status: 1 });
+      const fetchHistory = listMaterialCoil({ ...basePayload, dataType: 0 });
+      const fetchUnIn = listMaterialCoil({ ...basePayload, dataType: 10 });
+
+      Promise.all([fetchNow, fetchTrans, fetchHistory, fetchUnIn]).then(([nowRes, transRes, historyRes, unInRes]) => {
+        this.nowCoilList = nowRes.rows || [];
+        this.transCoilList = transRes.rows || [];
+        this.historyCoilList = historyRes.rows || [];
+        this.unInCoilList = unInRes.rows || [];
+
+        // 合并所有钢卷ID用于操作记录查询
+        const allIds = [
+          ...this.nowCoilList,
+          ...this.transCoilList,
+          ...this.historyCoilList,
+          ...this.unInCoilList,
+        ].map(item => item.coilId);
+        this.coilIds = allIds.join(',');
+        if (allIds.length > 0) {
           this.getActionList();
         } else {
-          // 清空操作记录
           this.actionList = [];
           this.actionTotal = 0;
         }
       }).catch(() => {
-        this.materialLoading = false
+        // 单个请求失败不影响其他栏
-      })
+      }).finally(() => {
+        this.nowLoading = false;
+        this.transLoading = false;
+        this.historyLoading = false;
+        this.unInLoading = false;
+      });
     },
 
     /** 物料搜索 */
@@ -851,12 +952,6 @@ export default {
       this.materialQueryParams.pageNum = 1;
       this.searched = true;
       this.getMaterialCoil();
-
-      // 同时获取操作记录
-      // if (this.materialCoilList.length > 0) {
-      //   this.currentCoilId = this.materialCoilList[0].coilId;
-      //   this.getActionList();
-      // }
     },
 
     /** 重置物料搜索 */
@@ -865,8 +960,12 @@ export default {
       this.materialQueryParams.enterCoilNo = null;
       this.materialQueryParams.currentCoilNo = null;
       this.searched = false;
-      this.materialCoilList = [];
+      this.nowCoilList = [];
+      this.transCoilList = [];
+      this.historyCoilList = [];
+      this.unInCoilList = [];
       this.actionList = [];
+      this.actionTotal = 0;
     },
 
     /** 回滚操作 */
@@ -1223,6 +1322,76 @@ export default {
   }
 }
 
+// 2×2 布局
+.two-by-two-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.coil-column {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  height: 420px;
+  overflow: hidden;
+}
+
+.column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  border-bottom: 2px solid #e4e7ed;
+
+  &--now {
+    border-bottom-color: #67c23a;
+    .column-title { color: #67c23a; }
+  }
+  &--trans {
+    border-bottom-color: #409eff;
+    .column-title { color: #409eff; }
+  }
+  &--history {
+    border-bottom-color: #909399;
+    .column-title { color: #909399; }
+  }
+  &--unIn {
+    border-bottom-color: #e6a23c;
+    .column-title { color: #e6a23c; }
+  }
+}
+
+.column-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.column-count {
+  font-size: 12px;
+  color: #909399;
+  background: #f5f7fa;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.column-body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.column-empty {
+  text-align: center;
+  padding: 40px 12px;
+  color: #c0c4cc;
+  font-size: 13px;
+}
+
 // 未搜索状态
 .empty-search-state {
   background-color: #ffffff;
@@ -1276,16 +1445,6 @@ export default {
   color: #909399;
 }
 
-.material-section {
-  .section-header {
-    border-bottom-color: #409eff;
-  }
-
-  .section-title {
-    color: #409eff;
-  }
-}
-
 .action-section {
   .section-header {
     border-bottom-color: #67c23a;
@@ -1607,4 +1766,8 @@ export default {
   max-height: 600px;
   overflow-y: auto;
 }
+
+.el-table .el-button + .el-button {
+  margin-left: 0px;
+}
 </style>

klp-ui/src/views/wms/report/components/setting/columns.vue

@@ -189,7 +189,9 @@ export default {
         { label: '合同号', value: 'contractNo' },
         
         { label: '原料材质', value: 'packingStatus' },
-        { label: '原料厚度', value: 'rawMaterialThickness' }
+        { label: '原料厚度', value: 'rawMaterialThickness' },
+
+        { label: '工序卷号', value: 'chromePlateCoilNo' }
       ],
     }
   },