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

src/views/mall/product/spu/components/BasicInfoForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="ProductManagementBasicInfoRef" :model="formData" :rules="rules" label-width="120px">
+  <el-form ref="productSpuBasicInfoRef" :model="formData" :rules="rules" label-width="120px">
     <el-row>
       <el-col :span="12">
         <el-form-item label="商品名称" prop="name">
@@ -54,7 +54,7 @@
       </el-col>
       <el-col :span="24">
         <el-form-item label="商品轮播图" prop="sliderPicUrls">
-          <UploadImgs v-model="formData.sliderPicUrls" />
+          <UploadImgs v-model:modelValue="formData.sliderPicUrls" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
@@ -86,36 +86,36 @@
       <!-- 多规格添加-->
       <el-col :span="24">
         <el-form-item v-if="formData.specType" label="商品属性">
-          <!-- TODO @puhui999：参考 https://admin.java.crmeb.net/store/list/creatProduct 添加规格好做么？添加的时候，不用输入备注哈 -->
-          <el-button class="mr-15px mb-10px" @click="AttributesAddFormRef.open">添加规格</el-button>
-          <ProductAttributes :attribute-data="attributeList" />
+          <!-- TODO @puhui999：参考 https://admin.java.crmeb.net/store/list/creatProduct 添加规格好做么？添加的时候，不用输入备注哈 fix-->
+          <el-button class="mr-15px mb-10px" @click="attributesAddFormRef.open">添加规格</el-button>
+          <ProductAttributes :propertyList="propertyList" />
         </el-form-item>
-        <template v-if="formData.specType && attributeList.length > 0">
+        <template v-if="formData.specType && propertyList.length > 0">
           <el-form-item label="批量设置">
-            <SkuList :attributeList="attributeList" :is-batch="true" :prop-form-data="formData" />
+            <SkuList :is-batch="true" :prop-form-data="formData" :propertyList="propertyList" />
           </el-form-item>
           <el-form-item label="属性列表">
-            <SkuList :attributeList="attributeList" :prop-form-data="formData" />
+            <SkuList :prop-form-data="formData" :propertyList="propertyList" />
           </el-form-item>
         </template>
         <el-form-item v-if="!formData.specType">
-          <SkuList :attributeList="attributeList" :prop-form-data="formData" />
+          <SkuList :prop-form-data="formData" :propertyList="propertyList" />
         </el-form-item>
       </el-col>
     </el-row>
   </el-form>
-  <ProductAttributesAddForm ref="AttributesAddFormRef" @success="addAttribute" />
+  <ProductAttributesAddForm ref="attributesAddFormRef" @success="addAttribute" />
 </template>
-<script lang="ts" name="ProductManagementBasicInfoForm" setup>
+<script lang="ts" name="ProductSpuBasicInfoForm" setup>
 import { PropType } from 'vue'
 import { defaultProps, handleTree } from '@/utils/tree'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import type { SpuType } from '@/api/mall/product/management/type/spuType'
+import type { SpuType } from '@/api/mall/product/spu'
 import { UploadImg, UploadImgs } from '@/components/UploadFile'
-import { copyValueToTarget } from '@/utils'
 import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index'
 import * as ProductCategoryApi from '@/api/mall/product/category'
 import { propTypes } from '@/utils/propTypes'
+import { copyValueToTarget } from '@/utils'
 
 const message = useMessage() // 消息弹窗
 
@@ -126,17 +126,14 @@ const props = defineProps({
   },
   activeName: propTypes.string.def('')
 })
