1宫格

src/views/modules/automatedWarehouse/palletAssembly.vue

@@ -287,20 +287,21 @@
             </label>
             <div class="position-grid" :class="[
               {'position-grid-loading': positionGridLoading},
-              positionGrid.length === 4 ? 'position-grid-4' : 'position-grid-9'
+              getPositionGridClass
             ]">
               <div
-                v-for="(item, index) in positionGrid"
+                v-for="(item, index) in displayPositionGrid"
                 :key="index"
                 class="position-item"
                 :class="{
                   'position-disabled': positionGridLoading || !availablePositions.includes(item.position),
                   'position-selected': currentSelectedPosition === item.position,
-                  'position-loading': positionGridLoading
+                  'position-loading': positionGridLoading,
+                  'position-placeholder': item.isPlaceholder
                 }"
                 @click="handlePositionClick(item.position)"
               >
-                {{ item.position }}({{ item.count }})
+                <template v-if="!item.isPlaceholder">{{ item.position }}({{ item.count }})</template>
               </div>
             </div>
           </div>
@@ -572,6 +573,33 @@ export default {
       completeAssemblyLoading: false,    // 完成组托按钮
     };
   },
+  computed: {
+    // 获取位置网格的CSS类 - rqrq
+    getPositionGridClass() {
+      const len = this.positionGrid.length;
+      if (len === 1) return 'position-grid-1';
+      if (len === 2) return 'position-grid-4'; // 2宫格用4宫格布局
+      if (len === 4) return 'position-grid-4';
+      return 'position-grid-9';
+    },
+    // 生成显示用的位置网格（处理2宫格斜对角显示）- rqrq
+    displayPositionGrid() {
+      const len = this.positionGrid.length;
+      // 2宫格特殊处理：用4宫格布局，1在左上(索引0)，2在右下(索引3) - rqrq
+      if (len === 2) {
+        const pos1 = this.positionGrid.find(p => p.position === '1') || { position: '1', count: 0 };
+        const pos2 = this.positionGrid.find(p => p.position === '2') || { position: '2', count: 0 };
+        return [
+          { ...pos1, isPlaceholder: false },           // 左上 - 位置1
+          { position: '', count: 0, isPlaceholder: true },  // 右上 - 占位
+          { position: '', count: 0, isPlaceholder: true },  // 左下 - 占位
+          { ...pos2, isPlaceholder: false }            // 右下 - 位置2
+        ];
+      }
+      // 1宫格、4宫格、9宫格直接返回
+      return this.positionGrid.map(p => ({ ...p, isPlaceholder: false }));
+    }
+  },
   methods: {
     // 返回上一页 - rqrq
     handleBack() {
@@ -1757,7 +1785,14 @@ export default {
   position: relative;
 }
 
-/* 4宫格：2行2列，按列排列（1,2 | 3,4） - rqrq */
+/* 1宫格：单个居中 - rqrq */
+.position-grid.position-grid-1 {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+/* 4宫格：2行2列，按列排列（1,2 | 3,4）- rqrq */
+/* 2宫格也使用此布局，只是1在左上，2在右下 - rqrq */
 .position-grid.position-grid-4 {
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
@@ -1771,6 +1806,15 @@ export default {
   grid-auto-flow: row;
 }
 
+/* 2宫格占位格子样式（灰色不可选）- rqrq */
+.position-item.position-placeholder {
+  background-color: #f0f0f0 !important;
+  border: 1px dashed #d0d0d0 !important;
+  color: transparent !important;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
 /* 加载中的遮罩效果 - rqrq */
 .position-grid.position-grid-loading {
   opacity: 0.7;

src/views/modules/automatedWarehouse/palletPacking.vue

@@ -285,20 +285,21 @@
             </label>
             <div class="position-grid" :class="[
               {'position-grid-loading': positionGridLoading},
-              positionGrid.length === 4 ? 'position-grid-4' : 'position-grid-9'
+              getPositionGridClass
             ]">
               <div
-                v-for="(item, index) in positionGrid"
+                v-for="(item, index) in displayPositionGrid"
                 :key="index"
                 class="position-item"
                 :class="{
                   'position-disabled': positionGridLoading || !availablePositions.includes(item.position),
                   'position-selected': currentSelectedPosition === item.position,
-                  'position-loading': positionGridLoading
+                  'position-loading': positionGridLoading,
+                  'position-placeholder': item.isPlaceholder
                 }"
                 @click="handlePositionClick(item.position)"
               >
-                {{ item.position }}({{ item.count }})
+                <template v-if="!item.isPlaceholder">{{ item.position }}({{ item.count }})</template>
               </div>
             </div>
           </div>
@@ -643,6 +644,33 @@ export default {
       callPalletLoading: false,          // Call栈板按钮
     };
   },
+  computed: {
+    // 获取位置网格的CSS类 - rqrq
+    getPositionGridClass() {
+      const len = this.positionGrid.length;
+      if (len === 1) return 'position-grid-1';
+      if (len === 2) return 'position-grid-4'; // 2宫格用4宫格布局
+      if (len === 4) return 'position-grid-4';
+      return 'position-grid-9';
+    },
+    // 生成显示用的位置网格（处理2宫格斜对角显示）- rqrq
+    displayPositionGrid() {
+      const len = this.positionGrid.length;
+      // 2宫格特殊处理：用4宫格布局，1在左上(索引0)，2在右下(索引3) - rqrq
+      if (len === 2) {
+        const pos1 = this.positionGrid.find(p => p.position === '1') || { position: '1', count: 0 };
+        const pos2 = this.positionGrid.find(p => p.position === '2') || { position: '2', count: 0 };
+        return [
+          { ...pos1, isPlaceholder: false },           // 左上 - 位置1
+          { position: '', count: 0, isPlaceholder: true },  // 右上 - 占位
+          { position: '', count: 0, isPlaceholder: true },  // 左下 - 占位
+          { ...pos2, isPlaceholder: false }            // 右下 - 位置2
+        ];
+      }
+      // 1宫格、4宫格、9宫格直接返回
+      return this.positionGrid.map(p => ({ ...p, isPlaceholder: false }));
+    }
+  },
   methods: {
     // 返回上一页 - rqrq
     handleBack() {
@@ -1898,7 +1926,14 @@ export default {
   position: relative;
 }
 
-/* 4宫格：2行2列，按列排列（1,2 | 3,4） - rqrq */
+/* 1宫格：单个居中 - rqrq */
+.position-grid.position-grid-1 {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+/* 4宫格：2行2列，按列排列（1,2 | 3,4）- rqrq */
+/* 2宫格也使用此布局，只是1在左上，2在右下 - rqrq */
 .position-grid.position-grid-4 {
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
@@ -1912,6 +1947,15 @@ export default {
   grid-auto-flow: row;
 }
 
+/* 2宫格占位格子样式（灰色不可选）- rqrq */
+.position-item.position-placeholder {
+  background-color: #f0f0f0 !important;
+  border: 1px dashed #d0d0d0 !important;
+  color: transparent !important;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
 /* 加载中的遮罩效果 - rqrq */
 .position-grid.position-grid-loading {
   opacity: 0.7;

src/views/modules/automatedWarehouse/palletSorting.vue

@@ -246,20 +246,21 @@
             </label>
             <div class="position-grid" :class="[
               {'position-grid-loading': positionGridLoading},
-              positionGrid.length === 4 ? 'position-grid-4' : 'position-grid-9'
+              getPositionGridClass
             ]">
               <div
-                v-for="(item, index) in positionGrid"
+                v-for="(item, index) in displayPositionGrid"
                 :key="index"
                 class="position-item"
                 :class="{
                   'position-disabled': positionGridLoading || !availablePositions.includes(item.position),
                   'position-selected': currentSelectedPosition === item.position,
-                  'position-loading': positionGridLoading
+                  'position-loading': positionGridLoading,
+                  'position-placeholder': item.isPlaceholder
                 }"
                 @click="handlePositionClick(item.position)"
               >
-                {{ item.position }}({{ item.count }})
+                <template v-if="!item.isPlaceholder">{{ item.position }}({{ item.count }})</template>
               </div>
             </div>
           </div>
@@ -507,6 +508,33 @@ export default {
       sortingList: [],
     };
   },
+  computed: {
+    // 获取位置网格的CSS类 - rqrq
+    getPositionGridClass() {
+      const len = this.positionGrid.length;
+      if (len === 1) return 'position-grid-1';
+      if (len === 2) return 'position-grid-4'; // 2宫格用4宫格布局
+      if (len === 4) return 'position-grid-4';
+      return 'position-grid-9';
+    },
+    // 生成显示用的位置网格（处理2宫格斜对角显示）- rqrq
+    displayPositionGrid() {
+      const len = this.positionGrid.length;
+      // 2宫格特殊处理：用4宫格布局，1在左上(索引0)，2在右下(索引3) - rqrq
+      if (len === 2) {
+        const pos1 = this.positionGrid.find(p => p.position === '1') || { position: '1', count: 0 };
+        const pos2 = this.positionGrid.find(p => p.position === '2') || { position: '2', count: 0 };
+        return [
+          { ...pos1, isPlaceholder: false },           // 左上 - 位置1
+          { position: '', count: 0, isPlaceholder: true },  // 右上 - 占位
+          { position: '', count: 0, isPlaceholder: true },  // 左下 - 占位
+          { ...pos2, isPlaceholder: false }            // 右下 - 位置2
+        ];
+      }
+      // 1宫格、4宫格、9宫格直接返回
+      return this.positionGrid.map(p => ({ ...p, isPlaceholder: false }));
+    }
+  },
   methods: {
     // 返回上一页 - rqrq
     handleBack() {
@@ -1830,7 +1858,14 @@ export default {
   position: relative;
 }
 
-/* 4宫格：2行2列，按列排列（1,2 | 3,4） - rqrq */
+/* 1宫格：单个居中 - rqrq */
+.position-grid.position-grid-1 {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+/* 4宫格：2行2列，按列排列（1,2 | 3,4）- rqrq */
+/* 2宫格也使用此布局，只是1在左上，2在右下 - rqrq */
 .position-grid.position-grid-4 {
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
@@ -1844,6 +1879,15 @@ export default {
   grid-auto-flow: row;
 }
 
+/* 2宫格占位格子样式（灰色不可选）- rqrq */
+.position-item.position-placeholder {
+  background-color: #f0f0f0 !important;
+  border: 1px dashed #d0d0d0 !important;
+  color: transparent !important;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
 /* 加载中的遮罩效果 - rqrq */
 .position-grid.position-grid-loading {
   opacity: 0.7;

src/views/modules/automatedWarehouse/palletSortingNoAgv.vue

@@ -246,20 +246,21 @@
             </label>
             <div class="position-grid" :class="[
               {'position-grid-loading': positionGridLoading},
-              positionGrid.length === 4 ? 'position-grid-4' : 'position-grid-9'
+              getPositionGridClass
             ]">
               <div
-                v-for="(item, index) in positionGrid"
+                v-for="(item, index) in displayPositionGrid"
                 :key="index"
                 class="position-item"
                 :class="{
                   'position-disabled': positionGridLoading || !availablePositions.includes(item.position),
                   'position-selected': currentSelectedPosition === item.position,
-                  'position-loading': positionGridLoading
+                  'position-loading': positionGridLoading,
+                  'position-placeholder': item.isPlaceholder
                 }"
                 @click="handlePositionClick(item.position)"
               >
-                {{ item.position }}({{ item.count }})
+                <template v-if="!item.isPlaceholder">{{ item.position }}({{ item.count }})</template>
               </div>
             </div>
           </div>
@@ -507,6 +508,33 @@ export default {
       sortingList: [],
     };
   },
+  computed: {
+    // 获取位置网格的CSS类 - rqrq
+    getPositionGridClass() {
+      const len = this.positionGrid.length;
+      if (len === 1) return 'position-grid-1';
+      if (len === 2) return 'position-grid-4'; // 2宫格用4宫格布局
+      if (len === 4) return 'position-grid-4';
+      return 'position-grid-9';
+    },
+    // 生成显示用的位置网格（处理2宫格斜对角显示）- rqrq
+    displayPositionGrid() {
+      const len = this.positionGrid.length;
+      // 2宫格特殊处理：用4宫格布局，1在左上(索引0)，2在右下(索引3) - rqrq
+      if (len === 2) {
+        const pos1 = this.positionGrid.find(p => p.position === '1') || { position: '1', count: 0 };
+        const pos2 = this.positionGrid.find(p => p.position === '2') || { position: '2', count: 0 };
+        return [
+          { ...pos1, isPlaceholder: false },           // 左上 - 位置1
+          { position: '', count: 0, isPlaceholder: true },  // 右上 - 占位
+          { position: '', count: 0, isPlaceholder: true },  // 左下 - 占位
+          { ...pos2, isPlaceholder: false }            // 右下 - 位置2
+        ];
+      }
+      // 1宫格、4宫格、9宫格直接返回
+      return this.positionGrid.map(p => ({ ...p, isPlaceholder: false }));
+    }
+  },
   methods: {
     // 返回上一页 - rqrq
     handleBack() {
@@ -1830,7 +1858,14 @@ export default {
   position: relative;
 }
 
-/* 4宫格：2行2列，按列排列（1,2 | 3,4） - rqrq */
+/* 1宫格：单个居中 - rqrq */
+.position-grid.position-grid-1 {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+/* 4宫格：2行2列，按列排列（1,2 | 3,4）- rqrq */
+/* 2宫格也使用此布局，只是1在左上，2在右下 - rqrq */
 .position-grid.position-grid-4 {
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
@@ -1844,6 +1879,15 @@ export default {
   grid-auto-flow: row;
 }
 
+/* 2宫格占位格子样式（灰色不可选）- rqrq */
+.position-item.position-placeholder {
+  background-color: #f0f0f0 !important;
+  border: 1px dashed #d0d0d0 !important;
+  color: transparent !important;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
 /* 加载中的遮罩效果 - rqrq */
 .position-grid.position-grid-loading {
   opacity: 0.7;