vue模块组件

最新推荐文章于 2024-09-06 14:35:24 发布

weixin_30549175

最新推荐文章于 2024-09-06 14:35:24 发布

阅读量156

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/vsmart/p/9684599.html

版权

var childVue = devices({
       parentVue : this,
       templateId:'#templateDevice',
       reqUrl : '/device/list',
});

define([
    'vue',
    'request',
    'static/js/base/text!view/components/devices.html',
], function(vue, req, review) {
    return function(options){
        $(options.templateId).html(review);
        var childVue = new vue({
            el : options.templateId,
            data:{
                searchParams : {
                    keyword:'',
                    tagId:'',
                    size:5,
                    page:1
                },
                tagList:'',
                reqList:'',
                reqData:'',
                publishStatus:req.publishStatus,
                checkModels:[],
                checkAll:false,
                checkTotal:false,
                checkLength:0
            },
            methods:{
                //点击
                toggleCheck:function(item){
                    var findIndex = this.checkModels.indexOf(item.id);
                    if(findIndex != -1){
                        this.checkModels.splice(findIndex,1);
                    }else{
                        this.checkModels.push(item.id);
                    }
                },
                checkAllFuc:function(){
                    var _this = this;
                    this.checkAll = !this.checkAll;
                    if(this.checkAll==true){
                        this.checkModels = [];
                        this.reqList.forEach(function(item,index){
                            _this.checkModels.push(item.id);
                        })
                    }else{
                        this.checkModels = [];
                    }
                },
                getReqList:function(page){
                    var _this = this;
                    _this.searchParams.page = page || 1;
                    req.ajaxPost(options.reqUrl,_this.searchParams,function(data){
                        if(data.code == 200){
                            _this.reqList = data.data.pageInfo.list;
                            _this.reqData = data.data.pageInfo;
                            _this.tagList = data.data.tagList;
                            _this.reqList.forEach(function(item,index){
                                item.tagNamesArr = item.tagNames.split(',');
                            })

                            if(_this.checkTotal){
                                _this.checkLength = _this.reqData.total;
                                _this.checkAll = false;
                                _this.checkAllFuc();
                            }else{
                                _this.checkLength = 0;
                            }

                        }else{
                           alert(data.message)
                        }
                    })
                },
                checkTotalFuc:function () {
                    //跨页全选
                    var _this = this;
                    _this.checkTotal = !_this.checkTotal;
                    if(_this.checkTotal){//全部选中
                        _this.checkLength =  _this.reqData.total;
                        _this.checkAll = false;
                    }else{//取消全选
                        _this.checkAll = true;
                        _this.checkLength = _this.checkModels.length;
                    }
                    _this.checkAllFuc();
                },
                //跳转页面
                goToPage:function(page){
                    
                    if(page==0 || page > this.reqData.pages){
                        this.reqData.jumpPage = '';
                        return false;
                    }                                                       
                    this.getReqList(page);
                },
            },
            watch:{
                checkModels:function(){
                    //页内全选
                    if(this.checkModels.length == this.reqList.length ){
                        this.checkAll = true;
                    }else{
                        this.checkAll = false;
                        this.checkTotal = false;
                    }
                    if(!this.checkTotal){
                        this.checkLength = this.checkModels.length;
                    }

                }
            },
            ready:function(){
                this.getReqList();              
            }
        })
        return childVue;
    } 
});