三个商品属性组,每个属性组中有若干属性值,在下拉控件中选中属性组后,在右侧复选控件中选择一个或多个属性值,再根据笛卡儿积组合生成商品sku列表(如下图):
服务(provider)中:
/**
* 如果传入的参数只有一个数组,求笛卡尔积结果
* @param arr1 一维数组
* @returns {Array}
*/
descartes1(arr1) {
// 返回结果,是一个二维数组
const result = [];
let i = 0;
for (i = 0; i < arr1.length; i++) {
const item1 = arr1[i];
result.push([item1]);
}
return result;
}
/**
* 如果传入的参数只有两个数组,求笛卡尔积结果
* @param arr1 一维数组
* @param arr2 一维数组
* @returns {Array}
*/
descartes2(arr1, arr2) {
// 返回结果,是一个二维数组
const result = [];
let i = 0,
j = 0;
for (i = 0; i < arr1.length; i++) {
const item1 = arr1[i];
for (j = 0; j < arr2.length; j++) {
const item2 = arr2[j];
result.push([item1, item2]);
}
}
return result;
}
/**
*
* @param arr2D 二维数组
* @param arr1D 一维数组
* @returns {Array}
*/
descartes2DAnd1D(arr2D, arr1D) {
let i = 0,
j = 0;
// 返回结果,是一个二维数组
const result = [];
for (i = 0; i < arr2D.length; i++) {
const arrOf2D = arr2D[i];
for (j = 0; j < arr1D.length; j++) {
const item1D = arr1D[j];
result.push(arrOf2D.concat(item1D));
}
}
return result;
}
descartes3(list) {
const listLength = list.length;
let i = 0;
// 返回结果,是一个二维数组
const result = [];
// 为了便于观察,采用这种顺序
let arr2D = this.descartes2(list[0], list[1]);
for (i = 2; i < listLength; i++) {
const arrOfList = list[i];
arr2D = this.descartes2DAnd1D(arr2D, arrOfList);
}
return arr2D;
}
// 笛卡儿积组合
descartes(list) {
if (!list) {
return [];
}
if (list.length <= 0) {
return [];
}
if (list.length == 1) {
return this.descartes1(list[0]);
}
if (list.length == 2) {
return this.descartes2(list[0], list[1]);
}
if (list.length >= 3) {
return this.descartes3(list);
}
}
组件(component)中:
generateDataSet() {
// 判断每种属性组合必须选择一个规格,同时取出每种属性已选择的规格
const selectedPropertyAllList = [];
for (let i = 0; i < this.propertyGroupList.length; i++) { // 遍历属性组
const item = this.propertyGroupList[i];
let checkFlag = false;
const selectedPropertyList = [];
for (let j = 0; j < item.propertyList.length; j++) { // 遍历属性值
const property = item.propertyList[j];
if (property.checked) { // 取出选中的属性值
checkFlag = true;
selectedPropertyList.push(property);
}
}
if (!checkFlag) { // 某个属性组中未选中属性值
this.notice.warning(`请至少选择一个【${item.groupName}】的规格信息`);
return;
} else {
selectedPropertyAllList.push(selectedPropertyList);
}
}
// 生成属性组合,放入dataSet
const descartesResult = this.commodityInfoProvider.descartes(selectedPropertyAllList);
this.dataSet = [];
descartesResult.forEach(itemArr => {
let skuName = '';
let propertyId = '';
itemArr.forEach(item => {
skuName = skuName + item.label + ',';
propertyId = propertyId + item.value + ',';
});
this.dataSet.push({
skuName: skuName.substr(0, skuName.length - 1),
propertyId: `[${propertyId.substr(0, propertyId.length - 1)}]`
});
});
this.dataSet.forEach((item, index) => {
this.editCache[index] = {
edit: true,
data: item
};
});
}