From 93149876e533155739f3ce8029caa66861b56a2c Mon Sep 17 00:00:00 2001 From: puhui999 Date: Tue, 21 Oct 2025 16:10:49 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=20=E5=95=86=E5=9F=8E?= =?UTF-8?q?=E3=80=91=E5=95=86=E5=93=81=E5=8F=91=E5=B8=83=20-=20=E5=BA=93?= =?UTF-8?q?=E5=AD=98=E4=BB=B7=E6=A0=BC=E3=80=90antd=E3=80=9180%:=20?= =?UTF-8?q?=E5=AE=8C=E5=96=84=20sku=20form=20=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mall/product/spu/modules/form-data.ts | 27 +---- .../views/mall/product/spu/modules/form.vue | 109 ++++++++++++++---- .../spu/modules/product-property-add-form.vue | 7 +- .../mall/product/spu/modules/sku-list.vue | 7 +- 4 files changed, 97 insertions(+), 53 deletions(-) diff --git a/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts b/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts index 905b47f36..d845be3e5 100644 --- a/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts +++ b/apps/web-antd/src/views/mall/product/spu/modules/form-data.ts @@ -1,7 +1,5 @@ import type { VbenFormSchema } from '#/adapter/form'; -import { h } from 'vue'; - import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants'; import { getDictOptions } from '@vben/hooks'; import { handleTree } from '@vben/utils'; @@ -11,8 +9,6 @@ import { getSimpleBrandList } from '#/api/mall/product/brand'; import { getCategoryList } from '#/api/mall/product/category'; import { getSimpleTemplateList } from '#/api/mall/trade/delivery/expressTemplate'; -import SkuList from './sku-list.vue'; - /** 基础设置的表单 */ export function useInfoFormSchema(): VbenFormSchema[] { return [ @@ -110,7 +106,6 @@ export function useInfoFormSchema(): VbenFormSchema[] { /** 价格库存的表单 */ export function useSkuFormSchema( propertyList: any[] = [], - ruleConfig: any[] = [], isDetail: boolean = false, ): VbenFormSchema[] { return [ @@ -164,11 +159,8 @@ export function useSkuFormSchema( { fieldName: 'singleSkuList', label: '', - component: h(SkuList), - componentProps: { - propertyList, - ruleConfig, - }, + component: 'Input', + componentProps: {}, dependencies: { triggerFields: ['specType'], // 当 specType 为 false（单规格）时显示 @@ -191,11 +183,8 @@ export function useSkuFormSchema( { fieldName: 'batchSkuList', label: '批量设置', - component: h(SkuList), - componentProps: { - isBatch: true, - propertyList, - }, + component: 'Input', + componentProps: {}, dependencies: { triggerFields: ['specType'], // 当 specType 为 true（多规格）且 propertyList 有数据时显示，且非详情模式 @@ -207,12 +196,8 @@ export function useSkuFormSchema( { fieldName: 'multiSkuList', label: '规格列表', - component: h(SkuList), - componentProps: { - propertyList, - ruleConfig, - isDetail, - }, + component: 'Input', + componentProps: {}, dependencies: { triggerFields: ['specType'], // 当 specType 为 true（多规格）且 propertyList 有数据时显示 diff --git a/apps/web-antd/src/views/mall/product/spu/modules/form.vue b/apps/web-antd/src/views/mall/product/spu/modules/form.vue index 8a395feac..59713104f 100644 --- a/apps/web-antd/src/views/mall/product/spu/modules/form.vue +++ b/apps/web-antd/src/views/mall/product/spu/modules/form.vue @@ -3,7 +3,7 @@ import type { PropertyAndValues, RuleConfig } from './index'; import type { MallSpuApi } from '#/api/mall/product/spu'; -import { computed, onMounted, ref, watch } from 'vue'; +import { onMounted, ref, watch } from 'vue'; import { useRoute } from 'vue-router'; import { ContentWrap, Page, useVbenModal } from '@vben/common-ui'; @@ -24,6 +24,7 @@ import { import { getPropertyList } from './index'; import ProductAttributes from './product-attributes.vue'; import ProductPropertyAddForm from './product-property-add-form.vue'; +import SkuList from './sku-list.vue'; const spuId = ref(); const { params, name } = useRoute(); @@ -63,6 +64,7 @@ const formData = ref({ const propertyList = ref([]); // 商品属性列表 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const isDetail = ref(false); // 是否查看详情 +const skuListRef = ref(); // 商品属性列表 Ref // sku 相关属性校验规则 const ruleConfig: RuleConfig[] = [ @@ -88,15 +90,6 @@ const ruleConfig: RuleConfig[] = [ }, ]; -// 动态生成 sku form schema -const skuFormSchema = computed(() => { - return useSkuFormSchema( - propertyList.value, - ruleConfig, - isDetail.value || false, - ); -}); - const [InfoForm, infoFormApi] = useVbenForm({ commonConfig: { componentProps: { @@ -119,8 +112,18 @@ const [SkuForm, skuFormApi] = useVbenForm({ labelWidth: 120, }, layout: 'horizontal', - schema: skuFormSchema.value, + schema: useSkuFormSchema(propertyList.value, isDetail.value), showDefaultActions: false, + handleValuesChange: (values, fieldsChanged) => { + if (fieldsChanged.includes('subCommissionType')) { + formData.value.subCommissionType = values.subCommissionType; + changeSubCommissionType(); + } + if (fieldsChanged.includes('specType')) { + formData.value.specType = values.specType; + onChangeSpec(); + } + }, }); const [ProductPropertyAddFormModal, productPropertyAddFormApi] = useVbenModal({ @@ -227,11 +230,8 @@ const getDetail = async () => { } }); formData.value = res; - // 将 SKU 的属性，整理成 PropertyAndValues 数组 - propertyList.value = getPropertyList(res); // 初始化各表单值（异步） infoFormApi.setValues(res); - // 特殊处理 SpuSkuFormData skuFormApi.setValues(res); deliveryFormApi.setValues(res); descriptionFormApi.setValues(res); @@ -240,18 +240,58 @@ const getDetail = async () => { formLoading.value = false; } } + // 将 SKU 的属性，整理成 PropertyAndValues 数组 + propertyList.value = getPropertyList(formData.value); }; +// =========== sku form 逻辑 =========== + +function openPropertyAddForm() { + productPropertyAddFormApi.open(); +} + /** 调用 SkuList generateTableData 方法*/ const generateSkus = (propertyList: any[]) => { - // skuListRef.value.generateTableData(propertyList) + skuListRef.value.generateTableData(propertyList); +}; + +/** 分销类型 */ +const changeSubCommissionType = () => { + // 默认为零，类型切换后也要重置为零 + for (const item of formData.value.skus!) { + item.firstBrokeragePrice = 0; + item.secondBrokeragePrice = 0; + } +}; + +/** 选择规格 */ +const onChangeSpec = () => { + // 重置商品属性列表 + propertyList.value = []; + // 重置sku列表 + formData.value.skus = [ + { + price: 0, + marketPrice: 0, + costPrice: 0, + barCode: '', + picUrl: '', + stock: 0, + weight: 0, + volume: 0, + firstBrokeragePrice: 0, + secondBrokeragePrice: 0, + }, + ]; }; // 监听 sku form schema 变化，更新表单 watch( - skuFormSchema, - (newSchema) => { - skuFormApi.updateSchema(newSchema); + propertyList, + () => { + skuFormApi.updateSchema( + useSkuFormSchema(propertyList.value, isDetail.value), + ); }, { deep: true }, ); @@ -266,7 +306,7 @@ onMounted(async () => {