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

2025-10-23 13:02:17 +08:00
parent 319e9dc7bd
commit abf015c444
5 changed files with 80 additions and 86 deletions
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue
+++ b/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<{
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue
+++ b/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';
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
+++ b/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',
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
+++ b/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({
-      content: '关闭成功',
-    });
+    message.success('关闭成功');
    handleRefresh();
  } finally {
    hideLoading();
  }
 }

+/** 删除满减送活动 */
 async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
-  await deleteRewardActivity(row.id!);
-  message.success({
-    content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
  });
-  handleRefresh();
+  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>
+
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/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);
-        message.success($t('common.updateSuccess'));
-      } else {
-        await createRewardActivity(<MallRewardActivityApi.RewardActivity>data);
-        message.success($t('common.createSuccess'));
-      }
+      // 提交表单
+      await (formData.value?.id
+        ? updateRewardActivity(<MallRewardActivityApi.RewardActivity>data)
+        : createRewardActivity(<MallRewardActivityApi.RewardActivity>data));
+      // 关闭并提示
      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();
-    if (!data || !data.id) return;
-
+    // 加载数据
+    const data = modalApi.getData<MallRewardActivityApi.RewardActivity>();
+    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 />
+    <Form class="mx-4" />

    <!-- 优惠设置 -->
    <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>