feat：【mall 商城】promotion 公共组件【antd】100%: 迁移完成

apps/web-antd/src/views/mall/promotion/components/index.ts

@@ -0,0 +1,5 @@
+export { default as SpuAndSkuList } from './spu-and-sku-list.vue';
+export { default as SpuSkuSelect } from './spu-sku-select.vue';
+
+export type * from './types';
+

apps/web-antd/src/views/mall/promotion/components/spu-and-sku-list.vue

@@ -0,0 +1,243 @@
+<!-- SPU 和 SKU 列表展示组件 -->
+<script lang="ts" setup generic="T extends MallSpuApi.Spu">
+import type { SpuProperty } from './types';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type { RuleConfig } from '#/views/mall/product/spu/form';
+
+import { computed, ref, watch } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { SkuList } from '#/views/mall/product/spu/form';
+
+interface SpuAndSkuListProps {
+  /** SPU 列表 */
+  spuList: T[];
+  /** 规则配置 */
+  ruleConfig: RuleConfig[];
+  /** SPU 属性列表 */
+  spuPropertyList: SpuProperty<T>[];
+  /** 是否可删除 */
+  deletable?: boolean;
+}
+
+const props = withDefaults(defineProps<SpuAndSkuListProps>(), {
+  deletable: false,
+});
+
+const emit = defineEmits<{
+  delete: [spuId: number];
+}>();
+
+// 内部数据
+const spuData = ref<MallSpuApi.Spu[]>([]);
+const spuPropertyListData = ref<SpuProperty<T>[]>([]);
+const expandedRowKeys = ref<number[]>([]);
+const skuListRef = ref<InstanceType<typeof SkuList>>();
+
+// 列配置（动态计算）
+const columns = computed<VxeGridProps['columns']>(() => {
+  const cols: VxeGridProps['columns'] = [
+    {
+      type: 'expand',
+      width: 50,
+      slots: { content: 'expand-content' },
+    },
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '商品图',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '商品名称',
+      minWidth: 300,
+      showOverflow: true,
+    },
+    {
+      field: 'price',
+      title: '商品售价',
+      minWidth: 120,
+      align: 'center',
+      formatter: ({ cellValue }) => `¥${fenToYuan(cellValue)}`,
+    },
+    {
+      field: 'salesCount',
+      title: '销量',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      minWidth: 100,
+      align: 'center',
+    },
+  ];
+
+  // 如果可删除且有多个 SPU，添加操作列
+  if (props.deletable && spuData.value.length > 1) {
+    cols.push({
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    });
+  }
+
+  return cols;
+});
+
+// 初始化表格
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: columns.value,
+    data: spuData.value,
+    border: true,
+    showOverflow: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    expandConfig: {
+      trigger: 'row',
+      expandRowKeys: expandedRowKeys.value,
+    },
+  },
+});
+
+/**
+ * 删除 SPU
+ */
+async function handleDelete(row: MallSpuApi.Spu) {
+  await confirm({
+    content: `是否删除商品编号为 ${row.id} 的数据？`,
+  });
+
+  const index = spuData.value.findIndex((item) => item.id === row.id);
+  if (index !== -1) {
+    spuData.value.splice(index, 1);
+    emit('delete', row.id!);
+  }
+}
+
+/**
+ * 获取所有 SKU 活动配置
+ * @param extendedAttribute 在 SKU 上扩展的属性名称
+ */
+function getSkuConfigs(extendedAttribute: string) {
+  if (skuListRef.value) {
+    skuListRef.value.validateSku();
+  }
+
+  const configs: any[] = [];
+  spuPropertyListData.value.forEach((item) => {
+    item.spuDetail.skus?.forEach((sku: any) => {
+      if (sku[extendedAttribute]) {
+        configs.push(sku[extendedAttribute]);
+      }
+    });
+  });
+
+  return configs;
+}
+
+// 暴露方法给父组件
+defineExpose({
+  getSkuConfigs,
+});
+
+// 监听 spuList 变化
+watch(
+  () => props.spuList,
+  (data) => {
+    if (!data) return;
+    spuData.value = data as MallSpuApi.Spu[];
+    // 更新表格列配置和数据
+    gridApi.grid.reloadData(spuData.value);
+    gridApi.grid.reloadColumn(columns.value);
+  },
+  { deep: true, immediate: true },
+);
+
+// 监听 spuPropertyList 变化
+watch(
+  () => props.spuPropertyList,
+  (data) => {
+    if (!data) return;
+    spuPropertyListData.value = data as SpuProperty<T>[];
+
+    // 延迟展开所有行，确保 SKU 列表正确渲染
+    setTimeout(() => {
+      expandedRowKeys.value = data.map((item) => item.spuId);
+      // 手动展开每一行
+      data.forEach((item) => {
+        gridApi.grid.setRowExpand(
+          spuData.value.find((spu) => spu.id === item.spuId),
+          true,
+        );
+      });
+    }, 200);
+  },
+  { deep: true, immediate: true },
+);
+</script>
+
+<template>
+  <Grid>
+    <!-- 展开内容：SKU 列表 -->
+    <template #expand-content="{ row }">
+      <div class="p-4">
+        <SkuList
+          ref="skuListRef"
+          :is-activity-component="true"
+          :prop-form-data="
+            spuPropertyListData.find((item) => item.spuId === row.id)?.spuDetail
+          "
+          :property-list="
+            spuPropertyListData.find((item) => item.spuId === row.id)
+              ?.propertyList
+          "
+          :rule-config="props.ruleConfig"
+        >
+          <!-- 扩展插槽 -->
+          <template #extension>
+            <slot></slot>
+          </template>
+        </SkuList>
+      </div>
+    </template>
+
+    <!-- 操作列 -->
+    <template
+      v-if="props.deletable && props.spuList.length > 1"
+      #actions="{ row }"
+    >
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            onClick: () => handleDelete(row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>

apps/web-antd/src/views/mall/promotion/components/spu-sku-select.vue

@@ -0,0 +1,341 @@
+<!-- SPU 和 SKU 联合选择弹窗组件 -->
+<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 { message, Radio } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSpu, getSpuPage } from '#/api/mall/product/spu';
+import { getRangePickerDefaultProps } from '#/utils';
+import { getPropertyList, SkuList } from '#/views/mall/product/spu/form';
+
+interface SpuSkuSelectProps {
+  /** 是否选择 SKU */
+  isSelectSku?: boolean;
+  /** 是否单选 SKU */
+  radio?: boolean;
+}
+
+const props = withDefaults(defineProps<SpuSkuSelectProps>(), {
+  isSelectSku: false,
+  radio: false,
+});
+
+const emit = defineEmits<{
+  confirm: [spuId: number, skuIds?: number[]];
+}>();
+
+// 单选：选中的 SPU ID
+const selectedSpuId = ref<number>();
+// 选中的 SKU ID 列表
+const selectedSkuIds = ref<number[]>([]);
+// SKU 列表数据
+const spuData = ref<MallSpuApi.Spu>();
+const propertyList = ref<any[]>([]);
+const isExpand = ref(false);
+const expandRowKeys = ref<number[]>([]);
+const skuListRef = ref<InstanceType<typeof SkuList>>();
+
+// 分类列表（扁平）
+const categoryList = ref<any[]>([]);
+// 分类树
+const categoryTreeList = ref<any[]>([]);
+
+// 初始化分类数据
+onMounted(async () => {
+  try {
+    categoryList.value = await getCategoryList({});
+    categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+  } catch (error) {
+    console.error('加载分类数据失败:', error);
+  }
+});
+
+// 搜索表单配置
+const formSchema = computed<VbenFormSchema[]>(() => {
+  return [
+    {
+      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'] = [];
+
+  // 如果需要选择 SKU，添加展开列
+  if (props.isSelectSku) {
+    columns.push({
+      type: 'expand',
+      width: 50,
+      slots: { content: 'expand-content' },
+    });
+  }
+
+  // 单选列
+  columns.push(
+    {
+      field: 'radio',
+      title: '#',
+      width: 55,
+      align: 'center',
+      slots: { default: 'radio-column' },
+    },
+    {
+      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,
+    expandConfig: {
+      expandRowKeys: expandRowKeys.value,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          try {
+            const params = {
+              pageNo: page.currentPage,
+              pageSize: page.pageSize,
+              tabType: 0, // 默认获取上架的商品
+              name: formValues.name || undefined,
+              categoryId: formValues.categoryId || undefined,
+              createTime: formValues.createTime || undefined,
+            };
+
+            const data = await getSpuPage(params);
+
+            return {
+              items: data.list || [],
+              total: data.total || 0,
+            };
+          } catch (error) {
+            console.error('加载商品数据失败:', error);
+            return { items: [], total: 0 };
+          }
+        },
+      },
+    },
+  },
+});
+
+// 单选：处理选中 SPU
+async function handleSingleSelected(row: MallSpuApi.Spu) {
+  selectedSpuId.value = row.id;
+
+  // 如果需要选择 SKU，展开行
+  if (props.isSelectSku) {
+    await expandChange(row, [row]);
+  }
+}
+
+// 选择 SKU
+function selectSku(skus: MallSpuApi.Sku[]) {
+  if (!selectedSpuId.value) {
+    message.warning('请先选择商品再选择相应的规格！');
+    return;
+  }
+
+  if (skus.length === 0) {
+    selectedSkuIds.value = [];
+    return;
+  }
+
+  if (props.radio) {
+    // 单选模式
+    selectedSkuIds.value = [skus[0]?.id!];
+  } else {
+    // 多选模式
+    selectedSkuIds.value = skus.map((sku) => sku.id!);
+  }
+}
+
+// 展开行，加载 SKU 列表
+async function expandChange(
+  row: MallSpuApi.Spu,
+  expandedRows?: MallSpuApi.Spu[],
+) {
+  // 检查是否是当前选中的 SPU
+  if (selectedSpuId.value && row.id !== selectedSpuId.value) {
+    message.warning('你已选择商品，请先取消');
+    expandRowKeys.value = [selectedSpuId.value];
+    return;
+  }
+
+  // 如果已经展开且是同一个 SPU，不重复加载
+  if (isExpand.value && spuData.value?.id === row.id) {
+    return;
+  }
+
+  // 重置数据
+  spuData.value = undefined;
+  propertyList.value = [];
+  isExpand.value = false;
+
+  if (!expandedRows || expandedRows.length === 0) {
+    expandRowKeys.value = [];
+    return;
+  }
+
+  // 加载 SPU 详情
+  const res = await getSpu(row.id!);
+  propertyList.value = getPropertyList(res);
+  spuData.value = res;
+  isExpand.value = true;
+  expandRowKeys.value = [row.id!];
+}
+
+// 确认选择
+function handleConfirm() {
+  if (!selectedSpuId.value) {
+    message.warning('没有选择任何商品');
+    return;
+  }
+
+  if (props.isSelectSku && selectedSkuIds.value.length === 0) {
+    message.warning('没有选择任何商品属性');
+    return;
+  }
+
+  // 返回选中的数据
+  emit(
+    'confirm',
+    selectedSpuId.value,
+    props.isSelectSku ? selectedSkuIds.value : undefined,
+  );
+
+  // 关闭弹窗
+  modalApi.close();
+}
+
+// 初始化弹窗
+const [Modal, modalApi] = useVbenModal({
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      // 关闭时清理状态
+      selectedSpuId.value = undefined;
+      selectedSkuIds.value = [];
+      spuData.value = undefined;
+      propertyList.value = [];
+      isExpand.value = false;
+      expandRowKeys.value = [];
+      return;
+    }
+
+    // 打开时触发查询
+    await gridApi.query();
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[900px]" title="商品选择">
+    <Grid>
+      <!-- 单选列 -->
+      <template #radio-column="{ row }">
+        <Radio
+          :checked="selectedSpuId === row.id"
+          :value="row.id"
+          class="cursor-pointer"
+          @click="handleSingleSelected(row)"
+        />
+      </template>
+
+      <!-- SKU 展开内容 -->
+      <template v-if="props.isSelectSku" #expand-content>
+        <div v-if="isExpand" class="p-4">
+          <SkuList
+            ref="skuListRef"
+            :is-component="true"
+            :is-detail="true"
+            :prop-form-data="spuData"
+            :property-list="propertyList"
+            @selection-change="selectSku"
+          />
+        </div>
+      </template>
+    </Grid>
+  </Modal>
+</template>

apps/web-antd/src/views/mall/promotion/components/types.ts

@@ -0,0 +1,15 @@
+import type { PropertyAndValues } from '#/views/mall/product/spu/form';
+
+/**
+ * SPU 属性配置
+ * 用于活动商品选择中，关联 SPU 和其属性列表
+ */
+export interface SpuProperty<T = any> {
+  /** SPU ID */
+  spuId: number;
+  /** SPU 详情 */
+  spuDetail: T;
+  /** 属性列表 */
+  propertyList: PropertyAndValues[];
+}
+