From 43e758023ac0f2e9a659bd0a0a2377b4205388f5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 1 Nov 2025 11:46:43 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90mall?=
 =?UTF-8?q?=E3=80=91product/spu=20=E7=9A=84=20components=20=E8=BF=81?=
 =?UTF-8?q?=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/spu/components/index.ts      |   4 +
 .../spu/components/sku-table-select.vue       | 123 +++++++++
 .../product/spu/components/spu-showcase.vue   | 156 +++++++++++
 .../spu/components/spu-table-select.vue       | 244 ++++++++++++++++++
 4 files changed, 527 insertions(+)
 create mode 100644 apps/web-ele/src/views/mall/product/spu/components/index.ts
 create mode 100644 apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
 create mode 100644 apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
 create mode 100644 apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue

diff --git a/apps/web-ele/src/views/mall/product/spu/components/index.ts b/apps/web-ele/src/views/mall/product/spu/components/index.ts
new file mode 100644
index 000000000..f73d34334
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/index.ts
@@ -0,0 +1,4 @@
+export { default as SkuTableSelect } from './sku-table-select.vue';
+export { default as SpuShowcase } from './spu-showcase.vue';
+export { default as SpuTableSelect } from './spu-table-select.vue';
+
diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
new file mode 100644
index 000000000..af6fdbc1c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
@@ -0,0 +1,123 @@
+<!-- SKU 选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
+
+interface SpuData {
+  spuId: number;
+}
+
+const emit = defineEmits<{
+  change: [sku: MallSpuApi.Sku];
+}>();
+
+const spuId = ref<number>();
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => [
+  {
+    type: 'radio',
+    width: 55,
+  },
+  {
+    field: 'picUrl',
+    title: '图片',
+    width: 100,
+    align: 'center',
+    cellRender: {
+      name: 'CellImage',
+    },
+  },
+  {
+    field: 'properties',
+    title: '规格',
+    minWidth: 120,
+    align: 'center',
+    formatter: ({ cellValue }) => {
+      return (
+        cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
+        '-'
+      );
+    },
+  },
+  {
+    field: 'price',
+    title: '销售价(元)',
+    width: 120,
+    align: 'center',
+    formatter: ({ cellValue }) => {
+      return fenToYuan(cellValue);
+    },
+  },
+]);
+
+// TODO @芋艿：要不要直接非 pager？
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 400,
+    border: true,
+    showOverflow: true,
+    radioConfig: {
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          if (!spuId.value) {
+            return { list: [], total: 0 };
+          }
+          const spu = await getSpu(spuId.value);
+          return {
+            list: spu.skus || [],
+            total: spu.skus?.length || 0,
+          };
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+/** 处理选中 */
+function handleRadioChange() {
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      gridApi.grid.clearRadioRow();
+      spuId.value = undefined;
+      return;
+    }
+    const data = modalApi.getData<SpuData>();
+    if (!data?.spuId) {
+      return;
+    }
+    spuId.value = data.spuId;
+    await gridApi.query();
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[700px]" title="选择规格">
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
new file mode 100644
index 000000000..dfa305aad
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
@@ -0,0 +1,156 @@
+<!-- 商品橱窗组件：用于展示和选择商品 SPU -->
+<script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage, ElTooltip } from 'element-plus';
+
+import { getSpuDetailList } from '#/api/mall/product/spu';
+
+import SpuTableSelect from './spu-table-select.vue';
+
+interface SpuShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<SpuShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const productSpus = ref<MallSpuApi.Spu[]>([]);
+const spuTableSelectRef = ref<InstanceType<typeof SpuTableSelect>>();
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
+  return productSpus.value.length < props.limit;
+});
+
+/** 监听 modelValue 变化，加载商品详情 */
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    // eslint-disable-next-line unicorn/no-nested-ternary
+    const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+    if (ids.length === 0) {
+      productSpus.value = [];
+      return;
+    }
+    // 只有商品发生变化时才重新查询
+    if (
+      productSpus.value.length === 0 ||
+      productSpus.value.some((spu) => !ids.includes(spu.id!))
+    ) {
+      productSpus.value = await getSpuDetailList(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开商品选择对话框 */
+function handleOpenSpuSelect() {
+  spuTableSelectRef.value?.open(productSpus.value);
+}
+
+/** 选择商品后触发 */
+function handleSpuSelected(spus: MallSpuApi.Spu | MallSpuApi.Spu[]) {
+  productSpus.value = Array.isArray(spus) ? spus : [spus];
+  emitSpuChange();
+}
+
+/** 删除商品 */
+function handleRemoveSpu(index: number) {
+  productSpus.value.splice(index, 1);
+  emitSpuChange();
+}
+
+/** 触发变更事件 */
+function emitSpuChange() {
+  if (props.limit === 1) {
+    const spu = productSpus.value.length > 0 ? productSpus.value[0] : null;
+    emit('update:modelValue', spu?.id || 0);
+    emit('change', spu);
+  } else {
+    emit(
+      'update:modelValue',
+      productSpus.value.map((spu) => spu.id!),
+    );
+    emit('change', productSpus.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选商品列表 -->
+    <div
+      v-for="(spu, index) in productSpus"
+      :key="spu.id"
+      class="spu-item group relative"
+    >
+      <ElTooltip :content="spu.name">
+        <div class="relative h-full w-full">
+          <ElImage
+            :src="spu.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+            :preview-src-list="[spu.picUrl!]"
+            fit="cover"
+          />
+          <!-- 删除按钮 -->
+          <IconifyIcon
+            v-if="!disabled"
+            icon="ep:circle-close-filled"
+            class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
+            @click="handleRemoveSpu(index)"
+          />
+        </div>
+      </ElTooltip>
+    </div>
+
+    <!-- 添加商品按钮 -->
+    <ElTooltip v-if="canAdd" content="选择商品">
+      <div
+        class="spu-add-box hover:border-primary hover:bg-primary/5 flex cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        @click="handleOpenSpuSelect"
+      >
+        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+      </div>
+    </ElTooltip>
+  </div>
+
+  <!-- 商品选择对话框 -->
+  <SpuTableSelect
+    ref="spuTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleSpuSelected"
+  />
+</template>
+
+<style scoped>
+.spu-item {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.spu-add-box {
+  width: 60px;
+  height: 60px;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
new file mode 100644
index 000000000..76e2d9294
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
@@ -0,0 +1,244 @@
+<!-- SPU 商品选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSpuPage } from '#/api/mall/product/spu';
+import { getRangePickerDefaultProps } from '#/utils';
+
+interface SpuTableSelectProps {
+  multiple?: boolean;
+}
+
+const props = withDefaults(defineProps<SpuTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
+}>();
+
+// TODO @芋艿：要不要加类型；
+const categoryList = ref<any[]>([]);
+const categoryTreeList = ref<any[]>([]);
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '商品名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入商品名称',
+      allowClear: true,
+    },
+  },
+  {
+    fieldName: 'categoryId',
+    label: '商品分类',
+    component: 'TreeSelect',
+    componentProps: {
+      treeData: categoryTreeList.value,
+      fieldNames: {
+        label: 'name',
+        value: 'id',
+      },
+      treeCheckStrictly: true,
+      placeholder: '请选择商品分类',
+      allowClear: true,
+      showSearch: true,
+      treeNodeFilterProp: 'name',
+    },
+  },
+  {
+    fieldName: 'createTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      ...getRangePickerDefaultProps(),
+      allowClear: true,
+    },
+  },
+]);
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+  if (props.multiple) {
+    columns.push({ type: 'checkbox', width: 55 });
+  } else {
+    columns.push({ type: 'radio', width: 55 });
+  }
+  columns.push(
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '商品图',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '商品名称',
+      minWidth: 200,
+    },
+    {
+      field: 'categoryId',
+      title: '商品分类',
+      minWidth: 120,
+      formatter: ({ cellValue }) => {
+        const category = categoryList.value?.find((c) => c.id === cellValue);
+        return category?.name || '-';
+      },
+    },
+  );
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    showOverflow: true,
+    checkboxConfig: props.multiple
+      ? {
+          reserve: true,
+        }
+      : undefined,
+    radioConfig: props.multiple
+      ? undefined
+      : {
+          reserve: true,
+        },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          return await getSpuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            tabType: 0,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: props.multiple
+    ? {
+        checkboxChange: handleCheckboxChange,
+        checkboxAll: handleCheckboxChange,
+      }
+    : {
+        radioChange: handleRadioChange,
+      },
+});
+
+/** 多选：处理选中变化 */
+// TODO @芋艿：要不要清理掉？
+function handleCheckboxChange() {
+  // vxe-table 自动管理选中状态，无需手动处理
+}
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  // TODO @芋艿：看看怎么简化
+  onConfirm: props.multiple
+    ? () => {
+        const selectedRows =
+          gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
+        emit('change', selectedRows);
+        modalApi.close();
+      }
+    : undefined,
+  // TODO @芋艿：看看怎么简化？
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      gridApi.grid.clearCheckboxRow();
+      gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
+
+    // 先查询数据，确保表格已加载
+    await gridApi.query();
+
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      // 等待数据加载完成后再设置选中状态
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((spu) => {
+          // 在表格数据中查找匹配的行
+          const row = tableData.find((item: MallSpuApi.Spu) => item.id === spu.id);
+          if (row) {
+            gridApi.grid.setCheckboxRow(row, true);
+          }
+        });
+      }, 300);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        // 在表格数据中查找匹配的行
+        const row = tableData.find((item: MallSpuApi.Spu) => item.id === data.id);
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (data?: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
+    modalApi.setData(data).open();
+  },
+});
+</script>
+
+<template>
+  <Modal :class="props.multiple ? 'w-[900px]' : 'w-[800px]'" title="选择商品">
+    <Grid />
+  </Modal>
+</template>