admin-cms-1/src/layout/layout-part/newmenu.vue

<template lang="html">
  <div id="sideMenu">
    <div id="menuBox">
      <el-col :span="24">
        <el-menu :unique-opened="true">
          <el-submenu v-for="(item, index) in menu" :key="index" :index="`${index}`">
            <template slot="title">
              <i class="el-icon-s-grid"></i>
              <span>{{ item.name }}</span>
            </template>
            <a v-for="(menu_item, menu_index) in item.menu" :key="menu_index" @click="turnTo(menu_item.uri)">
              <el-menu-item :index="`${index}-${menu_index}`"
                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="el-icon-s-grid"></i>{{ menu_item.name }}</el-menu-item
              >
            </a>
          </el-submenu>
        </el-menu>
      </el-col>
    </div>
  </div>
</template>

<script>
import { system, personnel, government, record, serve, enterprise, duijiehui, site, user, links, permission, dictionary } from '@/util/role_menu.js';
import * as menus from '@/util/role_menu.js';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('marketcolumn');
import _ from 'lodash';
export default {
  name: 'sideMenu',
  components: {},
  data() {
    return {
      menu: [],
    };
  },
  computed: {
    ...mapState(['user']),
  },
  created() {
    this.serrch();
    if (this.menu.length === 0) this.getMenuList();
  },
  methods: {
    ...mapActions(['fetch', 'create', 'update', 'query']),
    async serrch() {
      const res = await this.query();
      for (const val of this.user.columnid) {
        var result = res.data.filter(item => item.id == val);
        for (const acc of result) {
          if (acc.name == system.name) {
            this.menu.push(system);
          } else if (acc.name == personnel.name) {
            this.menu.push(personnel);
          } else if (acc.name == government.name) {
            this.menu.push(government);
          } else if (acc.name == record.name) {
            this.menu.push(record);
          } else if (acc.name == serve.name) {
            this.menu.push(serve);
          } else if (acc.name == enterprise.name) {
            this.menu.push(enterprise);
          } else if (acc.name == site.name) {
            this.menu.push(site);
          } else if (acc.name == user.name) {
            this.menu.push(user);
          } else if (acc.name == links.name) {
            this.menu.push(links);
          } else if (acc.name == permission.name) {
            this.menu.push(permission);
          } else if (acc.name == dictionary.name) {
            this.menu.push(dictionary);
          }
          console.log(this.menu);
        }
      }
    },

    turnTo(uri) {
      this.$router.push({ path: uri });
    },

    getMenuList() {
      let res = _.uniqBy(this.menuList, 'menuid');
      for (const item of res) {
        this.menu.push(_.get(menus, item.code));
      }
    },
    openMenuList(index) {
      if (!this.$refs.collapse[index].show) {
        this.$refs.collapse.forEach(item => {
          item.show = false;
        });
        this.$refs.collapse[index].show = true;
      } else {
        this.$refs.collapse[index].show = false;
      }
    },
  },
};
</script>

<style lang="less" scoped></style>