feat：【mall 商城】优惠劵-模版（50% antd）

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

@@ -108,4 +108,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
-

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

@@ -1,10 +1,10 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
 import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-// 格式化函数移到组件内部实现
 import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -40,6 +40,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'description',
       label: '优惠券描述',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入优惠券描述',
+      },
     },
     // TODO @xingyu：不同的优惠，不同的选择
     {
@@ -48,6 +51,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'RadioGroup',
       componentProps: {
         options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
       rules: 'required',
     },
@@ -117,7 +122,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '优惠券名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入优惠券名称',
+        placeholder: '请输入优惠劵名',
         allowClear: true,
       },
     },
@@ -154,9 +159,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: MallCouponTemplateApi.CouponTemplate,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
   return [
-    { type: 'checkbox', width: 40 },
     {
       field: 'name',
       title: '优惠券名称',
@@ -233,7 +242,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'status',
       title: '状态',
       minWidth: 100,
-      slots: { default: 'status' },
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
     },
     {
       field: 'createTime',

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

@@ -2,13 +2,11 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { ref } from 'vue';
-
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { CommonStatusEnum } from '@vben/constants';
 import { $t } from '@vben/locales';
 
-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -49,47 +47,38 @@ async function handleDelete(row: MallCouponTemplateApi.CouponTemplate) {
     duration: 0,
   });
   try {
-    await deleteCouponTemplate(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteCouponTemplate(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
-const checkedIds = ref<number[]>([]);
-function handleRowCheckboxChange({
-  records,
-}: {
-  records: MallCouponTemplateApi.CouponTemplate[];
-}) {
-  checkedIds.value = records.map((item) => item.id!);
-}
-
 /** 优惠券模板状态修改 */
-async function handleStatusChange(row: MallCouponTemplateApi.CouponTemplate) {
-  const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用';
-  const hideLoading = message.loading({
-    content: `正在${text}优惠券模板...`,
-    key: 'status_key_msg',
+async function handleStatusChange(
+  newStatus: number,
+  row: MallCouponTemplateApi.CouponTemplate,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${row.name}的状态切换为【${newStatus === CommonStatusEnum.ENABLE ? '启用' : '停用'}】吗？`,
+    })
+      .then(async () => {
+        // 更新优惠券模板状态
+        const res = await updateCouponTemplateStatus(row.id!, newStatus);
+        if (res) {
+          // 提示并返回成功
+          message.success($t('ui.actionMessage.operationSuccess'));
+          resolve(true);
+        } else {
+          reject(new Error('更新失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
   });
-  try {
-    await updateCouponTemplateStatus(row.id, row.status as 0 | 1);
-    message.success({
-      content: `${text}成功`,
-      key: 'status_key_msg',
-    });
-  } catch {
-    // 异常时，需要将 row.status 状态重置回之前的
-    row.status =
-      row.status === CommonStatusEnum.ENABLE
-        ? CommonStatusEnum.DISABLE
-        : CommonStatusEnum.ENABLE;
-  } finally {
-    hideLoading();
-  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -97,7 +86,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleStatusChange),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -120,10 +109,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
-  gridEvents: {
-    checkboxAll: handleRowCheckboxChange,
-    checkboxChange: handleRowCheckboxChange,
-  },
 });
 </script>
 
@@ -151,15 +136,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <template #status="{ row }">
-        <Switch
-          v-model:checked="row.status"
-          :checked-value="CommonStatusEnum.ENABLE"
-          :un-checked-value="CommonStatusEnum.DISABLE"
-          @change="handleStatusChange(row)"
-        />
-      </template>
-
       <template #actions="{ row }">
         <TableAction
           :actions="[