diff --git a/apps/web-antd/src/views/mall/product/spu/components/sku-list.vue b/apps/web-antd/src/views/mall/product/spu/components/sku-list.vue index f64a981f1..a899c63ce 100644 --- a/apps/web-antd/src/views/mall/product/spu/components/sku-list.vue +++ b/apps/web-antd/src/views/mall/product/spu/components/sku-list.vue @@ -70,6 +70,11 @@ function createEmptySku(): MallSpuApi.Sku { }; } +function formatDetailMoney(value: null | number | string | undefined) { + const amount = Number(value ?? 0); + return Number.isFinite(amount) ? amount.toFixed(2) : '0.00'; +} + const skuList = ref([createEmptySku()]); /** 批量添加 */ @@ -501,17 +506,17 @@ defineExpose({ @@ -532,12 +537,12 @@ defineExpose({ diff --git a/apps/web-antd/src/views/mall/product/spu/form/index.vue b/apps/web-antd/src/views/mall/product/spu/form/index.vue index 8e9e4bd52..7a45e75f9 100644 --- a/apps/web-antd/src/views/mall/product/spu/form/index.vue +++ b/apps/web-antd/src/views/mall/product/spu/form/index.vue @@ -5,7 +5,7 @@ import type { RuleConfig, } from '#/views/mall/product/spu/components'; -import { onMounted, ref, watch } from 'vue'; +import { nextTick, onMounted, ref, watch } from 'vue'; import { useRoute } from 'vue-router'; import { Page, useVbenModal } from '@vben/common-ui'; @@ -34,6 +34,7 @@ const { closeCurrentTab } = useTabs(); const activeTabName = ref('info'); const formLoading = ref(false); // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情 +const initializingForm = ref(false); // 详情回填时不触发 SKU 重置逻辑 const skuListRef = ref(); // 商品属性列表 Ref const formData = ref({ @@ -113,11 +114,20 @@ const [SkuForm, skuFormApi] = useVbenForm({ schema: useSkuFormSchema(propertyList.value, isDetail.value), showDefaultActions: false, handleValuesChange: (values, fieldsChanged) => { - if (fieldsChanged.includes('subCommissionType')) { + if (initializingForm.value) { + return; + } + if ( + fieldsChanged.includes('subCommissionType') && + values.subCommissionType !== formData.value.subCommissionType + ) { formData.value.subCommissionType = values.subCommissionType; handleChangeSubCommissionType(); } - if (fieldsChanged.includes('specType')) { + if ( + fieldsChanged.includes('specType') && + values.specType !== formData.value.specType + ) { formData.value.specType = values.specType; handleChangeSpec(); } @@ -235,22 +245,28 @@ async function getDetail() { // 金额转换:分转元 res.skus = res.skus?.map((item) => ({ ...item, - price: formatToFraction(item.price), - marketPrice: formatToFraction(item.marketPrice), - costPrice: formatToFraction(item.costPrice), - firstBrokeragePrice: formatToFraction(item.firstBrokeragePrice), - secondBrokeragePrice: formatToFraction(item.secondBrokeragePrice), + price: Number(formatToFraction(item.price)), + marketPrice: Number(formatToFraction(item.marketPrice)), + costPrice: Number(formatToFraction(item.costPrice)), + firstBrokeragePrice: Number(formatToFraction(item.firstBrokeragePrice)), + secondBrokeragePrice: Number( + formatToFraction(item.secondBrokeragePrice), + ), })); + initializingForm.value = true; formData.value = res; - // 初始化各表单值 - infoFormApi.setValues(res).then(); - skuFormApi.setValues(res).then(); - deliveryFormApi.setValues(res).then(); - descriptionFormApi.setValues(res).then(); - otherFormApi.setValues(res).then(); // 将 SKU 的属性,整理成 PropertyAndValues 数组 propertyList.value = getPropertyList(formData.value); + // 初始化各表单值 + void infoFormApi.setValues(res); + void skuFormApi.setValues(res); + void deliveryFormApi.setValues(res); + void descriptionFormApi.setValues(res); + void otherFormApi.setValues(res); + await nextTick(); + await nextTick(); } finally { + initializingForm.value = false; formLoading.value = false; } } diff --git a/apps/web-antdv-next/src/views/mall/product/spu/components/sku-list.vue b/apps/web-antdv-next/src/views/mall/product/spu/components/sku-list.vue index f812c0fe1..cd0939e5a 100644 --- a/apps/web-antdv-next/src/views/mall/product/spu/components/sku-list.vue +++ b/apps/web-antdv-next/src/views/mall/product/spu/components/sku-list.vue @@ -70,6 +70,11 @@ function createEmptySku(): MallSpuApi.Sku { }; } +function formatDetailMoney(value: null | number | string | undefined) { + const amount = Number(value ?? 0); + return Number.isFinite(amount) ? amount.toFixed(2) : '0.00'; +} + const skuList = ref([createEmptySku()]); /** 批量添加 */ @@ -501,17 +506,17 @@ defineExpose({ @@ -532,12 +537,12 @@ defineExpose({ diff --git a/apps/web-antdv-next/src/views/mall/product/spu/form/index.vue b/apps/web-antdv-next/src/views/mall/product/spu/form/index.vue index b3d9cc178..a52d403a0 100644 --- a/apps/web-antdv-next/src/views/mall/product/spu/form/index.vue +++ b/apps/web-antdv-next/src/views/mall/product/spu/form/index.vue @@ -5,7 +5,7 @@ import type { RuleConfig, } from '#/views/mall/product/spu/components'; -import { onMounted, ref, watch } from 'vue'; +import { nextTick, onMounted, ref, watch } from 'vue'; import { useRoute } from 'vue-router'; import { Page, useVbenModal } from '@vben/common-ui'; @@ -34,6 +34,7 @@ const { closeCurrentTab } = useTabs(); const activeTabName = ref('info'); const formLoading = ref(false); // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情 +const initializingForm = ref(false); // 详情回填时不触发 SKU 重置逻辑 const skuListRef = ref(); // 商品属性列表 Ref const formData = ref({ @@ -113,11 +114,20 @@ const [SkuForm, skuFormApi] = useVbenForm({ schema: useSkuFormSchema(propertyList.value, isDetail.value), showDefaultActions: false, handleValuesChange: (values, fieldsChanged) => { - if (fieldsChanged.includes('subCommissionType')) { + if (initializingForm.value) { + return; + } + if ( + fieldsChanged.includes('subCommissionType') && + values.subCommissionType !== formData.value.subCommissionType + ) { formData.value.subCommissionType = values.subCommissionType; handleChangeSubCommissionType(); } - if (fieldsChanged.includes('specType')) { + if ( + fieldsChanged.includes('specType') && + values.specType !== formData.value.specType + ) { formData.value.specType = values.specType; handleChangeSpec(); } @@ -235,22 +245,28 @@ async function getDetail() { // 金额转换:分转元 res.skus = res.skus?.map((item) => ({ ...item, - price: formatToFraction(item.price), - marketPrice: formatToFraction(item.marketPrice), - costPrice: formatToFraction(item.costPrice), - firstBrokeragePrice: formatToFraction(item.firstBrokeragePrice), - secondBrokeragePrice: formatToFraction(item.secondBrokeragePrice), + price: Number(formatToFraction(item.price)), + marketPrice: Number(formatToFraction(item.marketPrice)), + costPrice: Number(formatToFraction(item.costPrice)), + firstBrokeragePrice: Number(formatToFraction(item.firstBrokeragePrice)), + secondBrokeragePrice: Number( + formatToFraction(item.secondBrokeragePrice), + ), })); + initializingForm.value = true; formData.value = res; - // 初始化各表单值 - infoFormApi.setValues(res).then(); - skuFormApi.setValues(res).then(); - deliveryFormApi.setValues(res).then(); - descriptionFormApi.setValues(res).then(); - otherFormApi.setValues(res).then(); // 将 SKU 的属性,整理成 PropertyAndValues 数组 propertyList.value = getPropertyList(formData.value); + // 初始化各表单值 + void infoFormApi.setValues(res); + void skuFormApi.setValues(res); + void deliveryFormApi.setValues(res); + void descriptionFormApi.setValues(res); + void otherFormApi.setValues(res); + await nextTick(); + await nextTick(); } finally { + initializingForm.value = false; formLoading.value = false; } } diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue index 5dfd77b27..0ba73e543 100644 --- a/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue +++ b/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue @@ -76,6 +76,11 @@ function createEmptySku(): MallSpuApi.Sku { }; } +function formatDetailMoney(value: null | number | string | undefined) { + const amount = Number(value ?? 0); + return Number.isFinite(amount) ? amount.toFixed(2) : '0.00'; +} + const skuList = ref([createEmptySku()]); /** 批量添加 */ @@ -536,17 +541,17 @@ defineExpose({ @@ -567,12 +572,12 @@ defineExpose({ diff --git a/apps/web-ele/src/views/mall/product/spu/form/index.vue b/apps/web-ele/src/views/mall/product/spu/form/index.vue index 720a90321..f42173548 100644 --- a/apps/web-ele/src/views/mall/product/spu/form/index.vue +++ b/apps/web-ele/src/views/mall/product/spu/form/index.vue @@ -5,7 +5,7 @@ import type { RuleConfig, } from '#/views/mall/product/spu/components'; -import { onMounted, ref, watch } from 'vue'; +import { nextTick, onMounted, ref, watch } from 'vue'; import { useRoute } from 'vue-router'; import { Page, useVbenModal } from '@vben/common-ui'; @@ -34,6 +34,7 @@ const { closeCurrentTab } = useTabs(); const activeTabName = ref('info'); const formLoading = ref(false); // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情 +const initializingForm = ref(false); // 详情回填时不触发 SKU 重置逻辑 const skuListRef = ref(); // 商品属性列表 Ref const formData = ref({ @@ -113,11 +114,20 @@ const [SkuForm, skuFormApi] = useVbenForm({ schema: useSkuFormSchema(propertyList.value, isDetail.value), showDefaultActions: false, handleValuesChange: (values, fieldsChanged) => { - if (fieldsChanged.includes('subCommissionType')) { + if (initializingForm.value) { + return; + } + if ( + fieldsChanged.includes('subCommissionType') && + values.subCommissionType !== formData.value.subCommissionType + ) { formData.value.subCommissionType = values.subCommissionType; handleChangeSubCommissionType(); } - if (fieldsChanged.includes('specType')) { + if ( + fieldsChanged.includes('specType') && + values.specType !== formData.value.specType + ) { formData.value.specType = values.specType; handleChangeSpec(); } @@ -235,22 +245,28 @@ async function getDetail() { // 金额转换:分转元 res.skus = res.skus?.map((item) => ({ ...item, - price: formatToFraction(item.price), - marketPrice: formatToFraction(item.marketPrice), - costPrice: formatToFraction(item.costPrice), - firstBrokeragePrice: formatToFraction(item.firstBrokeragePrice), - secondBrokeragePrice: formatToFraction(item.secondBrokeragePrice), + price: Number(formatToFraction(item.price)), + marketPrice: Number(formatToFraction(item.marketPrice)), + costPrice: Number(formatToFraction(item.costPrice)), + firstBrokeragePrice: Number(formatToFraction(item.firstBrokeragePrice)), + secondBrokeragePrice: Number( + formatToFraction(item.secondBrokeragePrice), + ), })); + initializingForm.value = true; formData.value = res; - // 初始化各表单值 - infoFormApi.setValues(res).then(); - skuFormApi.setValues(res).then(); - deliveryFormApi.setValues(res).then(); - descriptionFormApi.setValues(res).then(); - otherFormApi.setValues(res).then(); // 将 SKU 的属性,整理成 PropertyAndValues 数组 propertyList.value = getPropertyList(formData.value); + // 初始化各表单值 + void infoFormApi.setValues(res); + void skuFormApi.setValues(res); + void deliveryFormApi.setValues(res); + void descriptionFormApi.setValues(res); + void otherFormApi.setValues(res); + await nextTick(); + await nextTick(); } finally { + initializingForm.value = false; formLoading.value = false; } }