add vpager

ajax.js

@@ -0,0 +1,54 @@
+;
+(function(factory) {
+    if (typeof module === 'object' && typeof module.exports == 'object') {
+        module.exports = factory(
+            require('vue'), require('jquery')
+        );
+    } else {
+        factory(window.Vue, window.Jquery);
+    }
+})(function(Vue, $) {
+    Vue.prototype.ajax = function() {
+        var _url=arguments[0],_success=arguments[3],_error=arguments[4];
+        var _type='GET';
+        var _data={}; 
+        if(typeof arguments[1]=='string'){
+            _type=arguments[1]; 
+        }         
+        else if(typeof arguments[1]=='object'){
+            _data=arguments[1]; 
+        } 
+        else if(typeof arguments[1]=='function'){
+            _success=arguments[1];
+            _error=arguments[2];
+        }
+        if(typeof arguments[2]=='object'){
+            _data=arguments[2];
+        }
+        else if(arguments[1]!='function'){
+            _success=arguments[2];
+            _error=arguments[3];
+        }
+
+        $.ajax({
+            url: _url,
+            dataType: "json",
+            type: _type,
+            data: _data,
+            success: function(data) {  
+                if (data.success) { 
+                    _success && _success(data);
+                } else { 
+                    _error && _error(data.error!=undefined?data.error:'未知错误');
+                }
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown) { 
+                if (XMLHttpRequest.status == 401) {
+                    location.href = $('#major-layout-login').val();
+                } else {
+                    _error && _error(errorThrown);
+                }
+            }
+        });
+    } 
+}); 

ajaxServer.js

@@ -0,0 +1,33 @@
+;
+(function(factory) {
+    if (typeof module === 'object' && typeof module.exports == 'object') {
+        module.exports = factory(
+            require('vue'), require('jquery')
+        );
+    } else {
+        factory(window.Vue, window.Jquery);
+    }
+})(function(Vue, $) {
+    Vue.prototype.ajaxServer = function(url, type, data, success, error) { 
+        $.ajax({
+            url: url,
+            dataType: "json",
+            type: type,
+            data: data,
+            success: function(data) { 
+                if (data.success) {
+                    success && success(data);
+                } else {
+                    error && error(data.error);
+                }
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown) { 
+                if (XMLHttpRequest.status == 401) {
+                    location.href = $('#major-layout-login').val();
+                } else {
+                    error && error(errorThrown);
+                }
+            }
+        });
+    } 
+}); 

autoinput.css

