smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【antd】【ele】优惠劵的 select 组件的统一

Browse Source
This commit is contained in:
YunaiV
2025-11-02 08:42:30 +08:00
parent 682a63bc6e
commit 01e3c8e0f6
10 changed files with 181 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
apps/web-antd/src/views/mall/promotion/coupon/components/coupon-select.vue
View File

@@ -1,117 +0,0 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
import { DictTag } from '#/components/dict-tag';
import { discountFormat } from '../formatter';
import { useCouponSelectFormSchema, useCouponSelectGridColumns } from './data';
defineOptions({ name: 'CouponSelect' });
const props = defineProps<{
takeType?: number; // 领取方式
}>();
const emit = defineEmits<{
change: [value: MallCouponTemplateApi.CouponTemplate[]];
}>();
const selectedCoupons = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
/** Grid 配置 */
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useCouponSelectFormSchema(),
},
gridOptions: {
columns: useCouponSelectGridColumns(),
height: '500px',
keepSource: true,
proxyConfig: {
ajax: {
// TODO @芋艿：要不要 ele 和 antd 统一下；
query: async ({ page }, formValues) => {
const params: any = {
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
};
// 如果有 takeType 参数，添加到查询条件
if (props.takeType !== undefined) {
params.canTakeTypes = [props.takeType];
}
return await getCouponTemplatePage(params);
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
gridEvents: {
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
},
});
/** 复选框变化处理 */
function handleRowCheckboxChange({
records,
}: {
records: MallCouponTemplateApi.CouponTemplate[];
}) {
selectedCoupons.value = records;
}
/** Modal 配置 */
const [Modal, modalApi] = useVbenModal({
onConfirm() {
emit('change', selectedCoupons.value);
modalApi.close();
},
onOpenChange(isOpen: boolean) {
if (!isOpen) {
selectedCoupons.value = [];
return;
}
gridApi.query();
},
});
/** 打开弹窗 */
function open() {
modalApi.open();
}
defineExpose({ open });
</script>
<template>
<Modal title="选择优惠券" class="w-2/3">
<Grid table-title="优惠券列表">
<!-- 优惠列自定义渲染 -->
<template #discount="{ row }">
<DictTag
:type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
:value="row.discountType"
/>
<span class="ml-1">{{ discountFormat(row) }}</span>
</template>
</Grid>
</Modal>
</template>

3
apps/web-antd/src/views/mall/promotion/coupon/components/index.ts
View File

@@ -1,3 +1,2 @@
export { default as CouponSelect } from './coupon-select.vue';
export * from './data';
export { default as CouponSelect } from './select.vue';
export { default as CouponSendForm } from './send-form.vue';

104
apps/web-antd/src/views/mall/promotion/coupon/components/data.ts → apps/web-antd/src/views/mall/promotion/coupon/components/select-data.ts
View File

@@ -1,5 +1,5 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
@@ -8,26 +8,25 @@ import {
discountFormat,
remainedCountFormat,
takeLimitCountFormat,
usePriceFormat,
validityTypeFormat,
} from '../formatter';
/** 优惠券选择弹窗的搜索表单 schema */
export function useCouponSelectFormSchema(): VbenFormSchema[] {
/** 优惠券选择的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'name',
label: '优惠券名称',
component: 'Input',
componentProps: {
placeholder: '请输入优惠券名称',
allowClear: true,
},
},
{
component: 'Select',
fieldName: 'discountType',
label: '优惠类型',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
placeholder: '请选择优惠类型',
@@ -37,33 +36,18 @@ export function useCouponSelectFormSchema(): VbenFormSchema[] {
];
}
/** 搜索表单的 schema */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'name',
label: '优惠券名称',
componentProps: {
placeholder: '请输入优惠券名称',
allowClear: true,
},
},
];
}
/** 优惠券选择弹窗的表格列配置 */
export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
/** 优惠券选择的表格列 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 55 },
{
title: '优惠券名称',
field: 'name',
title: '优惠券名称',
minWidth: 140,
},
{
title: '类型',
field: 'productScope',
title: '类型',
minWidth: 80,
cellRender: {
name: 'CellDict',
@@ -71,14 +55,23 @@ export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
},
},
{
title: '优惠',
field: 'discount',
field: 'discountType',
title: '优惠类型',
minWidth: 100,
slots: { default: 'discount' },
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PROMOTION_DISCOUNT_TYPE },
},
},
{
field: 'discountPrice',
title: '优惠力度',
minWidth: 100,
formatter: ({ row }) => discountFormat(row),
},
{
title: '领取方式',
field: 'takeType',
title: '领取方式',
minWidth: 100,
cellRender: {
name: 'CellDict',
@@ -86,36 +79,37 @@ export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
},
},
{
title: '使用时间',
field: 'validityType',
title: '使用时间',
minWidth: 185,
align: 'center',
formatter: ({ row }) => validityTypeFormat(row),
},
{
title: '发放数量',
field: 'totalCount',
align: 'center',
title: '发放数量',
minWidth: 100,
align: 'center',
},
{
field: 'remainedCount',
title: '剩余数量',
minWidth: 100,
align: 'center',
formatter: ({ row }) => remainedCountFormat(row),
},
{
title: '领取上限',
field: 'takeLimitCount',
title: '领取上限',
minWidth: 100,
align: 'center',
formatter: ({ row }) => takeLimitCountFormat(row),
},
{
title: '状态',
field: 'status',
align: 'center',
title: '状态',
minWidth: 80,
align: 'center',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
@@ -123,43 +117,3 @@ export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
},
];
}
/** 表格列配置 */
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' },
},
];
}

66
apps/web-antd/src/views/mall/promotion/coupon/components/select.vue Normal file
View File

@@ -0,0 +1,66 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
import { useVbenModal } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
import { useGridColumns, useGridFormSchema } from './select-data';
defineOptions({ name: 'CouponSelect' });
const props = defineProps<{
takeType?: number; // 领取方式
}>();
const emit = defineEmits(['success']);
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 500,
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getCouponTemplatePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
canTakeTypes: props.takeType ? [props.takeType] : [],
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
// 从 gridApi 获取选中的记录
const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
[]) as MallCouponTemplateApi.CouponTemplate[];
await modalApi.close();
emit('success', selectedRecords);
},
});
</script>
<template>
<Modal title="选择优惠券" class="w-2/3">
<Grid />
</Modal>
</template>

64
apps/web-antd/src/views/mall/promotion/coupon/components/send-form-data.ts Normal file
View File

@@ -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' },
},
];
}

2
apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue
View File

@@ -11,7 +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 { useFormSchema, useGridColumns } from './data';
import { useFormSchema, useGridColumns } from './send-form-data';
/** 发送优惠券 */
async function handleSendCoupon(row: MallCouponTemplateApi.CouponTemplate) {