feat：【mall 商城】promotion point【antd】100%: 迁移完成

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

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
 import { computed } from 'vue';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
@@ -17,144 +16,132 @@ 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' });
 
+// 1. 使用 useVbenModal 初始化弹窗
 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();
-}
-
-/** 创建积分活动 */
+// 2. 定义业务操作函数
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑积分活动 */
-function handleEdit(row: MallPointActivityApi.PointActivity) {
+function handleEdit(row: any) {
   formModalApi.setData(row).open();
 }
 
-/** 关闭积分活动 */
-function handleClose(row: MallPointActivityApi.PointActivity) {
-  confirm({
+async function handleClose(row: any) {
+  await confirm({
+    title: '提示',
     content: '确认关闭该积分商城活动吗？',
-  }).then(async () => {
-    await closePointActivity(row.id);
-    message.success('关闭成功');
-    handleRefresh();
   });
+  await closePointActivity(row.id);
+  message.success('关闭成功');
+  gridApi.query();
 }
 
-/** 删除积分活动 */
-async function handleDelete(row: MallPointActivityApi.PointActivity) {
+async function handleDelete(row: any) {
   await deletePointActivity(row.id);
-  handleRefresh();
+  message.success($t('common.delSuccess'));
+  gridApi.query();
 }
 
+function handleRefresh() {
+  gridApi.query();
+}
+
+// 计算操作按钮
+const getActions = computed(() => (row: any) => {
+  const actions: any[] = [
+    {
+      label: $t('common.edit'),
+      icon: ACTION_ICON.EDIT,
+      onClick: handleEdit.bind(null, row),
+    },
+  ];
+
+  // 如果状态是启用(0)，显示关闭按钮
+  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;
+});
+
+// 3. 使用 useVbenVxeGrid 初始化列表
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
-    height: 'auto',
-    keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await getPointActivityPage({
+          const params = {
             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<MallPointActivityApi.PointActivity>,
+  } as VxeTableGridOptions,
 });
 </script>
 
 <template>
-  <Page auto-content-height>
-    <template #doc>
-      <DocAlert
-        title="【营销】积分商城活动"
-        url="https://doc.iocoder.cn/mall/promotion-point/"
-      />
-    </template>
-
+  <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,
-              auth: ['promotion:point-activity:create'],
               onClick: handleCreate,
             },
           ]"
         />
       </template>
-      <template #redeemedQuantity="{ row }">
-        {{ getRedeemedQuantity(row) }}
-      </template>
+      <!-- 操作列按钮 -->
       <template #actions="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: $t('common.edit'),
-              type: 'link',
-              icon: ACTION_ICON.EDIT,
-              auth: ['promotion:point-activity:update'],
-              onClick: handleEdit.bind(null, row),
-            },
-            {
-              label: '关闭',
-              type: 'link',
-              danger: true,
-              auth: ['promotion:point-activity:close'],
-              ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
-            },
-            {
-              label: $t('common.delete'),
-              type: 'link',
-              danger: true,
-              icon: ACTION_ICON.DELETE,
-              auth: ['promotion:point-activity:delete'],
-              ifShow: row.status !== 0,
-              popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
-                confirm: handleDelete.bind(null, row),
-              },
-            },
-          ]"
-        />
+        <TableAction :actions="getActions(row)" />
       </template>
     </Grid>
   </Page>