1

src/views/system/goods/add/components/goodsparameter.vue

@@ -64,12 +64,12 @@
         <!--        </el-table-column>-->
       </el-table>
     </div>
-    <div v-if="orgGoodsPam.specs.length > 0"  class="single-spe-con">
-      {{orgGoodsPam.specs_group}}
+    <div v-if="parameterdata.specs.length > 0"  class="single-spe-con">
+      <!-- {{parameterdata.specs_group}} -->
       <el-table
         border
         size="small"
-        :data="orgGoodsPam.specs_group"
+        :data="parameterdata.specs_group"
          :span-method="objectSpanMethod1"
         style="width: 80%"
         :key="keyvalue"
@@ -77,7 +77,7 @@
         <el-table-column
         header-align="center"
         align="center"
-        v-for="(item, index) in orgGoodsPam.specs"
+        v-for="(item, index) in parameterdata.specs"
         :key="index"
         :prop="item.spec_name"
         :label="item.spec_name"
@@ -246,13 +246,26 @@ export default {
       singleSpecImgList: [],
       isViewPriceExp: false,
       cateFee: 0,
+      spanArr: [],
+      pos: "",
+      spanArr1: [],
+      pos1: "",
+      tablearr: [],
+      spanArrS: {
+        spanArr0: [],
+        spanArr1: [],
+      },
+      posS: {
+        pos0: "",
+        pos1: "",
+      },
     } // return end
   },
   watch:{
     'parameterdata': function(val) {
       console.log('更新')
       this.orgGoodsPam = val;
-      this.keyvalue++
+     
       if(val.pamNameList){
         this.spacArr = val.pamNameList
       console.log(val)
@@ -265,7 +278,9 @@ export default {
   },
   mounted() {
     console.log(this.parameterdata)
+    this.getSpanArr(this.parameterdata);
     debugger
+    this.keyvalue++
     if(this.parameterdata.pamTableList && this.parameterdata.pamTableList.length > 0) {
       this.orgGoodsPam = this.parameterdata;
     }else {
@@ -468,11 +483,43 @@ export default {
       }
 
       return slPriceNum
+    },
+      //计算位置的方法
+      getSpanArr(data) {
+      this.spanArrS = {};
+      this.spanArr = [];
+      this.pos = "";
+      this.spanArr1 = [];
+      this.pos1 = "";
+
+      if(data.specs && data.specs.length > 0) {
+        for (let s = 0; s < data.specs.length; s++) {
+          this.spanArrS["spanArr" + s] = [];
+          for (var i = 0; i < data.specs_group.length; i++) {
+            if (i === 0) {
+              this.spanArrS["spanArr" + s].push(1);
+              this.posS["pos" + s] = 0;
+            } else {
+              // 判断当前元素与上一个元素是否相同
+              if (
+                data.specs_group[i][data.specs[s].spec_name] ==
+                data.specs_group[i - 1][data.specs[s].spec_name]
+              ) {
+                this.spanArrS["spanArr" + s][this.posS["pos" + s]] += 1;
+                this.spanArrS["spanArr" + s].push(0);
+              } else {
+                this.spanArrS["spanArr" + s].push(1);
+                this.posS["pos" + s] = i;
+              }
+            }
+          }
+        }
+      }
     },
      // 合并行数
      objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
-      if(this.spacArr && this.spacArr.length > 0) {
-        for (let s = 0; s < this.spacArr.length; s++) {
+      if(this.parameterdata.specs_group && this.parameterdata.specs_group.length > 0) {
+        for (let s = 0; s < this.parameterdata.specs.length; s++) {
           if (columnIndex == s) {
             const _row = this.spanArrS["spanArr" + s][rowIndex];
             const _col = _row > 0 ? 1 : 0;

src/views/system/goods/add/components/goodsspecifications.vue

@@ -388,6 +388,7 @@ export default {
         // });
         this.tableData7['specs_group'] = specs_group
         this.tableData7['specs'] = this.speData
+        this.tableData7['shopTypes'] = this.cartesian(proSpeData)
         this.$emit('calcSpeTable',this.tableData7);
         console.log(this.tableData7)
       }
@@ -455,6 +456,7 @@ export default {
     },
     /** 笛卡尔积算法 */
     cartesian(arr) {
+      debugger
       if(arr.length < 2) {
         return arr[0] || [];
       }else {
@@ -467,7 +469,7 @@ export default {
               res.push(t);
             });
           });
-          debugger
+     
           return res
         });
       }

src/views/system/goods/add/index.vue

@@ -38,7 +38,7 @@
             <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品规格</p>
             <GoodsSpecifications ref="goodsspecifications" :specificationsdata="specificationsdata" @calcSpeTable="calcSpeTable"/>
             <!--            <keep-alive>-->
-            <GoodsParameter ref="goodsparameter" :parameterdata="parameterdata" />
+            <GoodsParameter :key="keyvalue" ref="goodsparameter" :parameterdata="parameterdata" />
             <!--            </keep-alive>-->
           </div>
         </div>
@@ -97,6 +97,7 @@
     },
     data() {
       return {
+        keyvalue:1,
         goodsLoading: false,
         SSQList: [], // 省市区
         SSQStr: '', // 省市区 拼接
@@ -197,20 +198,31 @@
             // 商品售价
             if(res.data.specs_group && res.data.specs_group.length > 0) {
               //this.parameterdata
-              let prePriceArr = [];
-              this.parameterdata.pamTableList = [];
-              this.parameterdata.pamDataList = [];
+             let specs_group = res.data.specs_group
               res.data.specs_group.forEach((item)=> {
                 item.js_price = item.js_price / 100;
                 item.sl_price = item.js_price / 100;
                 item.price = item.price / 100;
                 item.sc_price = item.sc_price / 100;
-                prePriceArr = [];
-                prePriceArr.push(item);
-                this.parameterdata.pamTableList.push( prePriceArr );
-                this.parameterdata.pamDataList.push(item.spec_values);
               })
-              this.parameterdata.pamNameList = res.data.specs;
+              
+              let goodsParametersList = this.cartesian(this.processData(res.data.specs));
+                for (let index = 0; index < goodsParametersList.length; index++) {
+                for (let i = 0; i < res.data.specs.length; i++) {
+                  if(res.data.specs.length>1){
+                    specs_group[index][res.data.specs[i].spec_name] = goodsParametersList[index][i];
+                  
+                  }
+                  if(res.data.specs.length==1){
+                    specs_group[res.data.specs[i].spec_name] = goodsParametersList[index];
+                  }
+                }
+              }
+              this.parameterdata['specs_group'] = specs_group
+              debugger
+              this.parameterdata['specs'] = res.data.specs;
+              this.parameterdata['shopTypes'] = goodsParametersList
+            
             }else {
               this.parameterdata.pamTableList = [];
               let singleSpecObj = {
@@ -274,10 +286,11 @@
 
       // 规格子组件，传给父组件的数据
       calcSpeTable(data) {
+       this.keyvalue++
         // //console.log('原始值',data);
         // // 第一步，获取原来的值
-        let spsjData2 = this.$refs.goodsparameter.orgGoodsPam;
-        let spsjData2Clone = this.deepClone(spsjData2);
+        // let spsjData2 = this.$refs.goodsparameter;
+        // let spsjData2Clone = this.deepClone(spsjData2);
 
         // // 第二步，重新渲染dom
         // if(data.pamTableList.length > 0) {
@@ -303,6 +316,7 @@
         // }
 
         this.parameterdata = data;
+        debugger
 
       },
       // 只有点击完最后一级，才会有值
@@ -749,6 +763,48 @@
           }
         }, timer.times)
       },
+        /** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */
+    processData(list) {
+      let result = [];
+      if (list && list.length > 0) {
+        for (let i = 0; i < list.length; i++) {
+          let childList = [];
+
+          if(list[i].spec_name) {
+            for(let j = 0; j < list[i].spec_value.length; j++) {
+              if(list[i].spec_value[j].value) {
+                childList.push(list[i].spec_value[j].value);
+              }
+            }
+          }
+
+          if(childList.length > 0) {
+            result.push(childList);
+          }
+
+        }
+      }
+      return result;
+    },
+        /** 笛卡尔积算法 */
+    cartesian(arr) {
+      if(arr.length < 2) {
+        return arr[0] || [];
+      }else {
+        return [].reduce.call(arr, function(col, set) {
+          let res = [];
+          col.forEach( c => {
+            set.forEach(s => {
+              let t = [].concat(Array.isArray(c) ? c : [c]);
+              t.push(s);
+              res.push(t);
+            });
+          });
+     
+          return res
+        });
+      }
+    }
     }, // methods end
     destroyed() {
       clearInterval(this.TIMER);