diff --git a/apps/web-antd/src/views/mall/promotion/coupon/data.ts b/apps/web-antd/src/views/mall/promotion/coupon/data.ts index 1543185ad..3d104b51c 100644 --- a/apps/web-antd/src/views/mall/promotion/coupon/data.ts +++ b/apps/web-antd/src/views/mall/promotion/coupon/data.ts @@ -108,4 +108,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { }, ]; } - diff --git a/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts b/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts index 2c055554b..d4825667b 100644 --- a/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts +++ b/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, +): 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', diff --git a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue index e94436d85..eee46b6a9 100644 --- a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue +++ b/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([]); -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 { + 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, - gridEvents: { - checkboxAll: handleRowCheckboxChange, - checkboxChange: handleRowCheckboxChange, - }, }); @@ -151,15 +136,6 @@ const [Grid, gridApi] = useVbenVxeGrid({ ]" /> - -