cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="app">
<table class="table">
    <tr v-for="(index,item) in properties">
        <td><strong>{{item.Name}}:</strong></td>
        <td>

            <label v-for="value in item.values"><input type="checkbox" :value="value" v-model="item.selectedValues"/>{{value.Name}}</label>

            <table class="list_table" v-if="item.Name!='发货地'&&item.selectedValues.length>0">
                <tbody>
                <tr>
                    <th>{{item.Name}}</th>
                    <th>自定义名称</th>
                    <th v-if="item.Name=='颜色'">图片(无图片可以不填)</th>
                </tr>

                <tr v-for="selectedValue in item.selectedValues">
                    <td>{{selectedValue.Name}}</td>
                    <td>
                        <input type="text" v-model="selectedValue.DefinitionName" maxlength="20"/>
                    </td>
                    <td v-if="item.Name=='颜色'">
                        <div style="float: left">
                            <input type="file"  style="width: 63px;"/>
                        </div>
                        <div style="float: right">
                            <a href="" rel="link" target="_blank">
                                <img :src="selectedValue.ImageUrl" width="30" height="35"/>
                            </a>
                        </div>
                    </td>
                </tr>

                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td align="right"></td>
        <td>
            <p class="c_a4">下表的零售价是最终展示给买家的产品价格。</p>
            <table id="skuPrice_table" class="product_list_table break-word mt_0">
                <tbody>
                <tr>
                    <td colspan="4">
                        批量设置零售价:US $<input type="text" id="batchPrice" maxlength="9"/><input type="button"
                                                                                             onclick="batchSetPrice()"
                                                                                             value="确定"/> 批量设置库存:
                        <input type="text" id="batchStockQuantity" maxlength="9"/><input type="button"
                                                                                         onclick="batchSetStockQuantity()"
                                                                                         value="确定"/>
                    </td>
                </tr>
                <tr>
                    <th v-for="item in properties" v-if="item.selectedValues.length>0">{{item.Name}}</th>
                    <th><span class="c_red">*</span>零售价</th>
                    <th><span class="c_red">*</span>库存</th>
                    <th>商品编码</th>
                </tr>
                <tr v-for="sku in skus">
                    <td v-for="item in properties" v-if="item.selectedValues.length>0">{{getValueName(sku,item)}}</td>
                    <td>
                        US $
                        <input type="text" v-model="sku.SkuPrice" class="w50" maxlength="9"/>
                        <span name="productUnitTips"></span>
                    </td>
                    <td>
                        <input type="text" v-model="sku.StockQuantity" class="w50" maxlength="9"/>
                    </td>
                    <td>
                        <input type="text" v-model="sku.SkuCode" class="w180" maxlength="20"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
{{skusResult}}
{{propertyResult}}
</div>
            
          
!
            
              table {
            border-collapse: collapse;
        }

        table th {
            background-color: antiquewhite;
        }

        table td, th {
            border: solid 1px #b4aba1;
        }

        .table label {
            margin-left: 30px;
            float: left;
            width: 150px;
        }

        .table label input {
            margin-top: 4px
        }

        .table td {
            min-width: 100px;
        }

        .list_table {
            clear: both;
            margin-left: 30px;
            margin-top: 10px;
        }
            
          
!
            
                  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;
                }
            }
        }
    }
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console