HM21St_Page_Manager/src/components/NavMenu.vue

<template v-if="menuList && menuList.length > 0">
  <el-menu
    :default-active="activeMenuIndex"
    :unique-opened="true"
    :router="true"
    class="nav-menu"
    @open="handleOpen"
    @close="handleClose"
    @select="handleSelect"
  >
    <template v-for="(item, index) in menuList">
      <el-submenu
        :index="item.index"
        :key="index"
        v-if="item.node && item.node.length > 0"
      >
        <template slot="title">
          <svg-icon :icon-class="item.icon"></svg-icon>
          <span>{{ item.title }}</span>
        </template>
        <template v-for="(items, indexs) in item.node">
          <el-submenu
            :index="items.index"
            :key="indexs"
            v-if="items.node && items.node.length > 0"
            class="nav-item1"
          >
            <span slot="title" class="nav-item4">{{ items.title }}</span>
            <el-menu-item
              :index="itemss.index"
              :key="indexss"
              v-for="(itemss, indexss) in items.node"
              class="nav-item3"
              >{{ itemss.title }}</el-menu-item
            >
          </el-submenu>
          <el-menu-item
            :index="items.index"
            :key="indexs"
            v-else
            class="nav-item2"
            >{{ items.title }}</el-menu-item
          >
        </template>
      </el-submenu>
      <el-menu-item :index="item.index" v-else :key="index">
        <svg-icon :icon-class="item.icon"></svg-icon>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  components: {},
  name: "navMenu",
  props: ["activeMenuIndex"],
  data() {
    return {
      menuList: [],
      codeList:
        getToken() && JSON.parse(getToken())
          ? JSON.parse(getToken()).popedom_code_list
          : [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleSelect(key) {
      // this.$emit("handleSelectNav",key)
      window.localStorage.removeItem("pageSize");
      window.localStorage.removeItem("pageNumber");
      window.localStorage.removeItem("pageSizes");
      window.localStorage.removeItem("pageNumbers");
      window.localStorage.removeItem("tabsIndex");
    },
    // 处理菜单权限
    handleMenu() {
      this.menuList = [];
      let menuList = [
        {
          title: "数据中心",
          icon: "numbers-line",
          index: "data_center",
          showFlag: true,
        },
        {
          title: "内容管理",
          icon: "file-list-line",
          index: "content_manage",
          node: [
            {
              title: "报纸管理",
              index: "newspaper_manage",
              code: 20001,
            },
            {
              title: "画刊管理",
              index: "pictorial_manage",
              code: 20002,
            },
            // {
            //   title: "练习册管理",
            //   index: "workbook_manage",
            //   code: 20005,
            // },
            {
              title: "评测管理",
              index: "evaluation_manage",
              code: 20004,
            },
            {
              title: "课程管理",
              index: "course_manage",
              code: 20006,
              node: [
                {
                  title: "录播课",
                  index: "recorded_course",
                },
                {
                  title: "直播课",
                  index: "live_course",
                },
              ],
            },
            {
              title: "专辑管理",
              index: "album_manage",
              code: 20003,
            },
            {
              title: "广告管理",
              index: "advertise_manage",
              code: 20007,
            },
          ],
        },
        {
          title: "机构管理",
          icon: "school-line",
          index: "organize_manage",
          code: 10002,
        },
        {
          title: "系统用户",
          icon: "contacts-line",
          index: "people_manage",
          code: 10001,
        },
        {
          title: "兑换码管理",
          icon: "barcode-line",
          index: "cdkey_manage",
          code: 30001,
        },
        {
          title: "财务中心",
          icon: "money-cny-box-line",
          index: "finance_manage",
          code: 40001,
          node: [
            {
              title: "流水管理",
              index: "flow_manage",
            },
          ],
        },
        {
          title: "系统配置",
          icon: "setting",
          index: "system_config",
          code: 50001,
          node: [
            {
              title: "邮箱配置",
              index: "email_setting",
            },
            {
              title: "导入配置",
              index: "export_setting",
            },
            {
              title: "折扣规则",
              index: "discount_setting",
            },
            {
              title: "分享配置",
              index: "share_setting",
            },
            {
              title: "订阅价格管理",
              index: "order_setting",
            },
            {
              title: "支付配置",
              index: "pay_setting",
            },
            {
              title: "预览配置",
              index: "preview_setting",
            },
            {
              title: "精读订阅包年价格",
              index: "reservation_setting",
            },
            {
              title: "测评价格",
              index: "test_setting",
            },
            {
              title: "短信资源",
              index: "SMS_resources",
            },
          ],
        },
      ];
      menuList.forEach((item) => {
        if (item.showFlag) {
          this.menuList.push(item);
        } else {
          if (
            this.codeList.indexOf(item.code) > -1 ||
            (getToken() && JSON.parse(getToken()).is_inner === "true")
          ) {
            this.menuList.push(item);
          } else if (item.hasOwnProperty("node")) {
            let obj = {
              title: item.title,
              icon: item.icon,
              index: item.index,
              node: [],
            };
            item.node.forEach((items) => {
              if (
                this.codeList.indexOf(items.code) > -1 ||
                (getToken() && JSON.parse(getToken()).is_inner === "true")
              ) {
                obj.node.push(items);
              }
            });
            if (obj.node.length > 0) {
              this.menuList.push(obj);
            }
          }
        }
      });
    },
  },
  created() {
    this.handleMenu();
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.nav-menu {
}
</style>
<style lang="scss">
.nav-menu {
  .el-menu-item,
  .el-submenu__title {
    color: #4e5969;
    padding: 9px 12px !important;
    height: 40px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 22px;
    margin: 2px 0;
    display: flex;
    width: 100%;
    align-items: center;
    &:hover,
    &:focus {
      background: #f2f3f5;
    }
    &.is-active {
      color: #165dff;
      font-weight: 500;
      background: #f2f3f5;
    }
    .svg-icon {
      width: 14px;
      height: 14px;
      margin-right: 16px;
    }
    .el-submenu__icon-arrow {
      right: 12px;
      color: #4e5969;
    }
  }
  .nav-item2 {
    padding-left: 42px !important;
    color: #1d2129;
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .nav-item3 {
    padding-left: 50px !important;
    color: #1d2129;
  }
  .nav-item4 {
    padding-left: 30px !important;
    color: #1d2129;
  }
  .el-submenu.is-active {
    > .el-submenu__title {
      color: #165dff;
      span {
        color: #165dff;
      }
    }
  }
}
</style>