otherAttr.js 9.66 KB
define(function (require, exports, module) {
    var OtherAttr = function (arges) {
        //描述属性页面结构
        var dlist = '<div class="d-list clearfix"></div>',
            right = '<div class="align-right">{title}</div>',
            content = '<div class="d-content"></div>',
            skulist = '<div inputtype="{inputtype}" attrid="{attrid}" class="sku-list clearfix"></div>',
            span = '<span class="ll">{attrName}<span class ="required-icon" > {star} </span >:</span>',
            text = '<input type="text" {required} dilimethod="checkString" name="{attrid}" maxlength="50" class="iptText text inp1" />',
            textArea = '<textarea class="g-t-text" dilimethod="checkString" rows = "" cols = "" maxlength = "200" name = "{attrid}" {required} ></textarea>',
            select = '<select name="{attrid}" {required}  ></select>',
            selectOption = '<option value="{selectval}">{selectname}</option>',
            skucontent = '<div class="sku-content"></div>',
            deleteInput = '&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" inputtype="{inputtype}" value="删除" class="submitBtn grayBtn removeAttr" />',
            radio = '<span><input type="radio" value="{radioval}" name="{attrid}" {required} /> <label for="{attrid}-{radioval}" class="iptTitle">{radioname}</label></span>',
            checkbox = '<span><input type="checkbox" value="{checkboxval}" name="{attrid}" {required} /> <label for="{attrid}-{checkboxval}" class="iptTitle">{checkboxname}</label></span>',
            tmplDiv = "<div><link href='/assets/css/style-attr-search.css' rel='stylesheet' type='text/css'/><div class='search-view' ><div class='form-area test'><input type='text' value='' class='s-input attr-input' placeholder='输入属性名,进行搜索.....' /><div class='selector s1 attr-s'></div></div></div></div>";
        //添加其属性结果集
        var resultJson = {};
        var config = {
            url: arges.url
        };
        this.init = function () {
            this.getData();
        };
        this.callback = function () {
            var resultValue = $(".attr-input").val();
            if (resultValue == "") {
                alert("请查询选择所需要添加的属性!");
                return false;
            }
            if ($(".attr-s:visible").length > 0) {
                alert("请选择所需要添加的属性!");
                return false;
            }
            var jsonSingle = $(".attr-input").attr("attrinfo");
            var descInfo = JSON.parse(jsonSingle);
            var typeValueList = descInfo.attrValue;
            var attrName = descInfo.name;
            var inputType = descInfo.inputtype.length > 1 ? descInfo.inputtype.split(",")[0] : descInfo.inputtype;
            var required = descInfo.required == 1 ? true : false;
            var requiredStar = required ? "*" : "";
            var requiredAttr = required? "required =" + required:"";
            var dlisthtml;
            if ($("#descAttr .d-list").length > 1) {
                dlisthtml = $(dlist).append(riot.render(right, {"title": "&nbsp;"}));
            } else {
                dlisthtml = $(dlist).append(riot.render(right, {"title": "商品属性"}));
            }
            var skulisthtml = riot.render(skulist, {"inputtype": inputType, "attrid": descInfo.id});
            skulisthtml = $(skulisthtml).append(riot.render(span, {"attrName": attrName, "star": requiredStar}));
            if (inputType == "1" || inputType == "2") {
                var skucontenthtml = $(skucontent);
                for (var j in typeValueList) {
                    var info = typeValueList[j];
                    if (info.status == 1 && info.show == 1) {
                        if (inputType == "1") {
                            skucontenthtml.append(riot.render(radio, {"required": requiredAttr, "radioval": info.id, "radioname": info.value, "attrid": descInfo.id}));
                        } else {
                            skucontenthtml.append(riot.render(checkbox, {"required": requiredAttr, "checkboxval": info.id, "checkboxname": info.value, "attrid": descInfo.id}));
                        }
                    }
                }
                skucontenthtml = skucontenthtml.append(riot.render(deleteInput, {"inputtype": inputType}));
                skulisthtml.append(skucontenthtml);
            } else {
                if (inputType == "3") {
                    var selecthtml = riot.render(select, {"required": requiredAttr, "attrid": descInfo.id});
                    selecthtml = $(selecthtml);
                    for (var j in typeValueList) {
                        var info = typeValueList[j];
                        if (info.status == 1 && info.show == 1) {
                            selecthtml.append(riot.render(selectOption, {"selectname": info.value, "selectval": info.id}));
                        }
                    }
                    skulisthtml.append(selecthtml);
                } else if (inputType == "4") {
                    skulisthtml.append(riot.render(text, {"required": requiredAttr, "attrid": descInfo.id}));
                } else {
                    skulisthtml.append(riot.render(textArea, {"required": requiredAttr, "attrid": descInfo.id}));
                }
                skulisthtml.append(riot.render(deleteInput, {"inputtype": inputType}));
            }
            var contenthtml = $(content).append(skulisthtml);
            dlisthtml = dlisthtml.append(contenthtml);
            jQuery("#otherdiv").before(dlisthtml);
        };
        this.getData = function () {
            var self = this;
            $.getJSON(config.url, function (e) {
                if (e == null || e.length == 0) {
                    alert("没有其他描述属性添加!");
                    return false;
                }
                //页面上已有的属性
                var ok = [];
                $("#descAttr .sku-list").each(function () {
                    ok.push($(this).attr("attrid"));
                });
                //过滤完成的属性
                var jsonList = [];
                if (ok.length == 0) {
                    jsonList = e;
                } else {
                    for (var j in e) {
                        var info = e[j];
                        var exist = false;//默认不存在
                        for (var i = 0; i < ok.length; i++) {
                            if (ok[i] == info.id) {
                                exist = true;
                            }
                        }
                        if (!exist) {
                            jsonList.push(info);
                        }
                    }
                }
                resultJson = jsonList;
                XUI.window.confirm(tmplDiv, "选择其他属性", self.callback);
                self.selector();
            });
        };

        this.selector = function (tag) {
            var _tag = this;
            var data = {
                    form: 'form-area',
                    inp: 'attr-input',
                    select: 'attr-s',
                    action: false
                },
                data = $.extend(data, tag);
            var inp = $('.' + data.inp),
                select = $('.' + data.select);
            old = select.html();
            //控制隐藏所属子类显示区域.
            _tag.hide = function (doc) {
                doc.bind('click', function () {
                    select.css('display', 'none');
                });
            };
            //显示子类区域.
            _tag.show = function (obj, n) {
                obj.bind('click', function () {
                    switch (n) {
                        case 1:
                            _tag.reset();
                            obj.attr('value', '');
                            obj.next().css('display', 'block');
                            break;
                        default:
                            obj.parent().find('.' + data.select).css('display', 'block');
                    }
                    return false;
                })
            };
            //执行查询显示对应子类列表.
            _tag.query = function (obj) {
                obj.bind('keyup', function () {
                    var keyword = obj.attr('value');
                    if (keyword == "") {
                        obj.next().css('display', 'none');
                        return;
                    }
                    obj.next().html(_tag.search(resultJson, keyword));
                    if (obj.next().html() != "") {
                        obj.next().css('display', 'block');
                    } else {
                        obj.next().css('display', 'none');
                    }
                })
            };
            //根据传入参数查找所属子类信息并返回.
            _tag.search = function (j, r) {
                var re = new RegExp(r, 'i');
                var s = '';
                for (var e in j) {
                    if (j[e].name.match(re)) {
                        //console.log('Output---> '+j[e].name)
                        s += '<div attr=' + JSON.stringify(j[e]) + '>' + j[e].name + '</div>';
                    }

                }
                return s;
            };
            _tag.reset = function () {
                select.html(old);
            };

            _tag.query(inp);
            select.find('div').live('click', function () {
                $(this).parent().parent().find('.' + data.inp).attr('value', $(this).html());
                var jsonString = $(this).attr('attr');
                $(this).parent().parent().find('.' + data.inp).attr('attrInfo', jsonString);
            });
            _tag.hide(select);
        };
    };
    return OtherAttr;
});