feat：【antd】商品积分活动的 review

2025-10-23 12:44:19 +08:00
parent d14177a4c0
commit 74bf240f52
5 changed files with 150 additions and 158 deletions
--- a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
@@ -1,13 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';

-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-import { $t } from '@vben/locales';
+import { fenToYuan } from '@vben/utils';

-import { z } from '#/adapter/form';
-
-// TODO @AI：注释
+/** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
@@ -23,7 +21,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
  ];
 }

-// TODO @AI：注释
+/** 列表的表格列 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
    {
@@ -51,19 +49,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
      field: 'marketPrice',
      title: '原价',
      minWidth: 100,
-      formatter: 'formatAmount',
+      formatter: ({ row }) => `￥${fenToYuan(row.marketPrice)}`,
    },
    {
      field: 'status',
      title: '活动状态',
      minWidth: 100,
-      align: 'center',
      cellRender: {
        name: 'CellDict',
-        props: {
-          type: DICT_TYPE.COMMON_STATUS,
-          value: CommonStatusEnum.ENABLE,
-        },
+        props: { type: DICT_TYPE.COMMON_STATUS },
      },
    },
    {
@@ -80,20 +74,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
      field: 'redeemedQuantity',
      title: '已兑换数量',
      minWidth: 100,
-
      formatter: ({ row }) => {
        return (row.totalStock || 0) - (row.stock || 0);
      },
    },
    {
      field: 'createTime',
-      title: $t('common.createTime'),
+      title: '创建时间',
      minWidth: 180,
-
      formatter: 'formatDateTime',
    },
    {
-      title: $t('common.action'),
+      title: '操作',
      width: 150,
      fixed: 'right',
      slots: { default: 'actions' },
@@ -101,7 +93,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
  ];
 }

-// TODO @AI：注释下
+/** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
  return [
    {
@@ -112,9 +104,30 @@ export function useFormSchema(): VbenFormSchema[] {
        show: () => false,
      },
    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入排序',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+      formItemClass: 'col-span-2',
+    },
    {
      fieldName: 'spuId',
-      label: '积分商城活动商品',
+      label: '活动商品',
      component: 'Input',
      rules: 'required',
      formItemClass: 'col-span-2',
@@ -122,23 +135,5 @@ export function useFormSchema(): VbenFormSchema[] {
        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',
-    },
  ];
 }
--- a/apps/web-antd/src/views/mall/promotion/point/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/index.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';

-import { computed } from 'vue';
-
-import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';

 import { message } from 'ant-design-vue';

@@ -25,112 +23,92 @@ const [FormModal, formModalApi] = useVbenModal({
  destroyOnClose: true,
 });

-// TODO @AI：增加注释
-function handleCreate() {
-  formModalApi.setData(null).open();
-}
-
-// TODO @AI：增加注释
-function handleEdit(row: any) {
-  formModalApi.setData(row).open();
-}
-
-// TODO @AI：增加注释
-async function handleClose(row: any) {
-  await confirm({
-    title: '提示',
-    content: '确认关闭该积分商城活动吗？',
-  });
-  await closePointActivity(row.id);
-  // TODO @AI：增加 loading
-  message.success('关闭成功');
-  gridApi.query();
-}
-
-async function handleDelete(row: any) {
-  await deletePointActivity(row.id);
-  message.success($t('common.delSuccess'));
-  gridApi.query();
-}
-
-// TODO @AI：增加注释
+/** 刷新表格 */
 function handleRefresh() {
  gridApi.query();
 }

-// 计算操作按钮
-// TODO @AI：不用方法，直接 vue 标签里，写条件 ifShow ！
-const getActions = computed(() => (row: any) => {
-  const actions: any[] = [
-    {
-      label: $t('common.edit'),
-      icon: ACTION_ICON.EDIT,
-      onClick: handleEdit.bind(null, row),
-    },
-  ];
-  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;
-});
+/** 创建积分商城活动 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑积分商城活动 */
+function handleEdit(row: any) {
+  formModalApi.setData(row).open();
+}
+
+/** 关闭积分商城活动 */
+async function handleClose(row: any) {
+  const hideLoading = message.loading({
+    content: '正在关闭中...',
+    duration: 0,
+  });
+  try {
+    await closePointActivity(row.id);
+    message.success('关闭成功');
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 删除积分商城活动 */
+async function handleDelete(row: any) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.spuName]),
+    duration: 0,
+  });
+  try {
+    await deletePointActivity(row.id);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.spuName]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}

-// TODO @AI：参考 system/notice 补全，简化；
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
-          const params = {
+          return await getPointActivityPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
-          };
-          const data = await getPointActivityPage(params);
-          return { items: data.list, total: data.total };
+          });
        },
      },
    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
  } as VxeTableGridOptions,
 });
 </script>

 <template>
-  <!-- TODO @puhui999：不用 description 哈。 -->
-  <Page
-    description="积分商城活动，用于管理积分兑换商品的配置"
-    doc-link="https://doc.iocoder.cn/mall/promotion-point/"
-    title="积分商城活动"
-  >
+  <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,
            },
