From 80f071d57f93f77aa60fdda74f0d75dc21a9e47e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 18 May 2026 22:09:49 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=88wms=EF=BC=89=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=20antd=E3=80=81ele=20=E7=9A=84=20inventory-select.vue?=
 =?UTF-8?q?=20=E7=9A=84=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/wms/inventory/components/index.ts   |   1 +
 .../inventory/components/inventory-select.vue | 168 +++++++++++++++++
 .../views/wms/inventory/components/index.ts   |   1 +
 .../inventory/components/inventory-select.vue | 172 ++++++++++++++++++
 4 files changed, 342 insertions(+)
 create mode 100644 apps/web-antd/src/views/wms/inventory/components/index.ts
 create mode 100644 apps/web-antd/src/views/wms/inventory/components/inventory-select.vue
 create mode 100644 apps/web-ele/src/views/wms/inventory/components/index.ts
 create mode 100644 apps/web-ele/src/views/wms/inventory/components/inventory-select.vue

diff --git a/apps/web-antd/src/views/wms/inventory/components/index.ts b/apps/web-antd/src/views/wms/inventory/components/index.ts
new file mode 100644
index 000000000..31806be2a
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsInventorySelect } from './inventory-select.vue';
diff --git a/apps/web-antd/src/views/wms/inventory/components/inventory-select.vue b/apps/web-antd/src/views/wms/inventory/components/inventory-select.vue
new file mode 100644
index 000000000..b66f83d80
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/components/inventory-select.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+
+import { nextTick, ref } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryPage } from '#/api/wms/inventory';
+import { formatQuantity } from '#/views/wms/utils/format';
+
+import {
+  useInventorySelectGridColumns,
+  useInventorySelectGridFormSchema,
+} from '../index/data';
+
+export interface InventorySelectRow extends WmsInventoryApi.Inventory {
+  availableQuantity?: number;
+  price?: number;
+}
+
+defineOptions({ name: 'WmsInventorySelect' });
+
+const props = defineProps<{
+  warehouseId?: number;
+}>();
+
+const emit = defineEmits<{
+  change: [list: InventorySelectRow[]];
+}>();
+
+const open = ref(false);
+const selectedRows = ref<InventorySelectRow[]>([]);
+const disabledInventoryKeys = ref<Set<string>>(new Set());
+
+/** 获得业务库存标识 */
+function getInventoryKey(row: Pick<InventorySelectRow, 'skuId' | 'warehouseId'>) {
+  return row.skuId && row.warehouseId
+    ? `${row.skuId}-${row.warehouseId}`
+    : undefined;
+}
+
+/** 判断库存是否可选 */
+function isInventorySelectable(row: InventorySelectRow) {
+  const key = getInventoryKey(row);
+  return !key || !disabledInventoryKeys.value.has(key);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useInventorySelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useInventorySelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    checkboxConfig: {
+      checkMethod: ({ row }: { row: InventorySelectRow }) =>
+        isInventorySelectable(row),
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getInventoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: 'warehouse',
+            warehouseId: props.warehouseId,
+            onlyPositiveQuantity: true,
+            ...formValues,
+          });
+          return {
+            ...data,
+            list: (data.list || []).map((inventory) => ({
+              ...inventory,
+              availableQuantity: inventory.quantity,
+            })),
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InventorySelectRow>,
+  gridEvents: {
+    checkboxAll: ({ records }: { records: InventorySelectRow[] }) => {
+      selectedRows.value = records.filter((row) => isInventorySelectable(row));
+    },
+    checkboxChange: ({ records }: { records: InventorySelectRow[] }) => {
+      selectedRows.value = records.filter((row) => isInventorySelectable(row));
+    },
+  },
+});
+
+async function openModal(selectedInventoryKeys: string[] = []) {
+  if (!props.warehouseId) {
+    message.warning('请先选择仓库');
+    return;
+  }
+  open.value = true;
+  selectedRows.value = [];
+  disabledInventoryKeys.value = new Set(selectedInventoryKeys);
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+  await gridApi.query();
+}
+
+async function closeModal() {
+  open.value = false;
+  selectedRows.value = [];
+  disabledInventoryKeys.value = new Set();
+  await gridApi.grid.clearCheckboxRow();
+}
+
+function handleConfirm() {
+  const selectedList = selectedRows.value.filter((row) =>
+    isInventorySelectable(row),
+  );
+  if (selectedList.length === 0) {
+    message.warning('请选择库存');
+    return;
+  }
+  emit('change', selectedList);
+  closeModal();
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="库存选择"
+    width="80%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <Grid table-title="库存列表">
+      <template #itemInfo="{ row }">
+        <div>{{ row.itemName || '-' }}</div>
+        <div v-if="row.itemCode" class="text-xs text-gray-500">
+          商品编号：{{ row.itemCode }}
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div>{{ row.skuName || '-' }}</div>
+        <div v-if="row.skuCode" class="text-xs text-gray-500">
+          规格编号：{{ row.skuCode }}
+        </div>
+      </template>
+      <template #availableQuantity="{ row }">
+        {{ formatQuantity(row.availableQuantity) }}
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/inventory/components/index.ts b/apps/web-ele/src/views/wms/inventory/components/index.ts
new file mode 100644
index 000000000..31806be2a
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsInventorySelect } from './inventory-select.vue';
diff --git a/apps/web-ele/src/views/wms/inventory/components/inventory-select.vue b/apps/web-ele/src/views/wms/inventory/components/inventory-select.vue
new file mode 100644
index 000000000..c63e8db0c
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/components/inventory-select.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+
+import { nextTick, ref } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryPage } from '#/api/wms/inventory';
+import { formatQuantity } from '#/views/wms/utils/format';
+
+import {
+  useInventorySelectGridColumns,
+  useInventorySelectGridFormSchema,
+} from '../index/data';
+
+export interface InventorySelectRow extends WmsInventoryApi.Inventory {
+  availableQuantity?: number;
+  price?: number;
+}
+
+defineOptions({ name: 'WmsInventorySelect' });
+
+const props = defineProps<{
+  warehouseId?: number;
+}>();
+
+const emit = defineEmits<{
+  change: [list: InventorySelectRow[]];
+}>();
+
+const open = ref(false);
+const selectedRows = ref<InventorySelectRow[]>([]);
+const disabledInventoryKeys = ref<Set<string>>(new Set());
+
+/** 获得业务库存标识 */
+function getInventoryKey(row: Pick<InventorySelectRow, 'skuId' | 'warehouseId'>) {
+  return row.skuId && row.warehouseId
+    ? `${row.skuId}-${row.warehouseId}`
+    : undefined;
+}
+
+/** 判断库存是否可选 */
+function isInventorySelectable(row: InventorySelectRow) {
+  const key = getInventoryKey(row);
+  return !key || !disabledInventoryKeys.value.has(key);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useInventorySelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useInventorySelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    checkboxConfig: {
+      checkMethod: ({ row }: { row: InventorySelectRow }) =>
+        isInventorySelectable(row),
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getInventoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: 'warehouse',
+            warehouseId: props.warehouseId,
+            onlyPositiveQuantity: true,
+            ...formValues,
+          });
+          return {
+            ...data,
+            list: (data.list || []).map((inventory) => ({
+              ...inventory,
+              availableQuantity: inventory.quantity,
+            })),
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InventorySelectRow>,
+  gridEvents: {
+    checkboxAll: ({ records }: { records: InventorySelectRow[] }) => {
+      selectedRows.value = records.filter((row) => isInventorySelectable(row));
+    },
+    checkboxChange: ({ records }: { records: InventorySelectRow[] }) => {
+      selectedRows.value = records.filter((row) => isInventorySelectable(row));
+    },
+  },
+});
+
+async function openModal(selectedInventoryKeys: string[] = []) {
+  if (!props.warehouseId) {
+    ElMessage.warning('请先选择仓库');
+    return;
+  }
+  open.value = true;
+  selectedRows.value = [];
+  disabledInventoryKeys.value = new Set(selectedInventoryKeys);
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+  await gridApi.query();
+}
+
+async function closeModal() {
+  open.value = false;
+  selectedRows.value = [];
+  disabledInventoryKeys.value = new Set();
+  await gridApi.grid.clearCheckboxRow();
+}
+
+function handleConfirm() {
+  const selectedList = selectedRows.value.filter((row) =>
+    isInventorySelectable(row),
+  );
+  if (selectedList.length === 0) {
+    ElMessage.warning('请选择库存');
+    return;
+  }
+  emit('change', selectedList);
+  closeModal();
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    title="库存选择"
+    width="80%"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    @close="closeModal"
+  >
+    <Grid table-title="库存列表">
+      <template #itemInfo="{ row }">
+        <div>{{ row.itemName || '-' }}</div>
+        <div v-if="row.itemCode" class="text-xs text-gray-500">
+          商品编号：{{ row.itemCode }}
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div>{{ row.skuName || '-' }}</div>
+        <div v-if="row.skuCode" class="text-xs text-gray-500">
+          规格编号：{{ row.skuCode }}
+        </div>
+      </template>
+      <template #availableQuantity="{ row }">
+        {{ formatQuantity(row.availableQuantity) }}
+      </template>
+    </Grid>
+    <template #footer>
+      <ElButton @click="closeModal">取 消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确 定</ElButton>
+    </template>
+  </ElDialog>
+</template>