oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat：【mall 商城】promotion point【antd】100%: 迁移完成

Browse Source
This commit is contained in:
puhui999
2025-10-22 16:52:43 +08:00
parent ae0f3d39a2
commit ca508caf61
7 changed files with 904 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
apps/web-antd/src/views/mall/promotion/point/activity/data.ts
View File

@@ -1,51 +1,18 @@
// 1. 导入类型
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE } from '@vben/constants';
// 2. 导入 VBEN 常量和工具
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { $t } from '@vben/locales';
/** 表单配置 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'spuId',
label: '积分商城活动商品',
component: 'Input',
componentProps: {
placeholder: '请选择商品',
},
rules: 'required',
},
{
fieldName: 'sort',
label: '排序',
component: 'InputNumber',
componentProps: {
placeholder: '请输入排序',
min: 0,
},
rules: 'required',
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
rows: 4,
},
},
];
}
// 3. 导入 Zod 用于高级验证
import { z } from '#/adapter/form';
/** 列表的搜索表单 */
/**
* @description: 列表的搜索表单
*/
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
@@ -53,17 +20,20 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '活动状态',
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择活动状态',
allowClear: true,
dictType: DICT_TYPE.COMMON_STATUS,
},
},
];
}
/** 列表的字段 */
/**
* @description: 列表的字段
*/
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'id',
title: '活动编号',
@@ -75,6 +45,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
minWidth: 80,
cellRender: {
name: 'CellImage',
props: {
height: 40,
},
},
},
{
@@ -86,55 +59,101 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'marketPrice',
title: '原价',
minWidth: 100,
formatter: 'formatAmount2',
},
{
field: 'point',
title: '兑换积分',
minWidth: 100,
},
{
field: 'price',
title: '兑换金额',
minWidth: 100,
formatter: 'formatAmount2',
formatter: 'formatAmount',
},
{
field: 'status',
title: '活动状态',
minWidth: 100,
align: 'center',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
props: {
type: DICT_TYPE.COMMON_STATUS,
value: CommonStatusEnum.ENABLE,
},
},
},
{
field: 'stock',
title: '库存',
minWidth: 80,
align: 'center',
},
{
field: 'totalStock',
title: '总库存',
minWidth: 80,
align: 'center',
},
{
field: 'redeemedQuantity',
title: '已兑换数量',
minWidth: 100,
slots: { default: 'redeemedQuantity' },
align: 'center',
// 使用 formatter 计算已兑换数量
formatter: ({ row }) => {
return (row.totalStock || 0) - (row.stock || 0);
},
},
{
field: 'createTime',
title: '创建时间',
title: $t('common.createTime'),
minWidth: 180,
align: 'center',
formatter: 'formatDateTime',
},
{
title: '操作',
title: $t('common.action'),
width: 150,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/**
* @description: 新增/修改的表单
*/
export function useFormSchema(): VbenFormSchema[] {
return [
// 隐藏的 ID 字段
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
fieldName: 'spuId',
label: '积分商城活动商品',
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2',
// 通过插槽实现自定义商品选择器
renderComponentContent: () => ({
default: () => null,
}),
},
{
fieldName: 'sort',
label: '排序',
component: 'InputNumber',
componentProps: {
min: 0,
},
rules: z.number().default(0),
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
rows: 4,
},
formItemClass: 'col-span-2',
},
];
}

157
apps/web-antd/src/views/mall/promotion/point/activity/index.vue
View File

