sku规格开发初步搭建

<template>
  <div class="app-container">
    <div>SKU组合demo</div>
    <div v-for="(v, i) in cpVoList" :key="i" class="mt-20">
      <div class="VoListBox">
        <div>
           <b>{{ v.propertiesName }}：</b>
        </div>
         <el-checkbox-group v-model="checkList[i].list">
           <el-checkbox v-for="(k, j) in v.cpvVoList" :key="j" :label="k.valueName"
            @change="handleClick(k, j, k.valueName, i)">
            <span>{{ k.valueName }}</span></el-checkbox>

           </el-checkbox-group>
        <div>
          <el-input v-model="formAdd[i]" style="width: 100px"></el-input>
          <el-button type="primary" @click="addCheck(v, i)">添加</el-button>
        </div>
      </div>
    </div>
    <!-- <div class="mt-20">
       <el-button type="primary" @click="handleClick">确定</el-button>
    </div> -->
    <div class="mt-20">
      <!--  <el-tag
        v-for="(item, index) in skuList"
        :key="index"
        style="margin: 10px 10px"
        >{{ item }}</el-tag
      > -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="P0005236" label="克重" width="180">
        </el-table-column>
        <el-table-column prop="P0000557" label="尺寸" width="180">
        </el-table-column>
        <el-table-column prop="costPrice" label="成本价" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.costPrice" placeholder=""></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { array } from "yargs";

