修复出库详情的状态显示异常

liulijun

2026-03-27 1a2e9c7cbab7096222b0b75ada21590877db2cf0

 ÏîÄ¿´úÂë/WMS/WMSClient/src/views/Home.vue

@@ -65,10 +65,15 @@
            <div class="roadway-section">
              <h2 class="roadway-title">{{ Area.roadwayNo }} ç¬¬1巷道第1排(东面:北>南)</h2>
              <div class="row" v-for="(item, index) in locationData.row1" :key="'row1-' + index">
                <div class="location-cell" :style="{ 'background-color': GetBgColor(column) }"
                  v-for="(column, colIndex) in item.locationObj" :key="'row1-' + item.layer + '-' + colIndex"
                  @mouseenter="showTooltip(column, $event)" @mouseleave="hideTooltip">
                  {{ getRoadwayNo(column) }}-{{ column.column }}-{{ column.layer }}
                <div 
                  class="location-cell" 
                  :class="{ 'empty-cell': column.location_lock === -1 }"
                  :style="{ 'background-color': column.location_lock === -1 ? 'transparent' : GetBgColor(column) }"
                  v-for="(column, colIndex) in item.locationObj" 
                  :key="'row1-' + item.layer + '-' + colIndex"
                  @mouseenter="column.location_lock !== -1 && showTooltip(column, $event)" 
                  @mouseleave="hideTooltip">
                  <span v-if="column.location_lock !== -1">{{ getRoadwayNo(column) }}-{{ column.column }}-{{ column.layer }}</span>
                </div>
              </div>
            </div>
@@ -77,10 +82,15 @@
            <div class="roadway-section">
              <h2 class="roadway-title">{{ Area.roadwayNo }} ç¬¬1巷道第2排(西面:北>南)</h2>
              <div class="row" v-for="(item, index) in locationData.row2" :key="'row2-' + index">
                <div class="location-cell" :style="{ 'background-color': GetBgColor(column) }"
                  v-for="(column, colIndex) in item.locationObj" :key="'row2-' + item.layer + '-' + colIndex"
                  @mouseenter="showTooltip(column, $event)" @mouseleave="hideTooltip">
                  {{ getRoadwayNo(column) }}-{{ column.column }}-{{ column.layer }}
                <div 
                  class="location-cell" 
                  :class="{ 'empty-cell': column.location_lock === -1 }"
                  :style="{ 'background-color': column.location_lock === -1 ? 'transparent' : GetBgColor(column) }"
                  v-for="(column, colIndex) in item.locationObj" 
                  :key="'row2-' + item.layer + '-' + colIndex"
                  @mouseenter="column.location_lock !== -1 && showTooltip(column, $event)" 
                  @mouseleave="hideTooltip">
                  <span v-if="column.location_lock !== -1">{{ getRoadwayNo(column) }}-{{ column.column }}-{{ column.layer }}</span>
                </div>
              </div>
            </div>
@@ -97,7 +107,7 @@
              <!-- åŽŸæ–™åº“显示内容 -->
              <div v-if="Area.warehouse === '原料库'">
                <p><strong>纸卷:</strong><span>{{ currentLocation.paperRoll || "无" }}</span></p>
                <p><strong>门幅:</strong><span>{{ currentLocation.width ? currentLocation.width + "m" : "无" }}</span></p>
                <p><strong>门幅:</strong><span>{{ currentLocation.width ? currentLocation.width : "无" }}</span></p>
                <p><strong>条码:</strong><span>{{ currentLocation.barcode || "无" }}</span></p>
                <p><strong>RFID:</strong><span>{{ currentLocation.rfid || "无" }}</span></p>
              </div>
