vue-puload.js

define(function(require,exports){
    
    /**
     * direction :Top Left Top Right Top Center right-start ****
     * tipShow: 显示状态 默认隐藏
     */
    exports.vtip = {
        template:‘<div v-if="tipShow" class="fade-transition ivu-tooltip-popper" :x-placement="direction"  :style="{top: \‘40px\‘,right:rightDistance}">                <div class="ivu-tooltip-content">                <div class="ivu-tooltip-arrow"></div>                <div class="ivu-tooltip-inner" style="white-space: normal">{{message || "---"}}</div>            </div>        </div>‘,
        props:{
             direction:‘‘,
             tipShow:‘‘,
             message:‘‘,
             rightDistance:{
                 "type": String,
                 "default": "0"
             }
        }
    }
    
    //上传模板
    var template_vUpload =  ‘<div>                                <Upload  v-ref:upload :action="uploadUrl" multiple  :before-upload="handleBeforeUpload"                                     :on-success="handleSuccess" :format="[\‘ppt\‘,\‘pptx\‘,\‘PPT\‘,\‘PPTX\‘,\‘doc\‘,\‘DOC\‘,\‘docx\‘,\‘DOCX\‘,\‘xls\‘,\‘xlsx\‘,\‘XLS\‘,\‘XLSX\‘,\‘pdf\‘,\‘PDF\‘,\‘txt\‘,\‘TXT\‘]"                                     :on-format-error="handleFormatError"  :max-size="51200" :on-exceeded-size="handleMaxSize"  :show-upload-list="false" style="width:100px;" :accept="\‘.ppt,.pptx,.PPT,.PPTX,.doc,.DOC,.docx,.DOCX,.xls,.xlsx,.XLS,.XLSX,.pdf,.PDF,.txt,.TXT\‘">                                    <i-button :type="fileButton" :size="fileButtonSize"  :icon="fileIcon">{{fileText}}</i-button>                                </Upload>                                <ul class="ivu-upload-list" v-if="!nofileList">                                    <li class="ivu-upload-list-file ivu-upload-list-file-finish" v-for="item in uploadList">                                          <div  v-if="item.status === \‘finished\‘">                                           <span>                                               <i class="ivu-icon ivu-icon-document-text"><nobr>{{item.name}}</nobr></i>                                           </span>                                            <i class="ivu-upload-list-remove ivu-icon ivu-icon-ios-close-empty" @click="handleRemove(item)"></i>                                          </div>                                          <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>                                      </li>                                  </ul>                                <div class="ivu-message" v-if="demanIfShow">                                    <div class="ivu-message-notice">                                             <div class="ivu-message-notice-content">                                                 <div class="ivu-message-notice-content-text">                                                    <div class="ivu-message-custom-content ivu-message-loading">                                                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop"></i>                                                        <span>加载中...</span>                                                    </div>                                                </div>                                             </div>                                      </div>                                </div>                            </div>‘;
    /**
     * upload 组件
     * uploadUrl : 上传地址(String)
     * pathData  ： 文件列表数据(Array)
     * nofileList: 是否显示列表 (True)
     * fileText : 上传按钮文字(String默认是上传按钮)
     * fileIcon : 按钮样式(String默认是上传图标)
     * fileButton: 上传按钮类型(String默认是ghost)
     * fileButtonSize ： 上传按钮显示尺寸(String默认为空)
     */
    exports.vUpload = {
            template:template_vUpload,
            data:function(){
                return {
                    fileUpList:[],
                    demanIfShow:false
                }
            },
            methods:{
                getUploadList:function(){
                     var self = this;
                     self.fileUpList = self.pathData;
                        //数据组合 将fileUpList 拼到 $refs.upload.fileList数组中 
                     self.$refs.upload.fileList = [];//插入之前先清空 
                     for(var j=0; j< self.fileUpList.length; j++){
                         var obj = {
                              name:self.fileUpList[j],
                              status:‘finished‘
                         };
                         self.$refs.upload.fileList.push(obj);
                     }
                 },
                 handleBeforeUpload:function(){
                     var self = this;
                     self.demanIfShow = true;
                 },
                 handleSuccess:function(res, file) {//上传成功
                     var self = this;
                     self.demanIfShow = false;
                     file.name = res.result;
                     if(Object.prototype.toString.call(res.result) === ‘[object Array]‘){//返回是否为空数组
                         self.fileUpList = res.result;
                     }else{
                         self.fileUpList.push(res.result);
                         if(res.successSign){
                             self.$Message.success(res.message)
                         }else{
                             self.$Message.error(res.message);
                         }
                     }
                      //验证调用 
                     self.checkFormValidate();
                 },
                 handleFormatError:function(file) {//上传失败
                     var self = this;
                     self.demanIfShow = true;
                     self.$Message.config({
                          duration: 3
                     });
                     self.$Notice.warning({
                         title: ‘文件格式不正确‘,
                         desc: ‘文件 ‘ + file.name + ‘ 格式不正确，请上传 ppt,pptx,PPT,PPTX,doc,DOC,docx,DOCX,xls,xlsx,XLS,XLSX,pdf,PDF,txt,TXT格式的的文件。‘
                     });
                 },
                 handleRemove:function(parm){//移除文件 
                      var self = this;
                       //fileUpList 删除传过去的数据 
                      self.fileUpList.splice(self.fileUpList.indexOf(parm), 1);
                         //upload 界面删除数据
                      var fileList = this.$refs.upload.fileList;
                      self.$refs.upload.fileList.splice(fileList.indexOf(parm), 1);
                      //移除文件 验证调用 
                       self.checkFormValidate();
                 },
                 handleMaxSize:function(file){
                     var self = this;
                     self.$Notice.warning({
                         title: ‘超出文件大小限制‘,
                         desc: ‘文件 ‘ + file.name + ‘ 太大，不能超过 50M。‘
                     });
                 },
                 checkFormValidate:function(){//调用父组件验证
                     var self = this;
                     if(self.parentName){
                         self.$dispatch(‘handleIt‘,self.fileUpList,self.parentName);
                     }else{
                         self.$dispatch(‘handleIt‘,self.fileUpList)
                     }
                 }
            },
            computed:{
                uploadList:function() {
                    var self = this;
                    return self.$refs.upload ? self.$refs.upload.fileList : [];
                }
            },
            props:{
                uploadUrl:{
                  "type": String,
                  "default": ""
                },
                pathData:{
                     "type": Array,
                     "default": []
                },
                nofileList:{
                     "type": Boolean,
                     "default": false
                },
                fileText:{
                    "type": String,
                    "default": "上传文件"
                },
                fileIcon:{
                    "type": String,
                    "default": "ios-cloud-upload-outline"
                },
                fileButton:{
                    "type": String,
                    "default": "ghost"
                },
                fileButtonSize:{
                    "type": String,
                    "default": ""
                },
                parentName:{
                    "type": String,
                    "default": ""
                }
            },
             ready:function(){
                 var self = this;
                 self.getUploadList();
             }
        }
})