goodsspecifications.vue

<template>
  <div class="goods-specifications">
    <div class="spe-con" v-for="(speItem,index) in speData" :key="index">
      <div class="el-form-item-h" >
        <label class="el-form-item-h__label">规格名称：</label>
        <div class="el-form-item-h__content">
          <div>
            <el-select
              :ref="'speNameDom' + index "
              v-model="speItem.spec_name"
              size="small"
              style="width: 300px"
              filterable
              default-first-option
              :clearable="true"
              @change="speNameChange(speItem.spec_name,index)"
              @visible-change='bv=> visibleChange(bv,"speNameDom",index)'
            >
              <el-option
                v-for="(itemSN,indexSN) in speOptions"
                :key="itemSN.id"
                :label="itemSN.name"
                :value="itemSN.name"
              >
                <span style="float: left" class="span-style">{{ itemSN.name }}</span>
                <div class="flag">
                  <svg-icon icon="edit" iconClass="template_edit_style" @click="addSpeName(index)"/>
                </div>
              </el-option>
            </el-select>
            <!--<span>数据填写不完整</span>-->
          </div>
          <div class="spe-params-con">
            <div style="display: inline-block" v-for="(itemSV,indexSV) in speItem.spec_value" :key="indexSV">
              <el-input v-model="itemSV.value" size="small" placeholder="请输入规格参数" class="spe-params-input-item" @blur="paramNameInputBlur(index,indexSV)">
                <i v-if="indexSV !== 0" slot="suffix" class="el-input__icon el-icon-delete el-icon-delete-h" @click="deleteSpeParam(index,indexSV)"></i>
              </el-input>
            </div>

            <el-button type="primary" plain class="el-icon-plus" size="mini" @click="addSpeParam(index)">添加规格参数</el-button>
          </div>
        </div>
      </div>
      <div style="margin-right:auto;" v-if="(speData.length > 1) && speData.length !== 1">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="deleteSpe(index)">删除该规格</el-button>
      </div>
    </div>

    <el-button @click="addSpe" class="el-icon-plus" size="mini">添加规格</el-button>

    <!-- 添加 规格名称 -->
    <el-dialog
      title="添加规格名称"
      :visible.sync="addSpecNameDialog"
      :destroy-on-close="true"
      :before-close="cancelSpec"
      width="500px"
      center
    >
      <div>
        <p class="add-spec-dialog-con">
          <span style="margin-right:30px;">输入规格名称：</span>
          <span>
            <el-input v-model="specName_sm" placeholder="请输入规格名称" size="small" style="width: 280px;"></el-input>
          </span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelSpec" size="mini">取 消</el-button>
        <el-button type="primary" @click="saveSpecName" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import descartes from "@/utils/dikaerjs.js";
