fix: 解决商品上一版遗留的各种小bug关键部分已添加fix注释。完成的TODO也已添加fix标记

src/views/mall/product/spu/addForm.vue

@@ -3,21 +3,21 @@
     <el-tabs v-model="activeName">
       <el-tab-pane label="商品信息" name="basicInfo">
         <BasicInfoForm
-          ref="BasicInfoRef"
+          ref="basicInfoRef"
           v-model:activeName="activeName"
           :propFormData="formData"
         />
       </el-tab-pane>
       <el-tab-pane label="商品详情" name="description">
         <DescriptionForm
-          ref="DescriptionRef"
+          ref="descriptionRef"
           v-model:activeName="activeName"
           :propFormData="formData"
         />
       </el-tab-pane>
       <el-tab-pane label="其他设置" name="otherSettings">
         <OtherSettingsForm
-          ref="OtherSettingsRef"
+          ref="otherSettingsRef"
           v-model:activeName="activeName"
           :propFormData="formData"
         />
@@ -31,88 +31,55 @@
     </el-form>
   </ContentWrap>
 </template>
-<script lang="ts" name="ProductManagementForm" setup>
+<script lang="ts" name="ProductSpuForm" setup>
+import { cloneDeep } from 'lodash-es'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
-import type { SpuType } from '@/api/mall/product/management/type/spuType' // 业务api
-import * as managementApi from '@/api/mall/product/management/spu'
+// 业务api
+import * as ProductSpuApi from '@/api/mall/product/spu'
 import * as PropertyApi from '@/api/mall/product/property'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push, currentRoute } = useRouter() // 路由
