feat：【mall 商城】promotion point【antd】100%: 迁移完成

apps/web-antd/src/components/table-action/icons.ts

@@ -10,4 +10,5 @@ export const ACTION_ICON = {
   MORE: 'lucide:ellipsis-vertical',
   VIEW: 'lucide:eye',
   COPY: 'lucide:copy',
+  CLOSE: 'lucide:x',
 };

apps/web-antd/src/views/mall/promotion/point/activity/data.ts

@@ -1,51 +1,18 @@
+// 1. 导入类型
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+// 2. 导入 VBEN 常量和工具
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
 
-/** 表单配置 */
+// 3. 导入 Zod 用于高级验证
-export function useFormSchema(): VbenFormSchema[] {
+import { z } from '#/adapter/form';
-  return [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'spuId',
-      label: '积分商城活动商品',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请选择商品',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'sort',
-      label: '排序',
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '请输入排序',
-        min: 0,
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        rows: 4,
-      },
-    },
-  ];
-}
 
-/** 列表的搜索表单 */
+/**
+ * @description: 列表的搜索表单
+ */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -53,17 +20,20 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动状态',
       component: 'Select',
       componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择活动状态',
         allowClear: true,
-        dictType: DICT_TYPE.COMMON_STATUS,
       },
     },
   ];
 }
 
-/** 列表的字段 */
+/**
+ * @description: 列表的字段
+ */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
+    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '活动编号',
@@ -75,6 +45,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 80,
       cellRender: {
         name: 'CellImage',
+        props: {
+          height: 40,
+        },
       },
     },
     {
@@ -86,55 +59,101 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'marketPrice',
       title: '原价',
       minWidth: 100,
-      formatter: 'formatAmount2',
+      formatter: 'formatAmount',
-    },
-    {
-      field: 'point',
-      title: '兑换积分',
-      minWidth: 100,
-    },
-    {
-      field: 'price',
-      title: '兑换金额',
-      minWidth: 100,
-      formatter: 'formatAmount2',
     },
     {
       field: 'status',
       title: '活动状态',
       minWidth: 100,
+      align: 'center',
       cellRender: {
         name: 'CellDict',
-        props: { type: DICT_TYPE.COMMON_STATUS },
+        props: {
+          type: DICT_TYPE.COMMON_STATUS,
+          value: CommonStatusEnum.ENABLE,
+        },
       },
     },
     {
       field: 'stock',
       title: '库存',
       minWidth: 80,
+      align: 'center',
     },
     {
       field: 'totalStock',
       title: '总库存',
       minWidth: 80,
+      align: 'center',
     },
     {
       field: 'redeemedQuantity',
       title: '已兑换数量',
       minWidth: 100,
-      slots: { default: 'redeemedQuantity' },
+      align: 'center',
+      // 使用 formatter 计算已兑换数量
+      formatter: ({ row }) => {
+        return (row.totalStock || 0) - (row.stock || 0);
+      },
     },
     {
       field: 'createTime',
-      title: '创建时间',
+      title: $t('common.createTime'),
       minWidth: 180,
+      align: 'center',
       formatter: 'formatDateTime',
     },
     {
-      title: '操作',
+      title: $t('common.action'),
       width: 150,
       fixed: 'right',
       slots: { default: 'actions' },
     },
   ];
 }
+
+/**
+ * @description: 新增/修改的表单
+ */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    // 隐藏的 ID 字段
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'spuId',
+      label: '积分商城活动商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+      // 通过插槽实现自定义商品选择器
+      renderComponentContent: () => ({
+        default: () => null,
+      }),
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        rows: 4,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}

apps/web-antd/src/views/mall/promotion/point/activity/index.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
 import { computed } from 'vue';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
@@ -17,144 +16,132 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import PointActivityForm from './modules/form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'PromotionPointActivity' });
 
