From 68800c96d7ca51b8818162285a78298cd9a931f9 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 18 May 2026 22:07:32 +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=20item-sku-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/md/item/sku/components/index.ts |   1 +
 .../item/sku/components/item-sku-select.vue   | 216 +++++++++++++++++
 .../views/wms/md/item/sku/components/index.ts |   1 +
 .../item/sku/components/item-sku-select.vue   | 220 ++++++++++++++++++
 4 files changed, 438 insertions(+)
 create mode 100644 apps/web-antd/src/views/wms/md/item/sku/components/index.ts
 create mode 100644 apps/web-antd/src/views/wms/md/item/sku/components/item-sku-select.vue
 create mode 100644 apps/web-ele/src/views/wms/md/item/sku/components/index.ts
 create mode 100644 apps/web-ele/src/views/wms/md/item/sku/components/item-sku-select.vue

diff --git a/apps/web-antd/src/views/wms/md/item/sku/components/index.ts b/apps/web-antd/src/views/wms/md/item/sku/components/index.ts
new file mode 100644
index 000000000..040fe7a2d
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/sku/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsItemSkuSelect } from './item-sku-select.vue';
diff --git a/apps/web-antd/src/views/wms/md/item/sku/components/item-sku-select.vue b/apps/web-antd/src/views/wms/md/item/sku/components/item-sku-select.vue
new file mode 100644
index 000000000..fb8d84cb6
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/sku/components/item-sku-select.vue
@@ -0,0 +1,216 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+
+import { nextTick, ref } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemSkuPage } from '#/api/wms/md/item/sku';
+import {
+  formatDimensionText,
+  formatPrice,
+  formatWeight,
+} from '#/views/wms/utils/format';
+
+import { useSkuSelectGridColumns, useSkuSelectGridFormSchema } from '../../data';
+
+defineOptions({ name: 'WmsItemSkuSelect' });
+
+const emit = defineEmits<{
+  change: [list: WmsItemSkuApi.ItemSku[]];
+}>();
+
+const open = ref(false);
+const multiple = ref(true);
+const syncingSingleSelection = ref(false);
+const selectedRows = ref<WmsItemSkuApi.ItemSku[]>([]);
+const disabledSelectedIds = ref<Set<number>>(new Set());
+
+/** 判断 SKU 是否可勾选，已传入的业务明细 SKU 需要禁选 */
+function isRowSelectable({ row }: { row: WmsItemSkuApi.ItemSku }) {
+  return row.id === undefined || !disabledSelectedIds.value.has(row.id);
+}
+
+/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+async function syncSingleSelection(row?: WmsItemSkuApi.ItemSku) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条可选 SKU */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: WmsItemSkuApi.ItemSku[];
+  row?: WmsItemSkuApi.ItemSku;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records.filter(
+    (item) => item.id === undefined || !disabledSelectedIds.value.has(item.id),
+  );
+}
+
+/** 处理全选变化，过滤掉已禁选的 SKU */
+function handleCheckboxAll({
+  records,
+}: {
+  records: WmsItemSkuApi.ItemSku[];
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records.filter(
+    (item) => item.id === undefined || !disabledSelectedIds.value.has(item.id),
+  );
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSkuSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useSkuSelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    checkboxConfig: {
+      checkMethod: isRowSelectable,
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemSkuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsItemSkuApi.ItemSku>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 打开 SKU 选择弹窗 */
+async function openModal(
+  selectedIds?: number[],
+  options?: { multiple?: boolean; preselectDisabled?: boolean },
+) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  selectedRows.value = [];
+  disabledSelectedIds.value =
+    options?.preselectDisabled === false
+      ? new Set()
+      : new Set(selectedIds || []);
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+  await gridApi.query();
+}
+
+/** 关闭 SKU 选择弹窗并清空临时选择 */
+async function closeModal() {
+  open.value = false;
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+}
+
+/** 确认选择并返回新增的 SKU 列表 */
+function handleConfirm() {
+  const list = selectedRows.value.filter(
+    (sku) => sku.id !== undefined && !disabledSelectedIds.value.has(sku.id),
+  );
+  if (list.length === 0) {
+    message.warning('请至少选择一条数据');
+    return;
+  }
+  emit('change', list);
+  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="商品 SKU 列表">
+      <template #itemInfo="{ row }">
+        <div>{{ row.itemName || '-' }}</div>
+        <div v-if="row.itemCode" class="text-xs text-gray-500">
+          商品编号：{{ row.itemCode }}
+        </div>
+        <div v-if="row.brandName" class="text-xs text-gray-500">
+          品牌：{{ row.brandName }}
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div>{{ row.name || '-' }}</div>
+        <div v-if="row.code" class="text-xs text-gray-500">
+          编号：{{ row.code }}
+        </div>
+        <div v-if="row.barCode" class="text-xs text-gray-500">
+          条码：{{ row.barCode }}
+        </div>
+      </template>
+      <template #priceInfo="{ row }">
+        <div v-if="row.costPrice !== undefined">
+          成本价：{{ formatPrice(row.costPrice) }}
+        </div>
+        <div v-if="row.sellingPrice !== undefined">
+          销售价：{{ formatPrice(row.sellingPrice) }}
+        </div>
+      </template>
+      <template #weightInfo="{ row }">
+        <div v-if="row.netWeight !== undefined">
+          净重：{{ formatWeight(row.netWeight) }}
+        </div>
+        <div v-if="row.grossWeight !== undefined">
+          毛重：{{ formatWeight(row.grossWeight) }}
+        </div>
+      </template>
+      <template #dimensionInfo="{ row }">
+        {{ formatDimensionText(row.length, row.width, row.height) || '-' }}
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/sku/components/index.ts b/apps/web-ele/src/views/wms/md/item/sku/components/index.ts
new file mode 100644
index 000000000..040fe7a2d
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/sku/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsItemSkuSelect } from './item-sku-select.vue';
diff --git a/apps/web-ele/src/views/wms/md/item/sku/components/item-sku-select.vue b/apps/web-ele/src/views/wms/md/item/sku/components/item-sku-select.vue
new file mode 100644
index 000000000..1cee21112
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/sku/components/item-sku-select.vue
@@ -0,0 +1,220 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+
+import { nextTick, ref } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemSkuPage } from '#/api/wms/md/item/sku';
+import {
+  formatDimensionText,
+  formatPrice,
+  formatWeight,
+} from '#/views/wms/utils/format';
+
+import { useSkuSelectGridColumns, useSkuSelectGridFormSchema } from '../../data';
+
+defineOptions({ name: 'WmsItemSkuSelect' });
+
+const emit = defineEmits<{
+  change: [list: WmsItemSkuApi.ItemSku[]];
+}>();
+
+const open = ref(false);
+const multiple = ref(true);
+const syncingSingleSelection = ref(false);
+const selectedRows = ref<WmsItemSkuApi.ItemSku[]>([]);
+const disabledSelectedIds = ref<Set<number>>(new Set());
+
+/** 判断 SKU 是否可勾选，已传入的业务明细 SKU 需要禁选 */
+function isRowSelectable({ row }: { row: WmsItemSkuApi.ItemSku }) {
+  return row.id === undefined || !disabledSelectedIds.value.has(row.id);
+}
+
+/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+async function syncSingleSelection(row?: WmsItemSkuApi.ItemSku) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条可选 SKU */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: WmsItemSkuApi.ItemSku[];
+  row?: WmsItemSkuApi.ItemSku;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records.filter(
+    (item) => item.id === undefined || !disabledSelectedIds.value.has(item.id),
+  );
+}
+
+/** 处理全选变化，过滤掉已禁选的 SKU */
+function handleCheckboxAll({
+  records,
+}: {
+  records: WmsItemSkuApi.ItemSku[];
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records.filter(
+    (item) => item.id === undefined || !disabledSelectedIds.value.has(item.id),
+  );
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSkuSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useSkuSelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    checkboxConfig: {
+      checkMethod: isRowSelectable,
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemSkuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsItemSkuApi.ItemSku>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 打开 SKU 选择弹窗 */
+async function openModal(
+  selectedIds?: number[],
+  options?: { multiple?: boolean; preselectDisabled?: boolean },
+) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  selectedRows.value = [];
+  disabledSelectedIds.value =
+    options?.preselectDisabled === false
+      ? new Set()
+      : new Set(selectedIds || []);
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+  await gridApi.query();
+}
+
+/** 关闭 SKU 选择弹窗并清空临时选择 */
+async function closeModal() {
+  open.value = false;
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+}
+
+/** 确认选择并返回新增的 SKU 列表 */
+function handleConfirm() {
+  const list = selectedRows.value.filter(
+    (sku) => sku.id !== undefined && !disabledSelectedIds.value.has(sku.id),
+  );
+  if (list.length === 0) {
+    ElMessage.warning('请至少选择一条数据');
+    return;
+  }
+  emit('change', list);
+  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="商品 SKU 列表">
+      <template #itemInfo="{ row }">
+        <div>{{ row.itemName || '-' }}</div>
+        <div v-if="row.itemCode" class="text-xs text-gray-500">
+          商品编号：{{ row.itemCode }}
+        </div>
+        <div v-if="row.brandName" class="text-xs text-gray-500">
+          品牌：{{ row.brandName }}
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div>{{ row.name || '-' }}</div>
+        <div v-if="row.code" class="text-xs text-gray-500">
+          编号：{{ row.code }}
+        </div>
+        <div v-if="row.barCode" class="text-xs text-gray-500">
+          条码：{{ row.barCode }}
+        </div>
+      </template>
+      <template #priceInfo="{ row }">
+        <div v-if="row.costPrice !== undefined">
+          成本价：{{ formatPrice(row.costPrice) }}
+        </div>
+        <div v-if="row.sellingPrice !== undefined">
+          销售价：{{ formatPrice(row.sellingPrice) }}
+        </div>
+      </template>
+      <template #weightInfo="{ row }">
+        <div v-if="row.netWeight !== undefined">
+          净重：{{ formatWeight(row.netWeight) }}
+        </div>
+        <div v-if="row.grossWeight !== undefined">
+          毛重：{{ formatWeight(row.grossWeight) }}
+        </div>
+      </template>
+      <template #dimensionInfo="{ row }">
+        {{ formatDimensionText(row.length, row.width, row.height) || '-' }}
+      </template>
+    </Grid>
+    <template #footer>
+      <ElButton @click="closeModal">取 消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确 定</ElButton>
+    </template>
+  </ElDialog>
+</template>