diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/data.ts b/apps/web-antd/src/views/mall/promotion/coupon/components/data.ts new file mode 100644 index 000000000..35a823b79 --- /dev/null +++ b/apps/web-antd/src/views/mall/promotion/coupon/components/data.ts @@ -0,0 +1,64 @@ +import type { VbenFormSchema } from '#/adapter/form'; +import type { VxeGridProps } from '#/adapter/vxe-table'; + +import { + discountFormat, + remainedCountFormat, + usePriceFormat, + validityTypeFormat, +} from '../formatter'; + +/** 搜索表单的 schema */ +export function useFormSchema(): VbenFormSchema[] { + return [ + { + component: 'Input', + fieldName: 'name', + label: '优惠券名称', + componentProps: { + placeholder: '请输入优惠券名称', + allowClear: true, + }, + }, + ]; +} + +/** 表格列配置 */ +export function useGridColumns(): VxeGridProps['columns'] { + return [ + { + title: '优惠券名称', + field: 'name', + minWidth: 120, + }, + { + title: '优惠金额 / 折扣', + field: 'discount', + minWidth: 120, + formatter: ({ row }) => discountFormat(row), + }, + { + title: '最低消费', + field: 'usePrice', + minWidth: 100, + formatter: ({ row }) => usePriceFormat(row), + }, + { + title: '有效期限', + field: 'validityType', + minWidth: 140, + formatter: ({ row }) => validityTypeFormat(row), + }, + { + title: '剩余数量', + minWidth: 100, + formatter: ({ row }) => remainedCountFormat(row), + }, + { + title: '操作', + width: 100, + fixed: 'right', + slots: { default: 'actions' }, + }, + ]; +} diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts b/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts new file mode 100644 index 000000000..3e18ad3c7 --- /dev/null +++ b/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts @@ -0,0 +1,2 @@ +export { default as CouponSendForm } from './send-form.vue'; +export * from './data'; \ No newline at end of file diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/CouponSendForm.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue similarity index 59% rename from apps/web-antd/src/views/mall/promotion/coupon/components/CouponSendForm.vue rename to apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue index 7a6247606..442217efe 100644 --- a/apps/web-antd/src/views/mall/promotion/coupon/components/CouponSendForm.vue +++ b/apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue @@ -11,12 +11,7 @@ import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { sendCoupon } from '#/api/mall/promotion/coupon/coupon'; import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate'; -import { - discountFormat, - remainedCountFormat, - usePriceFormat, - validityTypeFormat, -} from '../formatter'; +import { useFormSchema, useGridColumns } from './data'; /** 发送优惠券 */ async function handleSendCoupon(row: MallCouponTemplateApi.CouponTemplate) { @@ -35,57 +30,10 @@ async function handleSendCoupon(row: MallCouponTemplateApi.CouponTemplate) { const [Grid] = useVbenVxeGrid({ formOptions: { - // TODO @AI:挪到 data.ts - schema: [ - { - component: 'Input', - fieldName: 'name', - label: '优惠券名称', - componentProps: { - placeholder: '请输入优惠券名称', - allowClear: true, - }, - }, - ], + schema: useFormSchema(), }, gridOptions: { - // TODO @AI:挪到 data.ts - columns: [ - { - title: '优惠券名称', - field: 'name', - minWidth: 120, - }, - { - title: '优惠金额 / 折扣', - field: 'discount', - minWidth: 120, - formatter: ({ row }) => discountFormat(row), - }, - { - title: '最低消费', - field: 'usePrice', - minWidth: 100, - formatter: ({ row }) => usePriceFormat(row), - }, - { - title: '有效期限', - field: 'validityType', - minWidth: 140, - formatter: ({ row }) => validityTypeFormat(row), - }, - { - title: '剩余数量', - minWidth: 100, - formatter: ({ row }) => remainedCountFormat(row), - }, - { - title: '操作', - width: 100, - fixed: 'right', - slots: { default: 'actions' }, - }, - ], + columns: useGridColumns(), height: 500, keepSource: true, proxyConfig: { @@ -111,7 +59,10 @@ const [Grid] = useVbenVxeGrid({ } as VxeGridProps, }); -const [Modal, modalApi] = useVbenModal({}); +const [Modal, modalApi] = useVbenModal({ + showCancelButton: false, + showConfirmButton: false, +});