菜单筛选

src/layout/Sidebar.vue

@@ -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>

src/layout/sidebar/menu-item.vue

@@ -0,0 +1,41 @@
+<template>
+  <span 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="ci in item.children">
+        <menu-item :key="ci._id" :item="ci"></menu-item>
+      </template>
+    </el-submenu>
+  </span>
+  <span 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>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'menu-item',
+  props: { item: { type: Object, required: true } }, // 菜单设置
+  components: {},
+  data: function () {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .iconfont {
+      font-size: 18px;
+      margin: 0 5px 0 0;
+    }
+  }
+}</style>

src/store/module/dev/menus.js

@@ -35,6 +35,10 @@ const actions = {
     const res = await this.$axios.$delete(`${api.url}/${payload}`);
     return res;
   },
+  async userMenu({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.url}/getUserMenu`);
+    return res;
+  },
 };
 export default {
   namespaced: true,