|
@@ -5,47 +5,7 @@
|
|
|
<el-col :span="24" class="one">
|
|
|
<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="false" unique-opened router>
|
|
|
<template v-for="item in items">
|
|
|
- <!-- 二级菜单 -->
|
|
|
- <template v-if="item.type === '0'">
|
|
|
- <el-submenu :index="item._id || item.index" :key="item._id">
|
|
|
- <template slot="title">
|
|
|
- <i :class="['iconfont', item.icon]"></i>
|
|
|
- <span slot="title">{{ item.name }}</span>
|
|
|
- </template>
|
|
|
- <template v-for="subItem in item.children">
|
|
|
- <!-- 三级菜单 -->
|
|
|
- <el-submenu
|
|
|
- v-if="subItem.children && subItem.children.length > 0 && subItem.children.every((f) => f.type === '0' || f.type === '1')"
|
|
|
- :index="subItem._id"
|
|
|
- :key="subItem._id"
|
|
|
- >
|
|
|
- <template slot="title">
|
|
|
- <i :class="['iconfont', subItem.icon]"></i>
|
|
|
- <span slot="title">{{ subItem.name }}</span>
|
|
|
- </template>
|
|
|
- <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
|
|
|
- <template slot="title">
|
|
|
- <i :class="['iconfont', threeItem.icon]"></i>
|
|
|
- <span slot="title">{{ threeItem.name }}</span>
|
|
|
- </template>
|
|
|
- </el-menu-item>
|
|
|
- </el-submenu>
|
|
|
- <el-menu-item v-else :index="subItem.path" :key="subItem.path">
|
|
|
- <template slot="title">
|
|
|
- <i :class="['iconfont', subItem.icon]"></i>
|
|
|
- <span slot="title">{{ subItem.name }}</span>
|
|
|
- </template>
|
|
|
- </el-menu-item>
|
|
|
- </template>
|
|
|
- </el-submenu>
|
|
|
- </template>
|
|
|
- <!-- 一级菜单 -->
|
|
|
- <template v-else>
|
|
|
- <el-menu-item class="first" :index="item.path" :key="item.path">
|
|
|
- <i :class="['iconfont', item.icon]"></i>
|
|
|
- <span slot="title">{{ item.name }}</span>
|
|
|
- </el-menu-item>
|
|
|
- </template>
|
|
|
+ <menu-item :key="item._id" :item="item"></menu-item>
|
|
|
</template>
|
|
|
</el-menu>
|
|
|
</el-col>
|
|
@@ -55,20 +15,20 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-const { system, platActiviMenu, adminMenu, devMenu } = require('./data/menu');
|
|
|
-const { menuInfo } = require('./data/site');
|
|
|
+import menuItem from './sidebar/menu-item.vue';
|
|
|
+const { devMenu } = require('./data/menu');
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions } = createNamespacedHelpers('menus');
|
|
|
import _ from 'lodash';
|
|
|
import bus from './bus';
|
|
|
export default {
|
|
|
name: 'Sidebar',
|
|
|
props: {},
|
|
|
- components: {},
|
|
|
+ components: { menuItem },
|
|
|
data: function () {
|
|
|
return {
|
|
|
- menuInfo: menuInfo,
|
|
|
collapse: false,
|
|
|
- items: [...system, ...adminMenu],
|
|
|
+ items: [],
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -78,13 +38,26 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
+ ...mapActions(['query', 'userMenu']),
|
|
|
async getMenu() {
|
|
|
- const { options } = this.$router;
|
|
|
- if (!options) {
|
|
|
- console.warn('获取菜单:解析base错误');
|
|
|
- return;
|
|
|
+ const menu = _.get(this.user, 'role.menu', {});
|
|
|
+ const mode = _.get(menu, 'mode');
|
|
|
+ if (mode === 'all') {
|
|
|
+ await this.getAllMenu();
|
|
|
+ if (this.$dev_env) this.items.unshift(...devMenu);
|
|
|
+ } else await this.getUserMenu();
|
|
|
+ },
|
|
|
+ async getAllMenu() {
|
|
|
+ const res = await this.query();
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `items`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getUserMenu() {
|
|
|
+ const res = await this.userMenu();
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `items`, res.data);
|
|
|
}
|
|
|
- if (this.$dev_env) this.items.unshift(...devMenu);
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
@@ -101,7 +74,7 @@ export default {
|
|
|
deep: true,
|
|
|
immediate: true,
|
|
|
handler(val) {
|
|
|
- this.getMenu();
|
|
|
+ if (_.get(val, 'role')) this.getMenu();
|
|
|
},
|
|
|
},
|
|
|
},
|
|
@@ -126,12 +99,4 @@ export default {
|
|
|
.sidebar > ul {
|
|
|
height: 100%;
|
|
|
}
|
|
|
-.main {
|
|
|
- .one {
|
|
|
- .iconfont {
|
|
|
- font-size: 18px;
|
|
|
- margin: 0 5px 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|