fix: 修复 SkuList TODO 优化相关算法

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

@@ -1,6 +1,6 @@
 <template>
   <el-table
-    :data="isBatch ? SkuData : formData.skus"
+    :data="isBatch ? skuList : formData.skus"
     border
     class="tabNumWidth"
     max-height="500"
@@ -14,7 +14,7 @@
     <template v-if="formData.specType && !isBatch">
       <!--  根据商品属性动态添加  -->
       <el-table-column
-        v-for="(item, index) in tableHeaderList"
+        v-for="(item, index) in tableHeaders"
         :key="index"
         :label="item.label"
         align="center"
@@ -32,65 +32,45 @@
       </template>
     </el-table-column>
     <!-- TODO @puhui999：用户输入的时候，是按照元；分主要是我们自己用； -->
-    <el-table-column align="center" label="销售价(分)" min-width="168">
+    <el-table-column align="center" label="销售价(元)" min-width="168">
       <template #default="{ row }">
-        <el-input-number v-model="row.price" :min="0" class="w-100%" controls-position="right" />
+        <el-input-number v-model="row.price" :min="0" class="w-100%" />
       </template>
     </el-table-column>
-    <el-table-column align="center" label="市场价(分)" min-width="168">
+    <el-table-column align="center" label="市场价(元)" min-width="168">
       <template #default="{ row }">
-        <el-input-number
+        <el-input-number v-model="row.marketPrice" :min="0" class="w-100%" />
-          v-model="row.marketPrice"
-          :min="0"
-          class="w-100%"
-          controls-position="right"
-        />
       </template>
     </el-table-column>
-    <el-table-column align="center" label="成本价(分)" min-width="168">
+    <el-table-column align="center" label="成本价(元)" min-width="168">
       <template #default="{ row }">
-        <el-input-number
+        <el-input-number v-model="row.costPrice" :min="0" class="w-100%" />
-          v-model="row.costPrice"
-          :min="0"
-          class="w-100%"
-          controls-position="right"
-        />
       </template>
     </el-table-column>
     <el-table-column align="center" label="库存" min-width="168">
       <template #default="{ row }">
-        <el-input-number v-model="row.stock" :min="0" class="w-100%" controls-position="right" />
+        <el-input-number v-model="row.stock" :min="0" class="w-100%" />
       </template>
     </el-table-column>
     <el-table-column align="center" label="重量(kg)" min-width="168">
       <template #default="{ row }">
-        <el-input-number v-model="row.weight" :min="0" class="w-100%" controls-position="right" />
+        <el-input-number v-model="row.weight" :min="0" class="w-100%" />
       </template>
     </el-table-column>
     <el-table-column align="center" label="体积(m^3)" min-width="168">
       <template #default="{ row }">
-        <el-input-number v-model="row.volume" :min="0" class="w-100%" controls-position="right" />
+        <el-input-number v-model="row.volume" :min="0" class="w-100%" />
       </template>
     </el-table-column>
     <template v-if="formData.subCommissionType">
-      <el-table-column align="center" label="一级返佣(分)" min-width="168">
+      <el-table-column align="center" label="一级返佣(元)" min-width="168">
         <template #default="{ row }">
-          <el-input-number
+          <el-input-number v-model="row.subCommissionFirstPrice" :min="0" class="w-100%" />
-            v-model="row.subCommissionFirstPrice"
-            :min="0"
-            class="w-100%"
-            controls-position="right"
-          />
         </template>
       </el-table-column>
-      <el-table-column align="center" label="二级返佣(分)" min-width="168">
+      <el-table-column align="center" label="二级返佣(元)" min-width="168">
         <template #default="{ row }">
-          <el-input-number
+          <el-input-number v-model="row.subCommissionSecondPrice" :min="0" class="w-100%" />
-            v-model="row.subCommissionSecondPrice"
-            :min="0"
-            class="w-100%"
-            controls-position="right"
-          />
         </template>
       </el-table-column>
     </template>
@@ -107,9 +87,8 @@
 <script lang="ts" name="SkuList" setup>
 import { UploadImg } from '@/components/UploadFile'
 import { PropType } from 'vue'
-import { SpuType } from '@/api/mall/product/management/type/spuType'
+import type { Property, SkuType, SpuType } from '@/api/mall/product/spu'
 import { propTypes } from '@/utils/propTypes'
-import { SkuType } from '@/api/mall/product/management/type/skuType'
 import { copyValueToTarget } from '@/utils'
 
 const props = defineProps({
@@ -121,66 +100,35 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
-  isBatch: propTypes.bool.def(false) // 是否批量操作
+  isBatch: propTypes.bool.def(false) // 是否作为批量操作组件
 })
 const formData = ref<SpuType>() // 表单数据
