zoukankan      html  css  js  c++  java
  • 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;
        } 
    });
  • 相关阅读:
    出现socket:(10107)系统调用失败
    JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
    获取滚动条距离底部的距离
    linux常用命令使用方法
    Python:一
    【C++ Primer 第15章】定义派生类拷贝构造函数、赋值运算符
    【【C++ Primer 第15章】 虚析构函数
    ubuntu基本用法
    深度优先搜索(DFS)和广度优先搜索(BFS)
    【C++ Primer 第7章】定义抽象数据类型
  • 原文地址:https://www.cnblogs.com/vsmart/p/9684599.html
Copyright © 2011-2022 走看看