From 2401559fa5bab05b7bc2a6f1b68e8bc611ae29ec Mon Sep 17 00:00:00 2001 From: YunaiV Date: Wed, 26 Nov 2025 10:21:19 +0800 Subject: [PATCH] =?UTF-8?q?review=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90m?= =?UTF-8?q?all=E3=80=91=E5=95=86=E5=93=81=E5=8F=91=E5=B8=83=E7=9A=84?= =?UTF-8?q?=E8=BF=81=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/mall/product/comment/data.ts | 8 +------- .../views/mall/product/comment/modules/form.vue | 12 ++++++++---- .../mall/product/spu/components/property-util.ts | 2 +- .../product/spu/components/sku-table-select.vue | 2 ++ .../product/spu/components/spu-and-sku-list.vue | 12 ++++-------- .../product/spu/components/spu-select-data.ts | 15 +++------------ .../mall/product/spu/components/spu-select.vue | 16 +++++----------- .../product/spu/components/spu-table-select.vue | 3 +-- .../promotion/point/activity/modules/form.vue | 9 +++++---- 9 files changed, 30 insertions(+), 49 deletions(-) diff --git a/apps/web-antd/src/views/mall/product/comment/data.ts b/apps/web-antd/src/views/mall/product/comment/data.ts index 71d88a8a6..223491884 100644 --- a/apps/web-antd/src/views/mall/product/comment/data.ts +++ b/apps/web-antd/src/views/mall/product/comment/data.ts @@ -16,7 +16,6 @@ export function useFormSchema(): VbenFormSchema[] { show: () => false, }, }, - // TODO @puhui999：商品的选择 { fieldName: 'spuId', label: '商品', @@ -24,11 +23,9 @@ export function useFormSchema(): VbenFormSchema[] { componentProps: { placeholder: '请选择商品', }, - renderComponentContent: () => ({ - default: () => null, - }), rules: 'required', }, + // TODO @puhui999：商品的选择：上面 spuId 可以选择了，下面的 skuId 打开后，没商品。 { fieldName: 'skuId', label: '商品规格', @@ -40,9 +37,6 @@ export function useFormSchema(): VbenFormSchema[] { triggerFields: ['spuId'], show: (values) => !!values.spuId, }, - renderComponentContent: () => ({ - default: () => null, - }), rules: 'required', }, { diff --git a/apps/web-antd/src/views/mall/product/comment/modules/form.vue b/apps/web-antd/src/views/mall/product/comment/modules/form.vue index b756e00d4..3709d2bfc 100644 --- a/apps/web-antd/src/views/mall/product/comment/modules/form.vue +++ b/apps/web-antd/src/views/mall/product/comment/modules/form.vue @@ -48,6 +48,7 @@ const [Form, formApi] = useVbenForm({ const skuTableSelectRef = ref>(); const selectedSku = ref(); +/** 处理商品的选择变化 */ async function handleSpuChange(spu?: MallSpuApi.Spu | null) { // 处理商品选择：如果 spu 为 null 或 id 为 0，表示清空选择 const spuId = spu?.id && spu.id ? spu.id : undefined; @@ -59,6 +60,7 @@ async function handleSpuChange(spu?: MallSpuApi.Spu | null) { await formApi.setFieldValue('skuId', undefined); } +/** 打开商品规格的选择弹框 */ async function openSkuSelect() { const currentValues = (await formApi.getValues()) as Partial; @@ -70,6 +72,7 @@ async function openSkuSelect() { skuTableSelectRef.value?.open({ spuId: currentSpuId }); } +/** 处理商品规格的选择 */ async function handleSkuSelected(sku: MallSpuApi.Sku) { selectedSku.value = sku; formData.value.skuId = sku.id; @@ -98,6 +101,7 @@ const [Modal, modalApi] = useVbenModal({ async onOpenChange(isOpen: boolean) { if (!isOpen) { // 重置表单数据 + // TODO @puhui999：105 到 108 的代码，不需要的呀？（可以测试下） formData.value = { descriptionScores: 5, benefitScores: 5, @@ -108,6 +112,7 @@ const [Modal, modalApi] = useVbenModal({ // 加载数据 const data = modalApi.getData(); if (!data || !data.id) { + // TODO @puhui999：115 到 121 的代码，不需要的呀？（可以测试下） // 新建模式：重置表单 formData.value = { descriptionScores: 5, @@ -123,7 +128,7 @@ const [Modal, modalApi] = useVbenModal({ formData.value = await getComment(data.id); // 设置到 values await formApi.setValues(formData.value); - // 回显已选规格 + // 回显已选的商品规格 if (formData.value?.spuId && formData.value?.skuId) { const spu = await getSpu(formData.value.spuId); const sku = spu.skus?.find((item) => item.id === formData.value!.skuId); @@ -166,9 +171,8 @@ const [Modal, modalApi] = useVbenModal({ selectedSku.properties.length > 0 " > - 已选：{{ - selectedSku.properties.map((p: any) => p.valueName).join('/') - }} + 已选： + {{ selectedSku.properties.map((p: any) => p.valueName).join('/') }} 已选：{{ selectedSku.id }} diff --git a/apps/web-antd/src/views/mall/product/spu/components/property-util.ts b/apps/web-antd/src/views/mall/product/spu/components/property-util.ts index eac791908..7f6524969 100644 --- a/apps/web-antd/src/views/mall/product/spu/components/property-util.ts +++ b/apps/web-antd/src/views/mall/product/spu/components/property-util.ts @@ -2,7 +2,7 @@ import type { MallSpuApi } from '#/api/mall/product/spu'; import type { PropertyAndValues } from '#/views/mall/product/spu/components/type'; -/** 获得商品的规格列表 - 商品相关的公共函数（被其他模块如 promotion 使用） */ +/** 获得商品的规格列表 - 商品相关的公共函数（被其它模块如 promotion 使用） */ const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => { // 直接拿返回的 skus 属性逆向生成出 propertyList const properties: PropertyAndValues[] = []; diff --git a/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue b/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue index f43077e1b..53668afe0 100644 --- a/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue +++ b/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue @@ -78,6 +78,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ enabled: false, }, proxyConfig: { + // TODO @puhui999：看看注释的部分，后续要不要删除 // autoLoad: false, // 禁用自动加载，手动触发查询 ajax: { query: async () => { @@ -121,6 +122,7 @@ async function openModal(data?: SpuData) { } spuId.value = data.spuId; visible.value = true; + // TODO @puhui999：看看注释的部分，后续要不要删除 // // 等待弹窗和 Grid 组件完全渲染后再查询数据 // await nextTick(); // if (gridApi.grid) { diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue b/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue index 971843c2c..ddc1ab3d8 100644 --- a/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue +++ b/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue @@ -45,6 +45,7 @@ const expandRowKeys = ref([]); // 控制展开行需要设置 row-key function getSkuConfigs(extendedAttribute: string) { // 验证 SKU 数据（如果有 ref 的话） if (skuListRef.value) { + // TODO @puhui999：这里有个 linter 错误； try { skuListRef.value.validateSku(); } catch (error) { @@ -64,8 +65,7 @@ function getSkuConfigs(extendedAttribute: string) { return seckillProducts; } -// 暴露出给表单提交时使用 -defineExpose({ getSkuConfigs }); +defineExpose({ getSkuConfigs }); // 暴露出给表单提交时使用 /** 多选时可以删除 SPU */ async function deleteSpu(spuId: number) { @@ -77,9 +77,7 @@ async function deleteSpu(spuId: number) { } } -/** - * 将传进来的值赋值给 spuData - */ +/** 将传进来的值赋值给 spuData */ watch( () => props.spuList, (data) => { @@ -92,9 +90,7 @@ watch( }, ); -/** - * 将传进来的值赋值给 spuPropertyList - */ +/** 将传进来的值赋值给 spuPropertyList */ watch( () => props.spuPropertyListP, (data) => { diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts b/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts index 01ef4c1a2..5003a765d 100644 --- a/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts +++ b/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts @@ -6,13 +6,9 @@ import type { MallCategoryApi } from '#/api/mall/product/category'; import { computed } from 'vue'; -import { formatToFraction } from '@vben/utils'; - import { getRangePickerDefaultProps } from '#/utils'; -/** - * @description: 列表的搜索表单 - */ +/** 列表的搜索表单 */ export function useGridFormSchema( categoryTreeList: Ref, ): VbenFormSchema[] { @@ -55,9 +51,7 @@ export function useGridFormSchema( ]; } -/** - * @description: 列表的字段 - */ +/** 列表的字段 */ export function useGridColumns( isSelectSku: boolean, ): VxeTableGridOptions['columns'] { @@ -95,10 +89,7 @@ export function useGridColumns( title: '商品售价', minWidth: 90, align: 'center', - formatter: ({ cellValue }) => { - // 格式化价格显示（价格以分为单位存储） - return formatToFraction(cellValue); - }, + formatter: 'formatAmount2', }, { field: 'salesCount', diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue b/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue index bddc5f840..7b25f8879 100644 --- a/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue +++ b/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue @@ -104,7 +104,7 @@ async function expandChange( expandedRows?: MallSpuApi.Spu[], ) { // 判断需要展开的 spuId === 选择的 spuId。如果选择了 A 就展开 A 的 skuList。如果选择了 A 手动展开 B 则阻断 - // 目的防止误选 sku + // 目的：防止误选 sku if (selectedSpuId.value !== 0) { if (row.id !== selectedSpuId.value) { message.warning('你已选择商品请先取消'); @@ -138,8 +138,6 @@ async function expandChange( return; } const res = (await getSpu(row.id)) as MallSpuApi.Spu; - // 注意：API 返回的价格应该已经是分为单位，无需转换 - // 如果 API 返回的是元，则需要转换为分： res.skus?.forEach((item) => { if (typeof item.price === 'number') { item.price = Math.round(item.price * 100); @@ -162,10 +160,7 @@ async function expandChange( isExpand.value = true; } -/** 搜索表单 Schema */ -const formSchema = computed(() => useGridFormSchema(categoryTreeList)); - -/** 表格列配置 */ +const formSchema = computed(() => useGridFormSchema(categoryTreeList)); // 搜索表单 Schema const gridColumns = computed(() => { const columns = useGridColumns(props.isSelectSku); // 将 checkbox 替换为 radio @@ -175,9 +170,8 @@ const gridColumns = computed(() => { } return col; }); -}); +}); // 表格列配置 -/** 初始化列表 */ const [Grid, gridApi] = useVbenVxeGrid({ formOptions: { schema: formSchema.value, @@ -196,6 +190,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ keyField: 'id', isHover: true, }, + // TODO @puhui999：貌似直接 { trigger: 'row', reserve: true } 就可以了？不会影响 radio 的哈。（可以测试下。） expandConfig: props.isSelectSku ? { trigger: 'row', @@ -240,8 +235,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, }); -/** 弹窗显示状态 */ -const visible = ref(false); +const visible = ref(false); // 弹窗显示状态 /** 打开弹窗 */ async function openModal() { diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue b/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue index c9064f2de..c06027b24 100644 --- a/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue +++ b/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue @@ -215,10 +215,9 @@ function handleConfirm() { closeModal(); } -/** 对外暴露的方法 */ defineExpose({ open: openModal, -}); +}); // 对外暴露的方法 /** 初始化分类数据 */ onMounted(async () => { 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 1fdb090dc..d6315b296 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 @@ -132,14 +132,13 @@ async function getSpuDetails( }); res.skus = selectSkus; - // 构建 SPU 属性列表 const spuProperties: SpuProperty[] = [ { spuId: res.id!, spuDetail: res, propertyList: getPropertyList(res), }, - ]; + ]; // 构建 SPU 属性列表 // 直接赋值，因为每次只选择一个 SPU spuList.value = [res]; @@ -187,13 +186,15 @@ const [Modal, modalApi] = useVbenModal({ return; } // 重置表单数据（新增和编辑模式都需要） + // TODO @puhui999：这里的重置，是不是在 183 到 185 已经处理了呀。 formData.value = undefined; spuList.value = []; spuPropertyList.value = []; - // 加载数据（仅编辑模式） + // 加载数据 const data = modalApi.getData(); if (!data || !data.id) { // 新增模式：重置表单字段 + // TODO @puhui999：197 到 201 这块的 setValues 的设置，是不是必要哈。可以看看。 await formApi.setValues({ sort: 0, remark: '', @@ -201,7 +202,7 @@ const [Modal, modalApi] = useVbenModal({ }); return; } - // 编辑模式：加载数据 + // 加载数据 modalApi.lock(); try { formData.value = await getPointActivity(data.id);