!16 优化商品sku编辑，不在清空数据。commit v1

Merge pull request !16 from OceansDeep/dev-gl

seller/src/views/goods/goods-seller/goodsOperationSec.vue

@@ -183,7 +183,7 @@
                           <Button
                             type="primary"
                             slot="extra"
-                            @click="handleCloseSkuItem($index)"
+                            @click="handleCloseSkuItem($index, item)"
                           >
                             删除规格
                           </Button>
@@ -196,7 +196,7 @@
                                 style="width: 150px"
                                 v-model="item.name"
                                 :maxlength="30"
-                                placeholder="请输入规格项名称"
+                                placeholder="请输入规格名称"
                                 :filter-method="filterMethod"
                                 :data="skuData"
                                 @on-change="editSkuItem"
@@ -224,7 +224,7 @@
                                   :data="skuVal"
                                   @on-focus="changeSkuVals(item.name)"
                                   @on-change="
-                                    skuValueChange(val.value, $index, item)
+                                    skuValueChange(val.value, index, item)
                                   "
                                 >
                                 </AutoComplete>
@@ -232,7 +232,7 @@
                                   type="primary"
                                   size="small"
                                   style="margin-left: 10px"
-                                  @click="handleCloseSkuValue(item, index)"
+                                  @click="handleCloseSkuValue(val, index)"
                                 >
                                   删除
                                 </Button>
@@ -254,6 +254,14 @@
                       @click="addSkuItem"
                       >添加规格项</Button
                     >
+                    &nbsp;
+                    <Button
+                      class="add-sku-btn"
+                      type="warning"
+                      size="small"
+                      @click="handleClearSku"
+                      >清空规格项</Button
+                    >
                   </div>
                 </Panel>
                 <Panel name="2">
