goods.js 13.0 KB
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'backend/goods.spec'], function ($, undefined, Backend, Table, Form, Spec) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'goods/index' + location.search,
                    add_url: 'goods/add',
                    edit_url: 'goods/edit',
                    del_url: 'goods/del',
                    multi_url: 'goods/multi',
                    import_url: 'goods/import',
                    table: 'goods',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'weigh',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'goods_images', title: __('Goods_images'), events: Table.api.events.image, formatter: Table.api.formatter.images},
                        {field: 'goods_name', title: __('Goods_name')},
                        {field: 'issale', title: __('Issale'), searchList: {"0":__('Issale 0'),"1":__('Issale 1')}, formatter: Table.api.formatter.normal},
                        {field: 'ismember', title: __('Ismember'), searchList: {"0":__('Ismember 0'),"1":__('Ismember 1')}, formatter: Table.api.formatter.normal},
                        {field: 'ishot', title: __('Ishot'), searchList: {"0":__('Ishot 0'),"1":__('Ishot 1')}, formatter: Table.api.formatter.normal},
                        {field: 'ismake', title: __('Ismake'), searchList: {"0":__('Ismake 0'),"1":__('Ismake 1')}, formatter: Table.api.formatter.normal},
                        {field: 'spec_type', title: __('Spec_type'), searchList: {"1":__('Spec_type 1'),"2":__('Spec_type 2')}, formatter: Table.api.formatter.normal},
                        {field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', formatter: Table.api.formatter.datetime},
                        {field: 'weigh', title: __('Weigh')},
                        //操作栏,默认有编辑、删除或排序按钮,可自定义配置buttons来扩展按钮
                        {
                            field: 'operate',
                            title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            buttons: [
                                {
                                    name: 'detail',
                                    title: __('模特款'),
                                    classname: 'btn btn-xs btn-warning btn-dialog',
                                    icon: 'fa fa-file',
                                    url: 'goods/style?goods_id={id}',
                                    visible: function(row){
                                        if(row.ismake == '1'){
                                            return true;
                                        }
                                    }
                                }
                            ],
                            formatter: Table.api.formatter.operate
                        }
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
			Controller.api.bindevent();
			// 规格
            var specMany = new GoodsSpec({
                container: '.goods-spec-many'
            });
			
			Form.api.bindevent($("form[role=form]"), function(data, ret){
			    //如果我们需要在提交表单成功后做跳转,可以在此使用location.href="链接";进行跳转
			    Toastr.success("成功");
			}, function(data, ret){
			    Toastr.error("失败");
			}, function(success, error){
			    //bindevent的第三个参数为提交前的回调
			    //如果我们需要在表单提交前做一些数据处理,则可以在此方法处理
			    //注意如果我们需要阻止表单,可以在此使用return false;即可
			    //如果我们处理完成需要再次提交表单则可以使用submit提交,如下
			    //Form.api.submit(this, success, error);
				var specType = $('select[name="row[spec_type]"]').val();
				if (specType === '2') {
					var isEmpty = specMany.isEmptySkuList();
					isEmpty === true && Toastr.error('商品规格不能为空');
					$('input[name="row[spec_many]"]').val(JSON.stringify(specMany.getData()));
					return !isEmpty;
				}
				return true;
			});
        },
        edit: function () {
			Controller.api.bindevent();
			setTimeout(function () {
			    $('select[name="row[spec_type]"]').trigger("change");
			}, 100);
			// 规格
			var specMany = new GoodsSpec({
			    container: '.goods-spec-many'
			}, Config.specData);
			
			Form.api.bindevent($("form[role=form]"), function(data, ret){
			    //如果我们需要在提交表单成功后做跳转,可以在此使用location.href="链接";进行跳转
			    Toastr.success("成功");
			}, function(data, ret){
			    Toastr.error("失败");
			}, function(success, error){
			    //bindevent的第三个参数为提交前的回调
			    //如果我们需要在表单提交前做一些数据处理,则可以在此方法处理
			    //注意如果我们需要阻止表单,可以在此使用return false;即可
			    //如果我们处理完成需要再次提交表单则可以使用submit提交,如下
			    //Form.api.submit(this, success, error);
				var specType = $('select[name="row[spec_type]"]').val();
				if (specType === '2') {
					var isEmpty = specMany.isEmptySkuList();
					isEmpty === true && Toastr.error('商品规格不能为空');
					$('input[name="row[spec_many]"]').val(JSON.stringify(specMany.getData()));
					return !isEmpty;
				}
				return true;
			});
        },
        style: function () {
            Form.api.bindevent($("form[role=form]"));
            
            setTimeout(function () {
                $("#c-style_template_id").trigger("change");
            }, 100);
            var goods_style = Config.goods_style;
            var hidden_style_list = [];
            $(document).on("change", "#c-style_template_id", function () {
                Fast.api.ajax({
                    url:'goods/styleList',
                    data:{
                        style_template_id:$(this).val()
                    }
                }, function(data, ret){
                    if(ret.code == 1){
                        var list = ret.data.list;
                        var html = '<div class="display_mode_1">';
                        // 一级风格
                        html += style_list(list);
                        html += '<div>';
                        $('.display_mode_1').remove();
                        $('.layer-footer').before(html);
                        // 绑定上传事件
                        Form.events.plupload();
                        Form.events.faselect();
                        // 显示隐藏风格
                        $("input:checked[type=radio]").trigger("change");
                    }
                    return false;
                }, function(data, ret){
                    //失败的回调
                    alert(ret.msg);
                    return false;
                });
            });

            // 选项下风格
            $(document).on("change", "input[type=radio]", function () {
                var style_value_id = $(this).val();
                var list = hidden_style_list[style_value_id];
                $(this).parent().parent().parent().parent('.form-group').next('.display_mode_2').remove();
                if(list.length > 0){
                    var html = '<div class="display_mode_2">';
                        html += style_list(list);
                        html += '<div>';
                    $(this).parent().parent().parent().parent('.form-group').after(html);
                    // 绑定上传事件
                    Form.events.plupload();
                    Form.events.faselect();
                }
            });

            // 风格
            function style_list(list){
                var html = '';
                // 一级风格
                $.each(list,function(index,style){
                    html += '<div class="form-group">'+
                                '<label class="control-label col-xs-12 col-sm-2">'+style.style_name+':</label>'+
                                '<div class="col-xs-12 col-sm-8">'+
                                    style_value_list(index,style);
                    // 一级风格下二级风格
                    if(style.two_style_list.length > 0){
                        $.each(style.two_style_list,function(index,style_s){
                            html += '<div class="form-group">'+
                                        '<label class="control-label col-xs-12 col-sm-2">'+style_s.style_name+':</label>'+
                                        '<div class="col-xs-12 col-sm-8">'+
                                            style_value_list(index,style_s)+
                                        '</div>'+
                                    '</div>';
                        })
                    }
                        html += '</div>'+
                            '</div>';
                })
                return html;
            }

            // 选项
            function style_value_list(index,style){
                var html = '';
                // 风格下选项
                if(style.style_value_list.length > 0){
                        html += '<div class="radio">';
                    $.each(style.style_value_list,function(index,style_o){
                        hidden_style_list[style_o.id] = style_o.style_list;
                        var img = style_o.style_value_image == '' ? '/assets/img/qrcode.png' : style_o.style_value_image;
                        var checked = goods_style[style_o.style_id] == style_o.id ? 'checked' : index == 0 ? 'checked' : '';
                            html += '<label for="'+style_o.id+'" style="border:1px solid #f1f4f6">'+
                                        '<input id="'+style_o.id+'" '+checked+' name="row[goods_style]['+style_o.style_id+']" type="radio" value="'+style_o.id+'">'+
                                        '<img width="100px" src="'+img+'">'+
                                        '<p style="text-align:center">'+style_o.style_value_name+'</p>'+
                                    '</label>';
                    })
                        html += '</div>';
                }
                // 风格下文本框
                if(style.style_type == '2'){
                        var val = goods_style[style.id] == undefined ? '' : goods_style[style.id];
                        html += '<input id="c-'+style.id+'" data-rule="required" class="form-control" name="row[goods_style]['+style.id+']" type="text" value="'+val+'">';
                }
                // 风格下上传图片
                if(style.style_type == '3'){
                        var val = goods_style[style.id] == undefined ? '' : goods_style[style.id];
                        html += '<div class="input-group">'+
                                    '<input id="c-'+style.id+'" data-rule="required" class="form-control" size="50" name="row[goods_style]['+style.id+']" type="text" value="'+val+'">'+
                                    '<div class="input-group-addon no-border no-padding">'+
                                        '<span><button type="button" id="plupload-'+style.id+'" class="btn btn-danger plupload" data-input-id="c-'+style.id+'" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-'+style.id+'"><i class="fa fa-upload"></i> 上传</button></span>'+
                                        '<span><button type="button" id="fachoose-'+style.id+'" class="btn btn-primary fachoose" data-input-id="c-'+style.id+'" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>'+
                                    '</div>'+
                                    '<span class="msg-box n-right" for="c-'+style.id+'"></span>'+
                                '</div>'+
                                '<ul class="row list-inline plupload-preview" id="p-'+style.id+'"></ul>';
                }
                return html;
            }
        },
        api: {
            bindevent: function () {
                // 切换单/多规格
                $('select[name="row[spec_type]"]').change(function (e) {
                    var $goodsSpecMany = $('.goods-spec-many')
                        , $goodsSpecSingle = $('.goods-spec-single');
                    if (e.currentTarget.value === '1') {
                        $goodsSpecMany.hide() && $goodsSpecSingle.show();
                    } else {
                        $goodsSpecMany.show() && $goodsSpecSingle.hide();
                    }
                });
            }
        }
    };
    return Controller;
});