feat: 区分托盘库存物料颜色

nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/stockingivt/modules/pallet-inventory.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+
 import type { LmsStockingIvtApi } from '#/api/lms/stockingivt';
 
 import { computed, ref } from 'vue';
@@ -21,6 +23,26 @@ const loading = ref(false);
 
 const modalTitle = computed(() => `托盘 ${vehicleCode.value} 的库存`);
 const occupiedCount = computed(() => inventoryList.value.length);
+const materialColors = computed(() => {
+  const codes = [
+    ...new Set(
+      inventoryList.value.map((item) => item.materialCode).filter(Boolean),
+    ),
+  ].sort();
+  return new Map(
+    codes.map((code, index) => {
+      // 黄金角分配色相，使当前托盘内的不同物料保持明显且稳定的颜色差异。
+      const hue = Math.round((205 + index * 137.508) % 360);
+      return [
+        code,
+        {
+          backgroundColor: `hsl(${hue} 72% 92%)`,
+          borderColor: `hsl(${hue} 62% 70%)`,
+        },
+      ];
+    }),
+  );
+});
 const cells = computed<PalletCell[]>(() => {
   const inventoryMap = new Map(
     inventoryList.value.map((item) => [`${item.rowNum}:${item.colNum}`, item]),
@@ -36,6 +58,10 @@ const cells = computed<PalletCell[]>(() => {
   });
 });
 
+function getMaterialStyle(materialCode?: string): CSSProperties | undefined {
+  return materialCode ? materialColors.value.get(materialCode) : undefined;
+}
+
 const [Modal, modalApi] = useVbenModal({
   footer: false,
   async onOpenChange(isOpen) {
@@ -85,7 +111,11 @@ const [Modal, modalApi] = useVbenModal({
                 </template>
                 <div v-else>空位</div>
               </template>
-              <div :class="['pallet-cell', { occupied: cell.inventory }]">
+              <div
+                class="pallet-cell"
+                :class="{ occupied: cell.inventory }"
+                :style="getMaterialStyle(cell.inventory?.materialCode)"
+              >
                 <template v-if="cell.inventory">
                   <strong>{{ cell.inventory.materialCode }}</strong>
                   <span>{{ cell.inventory.materialName }}</span>
@@ -95,8 +125,15 @@ const [Modal, modalApi] = useVbenModal({
             </Tooltip>
           </template>
         </div>
-        <div class="mt-4 flex gap-6 text-sm text-gray-500">
-          <span class="legend"><i class="legend-block occupied"></i>有物料（1 根）</span>
+        <div class="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm text-gray-500">
+          <span
+            v-for="[materialCode, color] in materialColors"
+            :key="materialCode"
+            class="legend"
+          >
+            <i class="legend-block occupied" :style="color"></i>
+            {{ materialCode }}（1 根/格）
+          </span>
           <span class="legend"><i class="legend-block"></i>空位</span>
         </div>
       </div>