+// 1. 使用 useVbenModal 初始化弹窗
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: PointActivityForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
-/** 获得商品已兑换数量 */
+// 2. 定义业务操作函数
-const getRedeemedQuantity = computed(
-  () => (row: MallPointActivityApi.PointActivity) =>
-    (row.totalStock || 0) - (row.stock || 0),
-);
-
-/** 刷新表格 */
-function handleRefresh() {
-  gridApi.query();
-}
-
-/** 创建积分活动 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑积分活动 */
+function handleEdit(row: any) {
-function handleEdit(row: MallPointActivityApi.PointActivity) {
   formModalApi.setData(row).open();
 }
 
-/** 关闭积分活动 */
+async function handleClose(row: any) {
-function handleClose(row: MallPointActivityApi.PointActivity) {
+  await confirm({
-  confirm({
+    title: '提示',
     content: '确认关闭该积分商城活动吗？',
-  }).then(async () => {
-    await closePointActivity(row.id);
-    message.success('关闭成功');
-    handleRefresh();
   });
+  await closePointActivity(row.id);
+  message.success('关闭成功');
+  gridApi.query();
 }
 
-/** 删除积分活动 */
+async function handleDelete(row: any) {
-async function handleDelete(row: MallPointActivityApi.PointActivity) {
   await deletePointActivity(row.id);
-  handleRefresh();
+  message.success($t('common.delSuccess'));
+  gridApi.query();
 }
 
+function handleRefresh() {
+  gridApi.query();
+}
+
+// 计算操作按钮
+const getActions = computed(() => (row: any) => {
+  const actions: any[] = [
+    {
+      label: $t('common.edit'),
+      icon: ACTION_ICON.EDIT,
+      onClick: handleEdit.bind(null, row),
+    },
+  ];
+
+  // 如果状态是启用(0)，显示关闭按钮
+  if (row.status === 0) {
+    actions.push({
+      label: '关闭',
+      icon: ACTION_ICON.CLOSE,
+      danger: true,
+      popConfirm: {
+        title: '确认关闭该积分商城活动吗？',
+        confirm: handleClose.bind(null, row),
+      },
+    });
+  } else {
+    // 否则显示删除按钮
+    actions.push({
+      label: $t('common.delete'),
+      icon: ACTION_ICON.DELETE,
+      danger: true,
+      popConfirm: {
+        title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
+        confirm: handleDelete.bind(null, row),
+      },
+    });
+  }
+
+  return actions;
+});
+
+// 3. 使用 useVbenVxeGrid 初始化列表
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
-    height: 'auto',
-    keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await getPointActivityPage({
+          const params = {
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
-          });
+          };
+          const data = await getPointActivityPage(params);
+          return { items: data.list, total: data.total };
         },
       },
     },
-    rowConfig: {
+  } as VxeTableGridOptions,
-      keyField: 'id',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<MallPointActivityApi.PointActivity>,
 });
 </script>
 
 <template>
-  <Page auto-content-height>
+  <Page
-    <template #doc>
+    description="积分商城活动，用于管理积分兑换商品的配置"
-      <DocAlert
+    doc-link="https://doc.iocoder.cn/mall/promotion-point/"
-        title="【营销】积分商城活动"
+    title="积分商城活动"
-        url="https://doc.iocoder.cn/mall/promotion-point/"
+  >
-      />
+    <!-- 弹窗组件的注册 -->
-    </template>
-
     <FormModal @success="handleRefresh" />
 
+    <!-- 列表组件的渲染 -->
     <Grid table-title="积分商城活动列表">
+      <!-- 工具栏按钮 -->
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
               label: $t('ui.actionTitle.create', ['积分活动']),
-              type: 'primary',
               icon: ACTION_ICON.ADD,
-              auth: ['promotion:point-activity:create'],
               onClick: handleCreate,
             },
           ]"
         />
       </template>
-      <template #redeemedQuantity="{ row }">
+      <!-- 操作列按钮 -->
-        {{ getRedeemedQuantity(row) }}
-      </template>
       <template #actions="{ row }">
-        <TableAction
+        <TableAction :actions="getActions(row)" />
-          :actions="[
-            {
-              label: $t('common.edit'),
-              type: 'link',
-              icon: ACTION_ICON.EDIT,
-              auth: ['promotion:point-activity:update'],
-              onClick: handleEdit.bind(null, row),
-            },
-            {
-              label: '关闭',
-              type: 'link',
-              danger: true,
-              auth: ['promotion:point-activity:close'],
-              ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
-            },
-            {
-              label: $t('common.delete'),
-              type: 'link',
-              danger: true,
-              icon: ACTION_ICON.DELETE,
-              auth: ['promotion:point-activity:delete'],
-              ifShow: row.status !== 0,
-              popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
-                confirm: handleDelete.bind(null, row),
-              },
-            },
-          ]"
-        />
       </template>
     </Grid>
   </Page>

apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue

