gin-vue-admin 2.0代码重构

web/src/view/layout/aside/asideComponent/asyncSubmenu.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-submenu ref="subMenu" :index="routerInfo.name">
+    <template slot="title">
+      <i :class="'el-icon-'+routerInfo.meta.icon"></i>
+      <span slot="title">{{routerInfo.meta.title}}</span>
+    </template>
+    <slot></slot>
+  </el-submenu>
+</template>
+
+<script>
+export default {
+  name: 'AsyncSubmenu',
+  props: {
+    routerInfo: {
+      default: function() {
+        return null
+      },
+      type: Object
+    }
+  }
+}
+</script>
+<style lang="scss">
+</style>

web/src/view/layout/aside/asideComponent/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <component :is="menuComponent" :routerInfo="routerInfo" v-if="!routerInfo.hidden">
+    <template v-if="routerInfo.children.length">
+      <AsideComponent :key="item.name" :routerInfo="item" v-for="item in routerInfo.children" />
+    </template>
+  </component>
+</template>
+
+<script>
+import MenuItem from './menuItem'
+import AsyncSubmenu from './asyncSubmenu'
+
+export default {
+  name: 'AsideComponent',
+  computed: {
+    menuComponent() {
+      if (this.routerInfo.children.length) {
+        return 'AsyncSubmenu'
+      } else {
+        return 'MenuItem'
+      }
+    }
+  },
+  props: {
+    routerInfo: {
+      default: function() {
+        return null
+      },
+      type: Object
+    }
+  },
+  components: {
+    MenuItem,
+    AsyncSubmenu
+  }
+}
+</script>
+<style lang="scss">
+</style>

web/src/view/layout/aside/asideComponent/menuItem.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-menu-item :index="routerInfo.name">
+    <i :class="'el-icon-'+routerInfo.meta.icon"></i>
+    <span slot="title">{{routerInfo.meta.title}}</span>
+  </el-menu-item>
+</template>
+
+<script>
+export default {
+  name: 'MenuItem',
+  props: {
+    routerInfo: {
+      default: function() {
+        return null
+      },
+      type: Object
+    }
+  }
+}
+</script>
+<style lang="scss">
+</style>

web/src/view/layout/aside/historyComponent/history.vue

@@ -0,0 +1,63 @@
+<template>
+          <div class="router-history">
+            <el-tabs v-model="activeValue" type="card" :closable="!(historys.length==1&&this.$route.name=='dashbord')" @tab-click="changeTab" @tab-remove="removeTab">
+              <el-tab-pane
+                v-for="item in historys"
+                :key="item.name"
+                :label="item.meta.title"
+                :name="item.name"
+              >
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+</template>
+<script>
+export default {
+    name:"HistoryComponent",
+    data(){
+        return{
+            historys:[
+                {
+                name:"dashbord",
+                meta:{
+                    title:"仪表盘"
+                }
+                }
+            ],
+            activeValue:"dashbord"
+        }
+    },
+    methods:{
+        changeTab(tab){
+            this.$router.push({name:tab.name})
+        },
+        removeTab(tab){
+           const index = this.historys.findIndex(item=>item.name == tab)
+           if(this.$route.name == tab){
+               if(this.historys.length==1){
+                   this.$router.push({name:"dashbord"})
+               }else{
+                    if(index<this.historys.length-1){
+                        this.$router.push({name:this.historys[index+1].name})
+                    }else{
+                        this.$router.push({name:this.historys[index-1].name})
+                    }
+               }
+           }
+               this.historys.splice(index,1)
+        }
+    },
+    watch:{
+     $route( to ){
+       this.historys = this.historys.filter(item=>!item.meta.hidden)
+       if(!this.historys.some(item=>item.name==to.name)){
+        this.historys.push(to)
+       }
+       this.activeValue = to.name
+     }
+    }
+}
+</script>
+<style lang="scss">
+    
+</style>

web/src/view/layout/aside/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <el-scrollbar style="height:calc(100vh)">
+      <el-menu
+        :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
+        :collapse="isCollapse"
+        :collapse-transition="true"
+        :default-active="active"
+        @select="selectMenuItem"
+        active-text-color="#fff"
+        text-color="rgb(191, 203, 217)"
+        unique-opened
+      >
+        <template v-for="item in asyncRouters[0].children">
+          <aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
+        </template>
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters,mapMutations } from 'vuex'
+import AsideComponent from '@/view/layout/aside/asideComponent'
+export default {
+  name: 'Aside',
+  data() {
+    return {
+      active: '',
+      isCollapse: false
+    }
+  },
+  methods: {
+    ...mapMutations("history",["addHistory"]),
+    selectMenuItem(index) {
+      if (index === this.$route.name) return
+      this.$router.push({ name: index })
+    }
+  },
+  computed: {
+    ...mapGetters('router', ['asyncRouters'])
+
+  },
+  components: {
+    AsideComponent
+  },
+  created() {
+    this.active = this.$route.name
+    let screenWidth = document.body.clientWidth
+     if(screenWidth<1000){
+       this.isCollapse = !this.isCollapse
+      }
+    this.$bus.on('totalCollapse', () => {
+      this.isCollapse = !this.isCollapse
+    })
+     this.$bus.on('collapse', (item) => {
+      this.isCollapse = item
+    })
+
+  },
+  watch:{
+    $route(){
+      this.active = this.$route.name
+    }
+  },
+  beforeDestroy() {
+    this.$bus.off('totalCollapse')
+    this.$bus.off('collapse')
+  }
+}
+</script>
+
+<style lang="scss">
+.el-scrollbar {
+  .el-scrollbar__view {
+    height: 100%;
+  }
+}
+.menu-info {
+  .menu-contorl {
+    line-height: 52px;
+    font-size: 20px;
+    display: table-cell;
+    vertical-align: middle;
+  }
+}
+</style>