前言

?最近接了私活，關于器械商城的項目，最后收尾階段，發現發布商品還是存在著問題，對于多個相同/不同的商品規格輸出成商品時，需要依據規格名對規格值進行排列組合，保證所有規格值都可以進行選擇。

核心代碼部分

數據結構

      formState: {
        goods: {
          goodsSn: '', // 商品編號
		  ...xxx
        },
        // 商品規格
        specifications: [
          {
            specification: '規格',
            value: '標準',
            picUrl: '',
          },
        ],
        // 商品庫存
        products: [
          {
          	// 商品規格列表
            specifications: [], 
            price: 0,
            number: 0,
            url: '',
          },
        ],
      }

轉換代碼

	// 規格 To 產品
    const specToProduct = () => {
      // 如果規格的數組長度為0，有可能此時為刪除方法，則直接刪除庫存這一列
      if (state.formState.specifications.length === 0) {
        state.formState.products = [];
        return;
      }
      // 根據specifications創建臨時規格列表
      var specValues = [];
      // 數組的第一個規格值
      var spec = state.formState.specifications[0].specification;
      var values = [];
      values.push(0);

      for (var i = 1; i < state.formState.specifications.length; i++) {
        // 每一項的規格值
        const aspec = state.formState.specifications[i].specification;
        // 去歸總所有規格名相同的下標
        // 如果當前項的規格值與遍歷的規格值相同的話
        if (aspec === spec) {
          values.push(i);
        } else {
          // 如果不相同，先把目前的已經歸總規格名完畢的臨時數組，加入到所創建的臨時規格表中
          specValues.push(values);
          // 切換curr規格值，再去進行下一次匹配
          spec = aspec;
          // 清空臨時數組
          values = [];
          // 將當前的下標，加入到臨時values，進行下一次歸組
          values.push(i);
        }
      }
      // 將最后一組分類加入到臨時規格表中
      specValues.push(values);
      // 根據臨時規格列表生產貨品規格
      // 算法基于 https://blog.csdn.net/tyhj_sf/article/details/53893125
      var productsIndex = 0;
      var products = [];
      // 所有的的相同的規格名數組的二級數組
      var combination = [];
      // 所有分類的長度
      var n = specValues.length;
      // 根據specValues的長度初始化出所有的combination
      for (var s = 0; s < n; s++) {
        combination[s] = 0;
      }
      // 初始化
      var index = 0;
      var isContinue = false;
      // 排列組合~
      do {
        var specifications= [];
        for (var x = 0; x < n; x++) {
          var z = specValues[x][combination[x]];
          // 推入每個規格的規格值
          specifications.push(state.formState.specifications[z].value);
        }
        products[productsIndex] = {
          id: productsIndex,
          specifications: specifications,
          price: 0,
          number: 0,
          sand: 0,
          integral: 0,
          url: '',
        };
        // ++index,賦值下一個products
        productsIndex++;

        index++;
        combination[n - 1] = index;
        for (var j = n - 1; j >= 0; j--) {
          if (combination[j] >= specValues[j].length) {
            combination[j] = 0;
            index = 0;
            if (j - 1 >= 0) {
              combination[j - 1] = combination[j - 1] + 1;
            }
          }
        }
        // 退出循環的標志
        isContinue = false;
        for (var p = 0; p < n; p++) {
          if (combination[p] !== 0) {
            isContinue = true;
          }
        }
      } while (isContinue);
      // 賦值
      state.formState.products = products;
    };

?每當我們修改規格時，例如規格的刪除/編輯/添加，都需要調用此方法進行重新輸出商品。

效果展示