var properties = [
{
"Id": 10,
"Name": "材质",
"values": [
{
"PropertyId": 10,
"Id": 351785,
"Name": "ABS",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 477,
"Name": "铝",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 529,
"Name": "帆布",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 365211,
"Name": "棉布",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 365212,
"Name": "斜纹布",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 395,
"Name": "EVA",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 396,
"Name": "皮革",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 365213,
"Name": "微纤维",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 1064,
"Name": "合成橡胶",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 63,
"Name": "尼龙",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 437,
"Name": "PE",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 124,
"Name": "塑料",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 48,
"Name": "涤纶",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 438,
"Name": "PP",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 452,
"Name": "PU",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 439,
"Name": "PVC",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 1170,
"Name": "硅胶",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 352621,
"Name": "Vinyl",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 1042,
"Name": "真皮",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 1179,
"Name": "TPU",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 4,
"Name": "其它",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 501,
"Name": "PC",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 10,
"Id": 201662808,
"Name": "PC + TPU",
"DefinitionName": "",
"ImageUrl": ""
}
],
selectedValues: []
},
{
"Id": 14,
"Name": "颜色",
"values": [
{
"PropertyId": 14,
"Id": 771,
"Name": "米色",
"DefinitionName": "Transparent",
"ImageUrl": "https://g04.a.alicdn.com/kf/HTB1B0TWOVXXXXalXVXXq6xXFXXXn.jpg"
},
{
"PropertyId": 14,
"Id": 193,
"Name": "黑色",
"DefinitionName": "Mixture",
"ImageUrl": "https://g01.a.alicdn.com/kf/HTB13ZPMOVXXXXa2aXXXq6xXFXXXU.jpg"
},
{
"PropertyId": 14,
"Id": 173,
"Name": "蓝色",
"DefinitionName": "Random",
"ImageUrl": "https://g02.a.alicdn.com/kf/HTB1pC_COVXXXXakapXXq6xXFXXXU.jpg"
},
{
"PropertyId": 14,
"Id": 1254,
"Name": "天蓝色",
"DefinitionName": "Brown",
"ImageUrl": "https://g03.a.alicdn.com/kf/HTB1wj3lOVXXXXaxXXXXq6xXFXXX9.jpg"
},
{
"PropertyId": 14,
"Id": 365458,
"Name": "褐色",
"DefinitionName": "Purple",
"ImageUrl": "https://g01.a.alicdn.com/kf/HTB1SPcjOVXXXXcrXXXXq6xXFXXX5.jpg"
},
{
"PropertyId": 14,
"Id": 100018786,
"Name": "透明",
"DefinitionName": "Blue",
"ImageUrl": "https://g01.a.alicdn.com/kf/HTB1L9vDOVXXXXXAapXXq6xXFXXXY.jpg"
},
{
"PropertyId": 14,
"Id": 350850,
"Name": "金色",
"DefinitionName": "Cyan",
"ImageUrl": "https://g02.a.alicdn.com/kf/HTB1TCcjOVXXXXaUXXXXq6xXFXXX8.jpg"
},
{
"PropertyId": 14,
"Id": 691,
"Name": "灰色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 200004890,
"Name": "深灰色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 175,
"Name": "绿色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 200004889,
"Name": "军绿色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 200002130,
"Name": "象牙白",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 200001438,
"Name": "卡其色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 200003699,
"Name": "多色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 350852,
"Name": "橙色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 1052,
"Name": "粉色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 496,
"Name": "紫色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 200004891,
"Name": "紫罗兰",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 10,
"Name": "红色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 350853,
"Name": "银色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 29,
"Name": "白色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 366,
"Name": "黄色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 201447303,
"Name": "玫瑰色",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 201447325,
"Name": "深红",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 201447326,
"Name": "深蓝",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 14,
"Id": 202007806,
"Name": "磨砂黑",
"DefinitionName": "",
"ImageUrl": ""
}
],
selectedValues: []
},
{
"Id": 200007763,
"Name": "发货地",
"values": [
{
"PropertyId": 200007763,
"Id": 201336100,
"Name": "CN",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200007763,
"Id": 201336106,
"Name": "US",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200007763,
"Id": 201336105,
"Name": "UK",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200007763,
"Id": 201336101,
"Name": "DE",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200007763,
"Id": 201336104,
"Name": "ES",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200007763,
"Id": 201336099,
"Name": "AU",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200007763,
"Id": 201336103,
"Name": "RU",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200007763,
"Id": 201336102,
"Name": "ID",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200007763,
"Id": 201336342,
"Name": "FR",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200007763,
"Id": 201336343,
"Name": "IT",
"DefinitionName": "",
"ImageUrl": ""
}
],
"selectedValues": []
},
{
"Id": 200000828,
"Name": "套餐",
"values": [
{
"PropertyId": 200000828,
"Id": 201655809,
"Name": "壳＋贴膜",
"DefinitionName": "",
"ImageUrl": ""
},
{
"PropertyId": 200000828,
"Id": 201655810,
"Name": "壳＋挂绳",
"DefinitionName": "",
"ImageUrl": ""
}
],
"selectedValues": []
}
];
var checkedProperties = [
{
"Id": 14,
"Name": "颜色"
}
];
var skus = [
{
"SkuCode": "",
"SkuPrice": "",
"StockQuantity": "",
"values": [
{
"propertyId": 14,
"valueId": 771
},
{
"propertyId": 14,
"valueId": 193
},
{
"propertyId": 14,
"valueId": 173
},
{
"propertyId": 14,
"valueId": 1254
}
]
}
];
var vm= new Vue({
el: "#app",
data: {
properties: properties,
checkedProperties: checkedProperties,
skus: skus
},
computed:{
allCheckedLength:function(){
var length=0;
$.each(this.properties,function(){
length+=this.selectedValues.length;
});
return length;
},
skusResult:function(){
return JSON.stringify(this.skus);
},
propertyResult:function(){
var result=[];
$.each(this.properties,function(){
$.each(this.selectedValues,function(){
result.push(this);
})
});
return JSON.stringify(result);
}
},
watch: {
'allCheckedLength': {
handler: 'reBuild'
}
},
methods: {
reBuild: function (val, oldVal) {
var vm=this;
var oriSkus = JSON.parse(JSON.stringify(this.skus));
var vmSkus = this.skus = [];
var propertyChecked = [];
var skuCount = 1;
var ori = [];
$.each(vm.properties,
function (index, item) {
var selectValues = this.selectedValues;
if (selectValues.length > 0) {
propertyChecked.push(index);
skuCount *= selectValues.length;
ori.push(selectValues);
}
});
/*$.each(propertyChecked,
function () {
ori.push(vm.properties[this].selectedValues);
});*/
console.log(JSON.stringify(ori))
var ret = descartes(ori);
console.log(JSON.stringify(ret));
for (var i = 0; i < ret.length; i++) {
var sku = { SkuCode: "", SkuPrice: "", StockQuantity: "" };
sku.values = [];
$.each(ret[i],
function() {
sku.values.push({propertyId:this.PropertyId,valueId:this.Id});
});
if (oriSkus.length >= ret.length) {
sku.SkuCode = oriSkus[i].SkuCode;
sku.SkuPrice = oriSkus[i].SkuPrice;
sku.StockQuantity = oriSkus[i].StockQuantity;
} else {
if (i < oriSkus.length) {
sku.SkuCode = oriSkus[i].SkuCode;
sku.SkuPrice = oriSkus[i].SkuPrice;
sku.StockQuantity = oriSkus[i].StockQuantity;
} else {
sku.SkuCode = "";
sku.SkuPrice = "";
sku.StockQuantity = "";
}
}
vmSkus.push(sku);
}
},
getValueName: function (sku, property) {
var valueName = "";
$.each(sku.values,
function () {
var _this = this;
if (this.propertyId == property.Id) {
$.each(property.selectedValues, function () {
if (_this.valueId == this.Id) {
valueName = this.Name;
return false;
}
});
}
});
return valueName;
}
}
});
function descartes(list)
{
//parent上一级索引;count指针计数
var point = {};
var result = [];
var pIndex = null;
var tempCount = 0;
var temp = [];
//根据参数列生成指针对象
for(var index in list)
{
if(typeof list[index] == 'object')
{
point[index] = {'parent':pIndex,'count':0}
pIndex = index;
}
}
//单维度数据结构直接返回
if(pIndex == null)
{
return list;
}
//动态生成笛卡尔积
while(true)
{
for(var index in list)
{
tempCount = point[index]['count'];
temp.push(list[index][tempCount]);
}
//压入结果数组
result.push(temp);
temp = [];
//检查指针最大值问题
while(true)
{
if(point[index]['count']+1 >= list[index].length)
{
point[index]['count'] = 0;
pIndex = point[index]['parent'];
if(pIndex == null)
{
return result;
}
//赋值parent进行再次检查
index = pIndex;
}
else
{
point[index]['count']++;
break;
}
}
}
}
!