@@ -138,7 +116,38 @@ const [Grid, gridApi] = useVbenVxeGrid({
        />
      </template>
      <template #actions="{ row }">
-        <TableAction :actions="getActions(row)" />
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '关闭',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.CLOSE,
+              ifShow: row.status === 0,
+              popConfirm: {
+                title: '确认关闭该积分商城活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: row.status !== 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
      </template>
    </Grid>
  </Page>
--- a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
@@ -25,15 +25,22 @@ import { SpuAndSkuList, SpuSkuSelect } from '../../../components';
 import { useFormSchema } from '../data';

 const emit = defineEmits(['success']);
-
-const formData = ref<MallPointActivityApi.PointActivity>(); // 用于存储当前编辑的数据
-const isFormUpdate = ref(false); // 是否为编辑模式
-
-const getTitle = computed(() =>
-  isFormUpdate.value ? '编辑积分活动' : '新增积分活动',
-);
+const formData = ref<MallPointActivityApi.PointActivity>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['积分活动'])
+    : $t('ui.actionTitle.create', ['积分活动']);
+});

 const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
 });
@@ -43,7 +50,6 @@ const [Form, formApi] = useVbenForm({
 const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
 const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref

-// SKU 规则配置
 const ruleConfig: RuleConfig[] = [
  {
    name: 'productConfig.stock',
@@ -60,38 +66,30 @@ const ruleConfig: RuleConfig[] = [
    rule: (arg) => arg >= 1,
    message: '商品可兑换次数必须大于等于 1 ！！！',
  },
-];
+]; // SKU 规则配置

 const spuList = ref<any[]>([]); // 选择的 SPU 列表
 const spuPropertyList = ref<SpuProperty<any>[]>([]); // SPU 属性列表

-/**
- * 打开商品选择器
- */
+/** 打开商品选择器 */
 // TODO @puhui999：spuSkuSelectRef.value.open is not a function
 function openSpuSelect() {
  spuSkuSelectRef.value.open();
 }

-/**
- * 选择商品后的回调
- */
+/** 选择商品后的回调 */
 async function handleSpuSelected(spuId: number, skuIds?: number[]) {
  await formApi.setFieldValue('spuId', spuId);
  await getSpuDetails(spuId, skuIds);
 }

-/**
- * 获取 SPU 详情
- */
+/** 获取 SPU 详情 */
 async function getSpuDetails(
  spuId: number,
  skuIds?: number[],
  products?: MallPointActivityApi.PointProduct[],
 ) {
-  const spuProperties: SpuProperty<any>[] = [];
  const res = await getSpu(spuId);
-
  if (!res) {
    return;
  }
@@ -103,7 +101,6 @@ async function getSpuDetails(
    skuIds === undefined
      ? res.skus
      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
-
  // 为每个 SKU 配置积分商城相关的配置
  selectSkus?.forEach((sku: any) => {
    let config: MallPointActivityApi.PointProduct = {
@@ -113,7 +110,6 @@ async function getSpuDetails(
      point: 0,
      count: 0,
    };
-
    // 如果是编辑模式，回填已有配置
    if (products !== undefined) {
      const product = products.find((item) => item.skuId === sku.id);
@@ -122,19 +118,20 @@ async function getSpuDetails(
      }
      config = product || config;
    }
-
    sku.productConfig = config;
  });
-
  res.skus = selectSkus;

+  const spuProperties: SpuProperty[] = [];
  spuProperties.push({
    spuId: res.id!,
    spuDetail: res,
    propertyList: getPropertyList(res),
  });

+  // TODO @puhui999：貌似直接 = 下面的，不用 push？
  spuList.value.push(res);
+  // TODO @puhui999：貌似直接 = 下面的，不用 push？
  spuPropertyList.value = spuProperties;
 }

@@ -146,55 +143,43 @@ const [Modal, modalApi] = useVbenModal({
    if (!valid) {
      return;
    }
-
    modalApi.lock();
    try {
      // 获取积分商城商品配置
      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
+      await (formData.value?.id
        ? 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();
+    // 加载数据
+    const data = modalApi.getData<MallPointActivityApi.PointActivity>();
    if (!data || !data.id) {
-      // 新增模式
-      isFormUpdate.value = false;
      return;
    }
-
-    // 编辑模式
-    isFormUpdate.value = true;
    modalApi.lock();
-
    try {
      formData.value = await getPointActivity(data.id);
      await getSpuDetails(
@@ -202,6 +187,7 @@ const [Modal, modalApi] = useVbenModal({
        formData.value.products?.map((sku) => sku.skuId),
        formData.value.products,
      );
+      // 设置到 values
      await formApi.setValues(formData.value);
    } finally {
      modalApi.unlock();
@@ -212,11 +198,11 @@ const [Modal, modalApi] = useVbenModal({

 <template>
  <Modal :title="getTitle" class="w-[70%]">
-    <Form>
+    <Form class="mx-4">
      <!-- 商品选择 -->
      <template #spuId>
        <div class="w-full">
-          <Button v-if="!isFormUpdate" type="primary" @click="openSpuSelect">
+          <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
            选择商品
          </Button>

--- a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
@@ -1,5 +1,6 @@
 <!-- 积分活动橱窗组件 - 用于装修时展示和选择积分活动 -->
 <script lang="ts" setup>
+// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';

 import { computed, ref, watch } from 'vue';
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
@@ -1,5 +1,6 @@
 <!-- 积分活动表格选择器 -->
 <script lang="ts" setup>
+// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';