@@ -1,86 +1,208 @@
 <script lang="ts" setup>
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+import type { RuleConfig } from '#/views/mall/product/spu/form';
+import type { SpuProperty } from '#/views/mall/promotion/components/types';
 
 import { computed, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import { convertToInteger, formatToFraction } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { Button, InputNumber, message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createPointActivity,
   getPointActivity,
   updatePointActivity,
 } from '#/api/mall/promotion/point';
 import { $t } from '#/locales';
+import { getPropertyList } from '#/views/mall/product/spu/form';
 
+import { SpuAndSkuList, SpuSkuSelect } from '../../../components';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<MallPointActivityApi.PointActivity>();
-const getTitle = computed(() => {
-  return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['积分活动'])
-    : $t('ui.actionTitle.create', ['积分活动']);
-});
 
+const formData = ref<MallPointActivityApi.PointActivity>(); // 用于存储当前编辑的数据
+const isFormUpdate = ref(false); // 是否为编辑模式
+
+const getTitle = computed(() =>
+  isFormUpdate.value ? '编辑积分活动' : '新增积分活动',
+);
+
+// 1. 使用 useVbenForm 初始化表单
 const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+// SKU 规则配置
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换库存必须大于等于 1 ！！！',
+  },
+  {
+    name: 'productConfig.point',
+    rule: (arg) => arg >= 1,
+    message: '商品所需兑换积分必须大于等于 1 ！！！',
+  },
+  {
+    name: 'productConfig.count',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换次数必须大于等于 1 ！！！',
+  },
+];
+
+const spuList = ref<any[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<any>[]>([]); // SPU 属性列表
+
+/**
+ * 打开商品选择器
+ */
+function openSpuSelect() {
+  spuSkuSelectRef.value.open();
+}
+
+/**
+ * 选择商品后的回调
+ */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/**
+ * 获取 SPU 详情
+ */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallPointActivityApi.PointProduct[],
+) {
+  const spuProperties: SpuProperty<any>[] = [];
+  const res = await getSpu(spuId);
+
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置积分商城相关的配置
+  selectSkus?.forEach((sku: any) => {
+    let config: MallPointActivityApi.PointProduct = {
+      skuId: sku.id!,
+      stock: 0,
+      price: 0,
+      point: 0,
+      count: 0,
+    };
+
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        product.price = formatToFraction(product.price) as unknown as number;
+      }
+      config = product || config;
+    }
+
+    sku.productConfig = config;
+  });
+
+  res.skus = selectSkus;
+
+  spuProperties.push({
+    spuId: res.id!,
+    spuDetail: res,
+    propertyList: getPropertyList(res),
+  });
+
+  spuList.value.push(res);
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
+// 2. 使用 useVbenModal 定义弹窗行为
 const [Modal, modalApi] = useVbenModal({
+  // "确认"按钮的回调
   async onConfirm() {
     const { valid } = await formApi.validate();
-    if (!valid) {
+    if (!valid) return;
-      return;
+
-    }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallPointActivityApi.PointActivity;
-
-    // 确保必要的默认值
-    if (!data.products) {
-      data.products = [];
-    }
-    if (!data.sort) {
-      data.sort = 0;
-    }
-
     try {
-      await (formData.value?.id
+      // 获取积分商城商品配置
+      const products: MallPointActivityApi.PointProduct[] =
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [];
+
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.price = convertToInteger(item.price);
+      });
+
+      const data =
+        (await formApi.getValues()) as MallPointActivityApi.PointActivity;
+      data.products = products;
+
+      // 真正提交
+      await (isFormUpdate.value
         ? updatePointActivity(data)
         : createPointActivity(data));
-      // 关闭并提示
+
+      message.success($t('ui.actionMessage.operationSuccess'));
       await modalApi.close();
       emit('success');
-      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
       modalApi.unlock();
     }
   },
+  // 弹窗打开时的回调
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
+      // 关闭时清理状态
       formData.value = undefined;
+      isFormUpdate.value = false;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
-    // 加载数据
+
-    const data = modalApi.getData<MallPointActivityApi.PointActivity>();
+    const data = modalApi.getData();
     if (!data || !data.id) {
+      // 新增模式
+      isFormUpdate.value = false;
       return;
     }
+
+    // 编辑模式
+    isFormUpdate.value = true;
     modalApi.lock();
+
     try {
       formData.value = await getPointActivity(data.id);
-      // 设置到 values
+      await getSpuDetails(
+        formData.value.spuId,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
@@ -90,16 +212,79 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-3/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-[70%]">
-    <div class="p-4">
+    <Form>
-      <div class="mb-4 rounded border border-yellow-200 bg-yellow-50 p-4">
+      <!-- 商品选择 -->
-        <p class="text-yellow-800">
+      <template #spuId>
-          <strong>注意：</strong>
+        <div class="w-full">
-          积分活动涉及复杂的商品选择和SKU配置，当前为简化版本。
+          <Button v-if="!isFormUpdate" type="primary" @click="openSpuSelect">
-          完整的商品选择和积分配置功能需要在后续版本中完善。
+            选择商品
-        </p>
+          </Button>
-      </div>
+
-      <Form />
+          <!-- SPU 和 SKU 列表展示 -->
-    </div>
+          <SpuAndSkuList
+            v-if="spuList.length > 0"
+            ref="spuAndSkuListRef"
+            :rule-config="ruleConfig"
+            :spu-list="spuList"
+            :spu-property-list="spuPropertyList"
+            class="mt-4"
+          >
+            <!-- 扩展列：积分商城特有配置 -->
+            <template #default>
+              <VxeColumn align="center" min-width="168" title="可兑换库存">
+                <template #default="{ row: sku }">
+                  <InputNumber
+                    v-model:value="sku.productConfig.stock"
+                    :max="sku.stock"
+                    :min="0"
+                    class="w-full"
+                  />
+                </template>
+              </VxeColumn>
+
+              <VxeColumn align="center" min-width="168" title="可兑换次数">
+                <template #default="{ row: sku }">
+                  <InputNumber
+                    v-model:value="sku.productConfig.count"
+                    :min="0"
+                    class="w-full"
+                  />
+                </template>
+              </VxeColumn>
+
+              <VxeColumn align="center" min-width="168" title="所需积分">
+                <template #default="{ row: sku }">
+                  <InputNumber
+                    v-model:value="sku.productConfig.point"
+                    :min="0"
+                    class="w-full"
+                  />
+                </template>
+              </VxeColumn>
+
+              <VxeColumn align="center" min-width="168" title="所需金额(元)">
+                <template #default="{ row: sku }">
+                  <InputNumber
+                    v-model:value="sku.productConfig.price"
+                    :min="0"
+                    :precision="2"
+                    :step="0.1"
+                    class="w-full"
+                  />
+                </template>
+              </VxeColumn>
+            </template>
+          </SpuAndSkuList>
+        </div>
+      </template>
+    </Form>
+
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @confirm="handleSpuSelected"
+    />
   </Modal>
 </template>

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

@@ -0,0 +1,2 @@
+export { default as PointShowcase } from './point-showcase.vue';
+export { default as PointTableSelect } from './point-table-select.vue';

apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue

@@ -0,0 +1,163 @@
+<!-- 积分活动橱窗组件 - 用于装修时展示和选择积分活动 -->
+<script lang="ts" setup>
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image, Tooltip } from 'ant-design-vue';
+
+import { getPointActivityListByIds } from '#/api/mall/promotion/point';
+
+import PointTableSelect from './point-table-select.vue';
+
+interface PointShowcaseProps {
+  modelValue: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<PointShowcaseProps>(), {
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  change: [value: any];
+  'update:modelValue': [value: number | number[]];
+}>();
+
+// 积分活动列表
+const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  if (props.disabled) return false;
+  if (!props.limit) return true;
+  return pointActivityList.value.length < props.limit;
+});
+
+// 积分活动选择器引用
+const pointActivityTableSelectRef = ref();
+
+/**
+ * 打开积分活动选择器
+ */
+function openPointActivityTableSelect() {
+  pointActivityTableSelectRef.value.open(pointActivityList.value);
+}
+
+/**
+ * 选择活动后触发
+ */
+function handleActivitySelected(
+  activityList:
+    | MallPointActivityApi.PointActivity
+    | MallPointActivityApi.PointActivity[],
+) {
+  pointActivityList.value = Array.isArray(activityList)
+    ? activityList
+    : [activityList];
+  emitActivityChange();
+}
+
+/**
+ * 删除活动
+ */
+function handleRemoveActivity(index: number) {
+  pointActivityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/**
+ * 发送变更事件
+ */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const pointActivity =
+      pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
+    emit('update:modelValue', pointActivity?.id || 0);
+    emit('change', pointActivity);
+  } else {
+    emit(
+      'update:modelValue',
+      pointActivityList.value.map((pointActivity) => pointActivity.id),
+    );
+    emit('change', pointActivityList.value);
+  }
+}
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  async () => {
+    const ids = Array.isArray(props.modelValue)
+      ? props.modelValue
+      : (props.modelValue
+        ? [props.modelValue]
+        : []);
+
+    // 不需要返显
+    if (ids.length === 0) {
+      pointActivityList.value = [];
+      return;
+    }
+
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      pointActivityList.value.length === 0 ||
+      pointActivityList.value.some(
+        (pointActivity) => !ids.includes(pointActivity.id!),
+      )
+    ) {
+      pointActivityList.value = await getPointActivityListByIds(ids);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 活动图片列表 -->
+    <div
+      v-for="(pointActivity, index) in pointActivityList"
+      :key="pointActivity.id"
+      class="relative flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300"
+    >
+      <Tooltip :title="pointActivity.spuName">
+        <div class="relative h-full w-full">
+          <Image
+            :preview="true"
+            :src="pointActivity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+          />
+          <IconifyIcon
+            v-show="!disabled"
+            icon="ep:circle-close-filled"
+            class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </Tooltip>
+    </div>
+
+    <!-- 添加按钮 -->
+    <Tooltip v-if="canAdd" title="选择活动">
+      <div
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
+        @click="openPointActivityTableSelect"
+      >
+        <IconifyIcon icon="ep:plus" class="text-lg text-gray-400" />
+      </div>
+    </Tooltip>
+  </div>
+
+  <!-- 积分活动选择对话框 -->
+  <PointTableSelect
+    ref="pointActivityTableSelectRef"
+    :multiple="limit != 1"
+    @change="handleActivitySelected"
+  />
+</template>

apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue

@@ -0,0 +1,354 @@
+<!-- 积分活动表格选择器 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Checkbox, Radio } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPointActivityPage } from '#/api/mall/promotion/point';
+
+interface PointTableSelectProps {
+  multiple?: boolean;
+}
+
+const props = withDefaults(defineProps<PointTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    value:
+      | MallPointActivityApi.PointActivity
+      | MallPointActivityApi.PointActivity[],
+  ];
+}>();
+
+// 单选：选中的活动 ID
+const selectedActivityId = ref<number>();
+// 多选：选中状态映射
+const checkedStatus = ref<Record<number, boolean>>({});
+// 多选：选中的活动列表
+const checkedActivities = ref<MallPointActivityApi.PointActivity[]>([]);
+
+// 全选状态
+const isCheckAll = ref(false);
+const isIndeterminate = ref(false);
+
+// 搜索表单配置
+const formSchema = computed<VbenFormSchema[]>(() => {
+  return [
+    {
+      fieldName: 'status',
+      label: '活动状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择活动状态',
+        allowClear: true,
+      },
+    },
+  ];
+});
+
+// 列配置
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+
+  // 多选模式
+  if (props.multiple) {
+    columns.push({
+      field: 'checkbox',
+      title: '',
+      width: 55,
+      align: 'center',
+      slots: { default: 'checkbox-column', header: 'checkbox-header' },
+    });
+  } else {
+    // 单选模式
+    columns.push({
+      field: 'radio',
+      title: '#',
+      width: 55,
+      align: 'center',
+      slots: { default: 'radio-column' },
+    });
+  }
+
+  columns.push(
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+        },
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      formatter: 'formatAmount',
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: {
+          type: DICT_TYPE.COMMON_STATUS,
+        },
+      },
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      minWidth: 80,
+      align: 'center',
+    },
+    {
+      field: 'totalStock',
+      title: '总库存',
+      minWidth: 80,
+      align: 'center',
+    },
+    {
+      field: 'redeemedQuantity',
+      title: '已兑换数量',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ row }) => (row.totalStock || 0) - (row.stock || 0),
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      align: 'center',
+      formatter: 'formatDateTime',
+    },
+  );
+
+  return columns;
+});
+
+// 初始化表格
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    showOverflow: true,
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          try {
+            const params: any = {
+              pageNo: page.currentPage,
+              pageSize: page.pageSize,
+            };
+            if (formValues.status !== undefined) {
+              params.status = formValues.status;
+            }
+            const data = await getPointActivityPage(params);
+            const list = data.list || [];
+
+            // 初始化 checkbox 绑定
+            list.forEach(
+              (activityVO) =>
+                (checkedStatus.value[activityVO.id] =
+                  checkedStatus.value[activityVO.id] || false),
+            );
+
+            // 计算全选框状态
+            calculateIsCheckAll(list);
+
+            return {
+              items: list,
+              total: data.total || 0,
+            };
+          } catch (error) {
+            console.error('加载积分活动数据失败:', error);
+            return { items: [], total: 0 };
+          }
+        },
+      },
+    },
+  },
+});
+
+/**
+ * 单选：处理选中
+ */
+function handleSingleSelected(row: MallPointActivityApi.PointActivity) {
+  selectedActivityId.value = row.id;
+  emit('change', row);
+  modalApi.close();
+}
+
+/**
+ * 多选：全选/全不选
+ */
+function handleCheckAll(e: any) {
+  const checked = e.target.checked;
+  isCheckAll.value = checked;
+  isIndeterminate.value = false;
+
+  const list = gridApi.grid.getData();
+  list.forEach((pointActivity) =>
+    handleCheckOne(checked, pointActivity, false),
+  );
+}
+
+/**
+ * 多选：选中一行
+ */
+function handleCheckOne(
+  checked: boolean,
+  pointActivity: MallPointActivityApi.PointActivity,
+  isCalcCheckAll: boolean,
+) {
+  if (checked) {
+    checkedActivities.value.push(pointActivity);
+    checkedStatus.value[pointActivity.id] = true;
+  } else {
+    const index = findCheckedIndex(pointActivity);
+    if (index > -1) {
+      checkedActivities.value.splice(index, 1);
+      checkedStatus.value[pointActivity.id] = false;
+      isCheckAll.value = false;
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    const list = gridApi.grid.getData();
+    calculateIsCheckAll(list);
+  }
+}
+
+/**
+ * 查找活动在已选中列表中的索引
+ */
+function findCheckedIndex(activityVO: MallPointActivityApi.PointActivity) {
+  return checkedActivities.value.findIndex((item) => item.id === activityVO.id);
+}
+
+/**
+ * 计算全选框状态
+ */
+function calculateIsCheckAll(list: MallPointActivityApi.PointActivity[]) {
+  isCheckAll.value = list.every(
+    (activityVO) => checkedStatus.value[activityVO.id],
+  );
+  isIndeterminate.value =
+    !isCheckAll.value &&
+    list.some((activityVO) => checkedStatus.value[activityVO.id]);
+}
+
+/**
+ * 多选：确认选择
+ */
+function handleConfirm() {
+  emit('change', [...checkedActivities.value]);
+  modalApi.close();
+}
+
+/**
+ * 打开对话框
+ */
+function open(pointList?: MallPointActivityApi.PointActivity[]) {
+  // 重置
+  checkedActivities.value = [];
+  checkedStatus.value = {};
+  isCheckAll.value = false;
+  isIndeterminate.value = false;
+
+  // 处理已选中
+  if (pointList && pointList.length > 0) {
+    checkedActivities.value = [...pointList];
+    checkedStatus.value = Object.fromEntries(
+      pointList.map((activityVO) => [activityVO.id, true]),
+    );
+  }
+
+  modalApi.open();
+}
+
+// 暴露 open 方法
+defineExpose({ open });
+
+// 初始化弹窗
+const [Modal, modalApi] = useVbenModal({
+  onConfirm: props.multiple ? handleConfirm : undefined,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      // 关闭时清理状态
+      if (!props.multiple) {
+        selectedActivityId.value = undefined;
+      }
+      return;
+    }
+
+    // 打开时触发查询
+    await gridApi.query();
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[70%]" title="选择活动">
+    <Grid>
+      <!-- 多选：表头 checkbox -->
+      <template v-if="props.multiple" #checkbox-header>
+        <Checkbox
+          v-model:checked="isCheckAll"
+          :indeterminate="isIndeterminate"
+          @change="handleCheckAll"
+        />
+      </template>
+
+      <!-- 多选：行 checkbox -->
+      <template v-if="props.multiple" #checkbox-column="{ row }">
+        <Checkbox
+          v-model:checked="checkedStatus[row.id]"
+          @change="(e: any) => handleCheckOne(e.target.checked, row, true)"
+        />
+      </template>
+
+      <!-- 单选：行 radio -->
+      <template v-if="!props.multiple" #radio-column="{ row }">
+        <Radio
+          :checked="selectedActivityId === row.id"
+          :value="row.id"
+          class="cursor-pointer"
+          @click="handleSingleSelected(row)"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>