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) {

4
apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts
View File

@@ -19,7 +19,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '优惠券名称',
component: 'Input',
componentProps: {
placeholder: '请输入优惠劵名',
placeholder: '请输入优惠券名称',
clearable: true,
},
},
@@ -29,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
placeholder: '请选择优惠券类型',
placeholder: '请选择优惠类型',
clearable: true,
},
},

17
apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
View File

@@ -5,17 +5,14 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
import { useVbenModal } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
import {
useGridColumns,
useGridFormSchema,
} from './select-data';
import { useGridColumns, useGridFormSchema } from './select-data';
defineOptions({ name: 'CouponSelect' });
const props = defineProps<{
takeType: number; // 领取方式
takeType?: number; // 领取方式
}>();
const emit = defineEmits(['success']);
@@ -31,7 +28,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await CouponTemplateApi.getCouponTemplatePage({
return await getCouponTemplatePage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
@@ -54,7 +51,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
// 从 gridApi 获取选中的记录
const selectedRecords = (gridApi.grid?.getCheckboxRecords() || []) as MallCouponTemplateApi.CouponTemplate[];
const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
[]) as MallCouponTemplateApi.CouponTemplate[];
await modalApi.close();
emit('success', selectedRecords);
},
@@ -62,8 +60,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal title="选择优惠劵" class="w-3/5">
<Modal title="选择优惠券" class="w-2/3">
<Grid />
</Modal>
</template>

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

19
apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
View File

@@ -19,9 +19,12 @@ import {
ElTooltip,
} from 'element-plus';
import * as DiyPageApi from '#/api/mall/promotion/diy/page';
import * as DiyTemplateApi from '#/api/mall/promotion/diy/template';
import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
import { updateDiyPageProperty } from '#/api/mall/promotion/diy/page';
import {
getDiyTemplateProperty,
updateDiyTemplateProperty,
} from '#/api/mall/promotion/diy/template';
import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
/** 装修模板表单 */
defineOptions({ name: 'DiyTemplateDecorate' });
@@ -59,7 +62,7 @@ async function getPageDetail(id: any) {
text: '加载中...',
});
try {
formData.value = await DiyTemplateApi.getDiyTemplateProperty(id);
formData.value = await getDiyTemplateProperty(id);
// 拼接手机预览链接
const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
@@ -116,20 +119,18 @@ async function submitForm() {
// 情况一：基础设置
if (i === 0) {
// 提交模板属性
await DiyTemplateApi.updateDiyTemplateProperty(
isEmpty(data) ? formData.value! : data,
);
await updateDiyTemplateProperty(isEmpty(data) ? formData.value! : data);
continue;
}
// 提交页面属性
// 情况二：提交当前正在编辑的页面
if (currentFormData.value?.name.includes(templateItem.name)) {
await DiyPageApi.updateDiyPageProperty(currentFormData.value!);
await updateDiyPageProperty(currentFormData.value!);
continue;
}
// 情况三：提交页面编辑缓存
if (!isEmpty(data)) {
await DiyPageApi.updateDiyPageProperty(data!);
await updateDiyPageProperty(data!);
}
}
ElMessage.success('保存成功');