export default {
  data() {
    return {
      cpVoList: [
        {
          id: 24319,
          categoryId: "C06655",
          propertiesId: "P0005236",
          required: 0,
          sort: 25,
          isuse: 1,
          propertyType: 4,
          parentCpvId: null,
          parentCpId: null,
          mergeId: "P0005236",
          dateTypeValue:
            '{"widgetId":23,"widgetType":"number_input_widget","unit":"克","step":"","placeholder":"0","min":"","max":""}',
          isCompose: null,
          onlyAsChild: 0,
          haveValue: 1,
          image: null,
          chain: "P0005236",
          canInputValue: 1,
          isListShow: 1,
          isSearch: 0,
          categoryName: null,
          propertiesName: "克重",
          cpvVoList: [
            {
              id: 23418,
              cpId: 24319,
              categoryId: "C06655",
              propertyId: "P0005236",
              valueId: "V0005488",
              sort: 1,
              alias: null,
              mergeId: null,
              features: null,
              isuse: 0,
              remark: null,
              valueName: "100",
              cpChildren: [],
            },
            {
              id: 23420,
              cpId: 24319,
              categoryId: "C06655",
              propertyId: "P0005236",
              valueId: "V0009065",
              sort: 2,
              alias: null,
              mergeId: null,
              features: null,
              isuse: 0,
              remark: null,
              valueName: "200",
              cpChildren: [],
            },
            {
              id: 23428,
              cpId: 24319,
              categoryId: "C06655",
              propertyId: "P0005236",
              valueId: "V0007891",
              sort: 3,
              alias: null,
              mergeId: null,
              features: null,
              isuse: 0,
              remark: null,
              valueName: "300",
              cpChildren: [],
            },
          ],
          colName: "weight",
          tmpSort: null,
          parentCpName: null,
          disable: 1,
          cpVoList: null,
          isMultiSelect: 1,
          tagName: null,
          tagId: null,
          releaseCpvtVo: null,
          editState: null,
        },
        {
          id: 24361,
          categoryId: "C06655",
          propertiesId: "P0000557",
          required: 0,
          sort: 26,
          isuse: 1,
          propertyType: 4,
          parentCpvId: null,
          parentCpId: null,
          mergeId: "P0000557",
          dateTypeValue:
            '{"unit":"mm","placeholder":"0","step":"","widgetType":"number_input_widget","widgetId":23}',
          isCompose: null,
          onlyAsChild: 0,
          haveValue: 1,
          image: null,
          chain: "P0000557",
          canInputValue: 1,
          isListShow: 1,
          isSearch: 0,
          categoryName: null,
          propertiesName: "尺寸",
          cpvVoList: [
            {
              id: 23419,
              cpId: 24361,
              categoryId: "C06655",
              propertyId: "P0000557",
              valueId: "V0005488",
              sort: 1,
              alias: null,
              mergeId: null,
              features: null,
              isuse: 0,
              remark: null,
              valueName: "100",
              cpChildren: [],
            },
            {
              id: 23426,
              cpId: 24361,
              categoryId: "C06655",
              propertyId: "P0000557",
              valueId: "V0009065",
              sort: 2,
              alias: null,
              mergeId: null,
              features: null,
              isuse: 0,
              remark: null,
              valueName: "200",
              cpChildren: [],
            },
            {
              id: 23427,
              cpId: 24361,
              categoryId: "C06655",
              propertyId: "P0000557",
              valueId: "V0007891",
              sort: 3,
              alias: null,
              mergeId: null,
              features: null,
              isuse: 0,
              remark: null,
              valueName: "300",
              cpChildren: [],
            },
          ],
          colName: "size",
          tmpSort: null,
          parentCpName: null,
          disable: 1,
          cpVoList: null,
          isMultiSelect: 1,
          tagName: null,
          tagId: null,
          releaseCpvtVo: null,
          editState: null,
        },
      ], // sku参数
      checkList: [], // checkout选择的数据数组
      releaseSaleTableVoList: [
        {
          title: "克重",
          key: "P0005236",
          type: "span",
          required: 0,
        },
        {
          title: "尺寸",
          key: "P0000557",
          type: "span",
          required: 0,
        },
        {
          title: "规格图片",
          key: "skuimg",
          type: "image",
          required: 1,
        },
        {
          title: "成本价",
          key: "costPrice",
          type: "number",
          required: 0,
        },
        {
          title: "市场价",
          key: "marketPrice",
          type: "number",
          required: 0,
        },
        {
          title: "售价",
          key: "baseSalePrice",
          type: "number",
          required: 1,
        },
        {
          title: "可买库存数",
          key: "inventory",
          type: "input",
          required: 1,
        },
        {
          title: "商家编码",
          key: "originalSpuNo",
          type: "input",
          required: 0,
        },
        {
          title: "商品条码",
          key: "goodsBarCode",
          type: "input",
          required: 0,
        },
      ], // 请求头数据

      skuArray: [],
      skuList: [], // 添加的数据
      skuListItem: {}, // 请求头中除了spu外的参数
      formAdd: [], // 添加
      skuMapArr: [], // map映射的4jiu数组
      skuCheckArr: [], // checkout选中的数组对象
      tableData: [], //
      skukey: [], // 返回的sku的规格key
    };
  },
  created() {
    // 初始先给选中状态添加格式
    this.cpVoList.forEach((item, index) => {
      let obj = {};
      obj.name = item.propertiesName;
      obj.list = [];
      this.checkList.push(obj);
      this.skukey.push(item.propertiesId)
      console.log(this.checkList, ' this.checkList')
    });
    // 选中数据的对象
    this.cpVoList.forEach((item, index) => {
      let obj = {};
      obj.name = item.propertiesName;
      obj.list = [];
      this.skuCheckArr.push(obj);
    });
    // 获取超出sku
    let listData = [];
    this.cpVoList.forEach((item, index) => {
      listData.push(item.propertiesName);
      // 放进所有的spu key用于递归遍历中的判定
      this.skuMapArr.push(item.propertiesId);
    });
    let arr = [];
    // 请求头的数据过滤掉sku的
    arr = this.releaseSaleTableVoList.filter((item) => {
      return !listData.includes(item.title);
    });
    this.filtehand(arr);
    // console.log(arr, "listData");
  },

  methods: {
    // 添加
    addCheck(item, index) {
      if (
        this.formAdd[index] == undefined ||
        this.formAdd[index] == "undefined"
      ) {
        return;
      }
      if (this.formAdd[index] != "") {
        const findResult = item.cpvVoList.findIndex((ite) => {
          // eslint-disable-next-line no-unused-expressions
          return ite.valueName == this.formAdd[index];
        });
        if (findResult == -1) {
          let obj = {};

          obj["valueName"] = this.formAdd[index];
          obj["propertyId"] = item.propertiesId;
          this.cpVoList[index].cpvVoList.push(obj);
          this.formAdd[index] = "";
        } else {
          return;
        }
      } else {
        return;
      }
    },
    // 附请求头数据过滤掉spu键值
    filtehand(arr) {
      let obj = {};
      arr.forEach((item, indx) => {
        if (!item.fixed) {
          if (item.type == "number") {
            obj[item.key] = 0;
          } else if (item.type == "datetimerange") {
            obj[item.key] = [];
          } else {
            obj[item.key] = "";
          }
        } else {
          return;
        }
      });
      this.skuListItem = obj;
      // console.log(this.skuListItem, "this.skuListItem");
      return this.skuListItem;
    },
    // checkbox点击
    handleClick(item, j, val, ind) {
      this.skuArray = [];
      //备份旧数据
      let mapSkuList = this.skuList.map((item, index) => {
        return Object.assign(item);
      });
      // 查询数据是否选中
      let skuStatus = this.checkList[ind].list.findIndex((e) => {
        return e == val;
      });
      if (skuStatus == -1) {
        let inde = this.skuCheckArr[ind].list.findIndex((e) => {
          return e.valueName == val;
        });
        this.skuCheckArr[ind].list.splice(inde, 1);
      } else {
        this.skuCheckArr[ind].list.push(item);
      }
      // 先清空数据，保证连续点击按钮，数据不会重复

      this.skuList = [];
      // 将选中的规格组合成一个大数组 [[1, 2], [a, b]...]
      this.skuCheckArr.forEach((element) => {
        element.list.length > 0 ? this.skuArray.push(element.list) : "";
      });
      setTimeout((res) => {
        // console.log(mapSkuList, "mapSkuList");
        if (mapSkuList.length > 0 && this.skuList.length > 0) {
          mapSkuList.forEach((item) => {
            let inde = this.skuList.findIndex(
              (e) => e.key == item.key

              // eslint-disable-next-line no-unused-expressions
            );

            if (inde > -1) {
              this.skuList[inde] = item;
            }
          });
          // console.log(this.skuList, "this.skuList");
          this.tableData = this.skuList;
        } else {
          this.tableData = this.skuList;
        }
      });
      // 勾选了规格，才调用方法
      if (this.skuArray.length > 0) {
        this.getSkuData([], 0, this.skuArray);
      } else {
        this.$message.error("请先勾选规格");
      }
    },
    // 递归获取每条SKU数据
    getSkuData(skuArr = [], i, list) {
      // console.log(list, 'list')
      for (let j = 0; j < list[i].length; j++) {
        if (i < list.length - 1) {
          skuArr[i] = list[i][j];
          this.getSkuData(skuArr, i + 1, list); // 递归循环
        } else {
          let obj = {};
          skuArr.forEach((item, index) => {
            obj[item.propertyId] = item.valueName;
          });

          let Lastlist = list[i][j];

          obj[Lastlist.propertyId] = Lastlist.valueName;
          let objList = { ...this.skuListItem, ...obj };
          let arr = Object.keys(objList);
          // console.log(this.skukey, "skukey");
          // 判定spu的key是否都选中了
          let pushStatus = this.skuMapArr.every((item) => {
            return arr.includes(item);
          });
          if (pushStatus) {
            // 添加唯一key
            // console.log(objList["key"], 'objList["key"] ')
            this.skuList.push(objList);
            this.skuList.forEach(item => {
              item.key = ''
              for (let i = 0; i < this.skukey.length; i++) {
                item.key += this.skukey[i] + item[this.skukey[i]]
              }


            })


            // console.log(this.skuList, ' this.skuList')
          }
        }
      }
    },
  },
};
</script>