@@ -1,10 +1,9 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallPointActivityApi } from '#/api/mall/promotion/point';
import { computed } from 'vue';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { confirm, Page, useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
@@ -17,144 +16,132 @@ import {
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import PointActivityForm from './modules/form.vue';
import Form from './modules/form.vue';
defineOptions({ name: 'PromotionPointActivity' });
// 1. 使用 useVbenModal 初始化弹窗
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: PointActivityForm,
connectedComponent: Form,
destroyOnClose: true,
});
/** 获得商品已兑换数量 */
const getRedeemedQuantity = computed(
() => (row: MallPointActivityApi.PointActivity) =>
(row.totalStock || 0) - (row.stock || 0),
);
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
/** 创建积分活动 */
// 2. 定义业务操作函数
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑积分活动 */
function handleEdit(row: MallPointActivityApi.PointActivity) {
function handleEdit(row: any) {
formModalApi.setData(row).open();
}
/** 关闭积分活动 */
function handleClose(row: MallPointActivityApi.PointActivity) {
confirm({
async function handleClose(row: any) {
await confirm({
title: '提示',
content: '确认关闭该积分商城活动吗？',
}).then(async () => {
await closePointActivity(row.id);
message.success('关闭成功');
handleRefresh();
});
await closePointActivity(row.id);
message.success('关闭成功');
gridApi.query();
}
/** 删除积分活动 */
async function handleDelete(row: MallPointActivityApi.PointActivity) {
async function handleDelete(row: any) {
await deletePointActivity(row.id);
handleRefresh();
message.success($t('common.delSuccess'));
gridApi.query();
}
function handleRefresh() {
gridApi.query();
}
// 计算操作按钮
const getActions = computed(() => (row: any) => {
const actions: any[] = [
{
label: $t('common.edit'),
icon: ACTION_ICON.EDIT,
onClick: handleEdit.bind(null, row),
},
];
// 如果状态是启用(0)，显示关闭按钮
if (row.status === 0) {
actions.push({
label: '关闭',
icon: ACTION_ICON.CLOSE,
danger: true,
popConfirm: {
title: '确认关闭该积分商城活动吗？',
confirm: handleClose.bind(null, row),
},
});
} else {
// 否则显示删除按钮
actions.push({
label: $t('common.delete'),
icon: ACTION_ICON.DELETE,
danger: true,
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
confirm: handleDelete.bind(null, row),
},
});
}
return actions;
});
// 3. 使用 useVbenVxeGrid 初始化列表
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getPointActivityPage({
const params = {
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
};
const data = await getPointActivityPage(params);
return { items: data.list, total: data.total };
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<MallPointActivityApi.PointActivity>,
} as VxeTableGridOptions,
});
</script>
<template>
<Page auto-content-height>
<template #doc>
<DocAlert
title="【营销】积分商城活动"
url="https://doc.iocoder.cn/mall/promotion-point/"
/>
</template>
<Page
description="积分商城活动，用于管理积分兑换商品的配置"
doc-link="https://doc.iocoder.cn/mall/promotion-point/"
title="积分商城活动"
>
<!-- 弹窗组件的注册 -->
<FormModal @success="handleRefresh" />
<!-- 列表组件的渲染 -->
<Grid table-title="积分商城活动列表">
<!-- 工具栏按钮 -->
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['积分活动']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['promotion:point-activity:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #redeemedQuantity="{ row }">
{{ getRedeemedQuantity(row) }}
</template>
<!-- 操作列按钮 -->
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
icon: ACTION_ICON.EDIT,
auth: ['promotion:point-activity:update'],
onClick: handleEdit.bind(null, row),
},
{
label: '关闭',
type: 'link',
danger: true,
auth: ['promotion:point-activity:close'],
ifShow: row.status === 0,
onClick: handleClose.bind(null, row),
},
{
label: $t('common.delete'),
type: 'link',
danger: true,
icon: ACTION_ICON.DELETE,
auth: ['promotion:point-activity:delete'],
ifShow: row.status !== 0,
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
<TableAction :actions="getActions(row)" />
</template>
</Grid>
</Page>

279
apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
View File

@@ -1,86 +1,208 @@
<script lang="ts" setup>
import type { MallPointActivityApi } from '#/api/mall/promotion/point';
import type { RuleConfig } from '#/views/mall/product/spu/form';
import type { SpuProperty } from '#/views/mall/promotion/components/types';
import { computed, ref } from 'vue';
import { useVbenForm, useVbenModal } from '@vben/common-ui';
import { useVbenModal } from '@vben/common-ui';
import { convertToInteger, formatToFraction } from '@vben/utils';
import { message } from 'ant-design-vue';
import { Button, InputNumber, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { VxeColumn } from '#/adapter/vxe-table';
import { getSpu } from '#/api/mall/product/spu';
import {
createPointActivity,
getPointActivity,
updatePointActivity,
} from '#/api/mall/promotion/point';
import { $t } from '#/locales';
import { getPropertyList } from '#/views/mall/product/spu/form';
import { SpuAndSkuList, SpuSkuSelect } from '../../../components';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MallPointActivityApi.PointActivity>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['积分活动'])
: $t('ui.actionTitle.create', ['积分活动']);
});
const formData = ref<MallPointActivityApi.PointActivity>(); // 用于存储当前编辑的数据
const isFormUpdate = ref(false); // 是否为编辑模式
const getTitle = computed(() =>
isFormUpdate.value ? '编辑积分活动' : '新增积分活动',
);
// 1. 使用 useVbenForm 初始化表单
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
labelWidth: 120,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
// ================= 商品选择相关 =================
const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
// SKU 规则配置
const ruleConfig: RuleConfig[] = [
{
name: 'productConfig.stock',
rule: (arg) => arg >= 1,
message: '商品可兑换库存必须大于等于 1 ！！！',
},
{
name: 'productConfig.point',
rule: (arg) => arg >= 1,
message: '商品所需兑换积分必须大于等于 1 ！！！',
},
{
name: 'productConfig.count',
rule: (arg) => arg >= 1,
message: '商品可兑换次数必须大于等于 1 ！！！',
},
];
const spuList = ref<any[]>([]); // 选择的 SPU 列表
const spuPropertyList = ref<SpuProperty<any>[]>([]); // SPU 属性列表
/**
* 打开商品选择器
*/
function openSpuSelect() {
spuSkuSelectRef.value.open();
}
/**
* 选择商品后的回调
*/
async function handleSpuSelected(spuId: number, skuIds?: number[]) {
await formApi.setFieldValue('spuId', spuId);
await getSpuDetails(spuId, skuIds);
}
/**
* 获取 SPU 详情
*/
async function getSpuDetails(
spuId: number,
skuIds?: number[],
products?: MallPointActivityApi.PointProduct[],
) {
const spuProperties: SpuProperty<any>[] = [];
const res = await getSpu(spuId);
if (!res) {
return;
}
spuList.value = [];
// 筛选指定的 SKU
const selectSkus =
skuIds === undefined
? res.skus
: res.skus?.filter((sku) => skuIds.includes(sku.id!));
// 为每个 SKU 配置积分商城相关的配置
selectSkus?.forEach((sku: any) => {
let config: MallPointActivityApi.PointProduct = {
skuId: sku.id!,
stock: 0,
price: 0,
point: 0,
count: 0,
};
// 如果是编辑模式，回填已有配置
if (products !== undefined) {
const product = products.find((item) => item.skuId === sku.id);
if (product) {
product.price = formatToFraction(product.price) as unknown as number;
}
config = product || config;
}
sku.productConfig = config;
});
res.skus = selectSkus;
spuProperties.push({
spuId: res.id!,
spuDetail: res,
propertyList: getPropertyList(res),
});
spuList.value.push(res);
spuPropertyList.value = spuProperties;
}
// ================= end =================
// 2. 使用 useVbenModal 定义弹窗行为
const [Modal, modalApi] = useVbenModal({
// "确认"按钮的回调
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
if (!valid) return;
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MallPointActivityApi.PointActivity;
// 确保必要的默认值
if (!data.products) {
data.products = [];
}
if (!data.sort) {
data.sort = 0;
}
try {
await (formData.value?.id
// 获取积分商城商品配置
const products: MallPointActivityApi.PointProduct[] =
spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [];
// 价格需要转为分
products.forEach((item) => {
item.price = convertToInteger(item.price);
});
const data =
(await formApi.getValues()) as MallPointActivityApi.PointActivity;
data.products = products;
// 真正提交
await (isFormUpdate.value
? updatePointActivity(data)
: createPointActivity(data));
// 关闭并提示
message.success($t('ui.actionMessage.operationSuccess'));
await modalApi.close();
emit('success');
message.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
// 弹窗打开时的回调
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// 关闭时清理状态
formData.value = undefined;
isFormUpdate.value = false;
spuList.value = [];
spuPropertyList.value = [];
return;
}
// 加载数据
const data = modalApi.getData<MallPointActivityApi.PointActivity>();
const data = modalApi.getData();
if (!data || !data.id) {
// 新增模式
isFormUpdate.value = false;
return;
}
// 编辑模式
isFormUpdate.value = true;
modalApi.lock();
try {
formData.value = await getPointActivity(data.id);
// 设置到 values
await getSpuDetails(
formData.value.spuId,
formData.value.products?.map((sku) => sku.skuId),
formData.value.products,
);
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
@@ -90,16 +212,79 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-3/5" :title="getTitle">
<div class="p-4">
<div class="mb-4 rounded border border-yellow-200 bg-yellow-50 p-4">
<p class="text-yellow-800">
<strong>注意：</strong>
积分活动涉及复杂的商品选择和SKU配置，当前为简化版本。
完整的商品选择和积分配置功能需要在后续版本中完善。
</p>
</div>
<Form />
</div>
<Modal :title="getTitle" class="w-[70%]">
<Form>
<!-- 商品选择 -->
<template #spuId>
<div class="w-full">
<Button v-if="!isFormUpdate" type="primary" @click="openSpuSelect">
选择商品
</Button>
<!-- SPU 和 SKU 列表展示 -->
<SpuAndSkuList
v-if="spuList.length > 0"
ref="spuAndSkuListRef"
:rule-config="ruleConfig"
:spu-list="spuList"
:spu-property-list="spuPropertyList"
class="mt-4"
>
<!-- 扩展列：积分商城特有配置 -->
<template #default>
<VxeColumn align="center" min-width="168" title="可兑换库存">
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.stock"
:max="sku.stock"
:min="0"
class="w-full"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="可兑换次数">
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.count"
:min="0"
class="w-full"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="所需积分">
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.point"
:min="0"
class="w-full"
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="所需金额(元)">
<template #default="{ row: sku }">
<InputNumber
v-model:value="sku.productConfig.price"
:min="0"
:precision="2"
:step="0.1"
class="w-full"
/>
</template>
</VxeColumn>
</template>
</SpuAndSkuList>
</div>
</template>
</Form>
<!-- 商品选择器弹窗 -->
<SpuSkuSelect
ref="spuSkuSelectRef"
:is-select-sku="true"
@confirm="handleSpuSelected"
/>
</Modal>
</template>