feat：【antd】满减送活动的 review

apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue

@@ -10,6 +10,7 @@ import { Button, Input } from 'ant-design-vue';
 // import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate'; // TODO: API
 // import { discountFormat } from '@/views/mall/promotion/coupon/formatter'; // TODO: 根据实际路径调整
 
+// TODO @puhui999：这里报错了。
 defineOptions({ name: 'RewardRuleCouponSelect' });
 
 const props = defineProps<{

apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// TODO @puhui999：在优化下代码；
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
 import { computed, ref } from 'vue';

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

@@ -1,20 +1,13 @@
-// 1. 导入类型
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-// 2. 导入 VBEN 常量和工具
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { $t } from '@vben/locales';
 
-// 3. 导入 Zod 用于高级验证
-import { z } from '#/adapter/form';
-// 4. 导入项目级工具函数
 import { getRangePickerDefaultProps } from '#/utils';
 
-/**
+/** 列表的搜索表单 */
- * @description: 列表的搜索表单
- */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -48,9 +41,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/**
+/** 列表的表格列 */
- * @description: 列表的字段
- */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
@@ -62,7 +53,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'productScope',
       title: '活动范围',
       minWidth: 120,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
@@ -72,21 +62,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'startTime',
       title: '活动开始时间',
       minWidth: 180,
-      align: 'center',
       formatter: 'formatDateTime',
     },
     {
       field: 'endTime',
       title: '活动结束时间',
       minWidth: 180,
-      align: 'center',
       formatter: 'formatDateTime',
     },
     {
       field: 'status',
       title: '状态',
       minWidth: 100,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -107,12 +94,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
   ];
 }
 
-/**
+/** 新增/修改的表单 */
- * @description: 新增/修改的表单
- */
 export function useFormSchema(): VbenFormSchema[] {
   return [
-    // 隐藏的 ID 字段
     {
       component: 'Input',
       fieldName: 'id',
@@ -128,7 +112,7 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入活动名称',
       },
-      rules: z.string().min(1, '活动名称不能为空'),
+      rules: 'required',
     },
     {
       fieldName: 'startAndEndTime',
@@ -139,8 +123,9 @@ export function useFormSchema(): VbenFormSchema[] {
         format: 'YYYY-MM-DD HH:mm:ss',
         placeholder: [$t('common.startTimeText'), $t('common.endTimeText')],
       },
-      rules: z.array(z.any()).min(1, '活动时间不能为空'),
+      rules: 'required',
     },
+    // TODO @puhui999：增加一个 defaultValue
     {
       fieldName: 'conditionType',
       label: '条件类型',
@@ -150,7 +135,8 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
-      rules: z.number(),
+      defaultValue: PromotionConditionTypeEnum.PRICE.type,
+      rules: 'required',
     },
     {
       fieldName: 'productScope',
@@ -161,7 +147,7 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
-      rules: z.number(),
+      rules: 'required',
     },
     {
       fieldName: 'remark',

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// 严格遵循导入顺序原则
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
@@ -20,104 +19,118 @@ import Form from './modules/form.vue';
 
 defineOptions({ name: 'PromotionRewardActivity' });
 
-// 1. 使用 useVbenModal 初始化弹窗
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
-// 2. 定义业务操作函数
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建满减送活动 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
+/** 编辑满减送活动 */
 function handleEdit(row: MallRewardActivityApi.RewardActivity) {
   formModalApi.setData({ id: row.id }).open();
 }
 
+/** 关闭满减送活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
   const hideLoading = message.loading({
-    content: '活动关闭中...',
+    content: '正在关闭中...',
     duration: 0,
   });
   try {
     await closeRewardActivity(row.id!);
-    message.success({
+    message.success('关闭成功');
-      content: '关闭成功',
-    });
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
+/** 删除满减送活动 */
 async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
-  await deleteRewardActivity(row.id!);
+  const hideLoading = message.loading({
-  message.success({
+    content: $t('ui.actionMessage.deleting', [row.name]),
-    content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    duration: 0,
   });
+  try {
+    await deleteRewardActivity(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
+  } finally {
+    hideLoading();
+  }
 }
 
-function handleRefresh() {
-  gridApi.query();
-}
-
-// 3. 使用 useVbenVxeGrid 初始化列表
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          const params = {
+          return await getRewardActivityPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
-          };
+          });
-          return await getRewardActivityPage(params);
         },
       },
     },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
   } as VxeTableGridOptions,
 });
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
-    <!-- 弹窗组件的注册 -->
     <FormModal @success="handleRefresh" />
-
-    <!-- 列表组件的渲染 -->
     <Grid table-title="满减送活动">
-      <!-- 工具栏按钮 -->
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
               label: $t('ui.actionTitle.create', ['活动']),
+              type: 'primary',
               icon: ACTION_ICON.ADD,
               onClick: handleCreate,
             },
           ]"
         />
       </template>
-      <!-- 操作列按钮 -->
       <template #actions="{ row }">
