From 327ed42e247bc3577948d8bfe8c6239bd803bab9 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 31 May 2017 15:52:27 +0800
Subject: [PATCH] sidebar accept  Nested Routes

---
 src/router/index.js                           | 24 ++++++----
 src/views/example/{ => table}/dragTable.vue   |  0
 .../example/{ => table}/dynamictable.vue      |  0
 src/views/example/table/index.vue             |  3 ++
 .../example/{ => table}/inlineEditTable.vue   |  0
 src/views/example/{ => table}/table.vue       |  0
 src/views/layout/Sidebar.vue                  | 32 ++-----------
 src/views/layout/SidebarItem.vue              | 46 +++++++++++++++++++
 8 files changed, 69 insertions(+), 36 deletions(-)
 rename src/views/example/{ => table}/dragTable.vue (100%)
 rename src/views/example/{ => table}/dynamictable.vue (100%)
 create mode 100644 src/views/example/table/index.vue
 rename src/views/example/{ => table}/inlineEditTable.vue (100%)
 rename src/views/example/{ => table}/table.vue (100%)
 create mode 100644 src/views/layout/SidebarItem.vue

diff --git a/src/router/index.js b/src/router/index.js
index e5b3de83..d7674a2c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -51,10 +51,11 @@ const ExcelDownload = () => import('../views/excel/index');
 const Theme = () => import('../views/theme/index');
 
 /* example*/
-const DynamicTable = () => import('../views/example/dynamictable');
-const Table = () => import('../views/example/table');
-const DragTable = () => import('../views/example/dragTable');
-const InlineEditTable = () => import('../views/example/inlineEditTable');
+const TableLayout = () => import('../views/example/table/index');
+const DynamicTable = () => import('../views/example/table/dynamictable');
+const Table = () => import('../views/example/table/table');
+const DragTable = () => import('../views/example/table/dragTable');
+const InlineEditTable = () => import('../views/example/table/inlineEditTable');
 const Form1 = () => import('../views/example/form1');
 
 /* permission */
@@ -192,10 +193,17 @@ export const asyncRouterMap = [
     name: '综合实例',
     icon: 'zonghe',
     children: [
-      { path: 'dynamictable', component: DynamicTable, name: '动态table' },
-      { path: 'dragtable', component: DragTable, name: '拖拽table' },
-      { path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
-      { path: 'table', component: Table, name: '综合table' },
+      {
+        path: '/table',
+        component: TableLayout,
+        name: 'table',
+        children: [
+          { path: 'dynamictable', component: DynamicTable, name: '动态table' },
+          { path: 'dragtable', component: DragTable, name: '拖拽table' },
+          { path: 'inline_edit_table', component: InlineEditTable, name: 'table内编辑' },
+          { path: 'table', component: Table, name: '综合table' }
+        ]
+      },
       { path: 'form1', component: Form1, name: '综合form1' }
     ]
   },
diff --git a/src/views/example/dragTable.vue b/src/views/example/table/dragTable.vue
similarity index 100%
rename from src/views/example/dragTable.vue
rename to src/views/example/table/dragTable.vue
diff --git a/src/views/example/dynamictable.vue b/src/views/example/table/dynamictable.vue
similarity index 100%
rename from src/views/example/dynamictable.vue
rename to src/views/example/table/dynamictable.vue
diff --git a/src/views/example/table/index.vue b/src/views/example/table/index.vue
new file mode 100644
index 00000000..a44ab87b
--- /dev/null
+++ b/src/views/example/table/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>
diff --git a/src/views/example/inlineEditTable.vue b/src/views/example/table/inlineEditTable.vue
similarity index 100%
rename from src/views/example/inlineEditTable.vue
rename to src/views/example/table/inlineEditTable.vue
diff --git a/src/views/example/table.vue b/src/views/example/table/table.vue
similarity index 100%
rename from src/views/example/table.vue
rename to src/views/example/table/table.vue
diff --git a/src/views/layout/Sidebar.vue b/src/views/layout/Sidebar.vue
index c4cab5c0..d06f72f9 100644
--- a/src/views/layout/Sidebar.vue
+++ b/src/views/layout/Sidebar.vue
@@ -1,30 +1,14 @@
 <template>
-    <el-menu :unique-opened='true' mode="vertical" theme="dark" :default-active="$route.path">
-        <template v-for="item in permission_routers" v-if="!item.hidden">
-            <el-submenu :index="item.name" v-if="!item.noDropdown">
-                <template slot="title">
-                    <wscn-icon-svg :icon-class="item.icon||'wenzhang1'" /> {{item.name}}
-                </template>
-                <router-link v-for="child in item.children" :key="child.path" v-if="!child.hidden" class="title-link" :to="item.path+'/'+child.path">
-                    <el-menu-item :index="item.path+'/'+child.path">
-                        {{child.name}}
-                    </el-menu-item>
-                </router-link>
-            </el-submenu>
-            <router-link v-if="item.noDropdown&&item.children.length>0"  :to="item.path+'/'+item.children[0].path">
-                <el-menu-item :index="item.path+'/'+item.children[0].path">
-                    <wscn-icon-svg :icon-class="item.icon||'geren1'" /> {{item.children[0].name}}
-                </el-menu-item>
-            </router-link>
-        </template>
+    <el-menu mode="vertical" theme="dark" :default-active="$route.path">
+        <sidebar-item :routes='permission_routers'></sidebar-item>
     </el-menu>
 </template>
 
 <script>
     import { mapGetters } from 'vuex';
-
+    import  SidebarItem from './SidebarItem';
     export default {
-      name: 'Sidebar',
+      components:{SidebarItem},
       computed: {
         ...mapGetters([
           'permission_routers'
@@ -32,16 +16,8 @@
       }
     }
 </script>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
     .el-menu {
         min-height: 100%;
     }
-    .wscn-icon {
-        margin-right: 10px;
-    }
-    .hideSidebar .title-link{
-        display: block;
-        text-indent: 10px;
-    }
 </style>
diff --git a/src/views/layout/SidebarItem.vue b/src/views/layout/SidebarItem.vue
new file mode 100644
index 00000000..2d9b85cf
--- /dev/null
+++ b/src/views/layout/SidebarItem.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <template v-for="item in routes">
+            <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
+                <el-menu-item :index="item.path+'/'+item.children[0].path">
+                    <wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
+                </el-menu-item>
+            </router-link>
+            <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
+                <template slot="title">
+                    <wscn-icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
+                </template>
+                <template v-for="child in item.children" v-if='!child.hidden'>
+                    <sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
+                    <router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
+                        <el-menu-item :index="item.path+'/'+child.path">
+                            {{child.name}}
+                        </el-menu-item>
+                    </router-link>
+                </template>
+            </el-submenu>
+        </template>
+    </div>
+</template>
+
+<script>
+
+    export default {
+      name: 'SidebarItem',
+      props: {
+        routes: {
+          type: Array
+        }
+      }
+    }
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .wscn-icon {
+        margin-right: 10px;
+    }
+    .hideSidebar .menu-indent{
+        display: block;
+        text-indent: 10px;
+    }
+</style>
+