import { UploadImg } from '@/api/module/goods'
export default {
  name: "GoodsSpecifications",
   props: {
    specificationsdata: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      speData: [],  // 商品规格总数据
      specsGroup: {
        spec_name: '', // 规格名称
        spec_value: []
      },

      speParamName:{
        value: ''
      },
      speOptions: [{
        id: '1',
        name: '颜色'
      }, {
        id: '2',
        name: '尺码'
      }],
      localSpeOptions: [],
      // 规格名称，value组成的数组
      speNameList: [],
      addSpecNameDialog: false,
      specName_sm: '',
    };
  },
  created() {
    this.$set(this.specsGroup.spec_value,this.specsGroup.spec_value.length,this.speParamName);
    this.speData = [];
    this.$set(this.speData,this.speData.length,this.specsGroup);
  },
  mounted() {
    /** 先获取 本地存储的localStorage **/
    this.getLocalSpecNameOption();
    // this.speData = [];
    // this.$set(this.speData,this.speData.length,this.specsGroup);
   // console.log(123,this.specificationsdata)
    this.speData = this.specificationsdata;
    this.$forceUpdate()
  },
  watch:{
    // "speData.specsGroup": {
    //   handle: function(val) {
    //     console.log(22222,val);
    //   }
    // }
  },
  methods: {
    /** 添加规格*/
    addSpe() {
      let specsGroup = {
        spec_name: '', // 规格名称
        spec_value: [{value: ''}]
      };
      this.$set(this.speData,this.speData.length,specsGroup);
    },
    /** 删除 规格数据 */
    deleteSpe(index) {
      this.$confirm('是否删除当前规格的所有数据？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.speData.splice(index,1);
        this.specCalcResult();
      }).catch(() => {})
    },
    //
    /** 规格名称，值改变时, 此组件 lable 和 value 绑定同一个值 */
    speNameChange(val,index) {
      if( val ) {
        // 当有多个值的时候，才校验，规格名称是否重复
        if( this.speData.length > 1 ) {
          let coypSpeData = [];
          coypSpeData = this.speData.concat();
          coypSpeData.splice(index,1);
          for(let i = 0; i < coypSpeData.length; i++) {
            if( val === coypSpeData[i].spec_name ) {
              this.speData[index].spec_name = '';
              this.$message({type: 'error',message: '此规格名称已经使用，请重新选取或新增其他规格名称'});
              break;
            }
          }
        }
      }
      // 重新 计算 规格组合数据
      this.specCalcResult();
    },

    // 添加规格参数
    addSpeParam(index) {
      let valueObj = { value: ''}
      this.$set(this.speData[index].spec_value,this.speData[index].spec_value.length,valueObj);
    },
    /** 删除 规格参数 */
    deleteSpeParam(index,indexSV) {
      // 先判断，删除前是否有值，如果是空，则没有必要再次计算
      if( this.speData[index].spec_value[indexSV].value ) {
        this.speData[index].spec_value.splice(indexSV,1);
        this.specCalcResult();
      }else {
        this.speData[index].spec_value.splice(indexSV,1);
      }
    },
    /**
     * 规格名称 下拉框 出现/隐藏 触发
     * 为element-ui的Select和Cascader添加弹层底部操作按钮
     * @param visible
     * @param refName  设定的ref名称
     * @param index  保证操作是当前的下拉框
     * @param addname  底部按钮名称, 可不用
     */
    visibleChange(visible, refName, index) {
      let _this = this;
      let realRefName = refName + index;
      //console.log(realRefName);
      if(visible) {
        // 动态绑定 ref的值的时候，下面的dom需要  加一个 [0],非常重要
        const speNameDom = _this.$refs[realRefName][0];
        let popper = speNameDom.$refs.popper;
        if( popper.$el ) {
          popper = popper.$el;
        }
        if(!Array.from(popper.children).some(v => v.className === 'el-template-menu__list')) {
          const el = document.createElement('ul');
          el.className = 'el-template-menu__list';
          el.style = 'border-top\:1px solid rgb(219 225 241)\; padding\:0\;margin\:0\; color\:rgb(64 158 255)\;font-size\: 14px';
          el.innerHTML = '<li class="el-cascader-node text-center" style="height:40px;line-height: 40px">'
                + '<span class="el-cascader-node__label"><i class="el-icon-plus"></i>添加规格名称</span>'
                + '</li>';
          popper.appendChild(el)
          el.onclick = () => {
            // 底部按钮的点击事件
            _this.addSpeName(index);

            // localSttorage 存储 下拉数据
            if(speNameDom.toggleDropDownVisible) {
              speNameDom.toggleDropDownVisible(false);
            } else {
              speNameDom.visible = false;
            }

          }
        }
      }
    },
    getLocalSpecNameOption() {
      //console.log("先获取：",window.localStorage.getItem('localSpeOptions'));
      if(!window.localStorage.getItem('localSpeOptions')) {
        this.speOptions = [];
      }else {
        let options = JSON.parse(window.localStorage.getItem('localSpeOptions'));
        this.speOptions = options;
      }
    },
    /* 增加 规格名称 */
    addSpeName(index) {
      this.addSpecNameDialog = true;
    },

    // 添加规格名称，对话框的退出
    cancelSpec() {
      this.specName_sm = '';
      this.addSpecNameDialog = false;
    },
    // 规格名称，保存
    saveSpecName() {
      let localObj = {
        id: 0,
        name: ''
      };
      let localArr = [];
      let localJSON = '';

      if(this.speOptions.length === 0) {
        let localObj = {
          id: 0,
          name: this.specName_sm
        };
        localArr.push(localObj);
        localJSON = JSON.stringify(localArr);
      }else {
        let localObj = {
          id: this.speOptions.length,
          name: this.specName_sm
        };
        this.speOptions.push(localObj);
        localJSON = JSON.stringify(this.speOptions)
      }

      window.localStorage.setItem('localSpeOptions',localJSON)
      this.addSpecNameDialog = false;
      this.$message({type:'success',message:'新增成功'});
      this.getLocalSpecNameOption();

    },

    /** 规格参数 失焦时，进行笛卡尔积算法，并渲染 商品售价 */
    paramNameInputBlur(index,indexSV) {
      // // 如果失焦的input中有值，才再次计算
      // if( this.speData[index].spec_value[indexSV].value ) {
        this.specCalcResult();
      // }
    },

    /** 规格参数 变化时，对数据进行处理后，再进行笛卡尔积算法，最终计算出商品售价的数据 */
    specCalcResult() {
      // 商品规格原始数据
      let orgSpeData = this.deepClone(this.speData);
      // 进行数据处理后的数据,
      let proSpeData = this.processData(orgSpeData);
      // 需要将 所有规格名称，提出一个数组集合,
      this.speNameList = [];
      orgSpeData.forEach((item,index)=> {
        if( item.spec_name ) {
          let obj = { spec_name: '' };
          // 注意, item.spec_value是否一定为一个长度大于 1 的数组
          if( item.spec_value.length > 0) {
            for(let i = 0; i < item.spec_value.length; i++) {
              if( item.spec_value[i].value ) {
                obj.spec_name = item.spec_name;
                this.speNameList.push(obj);
                break;
              }
            }
          }
        }
      })
      // console.log("处理后的数据",proSpeData);
      // console.log("处理后的nameList",this.speNameList);

      // 当处理后的数据，是一个空数组，则不需要再进行 笛卡尔积 计算，可以直接给出计算结果
      if (proSpeData.length === 0) {
        let goodsPam = {
          pamNameList: [],
          pamDataList: [],
          pamTableList: [],
        };
        this.$emit('calcSpeTable', goodsPam);
      } else {
        let goodsParametersList = this.cartesian(proSpeData);
        let goodsPam = {
          pamNameList: [],
          pamDataList: [],
          pamTableList: [],
        };
        goodsPam.pamNameList = this.speNameList;
        goodsPam.pamDataList = goodsParametersList;
        goodsParametersList.forEach((item)=> {
          let prePamTable = [
            { js_price:'', sl_price:'', price:'', sc_price:'', stock:'', weight:'', thumb:'',spec_values: [] }
          ];
          goodsPam.pamTableList.push(prePamTable)
        });
        this.$emit('calcSpeTable',goodsPam);
      }
    },

    /** 数据处理为,二维数组，供笛卡尔积算法方法使用,对空数据进行过滤 */
    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
};
</script>
<style scoped>
  .goods-specifications {
    padding: 15px 0;
    margin-top: 18px;
  }
  .spe-con {
    display: flex;
    justify-content: flex-start;
  }

  /* 仿 element 的from-item 样式，注意，size为  samll */
  .el-form-item-h {
    width:80%;
    margin: 0 20px 20px 0;
    padding: 20px 0 0;
    background: #F7F8FA;
    border: 1px solid #E5E5E5;
    border-radius: 2px;
  }
  .el-form-item-h__label {
    width: 150px;
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size:14px;
    color: #606266;
    line-height: 32px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
  }
  /*.el-form-item-h__label:before {*/
  /*  content: '';*/
  /*  color: #ff4949;*/
  /*  margin-right: 4px;*/
  /*}*/
  .el-form-item-h__content {
    margin-left: 150px;
    position: relative;
    font-size: 14px;
  }
  .spe-params-con {
    margin: 20px 0;
  }

  /* 商品规格 - 规格名称 - 参数input */
  .spe-params-input-item {
    width: 150px;
    margin: 0 10px 20px 0;
  }
  .el-icon-delete-h:hover {
    font-size: 14px;
    color: #ff4949;
    cursor: pointer;
  }

  .add-spec-dialog-con {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>