vue通过笛卡儿积实现sku库存配置方式
作者：浅巷陌漓
vue通过笛卡儿积实现sku库存配置
目标
通过页面上渲染出来的动态属性 实现sku库存配置
将已选择的所有属性，通过笛卡儿积实现sku库存配置
以两个属性为例子，举例说明：
1x1:
白色
S
结合之后就是
[白色,S]
this.selectCheckArr=[
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 00,
"attrValueName": "白色"
}
],
[
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
]
]
this.selectCheckArr = this.getProducts(this.selectCheckArr)
console.log(this.selectCheckArr)
/** 输出：[
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
]
]
**/1x2
白色 黄色
S
结合之后就是
[白色,S ],[黄色,S ]
this.selectCheckArr=[
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 01,
"attrValueName": "黄色"
}
],
[
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
]
]
this.selectCheckArr = this.getProducts(this.selectCheckArr)
console.log(this.selectCheckArr)
/** 输出：
[
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
],
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 01,
"attrValueName": "黄色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
]
]
**/2x2
白 黄
S M
结合之后就是
[白色,S ],[白色,M ],[黄色,S ],[黄色,M ]
this.selectCheckArr= [
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 01,
"attrValueName": "黄色"
}
],
[
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 12,
"attrValueName": "M"
}
]
]
this.selectCheckArr = this.getProducts(this.selectCheckArr)
console.log(this.selectCheckArr)
/** 输出：
[
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
],
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 00,
"attrValueName": "白色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 12,
"attrValueName": "M"
}
],
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 01,
"attrValueName": "黄色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 11,
"attrValueName": "S"
}
],
[
{
"attrId": 0,
"attrName": "颜色",
"attrValueId": 01,
"attrValueName": "黄色"
},
{
"attrId": 1,
"attrName": "大小",
"attrValueId": 12,
"attrValueName": "M"
}
]
]
**/笛卡儿积方法
// 笛卡儿积
getProducts(specs) {
if (!specs || specs.length == 0) {
return [];
} else {
return joinSpec([
[]
], specs, 0, specs.length - 1);
}
function joinSpec(prevProducts, specs, i, max) {
var currentProducts = [],
currentProduct, currentSpecs = specs[i];
if (i > max) {
return prevProducts;
}
prevProducts.forEach(function (prevProduct) {
currentSpecs.forEach(function (spec) {
currentProduct = prevProduct.slice(0);
currentProduct.push(spec);
currentProducts.push(currentProduct);
});
});
return joinSpec(currentProducts, specs, ++i, max);
}
},注意
this.getProducts()的入参，需与博主保持一致(数组对象)，否则会有问题哦~
如果是1x1 ，就是总共生成1条
[ [ { } ] , [ { } ] ]，变成 [ [ { } , { } ] ]
如果是2x1 ，就是总共生成2条
[ [ { } ,{ } ] , [ { } ] ] 变成 [ [ { } ,{ } ] , [ { } ,{ } ] ]
笛卡尔积生成商品SKU组合
var arr = [
['黑色', '白色', '蓝色'],
['8GB', '16GB', '32GB'],
['大', '中', '小']
];
/**
* 生成笛卡尔积
* @returns {*}
*/
function descartes(array) {
if (array.length < 2) return array[0] || [];
return [].reduce.call(array, function (col, set) {
var res = [];
col.forEach(function (c) {
set.forEach(function (s) {
var t = [].concat(Array.isArray(c) ? c : [c]);
t.push(s);
res.push(t);
})
});
return res;
});
}
console.log(descartes(arr));该方法用于根据商品规格属性生成商品SKU组合，以上为javascript代码
执行结果如下：
0: ["黑色", "8GB", "大"]
1: ["黑色", "8GB", "中"]
2: ["黑色", "8GB", "小"]
3: ["黑色", "16GB", "大"]
4: ["黑色", "16GB", "中"]
5: ["黑色", "16GB", "小"]
6: ["黑色", "32GB", "大"]
7: ["黑色", "32GB", "中"]
8: ["黑色", "32GB", "小"]
9: ["白色", "8GB", "大"]
10: ["白色", "8GB", "中"]
11: ["白色", "8GB", "小"]
12: ["白色", "16GB", "大"]
13: ["白色", "16GB", "中"]
14: ["白色", "16GB", "小"]
15: ["白色", "32GB", "大"]
16: ["白色", "32GB", "中"]
17: ["白色", "32GB", "小"]
18: ["蓝色", "8GB", "大"]
19: ["蓝色", "8GB", "中"]
20: ["蓝色", "8GB", "小"]
21: ["蓝色", "16GB", "大"]
22: ["蓝色", "16GB", "中"]
23: ["蓝色", "16GB", "小"]
24: ["蓝色", "32GB", "大"]
25: ["蓝色", "32GB", "中"]
26: ["蓝色", "32GB", "小"]
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。