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 () => {