@@ -317,37 +327,71 @@
          if (x.data) {
            this.locationData = x.data;

            // å¯¹ç¬¬1排数据进行排序
            if (this.locationData.row1) {
            // ç¡®ä¿è´§ä½æŒ‰åˆ—号排序并计算最大列数，用于对齐
            const ensureColumnsAlignment = (rowData) => {
              if (!rowData || rowData.length === 0) return;
              
              // æŒ‰å±‚号从高到低排序
              this.locationData.row1.sort((a, b) => parseInt(b.layer) - parseInt(a.layer));

              // å¯¹æ¯å±‚内的货位按列号从北到南排序（01-64）
              this.locationData.row1.forEach(layer => {
              rowData.sort((a, b) => parseInt(b.layer) - parseInt(a.layer));
              
              // ç¡®å®šæœ€å¤§åˆ—数（假设是64列，从01-64）
              const maxColumns = 64;
              
              // å¤„理每层数据
              rowData.forEach(layer => {
                // å¯¹æ¯å±‚内的货位按列号从北到南排序（01-64）
                layer.locationObj.sort((a, b) => {
                  // ç¡®ä¿åˆ—号按数字顺序排列
                  const colA = parseInt(a.column);
                  const colB = parseInt(b.column);
                  return colA - colB;
                });
              });
            }

            // å¯¹ç¬¬2排数据进行同样的排序
            if (this.locationData.row2) {
              // æŒ‰å±‚号从高到低排序
              this.locationData.row2.sort((a, b) => parseInt(b.layer) - parseInt(a.layer));

              // å¯¹æ¯å±‚内的货位按列号从北到南排序（01-64）
              this.locationData.row2.forEach(layer => {
                layer.locationObj.sort((a, b) => {
                  // ç¡®ä¿åˆ—号按数字顺序排列
                  const colA = parseInt(a.column);
                  const colB = parseInt(b.column);
                  return colA - colB;
                
                // åˆ›å»ºå®Œæ•´çš„列数组
                const completeColumns = [];
                
                // å½“前已有的货位，按列号映射
                const existingLocations = {};
                layer.locationObj.forEach(loc => {
                  existingLocations[parseInt(loc.column)] = loc;
                });
                
                // éåŽ†æ‰€æœ‰å¯èƒ½çš„列号（1-64）
                for (let col = 1; col <= maxColumns; col++) {
                  if (existingLocations[col]) {
                    // å¦‚果该列有货位数据，直接使用
                    completeColumns.push(existingLocations[col]);
                  } else {
                    // å¦‚果该列没有货位数据，添加空占位符
                    completeColumns.push({
                      locationCode: `empty-${layer.row}-${String(col).padStart(2, '0')}-${layer.layer}`,
                      row: layer.row,
                      column: String(col).padStart(2, '0'),
                      layer: layer.layer,
                      location_lock: -1, // ç‰¹æ®Šæ ‡è®°ï¼Œç”¨äºŽè¡¨ç¤ºç©ºå ä½ç¬¦
                      paperRoll: '',
                      productName: '',
                      width: 0,
                      quantity: 0,
                      barcode: '',
                      rfid: '',
                      rfidCode: '',
                      inDate: null,
                      warehouseId: layer.warehouseId || 0
                    });
                  }
                }
                
                // æ›´æ–°è¯¥å±‚的货位数据为完整列
                layer.locationObj = completeColumns;
              });
            }
            };
            
            // å¤„理第1排数据
            ensureColumnsAlignment(this.locationData.row1);
            
            // å¤„理第2排数据
            ensureColumnsAlignment(this.locationData.row2);
          }

          // æå–所有货位编号
@@ -667,12 +711,13 @@
  margin-bottom: 8px;
  cursor: pointer;
  flex-wrap: nowrap;
  width: 100%;
  min-width: max-content;
}

.location-cell {
  width: 120px;
  flex: 0 0 120px;
  height: 50px;
  margin: 5px;
  text-align: center;
  font-size: 16px;
  border-radius: 4px;
@@ -680,6 +725,34 @@
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  margin: 0 5px;
}

/* ç©ºå ä½ç¬¦æ ·å¼ */
.location-cell.empty-cell {
  background-color: transparent;
  border: none;
  box-shadow: none;
  cursor: default;
}

/* æ·»åŠ è´§ä½ç½‘格容器样式，确保所有行对齐 */
.roadway-section {
  overflow-x: auto;
  overflow-y: hidden;
}

.location-cell {
  width: 120px;
  height: 50px;
  text-align: center;
  font-size: 16px;
  border-radius: 4px;
  line-height: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  margin: 0;
}

/* å··é“区域样式 */