TDataView_ui/scripts/mod/picture.js

/**
 * [ONEMAP.M.field_picture]
 * @return {[object]}
 */
define(['css!styles/modelFields/modelFields','kindeditor'],
function(){	
	ONEMAP.M.field_picture = function(options){
        var _this = this;
        this.fType = 'picture';
        this.eType = 'edit';
        this.verifyResult = true;
        this.uploadEditor = null;
        this.options = {};
        _.each(options,function(item,index){
            _this.options[index] = item;
        });
        var tmpHTML = $('<div class="col cell fields field-picture">'+
                    '<div class="col width-1of12">'+
                        '<div class="lr-cell t-r"><label for="'+this.options.id+'">'+this.options.label+'</label></div>'+
                    '</div>'+
                    '<div class="col width-fill">'+
                        '<ul class="picture-list" id="'+this.options.id+'-pictureList">'+                            
                        '</ul>'+
                        //'<input readonly="readonly" value="'+(this.options.value?this.options.value:'')+'" name="'+this.options.id+'" id="'+this.options.id+'" class="f-l" type="text" />'+  
                        '<button id="btn'+this.options.id+'Upload" class="button">选择图片</button>'+ 
                        '<div id="'+this.options.id+'-verify" class="verify"></div>'+                   
                    '</div>'+
                '</div>');

        function init(){
            $(_this.options.containId).append(tmpHTML);

            _buildList();

            _this.uploadEditor = KindEditor.editor({
                uploadJson: _this.options.uploadPath,
                allowFileUpload:true,
                afterUpload:function(data){
                    if(data.code == 0){
                        ONEMAP.C.publisher.publish({type:'success',message:'成功上传图片!'},'noteBar::add');
                        KindEditor('#'+_this.options.id).val(data['files']);
                        _this.options.value = data['files'][0];
                        _this.uploadEditor.hideDialog();    
                        _buildList();            
                    }else {
                        ONEMAP.C.publisher.publish({type:'error',message:data['message']},'noteBar::add');
                        _this.uploadEditor.hideDialog();
                    }  
                }
            });

            KindEditor('#btn'+_this.options.id+'Upload').click(function(){
                _this.uploadEditor.loadPlugin('uploadpicture',function(){
                    _this.uploadEditor.plugin.pictureDialog();
                });
            });

            //必填项
            if(_this.options['verifyEmpty']){
                $('#'+_this.options.id+'-verify').html('<span class="color-grey"><span class="icon icon-info-sign"></span>必填项</span>');
            }

            //显示tips
            if(_this.options.hasOwnProperty('tips')){
                $('#'+_this.options.id+'-verify').html('<span class="color-grey"><span class="icon icon-info-sign"></span>'+_this.options.tips+'</span>');
            }
        }


        function _buildList(){
            $('#'+_this.options.id+'-pictureList').empty();
            if(!_this.options['value']){
                $('#btn'+_this.options.id+'Upload').show();
                return false;
            }

            $('#btn'+_this.options.id+'Upload').hide();

            var item = _this.options['value'];
            $('#'+_this.options.id+'-pictureList').append('<li><label class="label background-grey">图片</label><button class="icon-button button delete" title="删除"><span class="icon icon-trash"></span></button></li>')
           

            $('#'+_this.options.id+'-pictureList .label').bind('click',function(){ 
                var edit = {};
                edit.value=  _this.options['value'];
                if(_this.eType == 'preview'){
                    edit.type='preview';
                }
                //预览           
                require(['modDir/previewer/pictureViewer'],function(pictureViewer){                    
                    pictureViewer.init(edit);
                });
            });

            $('#'+_this.options.id+'-pictureList .delete').bind('click',function(){
                delete _this.options['value'];
                _buildList();
            });
        }

        this.getValue = function(){
            if(_this.options.value){
                return _this.options.value;
            }else {
                return '';
            }            
        }

        this.setValue = function(value){
            _this.options.value = value;
            _buildList();
        }

        this.setEnable = function(flag){
            if(flag){
                _this.eType = 'edit';
                $('#'+_this.options.id+'-pictureList .delete').show();
                if(!_this.options.value){
                    $('#btn'+_this.options.id+'Upload').show();
                }                
            }else {
                _this.eType = 'preview';
                $('#'+_this.options.id+'-pictureList .delete').hide();
                $('#btn'+_this.options.id+'Upload').hide();
            }
        }

        function verify(){
            //验证空值
            if(_this.options.verifyEmpty){
                if(!_this.options.value || $.trim(_this.options.value).length == 0){
                    $('#'+_this.options.id+'-verify').html('<span class="color-red"><span class="icon icon-warning-sign"></span>必填项</span>');
                    return false;
                }else {
                    $('#'+_this.options.id+'-verify').html('');
                }
            }
            return true;
        }

        this.checkVerify = function(){
            this.verifyResult = verify();
            return this.verifyResult;
        }

        init();
    }
    
    return ONEMAP.M.field_picture;
});