|
@@ -1,9 +1,19 @@
|
|
|
<template>
|
|
|
- <el-aside width="200px" v-if="menuList.length > 0">
|
|
|
+ <el-aside width="" v-if="menuList.length > 0">
|
|
|
<div
|
|
|
style="height: 50px; margin-top: 20px; margin-left: 20px; font-size: 20px"
|
|
|
>
|
|
|
- <i class="el-icon-location"></i> <span>{{ group.name }}</span>
|
|
|
+ <span v-if="!isCollapse">{{ group.name }}</span>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ class="float-right"
|
|
|
+ size="mini"
|
|
|
+ style="padding: 0; padding-right: 12px;"
|
|
|
+ @click="toggoleSidebar"
|
|
|
+ >
|
|
|
+ <v-icon name="bars" scale="2" />
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
<el-menu
|
|
|
class="el-menu-vertical-demo"
|
|
@@ -12,6 +22,7 @@
|
|
|
active-text-color="#409eff"
|
|
|
router
|
|
|
:default-active="$route.path"
|
|
|
+ :collapse="isCollapse"
|
|
|
>
|
|
|
<el-submenu
|
|
|
v-for="menu1 in menuList1"
|
|
@@ -19,6 +30,7 @@
|
|
|
:index="menu1.nodeCode"
|
|
|
>
|
|
|
<template slot="title">
|
|
|
+ <i class="el-icon-menu"></i>
|
|
|
<router-link
|
|
|
v-if="menu1.ext5"
|
|
|
:to="{ path: menu1.ext5 }"
|
|
@@ -98,7 +110,8 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
group: null,
|
|
|
- menuList: []
|
|
|
+ menuList: [],
|
|
|
+ isCollapse: false
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
@@ -111,6 +124,9 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
...mapMutations([UPDATE_CURRENT_PATHS]),
|
|
|
+ toggoleSidebar() {
|
|
|
+ this.isCollapse = !this.isCollapse;
|
|
|
+ },
|
|
|
async getUserPrivileges(groupCode) {
|
|
|
var url = CORE_API + "/rolePrivilege/getUserPrivileges";
|
|
|
const params = new URLSearchParams();
|
|
@@ -163,6 +179,12 @@ export default {
|
|
|
.el-menu-vertical-demo {
|
|
|
height: calc(100vh - 60px - 70px);
|
|
|
}
|
|
|
+
|
|
|
+.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
+ width: 200px;
|
|
|
+ min-height: 400px;
|
|
|
+}
|
|
|
+
|
|
|
.el-aside {
|
|
|
background: rgba(34, 44, 50, 1);
|
|
|
color: #fff;
|