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

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: {
+        props: { type: DICT_TYPE.COMMON_STATUS },
-          type: DICT_TYPE.COMMON_STATUS,
-          value: CommonStatusEnum.ENABLE,
-        },
       },
     },
     {
@@ -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',
-    },
   ];
 }

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 { Page, useVbenModal } from '@vben/common-ui';
-
-import { confirm, 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 ！
+function handleCreate() {
-const getActions = computed(() => (row: any) => {
+  formModalApi.setData(null).open();
-  const actions: any[] = [
+}
-    {
+
-      label: $t('common.edit'),
+/** 编辑积分商城活动 */
-      icon: ACTION_ICON.EDIT,
+function handleEdit(row: any) {
-      onClick: handleEdit.bind(null, row),
+  formModalApi.setData(row).open();
-    },
+}
-  ];
+
-  if (row.status === 0) {
+/** 关闭积分商城活动 */
-    actions.push({
+async function handleClose(row: any) {
-      label: '关闭',
+  const hideLoading = message.loading({
-      icon: ACTION_ICON.CLOSE,
+    content: '正在关闭中...',
-      danger: true,
+    duration: 0,
-      popConfirm: {
+  });
-        title: '确认关闭该积分商城活动吗？',
+  try {
-        confirm: handleClose.bind(null, row),
+    await closePointActivity(row.id);
-      },
+    message.success('关闭成功');
-    });
+    handleRefresh();
-  } else {
+  } finally {
-    actions.push({
+    hideLoading();
-      label: $t('common.delete'),
+  }
-      icon: ACTION_ICON.DELETE,
+}
-      danger: true,
+
-      popConfirm: {
+/** 删除积分商城活动 */
-        title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
+async function handleDelete(row: any) {
-        confirm: handleDelete.bind(null, row),
+  const hideLoading = message.loading({
-      },
+    content: $t('ui.actionMessage.deleting', [row.spuName]),
-    });
+    duration: 0,
-  }
+  });
-  return actions;
+  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 auto-content-height>
-  <Page
-    description="积分商城活动，用于管理积分兑换商品的配置"
-    doc-link="https://doc.iocoder.cn/mall/promotion-point/"
-    title="积分商城活动"
-  >
     <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>

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

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';

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';