二级菜单

src/pages/shells/index/index.vue

@@ -5,8 +5,8 @@
         <img src="../../../images/aio/logo_1.png" alt="诺力">
       </div>
       <div class="horizontal-menu-container">
-        <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect">
-          <el-menu-item :index="menu.router" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
+        <el-menu :default-active="$route.meta.jumpPath" mode="horizontal" @select="handleSelect">
+          <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
         </el-menu>
       </div>
       <div class="header-wraper__right">
@@ -46,7 +46,14 @@
         </div>
       </div>
     </div>
-    <router-view></router-view>
+    <div class="body-conatiner">
+      <div v-show="$route.path !== '/index/teach'" class="side-bar-container">
+        <el-menu :default-active="$route.meta.guidePath" @select="handleSelectChild">
+          <el-menu-item :index="menu.index" v-for="menu in childmenus" :key="menu.index">{{menu.label}}</el-menu-item>
+        </el-menu>
+      </div>
+      <router-view></router-view>
+    </div>
     <jxDialog
     ref="child"
     title="修改密码"
@@ -98,27 +105,80 @@ export default {
       menus: [{
         label: '首页',
         index: '1',
-        router: '/homehome'
+        router: '',
+        children: [{
+          label: '首页',
+          index: '1',
+          router: '/index/home'
+        }]
       }, {
         label: '任务管理',
         index: '2',
-        router: '/CarryPoint'
+        router: '',
+        children: [{
+          label: '搬运站点',
+          index: '1',
+          router: '/index/carrypoint'
+        }, {
+          label: '任务列表',
+          index: '2',
+          router: '/index/tasklists'
+        }, {
+          label: '任务操作',
+          index: '3',
+          router: '/index/taskoperates'
+        }]
       }, {
         label: '故障管理',
         index: '3',
-        router: '/ErrorInfo'
+        router: '',
+        children: [{
+          label: '故障信息',
+          index: '1',
+          router: '/index/errorinfo'
+        }, {
+          label: '故障处理',
+          index: '2',
+          router: '/index/errordeal'
+        }]
       }, {
         label: '车辆信息',
         index: '4',
-        router: '/vehiclestatus'
+        router: '',
+        children: [{
+          label: '车辆状态',
+          index: '1',
+          router: '/index/vehiclestatus'
+        }, {
+          label: '车辆控制',
+          index: '2',
+          router: '/index/vehiclecontrol'
+        }]
       }, {
         label: '示教',
         index: '5',
-        router: '/teach'
+        router: '/index/teach'
       }, {
         label: '系统管理',
         index: '6',
-        router: '/user'
+        router: '',
+        children: [{
+          label: '用户管理',
+          index: '1',
+          router: '/index/user'
+        }, {
+          label: '角色管理',
+          index: '2',
+          router: '/index/role'
+        }, {
+          label: '系统参数',
+          index: '3',
+          router: '/index/system'
+        }, {
+          label: '开发者选项',
+          index: '4',
+          router: '/index/developer'
+        }]
       }],
       dropdown: false,
       oldpassword: '',
@@ -127,6 +187,14 @@ export default {
       unclick: false
     }
   },
+  computed: {
+    routerPath () {
+      return this.$route.meta.jumpPath
+    },
+    childmenus () {
+      return this.menus[Number(this.$route.meta.jumpPath) - 1].children
+    }
+  },
   watch: {
     oldpassword (val) {
       if (val === '' || this.newpassword1 === '' || this.newpassword2 === '') {
@@ -150,11 +218,31 @@ export default {
       }
     }
   },
+  created () {
+    this.menus.map(el => {
+      if (el.router === this.$route.path) {
+        this.childmenus = el.children
+      }
+    })
+  },
   methods: {
     handleSelect (key) {
       this.dropdown = false
-      this.$router.push({
-        path: key
+      this.menus.map(el => {
+        if (el.router === '' && el.index === key) {
+          this.$router.push({ path: el.children[0].router })
+        }
+        if (key === '5') {
+          this.$router.push({ path: el.router })
+        }
+      })
+    },
+    handleSelectChild (key) {
+      this.dropdown = false
+      this.childmenus.map(el => {
+        if (el.index === key) {
+          this.$router.push({ path: el.router })
+        }
       })
     },
     showDropdown () {
@@ -235,9 +323,11 @@ export default {
   height 100%
   padding 0 10px
 >>>.el-menu--horizontal>.el-menu-item
-  line-height 79px
-  height 79px
+  line-height 80px
+  height 80px
   font-size 18px
+>>>.el-menu.el-menu--horizontal
+  border-bottom 0
 .time-container
   _fj()
 .state-item
@@ -296,9 +386,11 @@ export default {
 .header_dropdown_wraper
   position absolute
   top 90%
-  left 0
+  left 50%
+  transform translateX(-50%)
   z-index 1000
   width 100%
+  min-width 100px
   background-color #fff
   border 1px solid #ebeef5
   border-radius 4px
@@ -322,7 +414,8 @@ export default {
   border-width: 6px;
   filter: drop-shadow(0 2px 12px rgba(0,0,0,.03))
   top: -6px;
-  left: 32px;
+  left: 50%;
+  transform: translateX(-6px)
   margin-right: 3px;
   border-top-width: 0;
   border-bottom-color: #ebeef5;
@@ -339,6 +432,13 @@ export default {
     margin-left: -6px;
     border-top-width: 0;
     border-bottom-color: #fff;
+.side-bar-container
+    >>>.el-menu-item a
+        color #909399
+    >>>.is-active
+        background-color: #ecf5ff
+    >>>.is-active a
+        color #409EFF
 @media only screen and (max-width: 1620px) {
 .title-container {
   width 150px