-const { query } = useRoute() // 查询参数
+const { params } = useRoute() // 查询参数
 const { delView } = useTagsViewStore() // 视图操作
 
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const activeName = ref('basicInfo') // Tag 激活的窗口
-const BasicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Ref
-const DescriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
-const OtherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
-const formData = ref<SpuType>({
-  name: '213', // 商品名称
+const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Ref
+const descriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
+const otherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
+// spu 表单数据
+const formData = ref<ProductSpuApi.SpuType>({
+  name: '', // 商品名称
   categoryId: null, // 商品分类
-  keyword: '213', // 关键字
+  keyword: '', // 关键字
   unit: null, // 单位
-  picUrl:
-    'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png', // 商品封面图
-  sliderPicUrls: [
-    {
-      name: 'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png',
-      url: 'http://127.0.0.1:48080/admin-api/infra/file/4/get/6ffdf8f5dfc03f7ceec1ff1ebc138adb8b721a057d505ccfb0e61a8783af1371.png'
-    }
-  ], // 商品轮播图
-  introduction: '213', // 商品简介
-  deliveryTemplateId: 0, // 运费模版
+  picUrl: '', // 商品封面图
+  sliderPicUrls: [], // 商品轮播图
+  introduction: '', // 商品简介
+  deliveryTemplateId: 1, // 运费模版
   specType: false, // 商品规格
   subCommissionType: false, // 分销类型
   skus: [
     {
-      /**
-       * 商品价格，单位：分 TODO @puhui999：注释放在尾巴哈，简洁一点~
-       */
-      price: 0,
-      /**
-       * 市场价，单位：分
-       */
-      marketPrice: 0,
-      /**
-       * 成本价，单位：分
-       */
-      costPrice: 0,
-      /**
-       * 商品条码
-       */
-      barCode: '',
-      /**
-       * 图片地址
-       */
-      picUrl: '',
-      /**
-       * 库存
-       */
-      stock: 0,
-      /**
-       * 商品重量，单位：kg 千克
-       */
-      weight: 0,
-      /**
-       * 商品体积，单位：m^3 平米
-       */
-      volume: 0,
-      /**
-       * 一级分销的佣金，单位：分
-       */
-      subCommissionFirstPrice: 0,
-      /**
-       * 二级分销的佣金，单位：分
-       */
-      subCommissionSecondPrice: 0
+      price: 0, // 商品价格
+      marketPrice: 0, // 市场价
+      costPrice: 0, // 成本价
+      barCode: '', // 商品条码
+      picUrl: '', // 图片地址
+      stock: 0, // 库存
+      weight: 0, // 商品重量
+      volume: 0, // 商品体积
+      subCommissionFirstPrice: 0, // 一级分销的佣金
+      subCommissionSecondPrice: 0 // 二级分销的佣金
     }
   ],
-  description: '5425', // 商品详情
-  sort: 1, // 商品排序
-  giveIntegral: 1, // 赠送积分
-  virtualSalesCount: 1, // 虚拟销量
+  description: '', // 商品详情
+  sort: 0, // 商品排序
+  giveIntegral: 0, // 赠送积分
+  virtualSalesCount: 0, // 虚拟销量
   recommendHot: false, // 是否热卖
   recommendBenefit: false, // 是否优惠
   recommendBest: false, // 是否精品
@@ -122,11 +89,11 @@ const formData = ref<SpuType>({
 
 /** 获得详情 */
 const getDetail = async () => {
-  const id = query.id as unknown as number
+  const id = params.spuId as number
   if (id) {
     formLoading.value = true
     try {
-      const res = (await managementApi.getSpu(id)) as SpuType
+      const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.SpuType
       formData.value = res
       // 直接取第一个值就能得到所有属性的id
       // TODO @puhui999：可以直接拿 propertyName 拼接处规格 id + 属性，可以看下商品 uniapp 详情的做法
@@ -134,7 +101,7 @@ const getDetail = async () => {
       const PropertyS = await PropertyApi.getPropertyListAndValue({ propertyIds })
       await nextTick()
       // 回显商品属性
-      BasicInfoRef.value.addAttribute(PropertyS)
+      basicInfoRef.value.addAttribute(PropertyS)
     } finally {
       formLoading.value = false
     }
@@ -145,54 +112,37 @@ const getDetail = async () => {
 const submitForm = async () => {
   // 提交请求
   formLoading.value = true
-  const newSkus = JSON.parse(JSON.stringify(formData.value.skus)) //深拷贝一份skus保存失败时使用
-  // TODO 三个表单逐一校验，如果有一个表单校验不通过则切换到对应表单，如果有两个及以上的情况则切换到最前面的一个并弹出提示消息
+  // 三个表单逐一校验，如果有一个表单校验不通过则切换到对应表单，如果有两个及以上的情况则切换到最前面的一个并弹出提示消息
   // 校验各表单
   try {
-    await unref(BasicInfoRef)?.validate()
-    await unref(DescriptionRef)?.validate()
-    await unref(OtherSettingsRef)?.validate()
-    // TODO @puhui：直接做深拷贝？这样最终 server 端不满足，不需要恢复
+    await unref(basicInfoRef)?.validate()
+    await unref(descriptionRef)?.validate()
+    await unref(otherSettingsRef)?.validate()
+    const deepCopyFormData = cloneDeep(unref(formData.value)) // 深拷贝一份 fix:这样最终 server 端不满足，不需要恢复，
     // 处理掉一些无关数据
-    formData.value.skus.forEach((item) => {
+    deepCopyFormData.skus.forEach((item) => {
       // 给sku name赋值
-      item.name = formData.value.name
-      // 多规格情况移除skus相关属性值value
-      if (formData.value.specType) {
-        item.properties.forEach((item2) => {
-          delete item2.valueName
-        })
-      }
+      item.name = deepCopyFormData.name
     })
     // 处理轮播图列表
     const newSliderPicUrls = []
-    formData.value.sliderPicUrls.forEach((item) => {
+    deepCopyFormData.sliderPicUrls.forEach((item) => {
       // 如果是前端选的图
-      // TODO @puhui999：疑问哈，为啥会是 object 呀？
-      if (typeof item === 'object') {
-        newSliderPicUrls.push(item.url)
-      } else {
-        newSliderPicUrls.push(item)
-      }
+      // TODO @puhui999：疑问哈，为啥会是 object 呀？fix
+      typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
     })
-    formData.value.sliderPicUrls = newSliderPicUrls
+    deepCopyFormData.sliderPicUrls = newSliderPicUrls
     // 校验都通过后提交表单
-    const data = formData.value as SpuType
-    // 移除skus.
-    const id = query.id as unknown as number
+    const data = deepCopyFormData as ProductSpuApi.SpuType
+    const id = params.spuId as number
     if (!id) {
-      await managementApi.createSpu(data)
+      await ProductSpuApi.createSpu(data)
       message.success(t('common.createSuccess'))
     } else {
-      await managementApi.updateSpu(data)
+      await ProductSpuApi.updateSpu(data)
       message.success(t('common.updateSuccess'))
     }
     close()
-  } catch (e) {
-    // 如果是后端校验失败,恢复skus数据
-    if (typeof e === 'string') {
-      formData.value.skus = newSkus
-    }
   } finally {
     formLoading.value = false
   }
@@ -200,41 +150,40 @@ const submitForm = async () => {
 
 /**
  * 重置表单
+ * fix:先注释保留，如果后期没有使用到则移除
  */
-const resetForm = async () => {
-  formData.value = {
-    name: '', // 商品名称
-    categoryId: 0, // 商品分类
-    keyword: '', // 关键字
-    unit: '', // 单位
-    picUrl: '', // 商品封面图
-    sliderPicUrls: [], // 商品轮播图
-    introduction: '', // 商品简介
-    deliveryTemplateId: 0, // 运费模版
-    selectRule: '',
-    specType: false, // 商品规格
-    subCommissionType: false, // 分销类型
-    description: '', // 商品详情
-    sort: 1, // 商品排序
-    giveIntegral: 1, // 赠送积分
-    virtualSalesCount: 1, // 虚拟销量
-    recommendHot: false, // 是否热卖
-    recommendBenefit: false, // 是否优惠
-    recommendBest: false, // 是否精品
-    recommendNew: false, // 是否新品
-    recommendGood: false // 是否优品
-  }
-}
+// const resetForm = async () => {
+//   formData.value = {
+//     name: '', // 商品名称
+//     categoryId: 0, // 商品分类
+//     keyword: '', // 关键字
+//     unit: '', // 单位
+//     picUrl: '', // 商品封面图
+//     sliderPicUrls: [], // 商品轮播图
+//     introduction: '', // 商品简介
+//     deliveryTemplateId: 0, // 运费模版
+//     selectRule: '',
+//     specType: false, // 商品规格
+//     subCommissionType: false, // 分销类型
+//     description: '', // 商品详情
+//     sort: 1, // 商品排序
+//     giveIntegral: 1, // 赠送积分
+//     virtualSalesCount: 1, // 虚拟销量
+//     recommendHot: false, // 是否热卖
+//     recommendBenefit: false, // 是否优惠
+//     recommendBest: false, // 是否精品
+//     recommendNew: false, // 是否新品
+//     recommendGood: false // 是否优品
+//   }
+// }
 /** 关闭按钮 */
 const close = () => {
-  // TODO @puhui999：是不是不用 reset 呀？close 默认销毁
-  resetForm()
   delView(unref(currentRoute))
-  push('/product/product-management')
+  push('/product/product-spu')
 }
 
 /** 初始化 */
-onMounted(() => {
-  getDetail()
+onMounted(async () => {
+  await getDetail()
 })
 </script>