fix: 修复sku位置错乱的问题

src/pages/commodity/products/addProductsItem/priceAttributeForm.tsx

@@ -9,7 +9,7 @@ import { observer } from 'mobx-react'
 import { store } from '@/store'
 import { IProductSelectAttribute } from '@/module/productModule'
 import { orderlyLadderPrice, validatorNumberRange } from '../constant'
-import { getProductSelectGetSelectCnUnit } from '@/services/ProductV2Api'
+import { GetProductCommodityGetCommodityResponse, getProductSelectGetSelectCnUnit } from '@/services/ProductV2Api'
 
 const layout: any = {
   colon: false,
@@ -30,6 +30,45 @@ const { Option } = Select
 
 let _tableDataSource: any = []
 
+type CommodityAttributeListType = GetProductCommodityGetCommodityResponse['commodityAttributeList']
+
+type AttributesTemplateType = {
+  /**
+   * 属性id
+   */
+  attrId: number,
+  /**
+   * 属性值
+   */
+  attrValue: string,
+  /**
+   * 属性名称
+   */
+  attrName: string,
+}[]
+
+function getAttributesTemplate(attributes: CommodityAttributeListType): AttributesTemplateType {
+  return attributes.map((item) => ({
+    attrId: item.customerAttribute.id,
+    attrName: item.customerAttribute.name,
+    attrValue: undefined,
+  }));
+}
+
+function setAttributesTemplateItemValue(template: AttributesTemplateType, itemId: number, value: string) {
+  const index  = template.findIndex((item) => item.attrId === itemId);
+  if (index !== -1) {
+    template.splice(index, 1, {
+      ...template[index],
+      attrValue: value,
+    });
+  }
+}
+
+function getAttributesTemplateValues(template: AttributesTemplateType): string[] {
+  return template.map((item) => item.attrValue);
+}
+
 const PriceAttributeForm: React.FC<Iprops> = (props) => {
   const intl = useIntl();
   const { onRef } = props
@@ -168,8 +207,16 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
         }
       })
     } else if (history.location.query?.id  || history.location.query?.draftId) { // 此时没有属性并且处于编辑状态 取接口返回的数据  [0]? (也有可能编辑情况下切换到无规格的品类)
-      _attributeNameArr = productInfoByEdit.unitPriceAndPicList[0]?.attributeAndValueList.map(_ => _.customerAttribute.name)
-      _attributeValueArr = [productInfoByEdit.unitPriceAndPicList.map(item => item.attributeAndValueList.map(_ => _.customerAttributeValue.value))]
+      // _attributeNameArr = productInfoByEdit.unitPriceAndPicList[0]?.attributeAndValueList.map(_ => _.customerAttribute.name)
+      _attributeNameArr = getAttributesTemplate(productInfoByEdit.commodityAttributeList).map((item) => item.attrName);
+      // _attributeValueArr = [productInfoByEdit.unitPriceAndPicList.map(item => item.attributeAndValueList.map(_ => _.customerAttributeValue.value))]
+      _attributeValueArr = [productInfoByEdit.unitPriceAndPicList.map((sku) => {
+        const attrTem = getAttributesTemplate(productInfoByEdit.commodityAttributeList);
+        sku.attributeAndValueList.forEach((attrs) => {
+          setAttributesTemplateItemValue(attrTem, attrs.customerAttribute.id, attrs.customerAttributeValue.value);
+        })
+        return getAttributesTemplateValues(attrTem);
+      })]
       _temp_attributeObjArr = productInfoByEdit.unitPriceAndPicList[0]?.attributeAndValueList.map(item => {
         return {
           attributeName: item.customerAttribute.name,
@@ -225,7 +272,6 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
 
     let { _attributeNameArr, _attributeValueArr, _temp_attributeObjArr, _temp_attributeValObjArr } = needObject
 
-    console.log(selectedGoods, 'selectedGoods')
     if (selectedGoods.length > 0) {  // 编辑情况下 select货品列表可能会采用接口数据
       _col.push({
         title: intl.formatMessage({ id: 'commodity.products.addProductsItem.priceAttributeForm.goodsName' }),
@@ -335,7 +381,6 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
           if (isRecombination) {
             _tempObj[intl.formatMessage({ id: 'commodity.products.addProductsItem.priceAttributeForm.goodsName' })] = selectedGoods.length > 0 ? selectedGoods[0].id : 0
           } else {
-            console.log(_rowArr, i, productInfoByEdit.unitPriceAndPicList, _tableDataSource, 'good_ID')
             _tempObj[intl.formatMessage({ id: 'commodity.products.addProductsItem.priceAttributeForm.goodsName' })] = productInfoByEdit.unitPriceAndPicList[i]?.goods?.id ? productInfoByEdit.unitPriceAndPicList[i].goods.id : 0
           }
           // 通过 isUpdateAttribute 判断是否需要携带unitPriceAndPicList的id字段
@@ -409,7 +454,6 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
         _tableDataSource.map(item => item[intl.formatMessage({ id: 'commodity.products.addProductsItem.priceAttributeForm.unitPrice' })] = {})
       }
     }
-    console.log(_tableDataSource, '_tableDataSource')
     setTableDataSource(productName ? _tableDataSource : []) // 通过商品名称来判断是否显示表格数据
 
     constructedPrarams()
@@ -478,7 +522,6 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
       hsCode: _tableDataSource[0] && _tableDataSource[0]['HS编码'],
     })  /*带上货品id 带上单价*/  /* code1 end */
     setPriceAttributeParams(_paramsArray)
-    console.log(_paramsArray, '_paramsArray')
   }
 
   /**
@@ -507,7 +550,6 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
     newTabeData[record[intl.formatMessage({id: 'commodity.products.addProductsItem.priceAttributeForm.index',defaultMessage:'索引'})]] = _row
     _tableDataSource = newTabeData
     setTableDataSource(_tableDataSource)
-    console.log(_tableDataSource, '_tableDataSource')
     constructedPrarams()
   }