-const AttributesAddFormRef = ref() // 添加商品属性表单 TODO @puhui999：小写开头哈
-const ProductManagementBasicInfoRef = ref() // 表单Ref TODO @puhui999：小写开头哈
-// TODO @puhui999：attributeList 改成 propertyList，会更统一一点
-const attributeList = ref([]) // 商品属性列表
-/** 添加商品属性 */ // TODO @puhui999：propFormData 算出来
+const attributesAddFormRef = ref() // 添加商品属性表单 TODO @puhui999：小写开头哈 fix
+const productSpuBasicInfoRef = ref() // 表单Ref TODO @puhui999：小写开头哈  fix
+// TODO @puhui999：attributeList 改成 propertyList，会更统一一点 fix
+const propertyList = ref([]) // 商品属性列表
+/** 添加商品属性 */
+// TODO @puhui999：propFormData 算出来 fix: 因为ProductAttributesAddForm添加属性成功回调得使用不能完全依赖于propFormData
 const addAttribute = (property: any) => {
-  if (Array.isArray(property)) {
-    attributeList.value = property
-    return
-  }
-  attributeList.value.push(property)
+  Array.isArray(property) ? (propertyList.value = property) : propertyList.value.push(property)
 }
 const formData = reactive<SpuType>({
   name: '', // 商品名称
@@ -171,10 +168,15 @@ watch(
   () => props.propFormData,
   (data) => {
     if (!data) return
+    // fix：三个表单组件监听赋值必须使用 copyValueToTarget 使用 formData.value = data 会监听非常多次
     copyValueToTarget(formData, data)
+    // fix: 多图上传组件需要一个包含url属性的对象才能正常回显
+    formData.sliderPicUrls = data['sliderPicUrls'].map((item) => ({
+      url: item
+    }))
   },
   {
-    deep: true,
+    // fix: 去掉深度监听只有对象引用发生改变的时候才执行,解决改一动多的问题
     immediate: true
   }
 )
@@ -185,8 +187,8 @@ watch(
 const emit = defineEmits(['update:activeName'])
 const validate = async () => {
   // 校验表单
-  if (!ProductManagementBasicInfoRef) return
-  return await unref(ProductManagementBasicInfoRef).validate((valid) => {
+  if (!productSpuBasicInfoRef) return
+  return await unref(productSpuBasicInfoRef).validate((valid) => {
     if (!valid) {
       message.warning('商品信息未完善！！')
       emit('update:activeName', 'basicInfo')
@@ -212,7 +214,7 @@ const changeSubCommissionType = () => {
 /** 选择规格 */
 const onChangeSpec = () => {
   // 重置商品属性列表
-  attributeList.value = []
+  propertyList.value = []
   // 重置sku列表
   formData.skus = [
     {

src/views/mall/product/spu/components/DescriptionForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="DescriptionFormRef" :model="formData" :rules="rules" label-width="120px">
+  <el-form ref="descriptionFormRef" :model="formData" :rules="rules" label-width="120px">
     <!--富文本编辑器组件-->
     <el-form-item label="商品详情" prop="description">
       <Editor v-model:modelValue="formData.description" />
@@ -7,11 +7,11 @@
   </el-form>
 </template>
 <script lang="ts" name="DescriptionForm" setup>
-import type { SpuType } from '@/api/mall/product/management/type/spuType'
+import type { SpuType } from '@/api/mall/product/spu'
 import { Editor } from '@/components/Editor'
 import { PropType } from 'vue'
-import { copyValueToTarget } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
+import { copyValueToTarget } from '@/utils'
 
 const message = useMessage() // 消息弹窗
 const props = defineProps({
@@ -21,7 +21,7 @@ const props = defineProps({
   },
   activeName: propTypes.string.def('')
 })
-const DescriptionFormRef = ref() // 表单Ref
+const descriptionFormRef = ref() // 表单Ref
 const formData = ref<SpuType>({
   description: '' // 商品详情
 })
@@ -29,7 +29,6 @@ const formData = ref<SpuType>({
 const rules = reactive({
   description: [required]
 })
-
 /**
  * 富文本编辑器如果输入过再清空会有残留，需再重置一次
  */
@@ -45,7 +44,6 @@ watch(
     immediate: true
   }
 )
-
 /**
  * 将传进来的值赋值给formData
  */
@@ -53,10 +51,11 @@ watch(
   () => props.propFormData,
   (data) => {
     if (!data) return
+    // fix：三个表单组件监听赋值必须使用 copyValueToTarget 使用 formData.value = data 会监听非常多次
     copyValueToTarget(formData.value, data)
   },
   {
-    deep: true,
+    // fix: 去掉深度监听只有对象引用发生改变的时候才执行,解决改一动多的问题
     immediate: true
   }
 )
@@ -67,8 +66,8 @@ watch(
 const emit = defineEmits(['update:activeName'])
 const validate = async () => {
   // 校验表单
-  if (!DescriptionFormRef) return
-  return unref(DescriptionFormRef).validate((valid) => {
+  if (!descriptionFormRef) return
+  return await unref(descriptionFormRef).validate((valid) => {
     if (!valid) {
       message.warning('商品详情为完善!!')
       emit('update:activeName', 'description')

src/views/mall/product/spu/components/OtherSettingsForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="OtherSettingsFormRef" :model="formData" :rules="rules" label-width="120px">
+  <el-form ref="otherSettingsFormRef" :model="formData" :rules="rules" label-width="120px">
     <el-row>
       <!-- TODO @puhui999：横着三个哈  fix-->
       <el-col :span="24">
@@ -55,8 +55,8 @@
 <script lang="ts" name="OtherSettingsForm" setup>
 import type { SpuType } from '@/api/mall/product/spu'
 import { PropType } from 'vue'
-import { copyValueToTarget } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
+import { copyValueToTarget } from '@/utils'
 
 const message = useMessage() // 消息弹窗
 
@@ -68,7 +68,7 @@ const props = defineProps({
   activeName: propTypes.string.def('')
 })
 
-const OtherSettingsFormRef = ref() // 表单Ref
+const otherSettingsFormRef = ref() // 表单Ref
 // 表单数据
 const formData = ref<SpuType>({
   sort: 1, // 商品排序
@@ -100,7 +100,7 @@ const checkboxGroup = ref<string[]>([]) // 选中的推荐选项
 const onChangeGroup = () => {
   // TODO @puhui999：是不是可以遍历 recommend，然后进行是否选中；fix
   recommendOptions.forEach(({ value }) => {
-    formData.value[value] = checkboxGroup.value.includes(value) ? true : false
+    formData.value[value] = checkboxGroup.value.includes(value)
   })
 }
 
@@ -111,22 +111,28 @@ watch(
   () => props.propFormData,
   (data) => {
     if (!data) return
+    // fix：三个表单组件监听赋值必须使用 copyValueToTarget 使用 formData.value = data 会监听非常多次
     copyValueToTarget(formData.value, data)
+    recommendOptions.forEach(({ value }) => {
+      // TODO 如果先修改其他设置的值，再改变商品详情或是商品信息会重置其他设置页面中的相关值 fix:已修复
+      if (formData.value[value] && !checkboxGroup.value.includes(value)) {
+        checkboxGroup.value.push(value)
+      }
+    })
   },
   {
-    deep: true,
+    // fix: 去掉深度监听只有对象引用发生改变的时候才执行,解决改一动多的问题
     immediate: true
   }
 )
-
 /**
  * 表单校验
  */
 const emit = defineEmits(['update:activeName'])
 const validate = async () => {
   // 校验表单
-  if (!OtherSettingsFormRef) return
-  return await unref(OtherSettingsFormRef).validate((valid) => {
+  if (!otherSettingsFormRef) return
+  return await unref(otherSettingsFormRef).validate((valid) => {
     if (!valid) {
       message.warning('商品其他设置未完善！！')
       emit('update:activeName', 'otherSettings')
@@ -139,14 +145,4 @@ const validate = async () => {
   })
 }
 defineExpose({ validate })
-onMounted(async () => {
-  await nextTick()
-  // TODO 如果先修改其他设置的值，再改变商品详情或是商品信息会重置其他设置页面中的相关值 fix:已修复，改为组件初始化时赋值
-  checkboxGroup.value = []
-  recommendOptions.forEach(({ value }) => {
-    if (formData.value[value]) {
-      checkboxGroup.value.push(value)
-    }
-  })
-})
 </script>

src/views/mall/product/spu/components/ProductAttributes.vue

@@ -54,14 +54,14 @@ const inputVisible = computed(() => (index) => {
 const InputRef = ref() //标签输入框Ref
 const attributeList = ref([]) // 商品属性列表
 const props = defineProps({
-  attributeData: {
+  propertyList: {
     type: Array,
     default: () => {}
   }
 })
 
 watch(
-  () => props.attributeData,
+  () => props.propertyList,
   (data) => {
     if (!data) return
     attributeList.value = data
@@ -80,6 +80,7 @@ const handleClose = (index, valueIndex) => {
 /** 显示输入框并获取焦点 */
 const showInput = async (index) => {
   attributeIndex.value = index
+  // TODO 嗯！！！自动获取焦点还是有点问题，后续继续改进
   // 因为组件在ref中所以需要用索引获取对应的Ref
   InputRef.value[index]!.input!.focus()
 }

src/views/mall/product/spu/components/SkuList.vue

@@ -25,13 +25,13 @@
         </template>
       </el-table-column>
     </template>
-    <!-- TODO @puhui999： controls-position=" " 可以去掉哈，不然太长了，手动输入更方便 -->
+    <!-- TODO @puhui999： controls-position=" " 可以去掉哈，不然太长了，手动输入更方便 fix -->
     <el-table-column align="center" label="商品条码" min-width="168">
       <template #default="{ row }">
         <el-input v-model="row.barCode" class="w-100%" />
       </template>
     </el-table-column>
-    <!-- TODO @puhui999：用户输入的时候，是按照元；分主要是我们自己用； -->
+    <!-- TODO @puhui999：用户输入的时候，是按照元；分主要是我们自己用；fix -->
     <el-table-column align="center" label="销售价(元)" min-width="168">
       <template #default="{ row }">
         <el-input-number v-model="row.price" :min="0" class="w-100%" />
@@ -96,7 +96,7 @@ const props = defineProps({
     type: Object as PropType<SpuType>,
     default: () => {}
   },
-  attributeList: {
+  propertyList: {
     type: Array,
     default: () => []
   },
@@ -142,7 +142,7 @@ watch(
   }
 )
 
-// TODO @芋艿：看看 chatgpt 可以进一步下面几个方法的实现不
+// TODO @芋艿：看看 chatgpt 可以进一步下面几个方法的实现不 fix
 /** 生成表数据 */
 const generateTableData = (data: any[]) => {
   // 构建数据结构 fix: 使用map替换多重for循环
@@ -207,8 +207,8 @@ const build = (propertyValuesList: Property[][]) => {
 
 /** 监听属性列表生成相关参数和表头 */
 watch(
-  () => props.attributeList,
-  (attributeList) => {
+  () => props.propertyList,
+  (propertyList) => {
     // 如果不是多规格则结束
     if (!formData.value.specType) return
     // 如果当前组件作为批量添加数据使用则重置表数据
@@ -229,15 +229,15 @@ watch(
       ]
     }
     // 判断代理对象是否为空
-    if (JSON.stringify(attributeList) === '[]') return
+    if (JSON.stringify(propertyList) === '[]') return
     // 重置表头
     tableHeaders.value = []
     // 生成表头
-    attributeList.forEach((item, index) => {
+    propertyList.forEach((item, index) => {
       // name加属性项index区分属性值
       tableHeaders.value.push({ prop: `name${index}`, label: item.name })
     })
-    generateTableData(attributeList)
+    generateTableData(propertyList)
   },
   {
     deep: true,