pull/239/head
xingyu4j 2025-10-23 09:47:08 +08:00
commit 806caf8b48
8 changed files with 55 additions and 105 deletions

View File

@ -234,7 +234,9 @@ async function handleSubmit() {
// //
if (!formRef.value) return; if (!formRef.value) return;
const valid = await formRef.value.validate(); const valid = await formRef.value.validate();
if (!valid) return; if (!valid) {
return;
}
// //
submitLoading.value = true; submitLoading.value = true;

View File

@ -2,4 +2,4 @@ export { default as SpuAndSkuList } from './spu-and-sku-list.vue';
export { default as SpuSkuSelect } from './spu-sku-select.vue'; export { default as SpuSkuSelect } from './spu-sku-select.vue';
export type * from './types'; export type * from './types';
// TODO @puhui999这个要不要也放到 product/spu/components 下?相当于各种商品的 select 能力,统一由 spu 提供组件化能力!

View File

@ -15,14 +15,10 @@ import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { SkuList } from '#/views/mall/product/spu/form'; import { SkuList } from '#/views/mall/product/spu/form';
interface SpuAndSkuListProps { interface SpuAndSkuListProps {
/** SPU 列表 */ spuList: T[]; // SPU
spuList: T[]; ruleConfig: RuleConfig[]; //
/** 规则配置 */ spuPropertyList: SpuProperty<T>[]; // SPU
ruleConfig: RuleConfig[]; deletable?: boolean; //
/** SPU 属性列表 */
spuPropertyList: SpuProperty<T>[];
/** 是否可删除 */
deletable?: boolean;
} }
const props = withDefaults(defineProps<SpuAndSkuListProps>(), { const props = withDefaults(defineProps<SpuAndSkuListProps>(), {
@ -33,13 +29,11 @@ const emit = defineEmits<{
delete: [spuId: number]; delete: [spuId: number];
}>(); }>();
//
const spuData = ref<MallSpuApi.Spu[]>([]); const spuData = ref<MallSpuApi.Spu[]>([]);
const spuPropertyListData = ref<SpuProperty<T>[]>([]); const spuPropertyListData = ref<SpuProperty<T>[]>([]);
const expandedRowKeys = ref<number[]>([]); const expandedRowKeys = ref<number[]>([]);
const skuListRef = ref<InstanceType<typeof SkuList>>(); const skuListRef = ref<InstanceType<typeof SkuList>>();
//
const columns = computed<VxeGridProps['columns']>(() => { const columns = computed<VxeGridProps['columns']>(() => {
const cols: VxeGridProps['columns'] = [ const cols: VxeGridProps['columns'] = [
{ {
@ -103,7 +97,6 @@ const columns = computed<VxeGridProps['columns']>(() => {
return cols; return cols;
}); });
//
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: { gridOptions: {
columns: columns.value, columns: columns.value,
@ -121,14 +114,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
}, },
}); });
/** /** 删除 SPU */
* 删除 SPU
*/
async function handleDelete(row: MallSpuApi.Spu) { async function handleDelete(row: MallSpuApi.Spu) {
// TODO @puhui999使 TableAction popConfirm
await confirm({ await confirm({
content: `是否删除商品编号为 ${row.id} 的数据?`, content: `是否删除商品编号为 ${row.id} 的数据?`,
}); });
const index = spuData.value.findIndex((item) => item.id === row.id); const index = spuData.value.findIndex((item) => item.id === row.id);
if (index !== -1) { if (index !== -1) {
spuData.value.splice(index, 1); spuData.value.splice(index, 1);
@ -138,6 +129,7 @@ async function handleDelete(row: MallSpuApi.Spu) {
/** /**
* 获取所有 SKU 活动配置 * 获取所有 SKU 活动配置
*
* @param extendedAttribute SKU 上扩展的属性名称 * @param extendedAttribute SKU 上扩展的属性名称
*/ */
function getSkuConfigs(extendedAttribute: string) { function getSkuConfigs(extendedAttribute: string) {
@ -157,32 +149,36 @@ function getSkuConfigs(extendedAttribute: string) {
return configs; return configs;
} }
//
defineExpose({ defineExpose({
getSkuConfigs, getSkuConfigs,
}); });
// spuList /** 监听 spuList 变化 */
watch( watch(
() => props.spuList, () => props.spuList,
(data) => { (data) => {
if (!data) return; if (!data) {
return;
}
spuData.value = data as MallSpuApi.Spu[]; spuData.value = data as MallSpuApi.Spu[];
// //
gridApi.grid.reloadData(spuData.value); gridApi.grid.reloadData(spuData.value);
gridApi.grid.reloadColumn(columns.value); gridApi.grid.reloadColumn(columns.value as any[]);
}, },
{ deep: true, immediate: true }, { deep: true, immediate: true },
); );
// spuPropertyList /** 监听 spuPropertyList 变化 */
watch( watch(
() => props.spuPropertyList, () => props.spuPropertyList,
(data) => { (data) => {
if (!data) return; if (!data) {
return;
}
spuPropertyListData.value = data as SpuProperty<T>[]; spuPropertyListData.value = data as SpuProperty<T>[];
// SKU // SKU
// TODO @puhui999 setTimeout await
setTimeout(() => { setTimeout(() => {
expandedRowKeys.value = data.map((item) => item.spuId); expandedRowKeys.value = data.map((item) => item.spuId);
// //
@ -222,7 +218,6 @@ watch(
</SkuList> </SkuList>
</div> </div>
</template> </template>
<!-- 操作列 --> <!-- 操作列 -->
<template <template
v-if="props.deletable && props.spuList.length > 1" v-if="props.deletable && props.spuList.length > 1"

View File

@ -18,10 +18,8 @@ import { getRangePickerDefaultProps } from '#/utils';
import { getPropertyList, SkuList } from '#/views/mall/product/spu/form'; import { getPropertyList, SkuList } from '#/views/mall/product/spu/form';
interface SpuSkuSelectProps { interface SpuSkuSelectProps {
/** 是否选择 SKU */ isSelectSku?: boolean; // SKU
isSelectSku?: boolean; radio?: boolean; // SKU
/** 是否单选 SKU */
radio?: boolean;
} }
const props = withDefaults(defineProps<SpuSkuSelectProps>(), { const props = withDefaults(defineProps<SpuSkuSelectProps>(), {
@ -33,33 +31,17 @@ const emit = defineEmits<{
confirm: [spuId: number, skuIds?: number[]]; confirm: [spuId: number, skuIds?: number[]];
}>(); }>();
// SPU ID const selectedSpuId = ref<number>(); // SPU ID
const selectedSpuId = ref<number>(); const selectedSkuIds = ref<number[]>([]); // SKU ID
// SKU ID
const selectedSkuIds = ref<number[]>([]);
// SKU
const spuData = ref<MallSpuApi.Spu>(); const spuData = ref<MallSpuApi.Spu>();
const propertyList = ref<any[]>([]); const propertyList = ref<any[]>([]);
const isExpand = ref(false); const isExpand = ref(false);
const expandRowKeys = ref<number[]>([]); const expandRowKeys = ref<number[]>([]);
const skuListRef = ref<InstanceType<typeof SkuList>>(); const skuListRef = ref<InstanceType<typeof SkuList>>();
// const categoryList = ref<any[]>([]); //
const categoryList = ref<any[]>([]); const categoryTreeList = ref<any[]>([]); //
//
const categoryTreeList = ref<any[]>([]);
//
onMounted(async () => {
try {
categoryList.value = await getCategoryList({});
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
} catch (error) {
console.error('加载分类数据失败:', error);
}
});
//
const formSchema = computed<VbenFormSchema[]>(() => { const formSchema = computed<VbenFormSchema[]>(() => {
return [ return [
{ {
@ -100,10 +82,8 @@ const formSchema = computed<VbenFormSchema[]>(() => {
]; ];
}); });
//
const gridColumns = computed<VxeGridProps['columns']>(() => { const gridColumns = computed<VxeGridProps['columns']>(() => {
const columns: VxeGridProps['columns'] = []; const columns: VxeGridProps['columns'] = [];
// SKU // SKU
if (props.isSelectSku) { if (props.isSelectSku) {
columns.push({ columns.push({
@ -112,7 +92,6 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
slots: { content: 'expand-content' }, slots: { content: 'expand-content' },
}); });
} }
// //
columns.push( columns.push(
{ {
@ -152,11 +131,9 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
}, },
}, },
); );
return columns; return columns;
}); });
//
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: formSchema.value, schema: formSchema.value,
@ -175,6 +152,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
ajax: { ajax: {
async query({ page }: any, formValues: any) { async query({ page }: any, formValues: any) {
try { try {
// TODO @puhui9991try catch 2params getSpuPage
const params = { const params = {
pageNo: page.currentPage, pageNo: page.currentPage,
pageSize: page.pageSize, pageSize: page.pageSize,
@ -200,23 +178,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
}, },
}); });
// SPU /** 单选:处理选中 SPU */
async function handleSingleSelected(row: MallSpuApi.Spu) { async function handleSingleSelected(row: MallSpuApi.Spu) {
selectedSpuId.value = row.id; selectedSpuId.value = row.id;
// SKU // SKU
if (props.isSelectSku) { if (props.isSelectSku) {
await expandChange(row, [row]); await expandChange(row, [row]);
} }
} }
// SKU /** 选择 SKU */
function selectSku(skus: MallSpuApi.Sku[]) { function selectSku(skus: MallSpuApi.Sku[]) {
if (!selectedSpuId.value) { if (!selectedSpuId.value) {
message.warning('请先选择商品再选择相应的规格!'); message.warning('请先选择商品再选择相应的规格!');
return; return;
} }
if (skus.length === 0) { if (skus.length === 0) {
selectedSkuIds.value = []; selectedSkuIds.value = [];
return; return;
@ -226,7 +202,7 @@ function selectSku(skus: MallSpuApi.Sku[]) {
: (selectedSkuIds.value = skus.map((sku) => sku.id!)); : (selectedSkuIds.value = skus.map((sku) => sku.id!));
} }
// SKU /** 展开行,加载 SKU 列表 */
async function expandChange( async function expandChange(
row: MallSpuApi.Spu, row: MallSpuApi.Spu,
expandedRows?: MallSpuApi.Spu[], expandedRows?: MallSpuApi.Spu[],
@ -237,7 +213,6 @@ async function expandChange(
expandRowKeys.value = [selectedSpuId.value]; expandRowKeys.value = [selectedSpuId.value];
return; return;
} }
// SPU // SPU
if (isExpand.value && spuData.value?.id === row.id) { if (isExpand.value && spuData.value?.id === row.id) {
return; return;
@ -247,7 +222,6 @@ async function expandChange(
spuData.value = undefined; spuData.value = undefined;
propertyList.value = []; propertyList.value = [];
isExpand.value = false; isExpand.value = false;
if (!expandedRows || expandedRows.length === 0) { if (!expandedRows || expandedRows.length === 0) {
expandRowKeys.value = []; expandRowKeys.value = [];
return; return;
@ -261,13 +235,12 @@ async function expandChange(
expandRowKeys.value = [row.id!]; expandRowKeys.value = [row.id!];
} }
// /** 确认选择 */
function handleConfirm() { function handleConfirm() {
if (!selectedSpuId.value) { if (!selectedSpuId.value) {
message.warning('没有选择任何商品'); message.warning('没有选择任何商品');
return; return;
} }
if (props.isSelectSku && selectedSkuIds.value.length === 0) { if (props.isSelectSku && selectedSkuIds.value.length === 0) {
message.warning('没有选择任何商品属性'); message.warning('没有选择任何商品属性');
return; return;
@ -279,12 +252,10 @@ function handleConfirm() {
selectedSpuId.value, selectedSpuId.value,
props.isSelectSku ? selectedSkuIds.value : undefined, props.isSelectSku ? selectedSkuIds.value : undefined,
); );
// //
modalApi.close(); modalApi.close();
} }
//
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
onConfirm: handleConfirm, onConfirm: handleConfirm,
async onOpenChange(isOpen: boolean) { async onOpenChange(isOpen: boolean) {
@ -307,6 +278,11 @@ defineExpose({
open: modalApi.open, open: modalApi.open,
close: modalApi.close, close: modalApi.close,
}); });
/** 初始化分类数据 */
onMounted(async () => {
categoryList.value = await getCategoryList({});
categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
});
</script> </script>
<template> <template>

View File

@ -5,11 +5,7 @@ import type { PropertyAndValues } from '#/views/mall/product/spu/form';
* SPU * SPU
*/ */
export interface SpuProperty<T = any> { export interface SpuProperty<T = any> {
/** SPU ID */ spuId: number; // SPU ID
spuId: number; spuDetail: T; // SPU 详情
/** SPU 详情 */ propertyList: PropertyAndValues[]; // 属性列表
spuDetail: T;
/** 属性列表 */
propertyList: PropertyAndValues[];
} }

View File

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

View File

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

View File

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