This commit is contained in:
xingyu4j
2025-10-23 09:47:08 +08:00
8 changed files with 55 additions and 105 deletions

View File

@@ -1,17 +1,12 @@
// 1. 导入类型
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
// 2. 导入 VBEN 常量和工具
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
// 3. 导入 Zod 用于高级验证
import { z } from '#/adapter/form';
/**
* @description: 列表的搜索表单
*/
// TODO @AI注释
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
@@ -27,12 +22,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
];
}
/**
* @description: 列表的字段
*/
// TODO @AI注释
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 40 },
{
field: 'id',
title: '活动编号',
@@ -77,20 +69,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'stock',
title: '库存',
minWidth: 80,
align: 'center',
},
{
field: 'totalStock',
title: '总库存',
minWidth: 80,
align: 'center',
},
{
field: 'redeemedQuantity',
title: '已兑换数量',
minWidth: 100,
align: 'center',
// 使用 formatter 计算已兑换数量
formatter: ({ row }) => {
return (row.totalStock || 0) - (row.stock || 0);
},
@@ -99,7 +88,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'createTime',
title: '创建时间',
minWidth: 180,
align: 'center',
formatter: 'formatDateTime',
},
{
@@ -111,12 +100,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
];
}
/**
* @description: 新增/修改的表单
*/
// TODO @AI注释下
export function useFormSchema(): VbenFormSchema[] {
return [
// 隐藏的 ID 字段
{
component: 'Input',
fieldName: 'id',
@@ -131,7 +117,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Input',
rules: 'required',
formItemClass: 'col-span-2',
// 通过插槽实现自定义商品选择器
renderComponentContent: () => ({
default: () => null,
}),

View File

@@ -18,37 +18,42 @@ import Form from './modules/form.vue';
defineOptions({ name: 'PromotionPointActivity' });
// 1. 使用 useVbenModal 初始化弹窗
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
// 2. 定义业务操作函数
// TODO @AI增加注释
function handleCreate() {
formModalApi.setData(null).open();
}
// TODO @AI增加注释
function handleEdit(row: any) {
formModalApi.setData(row).open();
}
// TODO @AI增加注释
async function handleClose(row: any) {
await confirm({
title: '提示',
content: '确认关闭该积分商城活动吗?',
});
await closePointActivity(row.id);
// TODO @AI增加 loading
message.success('关闭成功');
gridApi.query();
}
async function handleDelete(row: any) {
await deletePointActivity(row.id);
message.success($t('common.delSuccess'));
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
});
gridApi.query();
}
// TODO @AI增加注释
function handleRefresh() {
gridApi.query();
}
@@ -80,18 +85,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
</script>
<template>
<!-- TODO @puhui999不用 description -->
<Page
description="积分商城活动,用于管理积分兑换商品的配置"
doc-link="https://doc.iocoder.cn/mall/promotion-point/"
title="积分商城活动"
auto-content-height
>
<!-- 弹窗组件的注册 -->
<FormModal @success="handleRefresh" />
<!-- 列表组件的渲染 -->
<Grid table-title="积分商城活动列表">
<!-- 工具栏按钮 -->
<template #toolbar-tools>
<TableAction
:actions="[
@@ -105,7 +108,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
]"
/>
</template>
<!-- 操作列按钮 -->
<template #actions="{ row }">
<TableAction
:actions="[

View File

@@ -33,7 +33,6 @@ const getTitle = computed(() =>
isFormUpdate.value ? '编辑积分活动' : '新增积分活动',
);
// 1. 使用 useVbenForm 初始化表单
const [Form, formApi] = useVbenForm({
schema: useFormSchema(),
showDefaultActions: false,
@@ -69,6 +68,7 @@ const spuPropertyList = ref<SpuProperty<any>[]>([]); // SPU 属性列表
/**
* 打开商品选择器
*/
// TODO @puhui999spuSkuSelectRef.value.open is not a function
function openSpuSelect() {
spuSkuSelectRef.value.open();
}
@@ -140,9 +140,7 @@ async function getSpuDetails(
// ================= end =================
// 2. 使用 useVbenModal 定义弹窗行为
const [Modal, modalApi] = useVbenModal({
// "确认"按钮的回调
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
@@ -176,7 +174,6 @@ const [Modal, modalApi] = useVbenModal({
modalApi.unlock();
}
},
// 弹窗打开时的回调
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
// 关闭时清理状态
@@ -244,7 +241,6 @@ const [Modal, modalApi] = useVbenModal({
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="可兑换次数">
<template #default="{ row: sku }">
<InputNumber
@@ -254,7 +250,6 @@ const [Modal, modalApi] = useVbenModal({
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="所需积分">
<template #default="{ row: sku }">
<InputNumber
@@ -264,7 +259,6 @@ const [Modal, modalApi] = useVbenModal({
/>
</template>
</VxeColumn>
<VxeColumn align="center" min-width="168" title="所需金额(元)">
<template #default="{ row: sku }">
<InputNumber