live-cms/src/layout/layout-part/newmenu.vue

<template lang="html">
  <div id="sideMenu">
    <div id="menuBox">
      <el-col :span="24">
        <el-menu :unique-opened="true">
          <template v-for="item in menu">
            <template v-if="!item.children">
              <el-menu-item :index="item.path" @click="selectMenu(item.path)" :key="item.name">
                <i v-if="item.icon" :class="item.icon"></i>
                <span v-if="item.name" slot="title">{{ item.name }}</span>
              </el-menu-item>
            </template>

            <el-submenu v-else :index="item.name || item.path" :key="item.name">
              <template slot="title">
                <i v-if="item && item.icon" :class="item.icon"></i>
                <span v-if="item && item.name" slot="title">{{ item.name }}</span>
              </template>
              <template v-for="(child, childIndex) in item.children">
                <div :key="childIndex" v-if="!child.hidden">
                  <el-menu-item :index="item.path || '' + child.path" @click="selectMenu(item.path || '' + child.path)">
                    <span v-if="child && child.name" slot="title">{{ child.name }}</span>
                  </el-menu-item>
                </div>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-col>
    </div>
  </div>
</template>

<script>
import {
  index,
  menu,
  // department,
  permission,
  adminUser,
  business,
  vip,
  user,
  duijiehui,
  enterpriseProduct,
  enterpriseTrans,
  technical,
  defaultMenu,
} from '@/util/role_menu.js';
import * as menus from '@/util/role_menu.js';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('login');
import _ from 'lodash';
export default {
  name: 'sideMenu',
  components: {},
  data() {
    return {
      menu: [],
    };
  },
  computed: {
    ...mapState(['user']),
  },
  created() {},
  methods: {
    ...mapActions(['toGetMenu', 'logout']),
    async search() {
      if (!this.user.uid) return;
      if (this.user.role == '0') {
        this.menu.push(
          index,
          menu,
          // department,
          permission,
          adminUser,
          business,
          vip,
          user,
          duijiehui,
          enterpriseProduct,
          enterpriseTrans,
          technical,
          defaultMenu
        );
        return;
      }
      const res = await this.toGetMenu({ id: this.user.uid });
      if (this.$checkRes(res)) {
        let menu = res.data.menus;
        menu = menu.map(i => {
          return { name: i.role_name, path: i.url };
        });
        let duplicate = JSON.parse(JSON.stringify(this.menu));
        duplicate.push(...menu);
        let nm = _.uniqBy(duplicate, 'path');
        this.$set(this, `menu`, nm);
      }
    },
    selectMenu(path) {
      this.$router.push({ path: path });
    },
  },
  watch: {
    user: {
      handler(val, oval) {
        if (val && !_.isEqual(val, oval)) this.search();
      },
      immediate: true,
    },
  },
};
</script>

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