-// 批量添加时的零时数据 TODO @puhui999：小写开头哈；然后变量都尾注释
+const skuList = ref<SkuType[]>([
-const SkuData = ref<SkuType[]>([
   {
-    /**
+    price: 0, // 商品价格
-     * 商品价格，单位：分
+    marketPrice: 0, // 市场价
-     */
+    costPrice: 0, // 成本价
-    price: 0,
+    barCode: '', // 商品条码
-    /**
+    picUrl: '', // 图片地址
-     * 市场价，单位：分
+    stock: 0, // 库存
-     */
+    weight: 0, // 商品重量
-    marketPrice: 0,
+    volume: 0, // 商品体积
-    /**
+    subCommissionFirstPrice: 0, // 一级分销的佣金
-     * 成本价，单位：分
+    subCommissionSecondPrice: 0 // 二级分销的佣金
-     */
-    costPrice: 0,
-    /**
-     * 商品条码
-     */
-    barCode: '',
-    /**
-     * 图片地址
-     */
-    picUrl: '',
-    /**
-     * 库存
-     */
-    stock: 0,
-    /**
-     * 商品重量，单位：kg 千克
-     */
-    weight: 0,
-    /**
-     * 商品体积，单位：m^3 平米
-     */
-    volume: 0,
-    /**
-     * 一级分销的佣金，单位：分
-     */
-    subCommissionFirstPrice: 0,
-    /**
-     * 二级分销的佣金，单位：分
-     */
-    subCommissionSecondPrice: 0
   }
-])
+]) // 批量添加时的临时数据
 
 /** 批量添加 */
 const batchAdd = () => {
   formData.value.skus.forEach((item) => {
-    copyValueToTarget(item, SkuData.value[0])
+    copyValueToTarget(item, skuList.value[0])
   })
 }
 
-const tableHeaderList = ref<{ prop: string; label: string }[]>([])
+const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表头
 
 /**
- * 将传进来的值赋值给SkuData
+ * 将传进来的值赋值给skuList
  */
 watch(
   () => props.propFormData,
@@ -197,21 +145,18 @@ watch(
 // TODO @芋艿：看看 chatgpt 可以进一步下面几个方法的实现不
 /** 生成表数据 */
 const generateTableData = (data: any[]) => {
-  // 构建数据结构
+  // 构建数据结构 fix: 使用map替换多重for循环
-  const propertiesItemList = []
+  const propertiesItemList = data.map((item) =>
-  for (const item of data) {
+    item.values.map((v) => ({
-    const objList = []
+      propertyId: item.id,
-    for (const v of item.values) {
+      propertyName: item.name,
-      const obj = { propertyId: 0, valueId: 0, valueName: '' }
+      valueId: v.id,
-      obj.propertyId = item.id
+      valueName: v.name
-      obj.valueId = v.id
+    }))
-      obj.valueName = v.name
+  )
-      objList.push(obj)
-    }
-    propertiesItemList.push(objList)
-  }
   const buildList = build(propertiesItemList)
-  // 如果构建后的组合数跟sku数量一样的话则不用处理,添加新属性没有属性值也不做处理 （解决编辑表单时或查看详情时数据回显问题）
+  // 如果构建后的组合数跟sku数量一样的话则不用处理,添加新属性没有属性值也不做处理
+  // fix: 解决编辑表单时或查看详情时数据回显问题
   if (
     buildList.length === formData.value.skus.length ||
     data.some((item) => item.values.length === 0)
@@ -222,7 +167,7 @@ const generateTableData = (data: any[]) => {
   formData.value!.skus = []
   buildList.forEach((item) => {
     const row = {
-      properties: [],
+      properties: Array.isArray(item) ? item : [item],
       price: 0,
       marketPrice: 0,
       costPrice: 0,
@@ -234,32 +179,25 @@ const generateTableData = (data: any[]) => {
       subCommissionFirstPrice: 0,
       subCommissionSecondPrice: 0
     }
-    // 判断是否是单一属性的情况
-    if (Array.isArray(item)) {
-      row.properties = item
-    } else {
-      row.properties.push(item)
-    }
     formData.value.skus.push(row)
   })
 }
-
 /** 构建所有排列组合 */
-const build = (list: any[]) => {
+const build = (propertyValuesList: Property[][]) => {
-  if (list.length === 0) {
+  if (propertyValuesList.length === 0) {
     return []
-  } else if (list.length === 1) {
+  } else if (propertyValuesList.length === 1) {
-    return list[0]
+    return propertyValuesList[0]
   } else {
-    const result = []
+    const result: Property[][] = []
-    const rest = build(list.slice(1))
+    const rest = build(propertyValuesList.slice(1))
-    for (let i = 0; i < list[0].length; i++) {
+    for (let i = 0; i < propertyValuesList[0].length; i++) {
       for (let j = 0; j < rest.length; j++) {
         // 第一次不是数组结构，后面的都是数组结构
         if (Array.isArray(rest[j])) {
-          result.push([list[0][i], ...rest[j]])
+          result.push([propertyValuesList[0][i], ...rest[j]])
         } else {
-          result.push([list[0][i], rest[j]])
+          result.push([propertyValuesList[0][i], rest[j]])
         }
       }
     }
@@ -270,12 +208,12 @@ const build = (list: any[]) => {
 /** 监听属性列表生成相关参数和表头 */
 watch(
   () => props.attributeList,
-  (data) => {
+  (attributeList) => {
     // 如果不是多规格则结束
     if (!formData.value.specType) return
     // 如果当前组件作为批量添加数据使用则重置表数据
     if (props.isBatch) {
-      SkuData.value = [
+      skuList.value = [
         {
           price: 0,
           marketPrice: 0,
@@ -291,15 +229,15 @@ watch(
       ]
     }
     // 判断代理对象是否为空
-    if (JSON.stringify(data) === '[]') return
+    if (JSON.stringify(attributeList) === '[]') return
     // 重置表头
-    tableHeaderList.value = []
+    tableHeaders.value = []
     // 生成表头
-    data.forEach((item, index) => {
+    attributeList.forEach((item, index) => {
       // name加属性项index区分属性值
-      tableHeaderList.value.push({ prop: `name${index}`, label: item.name })
+      tableHeaders.value.push({ prop: `name${index}`, label: item.name })
     })
-    generateTableData(data)
+    generateTableData(attributeList)
   },
   {
     deep: true,