dd

Author: 501351981

package-lock.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "babel-plugin-transform-remove-strict-mode": "0.0.2",
+    "echarts": "^4.1.0",
     "less": "^3.8.0",
     "less-loader": "^4.1.0",
     "vue": "^2.5.2",

package.json

@@ -73,9 +73,13 @@
       },
       logout:function () {
         network.post(api.logout).then(()=>{
-          this.$router.push({path:config.login_path})
+
+
           authorize.clearToken()
           this.$store.commit('CLEAR_USER_INFO')
+          //采取跳转目的是为了清空router，因为之前采取了addRouter，但是没法清除，只能刷新页面
+          window.location.href=config.login_path
+          // this.$router.push({path:config.login_path})
         })
       }
     }

src/components/layout/LayoutMain.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="echarts" :style="{width:w,height:h}">
+    <div :id="domCharts" class="echarts-canvas"></div>
+  </div>
+</template>
+<script>
+  import network from '../../utils/base/network'
+  import echarts from 'echarts'
+  import helper from '../../utils/base/helper'
+
+  export default {
+    name:'Echarts',
+    props:{
+      option:Object,
+      url:String,
+      params:Object,
+      parseData:Function,
+      width:[String,Number],
+      height:[String,Number],
+
+    },
+    computed:{
+      w:function () {
+        if(!isNaN(this.width)){
+          return this.width+'px';
+        }else if(this.width.indexOf('%')!= -1) {
+          return this.width
+        }else {
+          return this.width+'px';
+        }
+      },
+      h:function () {
+        if(!isNaN(this.height)){
+          return this.height+'px';
+        }else if(this.height.indexOf('%')!= -1) {
+          return this.height
+        }else {
+          return this.height+'px';
+        }
+      }
+    },
+    data:function () {
+      return{
+        domCharts:'chart-'+ helper.randomString(20),
+        myEcharts:''
+      }
+    },
+    watch:{
+      'params':function () {
+        this.reload()
+      }
+    },
+    mounted:function(){
+      this.init()
+    },
+    methods:{
+      init(){
+        this.myEcharts=echarts.init(document.getElementById(this.domCharts));
+        this.myEcharts.setOption(this.option)
+        this.reload()
+      },
+      reload(){
+        this.myEcharts.showLoading()
+        network.get(this.url,this.params).then(res=>{
+          this.myEcharts.hideLoading()
+          this.parseData(res,this.myEcharts)
+        })
+      }
+
+    }
+
+
+  }
+</script>
+
+<style scoped lang="less">
+  .echarts{
+    .echarts-canvas{
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+</style>

src/components/mod/Echarts.vue

@@ -91,9 +91,9 @@
       li{
         display: inline-block;
         list-style: none;
-        padding: 0 20px;
-        line-height: 30px;
-        height: 30px;
+        padding: 0 25px;
+        line-height: 36px;
+        height: 36px;
         border-radius: 2px;
         background-color: #fff;
         box-shadow: 0 2px 2px 0 rgba(225,225,225,.5);

src/components/mod/TabTable.vue

@@ -125,6 +125,7 @@
       if(this.autoLoad){
         this.requestData(this.page)
       }
+
     },
     methods:{
       rowIndex:function (index) {
@@ -147,7 +148,6 @@
       requestData:function(page){
         //请求数据
 
-        console.log(this.url)
 
         if(this.url){
           this.loading=true

src/components/mod/TableBox.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="label-radio">
+    <label v-for="option in options" @click="change(option.value)" class="btn btn-default"  :class="{active:option.value==value}">{{option.title}}</label>
+  </div>
+</template>
+
+<script>
+  export default {
+    name:'LableRadio',
+    props:{
+      value:[String,Number],
+      options:Array
+    },
+    methods:{
+      change(val){
+        if(this.value!=val){
+          this.$emit('input',val)
+          this.$emit('change',val)
+        }
+
+      }
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  .label-radio{
+    label{
+      border-radius: 0;
+      margin-right: -1px;
+
+      &:first-child{
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+      }
+      &:last-child{
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+      &.active{
+        background-color: #e6e6e6;
+        border-color: #adadad;
+      }
+    }
+  }
+</style>

src/components/proj/LabelRadio.vue

@@ -1,27 +1,103 @@
 <template>
   <div>
-    <p>首页内容</p>
+    <p id="test2">首页内容</p>
+    <div id="test">{{message}}</div>
+    <table-box ref="tableBox" :url="table.url" :columns="table.columns" :key-name="table.keyName" :parse-data="table.parseData" :data="table.data" :multi-select="table.multiSelect">
+
+      <tr slot="row"  slot-scope="props">
+        <td class="tc">{{props.index}}</td>
+        <td><img :src="props.item.avatar" width="50" height="50"/></td>
+        <td>{{props.item.nickname}}</td>
+        <td>{{props.item.province}}-{{props.item.city}}</td>
+        <td class="tc">{{props.item.sex}}</td>
+        <td>{{props.item.created_at}}</td>
+      </tr>
+
+
+    </table-box>
   </div>
 </template>
 
 <script>
 
+  import TableBox from '../../components/mod/TableBox'
+
   import authorize from '../../utils/base/authorize'
   import api from '../../utils/config/api'
   import network from '../../utils/base/network'
   import {SET_BREADCRUMB} from "../../store/mutation-types";
 
   export default {
     name: 'Index',
-    components: {},
+    components: {TableBox},
 
     data:function () {
       return {
+        message:'ceshi',
+        table:{
+          url:api.member_index,
+          multiSelect:false,
+          keyName:'id',
+          columns:[
+            {
+              title:"头像",
+              field:"avatar",
+              width:'80'
+            },
+            {
+              title:"昵称",
+              field:"nickname",
+              width:''
+            },
+            {
+              title:"所在地区",
+              field:"province",
+              width:''
+            },
+            {
+              title:"性别",
+              field:"sex",
+              width:'80'
+            },
+            {
+              title:"注册时间",
+              field:"created_at",
+              width:'160'
+            },
 
-
+          ],
+          parseData:function (data) {
+            data.forEach(function(row){
+              row.sex=row.sex==1?'男':'女'
+            })
+          }
+        }
       }
     },
+    beforeCreate:function(){
+      console.log('====父组件：beforeCreate=====')
+    },
+    created:function(){
+      console.log('====父组件：created=====')
+    },
+    beforeMount:function(){
+      console.log('====父组件：beforeMount=====')
+    },
+    beforeUpdate:function(){
+      console.log('====父组件： beforeUpdate=====')
+    },
+
+
+    methods:{
+     test:function () {
+       console.log("methods-test")
+     }
+    },
     mounted:function () {
+      console.log('====父组件：mounted=====')
+
+
+
       let breadcrumb=[
         {
           link: '/index',