@@ -0,0 +1,71 @@
+.lg-autoinput{
+    display: inline-block;
+    position: relative; 
+    input{ 
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+    i:first-child:before{
+        content: '\e60a';
+        color: #e1e1e1;
+        font-family: "iconfont" !important; 
+        position: absolute;
+        top: 7px;
+        left: 3px;
+        font-size: 14px;
+    } 
+    .c:before{
+        content: '\e65e';
+        color: #e1e1e1;
+        font-family: "iconfont" !important; 
+        position: absolute;
+        top: 7px;
+        right: 10px;
+        font-size: 14px;
+        cursor: pointer;
+    } 
+
+    ul{
+        position: absolute;
+        z-index: 1000; 
+        top:25px;
+        padding-top:3px;
+        padding-bottom:2px;
+        border:1px solid #5986e1;
+        border-top:none;
+        border-radius: 3px;
+        margin-right: 5px;
+        background-color: white;
+        box-sizing:border-box;
+        max-height: 150px; 
+        overflow-y:auto; 
+        li{
+            height: 24px;
+            line-height: 24px;
+            cursor: pointer;
+            padding: 0 5px 0 20px;
+
+            font-size: 12px;
+            &:hover{
+                background-color:#5986e1;
+                color: white;
+                a{
+                    color: white;
+                }
+            }
+            a{
+                color: #666;
+                display: inline-block;
+                width: 100%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow:ellipsis;
+                &:hover{
+                    background-color:#5986e1;
+                    color: white;
+                }
+            }
+        }
+    }
+
+}

autoinput.js

@@ -0,0 +1,64 @@
+;
+(function(factory) {
+    if (typeof module === 'object' && typeof module.exports == 'object') {
+        module.exports = factory(
+            require('vue')
+        );
+    } else {
+        factory(window.Vue);
+    }
+})(function(Vue) {
+    var autoinput={};
+    autoinput.install = function(Vue) { 
+        Vue.component('autoinput',{
+            delimiters: ['${', '}'],
+            props: ['data', 'width','placeholder','update','select','clear','value'],
+            template: '<div class="lg-autoinput"><i></i><input @keyup="keyup" @focus="focus" @blur="blur" :style="width?\'width:\'+width:\'\'" type="text" :placeholder="placeholder" :value="selected" v-model="selected"/><i class="c" @click="clean" v-if="selected"></i><ul @mouseenter="enter" @mouseleave="leave" v-if="show" :style="width?\'width:\'+width:\'\'"><li v-for="item in data" :title="item.text"><a @click="check(item)" >${item.text}</a></li></ul></div>',
+            methods: {
+                check: function(obj) {//li select  
+                    this.selected=obj.text; 
+                    this.select&&this.select(obj);
+                    this.show=false;
+                },
+                focus:function (argument) {//input focus  
+                    this.show=true;
+                },
+                keyup:function (event) {//input keyup  
+                    this.update&&this.update(this.selected,this.list); 
+                },
+                blur:function (event) {//input blur 
+                    var _this=this;
+                    if(this.over){
+                        _this.show=false;   
+                    }
+                }, 
+                clean:function (argument) {//clean input 
+                    this.selected='';
+                    this.show=false;
+                    this.list=[];
+                    this.clear&&this.clear(); 
+                },
+                enter:function (argument) {//hover ul
+                    this.over=false;
+                },
+                leave:function (argument) {//leave ul
+                    this.over=true;
+                }
+            },
+            data:function (argument) { 
+                return { 
+                    selected:this.value?this.value:'',
+                    show:false,
+                    visible:false,
+                    over:true
+                }
+            }, 
+            watch:{
+                value:function(vNew,vOld){ 
+                    this.selected=vNew; 
+                }
+            }
+        }) 
+    }
+    Vue.use(autoinput);
+});

checkbox-group.js

@@ -0,0 +1,54 @@
+;
+(function(factory) {
+    if (typeof module === 'object' && typeof module.exports == 'object') {
+        module.exports = factory(
+            require('vue')
+        );
+    } else {
+        factory(window.Vue);
+    }
+})(function(Vue) {
+    var checkboxGroup = {};
+    checkboxGroup.install = function(Vue) {
+        Vue.component('checkbox-group', {
+            delimiters: ['${', '}'],
+            props: ['data', 'model', 'className','index'],
+            template: '<span><span :class="className?className:\'lg-checkbox-plain\'" v-for="item in data"><input v-model="selected" v-on:click="check()" type="checkbox" :name="name(item.name,index)" :id="id(item.id,index)" :value="item.value"/><label :for="id(item.id,index)">${item.text}</label></span></span>',
+            methods: {
+                check: function() { 
+                    this.$emit('input',this.selected.join(',')); 
+                },
+                name:function(name,index){
+                    if(index!=undefined){
+                        return name+index;
+                    }
+                    return name;
+                },
+                id:function(id,index){
+                    if(index!=undefined){
+                        return id+index;
+                    }
+                    return id;
+                }
+            }, 
+            data:function(){                
+                return {
+                    selected:getVal(this.model)
+                } 
+            },
+            watch:{
+                model:function(val){
+                    this.selected=getVal(val); 
+                }
+            }
+        })
+    }
+    function getVal(value){
+        var result=[];
+        if(value&&value!=''){
+            result=value.split(',');
+        }                 
+        return result
+    }
+    Vue.use(checkboxGroup);
+});