caozengling
/**
 * 商品模块;
 * 使用:var SKU = sku.init({ id:\'sku\', item: item, data:data });
 * @config item = [{"id":1,"name":"职位","sub":[{"id":1,"name":"adc"},{"id":2,"name":"辅助"},{"id":3,"name":"战士"}]},{"id":2,"name":"知名度","sub":[{"id":4,"name":"50%"},{"id":5,"name":80%"},{"id":6,"name":"90%"}]}];
 * @param data = [{"ids":[{"1":"1"},{"2":"4"}],"price":0,"stock":0,"sku":0}];
 * **/
layui.define([\'jquery\',\'form\'],function(e){
    "use strict";var $ = layui.jquery,form=layui.form,o ={
        c : {sv:\'\',iv:\'\',tv:\'\',item:[],itemed:[],data:[],tableTitleId:[],tableTitle:[],tableTd:[]},
        z:function (x,y,a) {
            for(var i=0;i<a.length;i++){if( x+\'_\'+y == a[i] ) return \'checked\';} return \'\';
        },
        y:function (s,d,a,h) {
            for(var i=0;i<d.length;i++){ h += \'<input type="checkbox" data-id="\'+s+\'_\'+d[i].id+\'" title="\'+d[i].name+\'" lay-skin="primary" lay-filter="item"\'+ this.z(s,d[i].id,a) +\'>\';} return h;
        },
        x:function (d,a,h) {
            return \'<div class="layui-form-item" pane><label class="layui-form-label">\'+d.name+\'</label><div class="layui-input-block" data-id="\'+d.id+\'">\'+this.y(d.id,d.sub,a,\'\')+\'</div></div>\';
        },
        w:function (d,a,h) {
            for(var i=0;i<d.length;i++){ h += this.x(d[i],a,\'\'); } return h;
        },
        st:function () {
            return \'<table class="layui-table" lay-skin="" style="margin:0"><thead>\'+this.sth()+\'</thead><tbody>\'+this.stb()+this.stf()+\'</tbody></table>\';
        },
        sth:function () {
            var h = \'<tr>\'; for(var i=0;i<this.c.tableTitle.length;i++){ h += \'<th>\' +this.c.tableTitle[i]+ \'</th>\';} h += \'<th>价格</th><th>库存</th><!--<th>货号</th>--></tr>\'; return h;
        },
        stb:function () {
            var t =this, h = \'\', na = [];
            for(var i=0;i<t.c.data.length;i++){
                h += \'<tr>\';
                for(var s=0;s<t.c.data[i].ids.length;s++){
                    var k = \'\',v=\'\';
                    for(var item in t.c.data[i].ids[s]){
                        k = item; v = t.c.data[i].ids[s][item];
                    }
                    if(!na[k] || na[k]<1){
                        na[k] = this.ai(t.c.data[i].ids[s][item],this.c.tableTd);
                        if(na[k]>0){
                            h += \'<td rowspan="\'+na[k]+\'">\';
                            h += this.gin(item,t.c.data[i].ids[s][item]);
                            h += \'</td>\';
                        }
                    }
                    na[k] --;
                }
                h += \'<td><input class="layui-input layui-table-input" data-index="\'+i+\'" data-type="price" lay-filter="input"  value="\'+t.c.data[i].price+\'" ></td>\';
                // h += \'<td><input class="layui-input layui-table-input" data-index="\'+i+\'" data-type="stock" lay-filter="input" value="\'+t.c.data[i].stock+\'" ></td>\';
                h += \'<td><input class="layui-input layui-table-input" data-index="\'+i+\'" data-type="sku" lay-filter="input" value="\'+t.c.data[i].sku+\'" ></td>\';
                h += \'</tr>\';
            }
            return h;
        },
        stf:function () {
            if(this.c.data.length < 2) return \'\';
            return \'<tr><th colspan="\'+this.c.tableTitle.length+\'" style="text-align: center">批量修改</th><th><input type="text" class="layui-input layui-table-input" lay-filter="input" data-type="sku-price" /></th><!--<th><input type="text" class="layui-input layui-table-input" lay-filter="input" data-type="sku-stock" /></th>--><th><input type="text" class="layui-input layui-table-input" lay-filter="input" data-type="sku-sku" /></th></tr>\';
        },
        gin:function (a,b) {
            for( var i=0;i<this.c.item.length;i++){
                if(a == this.c.item[i].id){
                    for(var x=0;x<this.c.item[i].sub.length;x++){
                        if( this.c.item[i].sub[x].id == b ) return this.c.item[i].sub[x].name;
                    }
                }
            }
            return \'\';
        },
        ai:function (a,b) {
            for(var i=0;i<b.length;i++){
                for(var s=0;s<b[i].length;s++){
                    if(a == b[i][s]){
                        var c = 1;
                        for(var y=i+1;y<b.length;y++){
                            c *= (b[y].length);
                        }
                        return c;
                    }
                }
            }
            return 0;
        },
        inArray:function (s,a) { if(s && a && a.length>0){ for(var i=0;i<a.length;i++){ if(s == a[i]) return true; } } return false; },
        citd:function (i,b) {
            if(b && !this.inArray(i,this.c.itemed)) { this.c.itemed.push(i);return;}
            if(!b && this.c.itemed.indexOf(i) > -1) {this.c.itemed.splice(this.c.itemed.indexOf(i),1);return;}
        },
        cd:function () {
            var it = this.c.itemed;
            var ids = this.c.tableTitleId;
            var arr = [];
            if(it.length<1) return;
            for(var i=0;i<ids.length;i++){
                for(var s=0;s<it.length;s++){
                    var kv = it[s].split(\'_\');
                    if( kv[0] == ids[i] ) {
                        if(!arr[i]) arr[i] = [];
                        arr[i].push( kv[1] );
                    }
                }
            }
            this.c.tableTd = arr;
            var sarr = [[]];
            for (var i = 0; i < arr.length; i++) {
                var tarr = [];
                for (var j = 0; j < sarr.length; j++)
                    for (var k = 0; k < arr[i].length; k++)
                        tarr.push(sarr[j].concat(arr[i][k]));
                sarr = tarr;
            }
            var narr = [];
            for( var i=0;i<sarr.length;i++ ){
                var tarr = {};
                tarr[\'ids\'] = [];
                for(var ii=0;ii<sarr[i].length;ii++){
                    var obj = {};
                    obj[ ids[ii] ] = sarr[i][ii];
                    tarr[\'ids\'].push( obj );
                }
                var rr = this.ced(tarr[\'ids\']);
                tarr[\'price\'] = rr[\'price\'];
                // tarr[\'stock\'] = rr[\'stock\'];
                tarr[\'sku\'] = rr[\'sku\'];
                narr.push(tarr);
            }
            this.c.data = JSON.parse(JSON.stringify(narr));
        },
        ced:function(ids){
            var arr = [];arr[\'price\']=0;arr[\'stock\']=0;arr[\'sku\']=0;
            var nd = [];
            for(var i=0;i<ids.length;i++){
                for(var d in ids[i]) nd.push(d+\'_\'+ids[i][d]);
            }
            var sd = [];
            for(var i=0;i<this.c.data.length;i++){
                sd[i] = [];
                ids = this.c.data[i].ids;
                for(var s=0;s<ids.length;s++){
                    for(var d in ids[s]) sd[i].push(d+\'_\'+ids[s][d]);
                }
                // 比对数据
                var is = true;
                for(var s=0;s<nd.length;s++){
                    if(this.inArray(nd[s],sd[i])){
                        is = is * true;
                    }else{
                        is = is * false;
                    }
                }
                if(is){
                    arr[\'price\'] = parseFloat(this.c.data[i].price);
                    // arr[\'stock\'] = parseInt(this.c.data[i].stock);
                    arr[\'sku\'] = this.c.data[i].sku;
                    return arr;
                }
            }
            return arr;
        },
        sod:function () {
            this.c.itemed.sort(function (v1,v2) {
                var kv1 = v1.split(\'_\');
                var kv2 = v2.split(\'_\');
                if(parseInt(kv1[0]) < parseInt(kv2[0])) return -1;
                if(parseInt(kv1[0]) > parseInt(kv2[0])) return 1;
                if(parseInt(kv1[1]) < parseInt(kv2[1])) return -1;
                if(parseInt(kv1[1]) > parseInt(kv2[1])) return 1;
                return 0;
            });
        },
        stt:function (d,a) {
            var t = this,d = t.c.item,a = t.c.itemed;
            t.c.tableTitleId = [];t.c.tableTitle = [];
            for(var i=0;i<d.length;i++){
                for(var ii=0;ii<d[i].sub.length;ii++){
                    if( t.inArray( d[i].id+\'_\'+d[i].sub[ii].id , a) && !t.inArray( d[i].id , t.c.tableTitleId )){
                        t.c.tableTitle.push(d[i].name);
                        t.c.tableTitleId.push(d[i].id);
                    }
                }
            }
            return;
        },
        listenInput:function () {
            var t = this;
            $(\'input[lay-filter]\').on(\'change\',function (e) {
                var v = $(this).val();
                var p = $(this).attr(\'data-type\');
                var i = $(this).attr(\'data-index\');
                if(p==\'sku\' && t.c.data[i]) t.c.data[i].sku = v;
                if(p==\'price\' && t.c.data[i]) t.c.data[i].price = isNaN(parseFloat(v))?0:parseFloat(v);
                // if(p==\'stock\' && t.c.data[i]) t.c.data[i].stock = isNaN(parseInt(v))?0:parseInt(v);
                if(p==\'sku-sku\'){ for(var k=0;k<t.c.data.length;k++) t.c.data[k].sku = v+(k+1);}
                if(p==\'sku-price\'){ for(var k=0;k<t.c.data.length;k++) t.c.data[k].price = isNaN(parseFloat(v))?0:parseFloat(v);}
                // if(p==\'sku-stock\'){ for(var k=0;k<t.c.data.length;k++) t.c.data[k].stock = isNaN(parseInt(v))?0:parseInt(v);}
                t.rl();
            })
        },
        listen:function () {
            var t = this;
            form.on(\'checkbox(item)\', function(data){
                var id = $(data.elem).attr(\'data-id\');
                t.citd(id,data.elem.checked);
                t.sod();
                t.stt();
                t.cd();
                t.rl();
            });
            this.listenInput();
        },
        getItem:function () {
            return this.c.item;
        },
        getData:function () {
            console.log(111111)
            console.log(this.c.data)
            return this.c.data;
        },
        si:function (d) {
            for(var i=0;i<d.length;i++){
                if(d[i].ids){
                    for(var ii=0;ii<d[i].ids.length;ii++){
                        for(var k in d[i].ids[ii]){
                            if(!this.inArray(k+\'_\'+d[i].ids[ii][k],this.c.itemed)) this.c.itemed.push(k+\'_\'+d[i].ids[ii][k]);
                        }
                    }
                }
            }
        },
        f:function (c) {
            var s=new Date().getTime(),t = this;
            t.c.sv = c.id?c.id:\'sku\';
            t.c.iv = c.itemelem?c.itemelem:\'item-\'+s;
            t.c.tv = c.tableelem?c.tableelem:\'table-\'+s;
            t.c.item = c.item?c.item:[];
            t.c.data = c.data?JSON.parse(JSON.stringify(c.data)):[];
            t.c.itemed = [];
            if(t.c.data){t.si(t.c.data);t.sod();t.stt();t.cd();}
        },
        rl:function () {
            $(\'#\'+this.c.tv).html(this.st());
            this.listenInput();
        },
        l:function () {
            $(\'#\'+this.c.sv).append(\'<div id="\'+this.c.iv+\'">\'+this.w(this.c.item,this.c.itemed,\'\')+\'</div>\');
            $(\'#\'+this.c.sv).append(\'<div class="layui-form-item" pane><label class="layui-form-label">商品</label><div class="layui-input-block" id="\'+this.c.tv+\'">\'+this.st()+\'</div></div></div>\');
            form.render(\'checkbox\');this.listen();
        },
        init:function (c) {this.f(c);this.l();return o;}
    };o.v = \'1.0.0\'; e(\'sku\', o);
});

html 部分::

<!-- 商品测试 -->
<div style="display:none;" id="sku" data-item="" data-data=""></div>
<div class="layui-form-item" pane>
<label class="layui-form-label"></label>
<div class="layui-input-inline" id="data-html">
</div>
</div>
<!--<div class="layui-form-item">
<div class="layui-input-inline">
<a class="layui-btn" id="_get">修改</a>
</div>
</div>-->
js部分::
console.log(JSON.stringify(data.data))
$("#sku").html("");
item=data.data;
var data = [{"ids":[{"1":"1"},{"2":"2"}],"price":0,"stock":0,"sku":0}];//加载默认数据
SKU = sku.init({ id:\'sku\', item: item, data:data });
$("#_get").click(function () {
var data1=SKU.getData();//获取sku 数据
var data2=SKU.getItem();//获取sku 数据
property_ids=data1;
$(\'#data-html\').html(JSON.stringify(data1))
});

 

分类:

技术点:

相关文章: