From 0a2767e2288b44eeacd597555d206fbaab08d945 Mon Sep 17 00:00:00 2001
From: zhouz <>
Date: Sat, 8 Aug 2026 15:22:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=89=98=E7=9B=98?=
 =?UTF-8?q?=E5=BA=93=E5=AD=98=E7=BD=91=E6=A0=BC=EF=BC=88=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?6=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stockingivt/modules/pallet-inventory.vue  | 168 ++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/stockingivt/modules/pallet-inventory.vue

diff --git a/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/stockingivt/modules/pallet-inventory.vue b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/stockingivt/modules/pallet-inventory.vue
new file mode 100644
index 00000000..9ff19473
--- /dev/null
+++ b/nl-ui/nl-ui-admin-vben/yudao-ui-admin-vben/apps/web-antdv-next/src/views/lms/stockingivt/modules/pallet-inventory.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { LmsStockingIvtApi } from '#/api/lms/stockingivt';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Spin, Tooltip } from 'antdv-next';
+
+import { getPaperVehicleInventory } from '#/api/lms/stockingivt';
+
+interface PalletCell {
+  colNum: number;
+  inventory?: LmsStockingIvtApi.PaperVehicleInventory;
+  rowNum: number;
+}
+
+const vehicleCode = ref('');
+const inventoryList = ref<LmsStockingIvtApi.PaperVehicleInventory[]>([]);
+const loading = ref(false);
+
+const modalTitle = computed(() => `托盘 ${vehicleCode.value} 的库存`);
+const occupiedCount = computed(() => inventoryList.value.length);
+const cells = computed<PalletCell[]>(() => {
+  const inventoryMap = new Map(
+    inventoryList.value.map((item) => [`${item.rowNum}:${item.colNum}`, item]),
+  );
+  return Array.from({ length: 25 }, (_, index) => {
+    const rowNum = Math.floor(index / 5) + 1;
+    const colNum = (index % 5) + 1;
+    return {
+      colNum,
+      inventory: inventoryMap.get(`${rowNum}:${colNum}`),
+      rowNum,
+    };
+  });
+});
+
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      vehicleCode.value = '';
+      inventoryList.value = [];
+      return;
+    }
+    const data = modalApi.getData<{ vehicleCode: string }>();
+    if (!data?.vehicleCode) return;
+    vehicleCode.value = data.vehicleCode;
+    loading.value = true;
+    try {
+      inventoryList.value = await getPaperVehicleInventory(data.vehicleCode);
+    } finally {
+      loading.value = false;
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[900px] max-w-[96vw]" :title="modalTitle">
+    <Spin :spinning="loading">
+      <div class="px-3 pb-4">
+        <div class="mb-4 flex justify-end gap-6 text-sm">
+          <span>已占用 {{ occupiedCount }} / 25</span>
+          <span>空位 {{ 25 - occupiedCount }}</span>
+        </div>
+        <div class="pallet-grid">
+          <div></div>
+          <div v-for="col in 5" :key="`header-${col}`" class="axis-label">
+            列 {{ col }}
+          </div>
+          <template v-for="row in 5" :key="`row-${row}`">
+            <div class="axis-label">行 {{ row }}</div>
+            <Tooltip
+              v-for="cell in cells.slice((row - 1) * 5, row * 5)"
+              :key="`${cell.rowNum}-${cell.colNum}`"
+            >
+              <template #title>
+                <div>位置：第 {{ cell.rowNum }} 行，第 {{ cell.colNum }} 列</div>
+                <template v-if="cell.inventory">
+                  <div>物料编码：{{ cell.inventory.materialCode }}</div>
+                  <div>物料名称：{{ cell.inventory.materialName }}</div>
+                  <div>数量：{{ cell.inventory.qty }}</div>
+                </template>
+                <div v-else>空位</div>
+              </template>
+              <div :class="['pallet-cell', { occupied: cell.inventory }]">
+                <template v-if="cell.inventory">
+                  <strong>{{ cell.inventory.materialCode }}</strong>
+                  <span>{{ cell.inventory.materialName }}</span>
+                </template>
+                <span v-else>空</span>
+              </div>
+            </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>
+          <span class="legend"><i class="legend-block"></i>空位</span>
+        </div>
+      </div>
+    </Spin>
+  </Modal>
+</template>
+
+<style scoped>
+.pallet-grid {
+  display: grid;
+  grid-template-columns: 48px repeat(5, minmax(100px, 1fr));
+  gap: 8px;
+  align-items: stretch;
+}
+
+.axis-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+.pallet-cell {
+  display: flex;
+  min-height: 72px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 8px;
+  color: #999;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  background: #fafafa;
+}
+
+.pallet-cell.occupied {
+  color: #1f1f1f;
+  border: 1px solid #91caff;
+  background: #e6f4ff;
+}
+
+.pallet-cell span {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.legend {
+  display: inline-flex;
+  align-items: center;
+}
+
+.legend-block {
+  width: 13px;
+  height: 13px;
+  margin-right: 6px;
+  border: 1px dashed #d9d9d9;
+  background: #fafafa;
+}
+
+.legend-block.occupied {
+  border: 1px solid #91caff;
+  background: #e6f4ff;
+}
+</style>