From 650da4f85ec52e8315c254686b8e35b056298976 Mon Sep 17 00:00:00 2001
From: pixelqm <303176530@qq.com>
Date: Sun, 15 Sep 2019 20:24:56 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=B7=A6=E4=BE=A7=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 QMPlusVuePage/src/store/module/router.js      |  2 +-
 .../layout/aside/asideComponent/index.vue     | 39 +++++++++++++++
 .../layout/aside/asideComponent/menuItem.vue  | 19 ++++++++
 .../layout/aside/asideComponent/submenu.vue   | 25 ++++++++++
 QMPlusVuePage/src/view/layout/aside/index.vue | 39 +++++++++++++++
 QMPlusVuePage/src/view/layout/index.vue       | 47 ++++++++++++++++---
 6 files changed, 163 insertions(+), 8 deletions(-)
 create mode 100644 QMPlusVuePage/src/view/layout/aside/asideComponent/index.vue
 create mode 100644 QMPlusVuePage/src/view/layout/aside/asideComponent/menuItem.vue
 create mode 100644 QMPlusVuePage/src/view/layout/aside/asideComponent/submenu.vue
 create mode 100644 QMPlusVuePage/src/view/layout/aside/index.vue

diff --git a/QMPlusVuePage/src/store/module/router.js b/QMPlusVuePage/src/store/module/router.js
index f95a83ea..2b2129ef 100644
--- a/QMPlusVuePage/src/store/module/router.js
+++ b/QMPlusVuePage/src/store/module/router.js
@@ -23,7 +23,7 @@ export const router = {
                 redirect: '/404'
 
             })
-            asyncRouterHandle(asyncRouter) // 等待动态使用 VUEX持久化 会将其放入 vuex并且动态生成左侧列表
+            asyncRouterHandle(asyncRouter)
             commit('setAsyncRouter', asyncRouter)
         }
     },
diff --git a/QMPlusVuePage/src/view/layout/aside/asideComponent/index.vue b/QMPlusVuePage/src/view/layout/aside/asideComponent/index.vue
new file mode 100644
index 00000000..4f18814c
--- /dev/null
+++ b/QMPlusVuePage/src/view/layout/aside/asideComponent/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <component :is="menuComponent" :routerInfo="routerInfo">
+    <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 SubMenu from './submenu'
+
+export default {
+  name: 'AsideComponent',
+  computed:{
+      menuComponent(){
+          if(this.routerInfo.children.length){
+              return 'SubMenu'
+          }else{
+              return 'menuItem'
+          }
+      }
+  },
+  props: {
+    routerInfo: {
+      default: function() {
+        return null
+      },
+      type: Object
+    }
+  },
+  components: {
+    MenuItem,
+    SubMenu
+  }
+}
+</script>
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/QMPlusVuePage/src/view/layout/aside/asideComponent/menuItem.vue b/QMPlusVuePage/src/view/layout/aside/asideComponent/menuItem.vue
new file mode 100644
index 00000000..dbbf3ddb
--- /dev/null
+++ b/QMPlusVuePage/src/view/layout/aside/asideComponent/menuItem.vue
@@ -0,0 +1,19 @@
+<template>
+    <el-menu-item :index="routerInfo.name">{{routerInfo.meta.title}}</el-menu-item>
+</template>
+
+<script>
+export default {
+  name: 'MenuItem',
+  props: {
+    routerInfo: {
+      default: function() {
+        return null
+      },
+      type: Object
+    }
+  },
+}
+</script>
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/QMPlusVuePage/src/view/layout/aside/asideComponent/submenu.vue b/QMPlusVuePage/src/view/layout/aside/asideComponent/submenu.vue
new file mode 100644
index 00000000..623b9a79
--- /dev/null
+++ b/QMPlusVuePage/src/view/layout/aside/asideComponent/submenu.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-submenu :index="routerInfo.name">
+    <template slot="title">
+      <i class="el-icon-location"></i>
+      <span slot="title">{{routerInfo.meta.title}}</span>
+    </template>
+    <slot></slot>
+  </el-submenu>
+</template>
+
+<script>
+export default {
+  name: 'SubMenu',
+  props: {
+    routerInfo: {
+      default: function() {
+        return null
+      },
+      type: Object
+    }
+  }
+}
+</script>
+<style lang="scss">
+</style>
\ No newline at end of file
diff --git a/QMPlusVuePage/src/view/layout/aside/index.vue b/QMPlusVuePage/src/view/layout/aside/index.vue
new file mode 100644
index 00000000..6816b19d
--- /dev/null
+++ b/QMPlusVuePage/src/view/layout/aside/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-menu
+  mode="vertical"
+    :collapse="isCollapse"
+    :default-active="active"
+    @select="selectMenuItem"
+    :class="['el-menu-vertical',!isCollapse&&'noCollapse']"
+  >
+  <AsideComponent :routerInfo="asyncRouters[0]"/>
+  </el-menu>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+import AsideComponent from '@/view/layout/aside/asideComponent'
+export default {
+  name: 'Aside',
+  data() {
+    return {
+      active: '',
+      isCollapse: true
+    }
+  },
+  methods: {
+    selectMenuItem(index) {
+      this.$router.push({name:index})
+    }
+  },
+  computed:{
+    ...mapGetters('router',['asyncRouters'])
+  },
+  components: {
+    AsideComponent
+  },
+  created() {
+    this.active = this.$route.name
+  }
+}
+</script>
diff --git a/QMPlusVuePage/src/view/layout/index.vue b/QMPlusVuePage/src/view/layout/index.vue
index cd4f27b3..8c754b40 100644
--- a/QMPlusVuePage/src/view/layout/index.vue
+++ b/QMPlusVuePage/src/view/layout/index.vue
@@ -1,16 +1,49 @@
 <template>
-    <div>
-        模板框
-        <router-view></router-view>
-    </div>
+  <el-container class="layout-cont">
+    <el-header class="header-cont">顶部</el-header>
+    <el-container>
+      <el-aside class="main-cont main-left">
+        <Aside />
+      </el-aside>
+      <el-main class="main-cont main-right">
+        <transition name="el-fade-in-linear" mode="out-in">
+          <router-view></router-view>
+        </transition>
+      </el-main>
+    </el-container>
+  </el-container>
 </template>
 
 <script>
+import Aside from '@/view/layout/aside'
 export default {
-    name:"Layout"
+  name: 'Layout',
+  components: {
+    Aside
+  }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+$headerHigh: 52px;
+$mainHight: calc(100vh - 52px);
+.layout-cont {
+  .header-cont {
+    height: $headerHigh !important;
+    background: palevioletred;
+  }
+  .main-cont {
+    .el-menu-vertical {
+      min-height: $mainHight !important;
+    }
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    &.main-left {
+      width: auto !important;
+    }
+    background: blueviolet;
+    height: $mainHight !important;
+  }
+}
 </style>
\ No newline at end of file