@@ -605,6 +613,7 @@ export default {
     return {
       regular,
       total: 0,
+      global: 0,
       accessToken: "", //令牌token
       goodsParams: "",
       categoryId: "", // 商品分类第三级id
@@ -700,7 +709,6 @@ export default {
       shopCategory: [],
       /** 商品单位列表 */
       goodsUnitList: [],
-      initSkuTableData: [],
       ignoreColumn: [
         // 添加规格时需要忽略的参数
         "_index",
@@ -823,7 +831,6 @@ export default {
     },
     // 商品图片上传成功
     handleSuccessGoodsPicture(res, file) {
-      console.log(res);
       if (file.response) {
         file.url = file.response.result;
         this.baseInfoForm.goodsGalleryFiles.push(file);
@@ -885,7 +892,6 @@ export default {
     GET_GoodsUnit() {
       API_GOODS.getGoodsUnitList(this.params).then((res) => {
         if (res.success) {
-          console.log(res);
           this.goodsUnitList.push(...res.result.records.map((i) => i.name));
           this.total = res.result.total;
         }
@@ -958,7 +964,7 @@ export default {
     renderGoodsDetailSku(skuList) {
       let skus = [];
       let skusInfo = [];
-      skuList.map((e, skuListIndex) => {
+      skuList.map((e) => {
         let sku = {
           id: e.id,
           sn: e.sn,
@@ -966,7 +972,6 @@ export default {
           cost: e.cost,
           quantity: e.quantity,
           weight: e.weight,
-          _id: new Date().getTime() + skuListIndex, // 标识
         };
         e.specList.forEach((u) => {
           if (u.specName === "images") {
@@ -980,10 +985,8 @@ export default {
               skusInfo.push({
                 name: u.specName,
                 spec_id: u.specNameId,
-                _id: new Date().getTime(),
                 spec_values: [
                   {
-                    _id: new Date().getTime(),
                     id: u.specValueId,
                     name: u.specName,
                     value: u.specValue || "",
@@ -998,7 +1001,6 @@ export default {
                 ) {
                   sk.spec_values.push({
                     id: u.specValueId,
-                    _id: new Date().getTime(),
                     name: u.specName,
                     value: u.specValue || "",
                   });
@@ -1014,7 +1016,7 @@ export default {
         skus.push(sku);
       });
       this.skuInfo = skusInfo;
-      this.renderTableData();
+      this.renderTableData(skus);
       this.skuTableData = skus;
     },
 
@@ -1063,26 +1065,20 @@ export default {
         return;
       }
       // 写入对象，下标，具体对象
+      let num = this.global++;
       this.$set(this.skuInfo, this.skuInfo.length, {
-        spec_values: [
+        spec_values: [{ name: "规格名" + num, value: "" }],
-          {
+        name: "规格名" + num,
-            name: '规格名'+this.skuInfo.length,
-            value: '',
-            ['_id'+this.skuInfo.length]: new Date().getTime() + Math.random(0.1),
-          },
-        ],
-        name: '规格名'+this.skuInfo.length,
-        ['_id'+this.skuInfo.length]: new Date().getTime(),
       });
-      this.renderTableData();
+      this.renderTableData(this.skuTableData);
     },
     // 编辑规格名
     editSkuItem() {
-      this.renderTableData();
+      this.renderTableData(this.skuTableData);
     },
     // 编辑规格值
     async skuValueChange(val, index, item) {
-      this.renderTableData();
+      this.renderTableData(this.skuTableData);
     },
     // 获取焦点时，取得规格名对应的规格值
     changeSkuVals(name) {
@@ -1097,12 +1093,15 @@ export default {
       }
     },
     /** 移除当前规格项 进行数据变化*/
-    handleCloseSkuItem($index) {
+    handleCloseSkuItem($index, item) {
       this.skuInfo.splice($index, 1);
+      this.skuTableData.forEach((e, index) => {
+        delete e[item.name];
+      });
       /**
        * 渲染规格详细表格
        */
-      this.renderTableData();
+      this.renderTableData(this.skuTableData);
     },
     // 添加规格值的验证
     validateEmpty(params) {
@@ -1130,35 +1129,44 @@ export default {
         this.$set(item.spec_values, item.spec_values.length, {
           name: item.name,
           value: "",
-          _id: new Date().getTime(),
         });
         this.baseInfoForm.regeneratorSkuFlag = true;
         /**
          * 渲染规格详细表格
          */
-        this.renderTableData();
+        this.renderTableData(this.skuTableData);
       }
     },
-
+    handleClearSku() {
+      this.skuInfo = [];
+      this.skuTableData = [];
+      this.renderTableData(this.skuTableData);
+    },
     /** 移除当前规格值 */
     handleCloseSkuValue(item, index) {
-      item.spec_values.splice(index, 1);
+      // this.skuInfo[item.name].spec_values.splice(index, 1);
-
+      this.skuInfo.forEach((i) => {
+        if (i.name === item.name) {
+          i.spec_values.splice(index, 1);
+        }
+      });
+      this.skuTableData = this.skuTableData.filter(
+        (e, index) => e[item.name] !== item.value
+      );
       this.baseInfoForm.regeneratorSkuFlag = true;
       /**
        * 渲染规格详细表格
        */
-      this.renderTableData();
+      this.renderTableData(this.skuTableData);
     },
 
     /**
      * 渲染table所需要的column 和 data
      */
-    renderTableData() {
+    renderTableData(skus) {
       this.skuTableColumn = [];
+      // this.skuTableData = [];
       let pushData = [];
-      this.initSkuTableData = this.skuTableData;
-      this.skuTableData = [];
       //渲染头部
       this.skuInfo.forEach((sku) => {
         // !sku.name ? (sku.name = "规格名") : "";
@@ -1202,45 +1210,39 @@ export default {
       this.skuTableColumn = pushData;
       //克隆所有渲染的数据
       let cloneTemp = cloneObj(this.skuInfo);
-      //判定 是否存在规格分组
       if (cloneTemp[0]) {
         //存放最终结果
         let result = [];
         //循环选中的 sku 数据
-        cloneTemp[0].spec_values.forEach((specItem) => {
+        cloneTemp[0].spec_values.forEach((specItem, index) => {
+          // 如存在数据，则将数据赋值
+          if (skus && skus[index] && specItem.value !== "") {
+            let obj = {
+              id: skus[index].id,
+              sn: skus[index].sn,
+              quantity: skus[index].quantity,
+              cost: skus[index].cost,
+              price: skus[index].price,
+              [cloneTemp[0].name]: specItem.value,
+              images: this.baseInfoForm.goodsGalleryFiles || [],
+            };
+            if (specItem.value !== "") {
+              obj.id = skus[index].id;
+            }
+            if (skus[index].weight !== "") {
+              obj.weight = skus[index].weight;
+            }
+            result.push(obj);
+          } else {
             result.push({
               [cloneTemp[0].name]: specItem.value,
               images: this.baseInfoForm.goodsGalleryFiles || [],
-            _name: cloneTemp[0].name,
-
-            ...specItem,
             });
-        });
-        cloneTemp.splice(0, 1);
-
-        result = this.specIterator(result, cloneTemp);
-        this.skuTableData = result;
-        console.log(result)
-        this.skuTableData.forEach((item, index) => {
-          this.initSkuTableData.forEach((sku) => {
-            // 多个规格项 判断每个id数组通过赋值
-
-            // if (sku._id.length && this.scalarArrayEquals(item._id, sku._id)) {
-            //   this.skuTableData[index] = {
-            //     ...item,
-            //     ...sku,
-            //   };
-            // } else
-             if (item.value == sku[item._name] || item._id == sku._id) {
-              // 	// 单个规格项如果id重复 赋值
-              this.skuTableData[index] = {
-                ...sku,
-                ...item,
-              };
-              // }
           }
         });
-        });
+        cloneTemp.splice(0, 1);
+        result = this.specIterator(result, cloneTemp, skus);
+        this.skuTableData = result;
       }
     },
     /**
@@ -1248,20 +1250,81 @@ export default {
      * result 渲染的数据
      * array spec数据
      */
-    specIterator(result, cloneTemp) {
+    specIterator(result, cloneTemp, skus) {
+      // console.log("-----skus-----");
+      // console.log(JSON.parse(JSON.stringify(skus)));
+      // console.log("-----result-----");
+      // console.log(JSON.parse(JSON.stringify(result)));
+      // console.log("-----cloneTemp-----");
+      // console.log(JSON.parse(JSON.stringify(cloneTemp)));
       //是否还可以循环
       if (cloneTemp.length > 0) {
         let table = [];
-        result.forEach((resItem) => {
+        // 已有数据索引
-          cloneTemp[0].spec_values.forEach((valItem, i) => {
+        let findIndex = 0;
+        result.forEach((resItem, index) => {
+          cloneTemp[0].spec_values.forEach((valItem, _index) => {
             let obj = cloneObj(resItem);
-            obj[cloneTemp[0].name] = valItem.value;
+            // 判断已存在数据数量是否大于渲染数据数量（认为是在编辑原存在数据的规格值）且规格值不为空且存在已存在数据，如符合条件，则认为为修改已存在数据
-            obj._name = obj[cloneTemp[0].name];
+            if (skus.length > result.length && valItem.value !== "" && skus[findIndex]) {
-
+              obj = cloneObj(skus[findIndex]);
-            if (obj._id) {
-              // obj._id = `${obj._id},${cloneTemp[0].spec_values[i+1]?._id }`.split(",");
-
             }
+            let emptyFlag = false;
+            // 判断是否为规格项的第一个值，如果不为第一个值则判断为新加数据
+            if (cloneTemp[0].spec_values.length > 1 && valItem.value === "") {
+              delete obj.id;
+              delete obj.sn;
+              delete obj.quantity;
+              delete obj.cost;
+              delete obj.price;
+              delete obj.weight;
+            }
+
+            // 判断渲染数据中是否存在空值，存在空值则判断新加数据
+            for (let key in obj) {
+              if (!obj[key]) {
+                emptyFlag = true;
+                break;
+              }
+            }
+
+            // 判断当前渲染数据是否已有数据
+            if (
+              skus &&
+              skus[findIndex] &&
+              (!skus[findIndex].id || obj.id === skus[findIndex].id) &&
+              valItem.value !== "" &&
+              !emptyFlag
+            ) {
+              // 将原存在的数据放入结果中
+              let originSku = skus[findIndex];
+              obj = {
+                sn: obj.sn || originSku.sn,
+                quantity: obj.quantity || originSku.quantity,
+                cost: obj.cost || originSku.cost,
+                price: obj.price || originSku.price,
+                weight: obj.weight || originSku.weight,
+                ...obj,
+              };
+              if (
+                originSku[valItem.name] === valItem.value ||
+                (obj.id && originSku.id === obj.id)
+              ) {
+                obj.id = originSku.id;
+              }
+
+              // 视为处理完成已存在数据，将原数据索引后移1位
+              if (skus.length == result.length) {
+                findIndex++;
+              }
+            }
+
+            // 如原存在数据大于渲染数据（认为是在编辑原存在数据的规格值），且存在已存在数据，且规格值不为空。则将原数据索引后移1位
+            if (skus.length > result.length && (skus[findIndex] && valItem.value !== "")) {
+              findIndex++;
+            }
+
+            obj[cloneTemp[0].name] = valItem.value;
             table.push(obj);
           });
         });
@@ -1274,7 +1337,7 @@ export default {
       } else {
         return result;
       }
-      return this.specIterator(result, cloneTemp);
+      return this.specIterator(result, cloneTemp, skus);
     },
     /** 根据分类id获取系统设置规格信息*/
     Get_SkuInfoByCategory(categoryId) {
@@ -1378,7 +1441,7 @@ export default {
     },
     /**  添加商品 **/
     save() {
-      this.submitLoading = true;
+      // this.submitLoading = true;
       this.$refs["baseInfoForm"].validate((valid) => {
         if (valid) {
           let submit = JSON.parse(JSON.stringify(this.baseInfoForm));
@@ -1399,19 +1462,27 @@ export default {
             this.submitLoading = false;
             return;
           }
-          submit.skuList = this.skuTableData.map((sku) => {
+          let skuInfoNames = this.skuInfo.map((n) => n.name);
-            // 非空判断
+          submit.skuList = [];
-            delete sku._index;
+          this.skuTableData.map((sku) => {
-            delete sku._rowKey;
+            let skuCopy = {
-            delete sku.specNameId;
+              cost: sku.cost,
-            delete sku.specValueId;
+              price: sku.price,
-            delete sku._id;
+              quantity: sku.quantity,
-            delete sku.name;
+              sn: sku.sn,
-            delete sku.value;
+              images: sku.images,
-            delete sku._name;
+            };
-            return sku;
+            if (sku.weight) {
+              skuCopy.weight = sku.weight;
+            }
+            if (sku.id) {
+              skuCopy.id = sku.id;
+            }
+            for (let skuInfoName of skuInfoNames) {
+              skuCopy[skuInfoName] = sku[skuInfoName];
+            }
+            submit.skuList.push(skuCopy);
           });
-
           if (submit.goodsGalleryFiles.length > 0) {
             submit.goodsGalleryList = submit.goodsGalleryFiles.map(
               (i) => i.url
@@ -1424,7 +1495,6 @@ export default {
           submit.recommend
             ? (submit.recommend = true)
             : (submit.recommend = false);
-
           if (this.goodsId) {
             API_GOODS.editGoods(this.goodsId, submit).then((res) => {
               if (res.success) {