feat：【ele】【mall】point 代码迁移

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

@@ -3,50 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-
+import { fenToYuan } from '@vben/utils';
-/** 表单配置 */
-export function useFormSchema(): VbenFormSchema[] {
-  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,
-        controlsPosition: 'right',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        rows: 4,
-      },
-    },
-  ];
-}
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -56,15 +13,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动状态',
       component: 'Select',
       componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择活动状态',
         clearable: true,
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
     },
   ];
 }
 
-/** 列表的字段 */
+/** 列表的表格列 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
@@ -78,6 +35,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 80,
       cellRender: {
         name: 'CellImage',
+        props: {
+          height: 40,
+        },
       },
     },
     {
@@ -89,18 +49,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'marketPrice',
       title: '原价',
       minWidth: 100,
-      formatter: 'formatFenToYuanAmount',
+      formatter: ({ row }) => `￥${fenToYuan(row.marketPrice)}`,
-    },
-    {
-      field: 'point',
-      title: '兑换积分',
-      minWidth: 100,
-    },
-    {
-      field: 'price',
-      title: '兑换金额',
-      minWidth: 100,
-      formatter: 'formatFenToYuanAmount',
     },
     {
       field: 'status',
@@ -125,7 +74,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'redeemedQuantity',
       title: '已兑换数量',
       minWidth: 100,
-      slots: { default: 'redeemedQuantity' },
+      formatter: ({ row }) => {
+        return (row.totalStock || 0) - (row.stock || 0);
+      },
     },
     {
       field: 'createTime',
@@ -141,3 +92,48 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入排序',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      defaultValue: 0,
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+      formItemClass: 'col-span-2',
+    },
+    // TODO @puhui999：商品图太大了。
+    {
+      fieldName: 'spuId',
+      label: '活动商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+  ];
+}

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

@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
-import { computed } from 'vue';
+import { Page, useVbenModal } from '@vben/common-ui';
-
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
 import { ElLoading, ElMessage } from 'element-plus';
 
@@ -17,51 +14,52 @@ 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' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: PointActivityForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
-/** 获得商品已兑换数量 */
-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: MallPointActivityApi.PointActivity) {
+function handleEdit(row: any) {
   formModalApi.setData(row).open();
 }
 
-/** 关闭积分活动 */
+/** 关闭积分商城活动 */
-async function handleClose(row: MallPointActivityApi.PointActivity) {
+async function handleClose(row: any) {
-  await confirm('确认关闭该积分商城活动吗？');
+  const loadingInstance = ElLoading.service({
-  await closePointActivity(row.id);
+    text: '正在关闭中...',
-  ElMessage.success('关闭成功');
+  });
-  handleRefresh();
+  try {
+    await closePointActivity(row.id);
+    ElMessage.success('关闭成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
-/** 删除积分活动 */
+/** 删除积分商城活动 */
-async function handleDelete(row: MallPointActivityApi.PointActivity) {
+async function handleDelete(row: any) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.spuName]),
   });
   try {
     await deletePointActivity(row.id);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.spuName]));
     handleRefresh();
   } finally {
     loadingInstance.close();
@@ -95,21 +93,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<MallPointActivityApi.PointActivity>,
+  } as VxeTableGridOptions,
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <template #doc>
-      <DocAlert
-        title="【营销】积分商城活动"
-        url="https://doc.iocoder.cn/mall/promotion-point/"
-      />
-    </template>
-
     <FormModal @success="handleRefresh" />
-
     <Grid table-title="积分商城活动列表">
       <template #toolbar-tools>
         <TableAction
@@ -124,9 +114,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <template #redeemedQuantity="{ row }">
-        {{ getRedeemedQuantity(row) }}
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -142,17 +129,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '关闭',
               type: 'danger',
               link: true,
-              auth: ['promotion:point-activity:close'],
+              icon: ACTION_ICON.CLOSE,
               ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
+              auth: ['promotion:point-activity:close'],
+              popConfirm: {
+                title: '确认关闭该积分商城活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
             },
             {
               label: $t('common.delete'),
               type: 'danger',
               link: true,
               icon: ACTION_ICON.DELETE,
-              auth: ['promotion:point-activity:delete'],
               ifShow: row.status !== 0,
+              auth: ['promotion:point-activity:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
                 confirm: handleDelete.bind(null, row),

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

@@ -1,18 +1,32 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components/type';
 
 import { computed, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
 
+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 {
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';
+import { getPropertyList } from '#/views/mall/product/spu/components/property-util';
 
 import { useFormSchema } from '../data';
 
@@ -29,13 +43,110 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    labelWidth: 120,
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+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 ！！！',
+  },
+]; // SKU 规则配置
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // 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 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) => {
+    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;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallPointActivityApi.PointProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ]; // 构建 SPU 属性列表
+
+  // 直接赋值，因为每次只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -43,19 +154,19 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallPointActivityApi.PointActivity;
-
-    // 确保必要的默认值
-    if (!data.products) {
-      data.products = [];
-    }
-    if (!data.sort) {
-      data.sort = 0;
-    }
-
     try {
+      // 获取积分商城商品配置（深拷贝避免直接修改原对象）
+      const products: MallPointActivityApi.PointProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.price = convertToInteger(item.price);
+      });
+      // 提交表单
+      const data =
+        (await formApi.getValues()) as MallPointActivityApi.PointActivity;
+      data.products = products;
       await (formData.value?.id
         ? updatePointActivity(data)
         : createPointActivity(data));
@@ -69,17 +180,27 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
+      // 重置表单数据（新增和编辑模式都需要）
       formData.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
+
     // 加载数据
     const data = modalApi.getData<MallPointActivityApi.PointActivity>();
     if (!data || !data.id) {
       return;
     }
+    // 加载数据
     modalApi.lock();
     try {
       formData.value = await getPointActivity(data.id);
+      await getSpuDetails(
+        formData.value.spuId,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
@@ -90,16 +211,85 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-3/5" :title="getTitle">
+  <div>
-    <div class="p-4">
+    <Modal :title="getTitle" class="w-[70%]">
-      <div class="mb-4 rounded border border-yellow-200 bg-yellow-50 p-4">
+      <Form class="mx-4">
-        <p class="text-yellow-800">
+        <!-- 商品选择 -->
-          <strong>注意：</strong>
+        <template #spuId>
-          积分活动涉及复杂的商品选择和SKU配置，当前为简化版本。
+          <div class="w-full">
-          完整的商品选择和积分配置功能需要在后续版本中完善。
+            <ElButton
-        </p>
+              v-if="!formData?.id"
-      </div>
+              type="primary"
-      <Form />
+              @click="openSpuSelect"
-    </div>
+            >
-  </Modal>
+              选择商品
+            </ElButton>
+
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：积分商城特有配置 -->
+              <template #default>
+                <VxeColumn align="center" min-width="168" title="可兑换库存">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="可兑换次数">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.count"
+                      :min="0"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="所需积分">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.point"
+                      :min="0"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="所需金额(元)">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.price"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
+
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>

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

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