简单菜单

hongqi

目录结构

仅支持到二级菜单

DIR:menu           # 菜单目录
   |-- *.vue       # 菜单子组件
   |-- menuData.js # 菜单基础数据，高可读性的数据结构
   `-- index.vue   # 菜单入口通过菜单数据最终生生成菜单

// 这里仅存放一些基本功能
// key 是路由的唯一id
// 可以在后端存放一些敏感的菜单
const routerList = {
  100: {
    id: "100",
    title: "首页",
    path: "/admin/home",
    icon: "iconfont icon-shouye aside-icon",
  },
  200: {
    id: "200",
    title: "小程序管理",
    icon: "iconfont icon-weixin1 aside-icon",
    children: ["201", "202", "203"],
  },
  2001: {
    id: "2001",
    title: "小程序管理",
    icon: "iconfont icon-weixin1 aside-icon",
    children: ["204", "201", "202", "203"],
  },
  201: {
    id: "201",
    title: "二维码管理",
    path: "/admin/serieManager",
    icon: "iconfont icon-erweima1 aside-icon",
  },
  202: {
    id: "202",
    title: "产品管理",
    path: "/admin/productManager",
    icon: "iconfont icon-chuanglian aside-icon",
  },
  203: {
    id: "203",
    title: "场景管理",
    path: "/admin/sceneManager",
    icon: "iconfont icon-changjing aside-icon",
  },
  204: {
    id: "204",
    title: "厂家管理",
    path: "/admin/factoryManager",
    icon: "iconfont icon-mendian aside-icon",
  },
};

/**
 * @Description - 根据权限列表，返回对应的菜单信息
 *
 * @param {string[]} roleList  - 权限列表，可以后端返回，也可以前端写死: ["100", "200"]
 *
 * @returns {Array<menuDataItem>} - {description}
 *
 */
function getRouter(roleList) {
  let res = [];

  for (let each of roleList) {
    let router = { ...routerList[each] };
    if (routerList[each].hasOwnProperty("children")) {
      router.children = getRouter(routerList[each]["children"]);
    }
    res.push(router);
  }
  return res;
}

// 根据角色生成菜单数据
const factory = getRouter(["100", "200"]);
const admin = getRouter(["100", "2001"]);
const Super = getRouter(["100", "2001"]);

module.exports = { factory, admin, super: Super };

<template lang="pug">
aside.hongqi__aside
  //- 首页标题
  el-menu.el-menu-vertical-demo(
    :collapse="isCollapse",
    style="height: 100%",
    router="",
    :default-active="$route.path",
    :default-openeds="openeds",
    background-color="#263445",
    text-color="#fff",
    active-text-color="#359ef3"
  )
    //- 一级菜单(不带子菜单)
    template(v-for="(eachMenu, index) in menusList")
      //- 二级菜单
      el-submenu(v-if="eachMenu.children", :index="eachMenu.id")
        template(slot="title")
          i(:class="eachMenu.icon")
          span {{ eachMenu.title }}

        el-menu-item(v-for="(children, index) in eachMenu.children", :key="index", :index="children.path")
          template(slot="title")
            i(:class="children.icon")
            span {{ children.title }}

      el-menu-item(v-else="", :index="eachMenu.path")
        i(:class="eachMenu.icon")
        span(slot="title") {{ eachMenu.title }}
</template>

<script>
import menusList from "./menuData.js";
export default {
  name: "layoutAside",
  created() {
    // 获取用户信息
    this.userinfo = this.$user(this);

    // 一个展开/收起 菜单的全局事件
    this.$Eventer.$on("aside-collapse", flag => (this.isCollapse = flag));

    let role = this.userinfo.role;
    if (menusList.hasOwnProperty(role)) {
      this.menusList = menusList[role];
    }
  },

  data() {
    return {
      dev: process.env.NODE_ENV === "development",
      isCollapse: false, // 是否折叠
      menusList: [],     // 菜单数据，最终渲染到视图
      openeds: [],       // 
    };
  },
};
</script>

<style lang="stylus">
.el-menu-vertical-demo:not(.el-menu--collapse)
  width 220px
  min-height 400px

.hongqi__aside
  .aside-icon
    margin-right 5px

</style>