diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts index 5b324ae7d..e65e58b0b 100644 --- a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts +++ b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts @@ -1,13 +1,11 @@ import type { VbenFormSchema } from '#/adapter/form'; import type { VxeTableGridOptions } from '#/adapter/vxe-table'; -import { CommonStatusEnum, DICT_TYPE } from '@vben/constants'; +import { DICT_TYPE } from '@vben/constants'; import { getDictOptions } from '@vben/hooks'; -import { $t } from '@vben/locales'; +import { fenToYuan } from '@vben/utils'; -import { z } from '#/adapter/form'; - -// TODO @AI:注释 +/** 列表的搜索表单 */ export function useGridFormSchema(): VbenFormSchema[] { return [ { @@ -23,7 +21,7 @@ export function useGridFormSchema(): VbenFormSchema[] { ]; } -// TODO @AI:注释 +/** 列表的表格列 */ export function useGridColumns(): VxeTableGridOptions['columns'] { return [ { @@ -51,19 +49,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { field: 'marketPrice', title: '原价', minWidth: 100, - formatter: 'formatAmount', + formatter: ({ row }) => `¥${fenToYuan(row.marketPrice)}`, }, { field: 'status', title: '活动状态', minWidth: 100, - align: 'center', cellRender: { name: 'CellDict', - props: { - type: DICT_TYPE.COMMON_STATUS, - value: CommonStatusEnum.ENABLE, - }, + props: { type: DICT_TYPE.COMMON_STATUS }, }, }, { @@ -80,20 +74,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { field: 'redeemedQuantity', title: '已兑换数量', minWidth: 100, - formatter: ({ row }) => { return (row.totalStock || 0) - (row.stock || 0); }, }, { field: 'createTime', - title: $t('common.createTime'), + title: '创建时间', minWidth: 180, - formatter: 'formatDateTime', }, { - title: $t('common.action'), + title: '操作', width: 150, fixed: 'right', slots: { default: 'actions' }, @@ -101,7 +93,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { ]; } -// TODO @AI:注释下 +/** 新增/修改的表单 */ export function useFormSchema(): VbenFormSchema[] { return [ { @@ -112,9 +104,30 @@ export function useFormSchema(): VbenFormSchema[] { show: () => false, }, }, + { + fieldName: 'sort', + label: '排序', + component: 'InputNumber', + componentProps: { + min: 0, + placeholder: '请输入排序', + class: '!w-full', + }, + rules: 'required', + }, + { + fieldName: 'remark', + label: '备注', + component: 'Textarea', + componentProps: { + placeholder: '请输入备注', + rows: 4, + }, + formItemClass: 'col-span-2', + }, { fieldName: 'spuId', - label: '积分商城活动商品', + label: '活动商品', component: 'Input', rules: 'required', formItemClass: 'col-span-2', @@ -122,23 +135,5 @@ export function useFormSchema(): VbenFormSchema[] { 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', - }, ]; } diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/index.vue b/apps/web-antd/src/views/mall/promotion/point/activity/index.vue index 196b6f36a..762d47087 100644 --- a/apps/web-antd/src/views/mall/promotion/point/activity/index.vue +++ b/apps/web-antd/src/views/mall/promotion/point/activity/index.vue @@ -1,9 +1,7 @@ - - + - - + diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue index a74f01a6f..5727cb347 100644 --- a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue +++ b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue @@ -25,15 +25,22 @@ import { SpuAndSkuList, SpuSkuSelect } from '../../../components'; import { useFormSchema } from '../data'; const emit = defineEmits(['success']); - -const formData = ref(); // 用于存储当前编辑的数据 -const isFormUpdate = ref(false); // 是否为编辑模式 - -const getTitle = computed(() => - isFormUpdate.value ? '编辑积分活动' : '新增积分活动', -); +const formData = ref(); +const getTitle = computed(() => { + return formData.value?.id + ? $t('ui.actionTitle.edit', ['积分活动']) + : $t('ui.actionTitle.create', ['积分活动']); +}); const [Form, formApi] = useVbenForm({ + commonConfig: { + componentProps: { + class: 'w-full', + }, + formItemClass: 'col-span-2', + labelWidth: 100, + }, + layout: 'horizontal', schema: useFormSchema(), showDefaultActions: false, }); @@ -43,7 +50,6 @@ const [Form, formApi] = useVbenForm({ const spuSkuSelectRef = ref(); // 商品和属性选择 Ref const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref -// SKU 规则配置 const ruleConfig: RuleConfig[] = [ { name: 'productConfig.stock', @@ -60,38 +66,30 @@ const ruleConfig: RuleConfig[] = [ rule: (arg) => arg >= 1, message: '商品可兑换次数必须大于等于 1 !!!', }, -]; +]; // SKU 规则配置 const spuList = ref([]); // 选择的 SPU 列表 const spuPropertyList = ref[]>([]); // SPU 属性列表 -/** - * 打开商品选择器 - */ +/** 打开商品选择器 */ // TODO @puhui999:spuSkuSelectRef.value.open is not a function function openSpuSelect() { spuSkuSelectRef.value.open(); } -/** - * 选择商品后的回调 - */ +/** 选择商品后的回调 */ async function handleSpuSelected(spuId: number, skuIds?: number[]) { await formApi.setFieldValue('spuId', spuId); await getSpuDetails(spuId, skuIds); } -/** - * 获取 SPU 详情 - */ +/** 获取 SPU 详情 */ async function getSpuDetails( spuId: number, skuIds?: number[], products?: MallPointActivityApi.PointProduct[], ) { - const spuProperties: SpuProperty[] = []; const res = await getSpu(spuId); - if (!res) { return; } @@ -103,7 +101,6 @@ async function getSpuDetails( skuIds === undefined ? res.skus : res.skus?.filter((sku) => skuIds.includes(sku.id!)); - // 为每个 SKU 配置积分商城相关的配置 selectSkus?.forEach((sku: any) => { let config: MallPointActivityApi.PointProduct = { @@ -113,7 +110,6 @@ async function getSpuDetails( point: 0, count: 0, }; - // 如果是编辑模式,回填已有配置 if (products !== undefined) { const product = products.find((item) => item.skuId === sku.id); @@ -122,19 +118,20 @@ async function getSpuDetails( } config = product || config; } - sku.productConfig = config; }); - res.skus = selectSkus; + const spuProperties: SpuProperty[] = []; spuProperties.push({ spuId: res.id!, spuDetail: res, propertyList: getPropertyList(res), }); + // TODO @puhui999:貌似直接 = 下面的,不用 push? spuList.value.push(res); + // TODO @puhui999:貌似直接 = 下面的,不用 push? spuPropertyList.value = spuProperties; } @@ -146,55 +143,43 @@ const [Modal, modalApi] = useVbenModal({ if (!valid) { return; } - modalApi.lock(); try { // 获取积分商城商品配置 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 + await (formData.value?.id ? 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(); + // 加载数据 + const data = modalApi.getData(); if (!data || !data.id) { - // 新增模式 - isFormUpdate.value = false; return; } - - // 编辑模式 - isFormUpdate.value = true; modalApi.lock(); - try { formData.value = await getPointActivity(data.id); await getSpuDetails( @@ -202,6 +187,7 @@ const [Modal, modalApi] = useVbenModal({ formData.value.products?.map((sku) => sku.skuId), formData.value.products, ); + // 设置到 values await formApi.setValues(formData.value); } finally { modalApi.unlock(); @@ -212,11 +198,11 @@ const [Modal, modalApi] = useVbenModal({ - + - + 选择商品 diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue index 7f740c6f3..d32122407 100644 --- a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue +++ b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue @@ -1,5 +1,6 @@