• vue模块组件


    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;
        } 
    });
  • 相关阅读:
    java new 关键字到底做了什么?
    (转载)Eclipse中使用SVN
    图标常用网站
    正则表达式之RegExp对象
    表单验证之日期大小验证
    表单验证之正则表达式
    表单验证之JQuery Validate控件
    (转载)SVN使用说明
    oracle中group by 和order by同时存在时
    Oracle用户密码过期问题解决
  • 原文地址:https://www.cnblogs.com/vsmart/p/9684599.html
Copyright © 2020-2023  润新知