+        <!-- TODO @AI：table action 的权限标识；参考 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/promotion/rewardActivity/index.vue -->
         <TableAction
           :actions="[
             {
               label: $t('common.edit'),
+              type: 'link',
               icon: ACTION_ICON.EDIT,
               onClick: handleEdit.bind(null, row),
             },
             {
               label: '关闭',
-              icon: ACTION_ICON.CLOSE,
+              type: 'link',
               danger: true,
+              icon: ACTION_ICON.CLOSE,
               ifShow: row.status === 0,
               popConfirm: {
                 title: '确认关闭该满减活动吗？',
@@ -126,8 +139,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: $t('common.delete'),
-              icon: ACTION_ICON.DELETE,
+              type: 'link',
               danger: true,
+              icon: ACTION_ICON.DELETE,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
@@ -139,3 +153,4 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
+

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

@@ -26,71 +26,65 @@ import RewardRule from '../components/reward-rule.vue';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
+// TODO @puhui999：代码风格，和别的 form 保持一致；
 const formData = ref<MallRewardActivityApi.RewardActivity>({
   conditionType: PromotionConditionTypeEnum.PRICE.type,
   productScope: PromotionProductScopeEnum.ALL.scope,
   rules: [],
 });
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['满减送'])
+    : $t('ui.actionTitle.create', ['满减送']);
+});
 
-const getTitle = computed(() =>
-  formData.value?.id ? '编辑满减送' : '新增满减送',
-);
-
-// 1. 使用 useVbenForm 初始化表单
 const [Form, formApi] = useVbenForm({
-  schema: useFormSchema(),
-  showDefaultActions: false,
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
   } as VbenFormProps['commonConfig'],
+  schema: useFormSchema(),
+  showDefaultActions: false,
 });
 
 const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
 
-// 2. 使用 useVbenModal 定义弹窗行为
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-
     modalApi.lock();
     try {
       const data = await formApi.getValues();
-
+      // 设置活动规则优惠券
-      // 1. 设置活动规则优惠券
       rewardRuleRef.value?.setRuleCoupon();
-
+      // 时间段转换
-      // 2. 时间段转换
       if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
         data.startTime = data.startAndEndTime[0];
         data.endTime = data.startAndEndTime[1];
         delete data.startAndEndTime;
       }
-
+      // 规则元转分
-      // 3. 规则元转分
       data.rules?.forEach((item: any) => {
         item.discountPrice = convertToInteger(item.discountPrice || 0);
         if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
           item.limit = convertToInteger(item.limit || 0);
         }
       });
-
+      // 设置商品范围
-      // 4. 设置商品范围
       setProductScopeValues(data);
 
-      if (formData.value?.id) {
+      // 提交表单
-        await updateRewardActivity(<MallRewardActivityApi.RewardActivity>data);
+      await (formData.value?.id
-        message.success($t('common.updateSuccess'));
+        ? updateRewardActivity(<MallRewardActivityApi.RewardActivity>data)
-      } else {
+        : createRewardActivity(<MallRewardActivityApi.RewardActivity>data));
-        await createRewardActivity(<MallRewardActivityApi.RewardActivity>data);
+      // 关闭并提示
-        message.success($t('common.createSuccess'));
-      }
       await modalApi.close();
       emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
       modalApi.unlock();
     }
@@ -104,17 +98,16 @@ const [Modal, modalApi] = useVbenModal({
       };
       return;
     }
-
+    // 加载数据
-    const data = modalApi.getData();
+    const data = modalApi.getData<MallRewardActivityApi.RewardActivity>();
-    if (!data || !data.id) return;
+    if (!data || !data.id) {
-
+      return;
+    }
     modalApi.lock();
     try {
       const result = await getReward(data.id);
-
       // 转区段时间
       result.startAndEndTime = [result.startTime, result.endTime];
-
       // 规则分转元
       result.rules?.forEach((item: any) => {
         item.discountPrice = formatToFraction(item.discountPrice || 0);
@@ -124,6 +117,7 @@ const [Modal, modalApi] = useVbenModal({
       });
 
       formData.value = result;
+      // 设置到 values
       await formApi.setValues(result);
 
       // 获得商品范围
@@ -135,6 +129,7 @@ const [Modal, modalApi] = useVbenModal({
 });
 
 /** 获得商品范围 */
+// TODO @puhui999：可以参考下优惠劵模版的做法；可见 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 295 行；
 async function getProductScope() {
   switch (formData.value.productScope) {
     case PromotionProductScopeEnum.CATEGORY.scope: {
@@ -184,6 +179,7 @@ function setProductScopeValues(data: any) {
 
 <template>
   <Modal :title="getTitle" class="!w-[65%]">
+    <!-- TODO @puhui999：貌似可以不要？ -->
     <Alert
       description="【营销】满减送"
       message="提示"
@@ -191,14 +187,12 @@ function setProductScopeValues(data: any) {
       type="info"
       class="mb-4"
     />
-
+    <Form class="mx-4" />
-    <Form />
 
     <!-- 优惠设置 -->
     <FormItem label="优惠设置">
       <RewardRule ref="rewardRuleRef" v-model="formData" />
     </FormItem>
-
     <!-- 商品范围选择 -->
     <FormItem
       v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
@@ -211,8 +205,5 @@ function setProductScopeValues(data: any) {
         :deletable="true"
         :spu-list="[]"/>
     </FormItem>
-
-    <!-- 分类选择 -->
-    <!-- 注意：category 选择器暂未实现，需要根据实际需求添加 -->
   </Modal>
 </template>