HM21St_Page_Manager/src/components/NavMenu.vue

<template v-if="menuList && menuList.length > 0">
  <div :class="[isPhone ? 'nav-menu-box-phone' : 'nav-menu-box']">
    <svg-icon
      icon-class="menu"
      class="nav-menu-btn"
      @click="showMenu = !showMenu"
      v-if="isPhone"
    ></svg-icon>
    <el-menu
      :default-active="activeMenuIndex"
      :unique-opened="true"
      :router="true"
      class="nav-menu"
      :class="[isPhone ? 'nav-menu-phone' : '']"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      v-show="showMenu"
    >
      <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>
  </div>
</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
          : [],
      isPhone: false,
      showMenu: true,
    };
  },
  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");
      if (this.isPhone) {
        this.showMenu = false;
      }
    },
    // 处理菜单权限
    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",
          node: [
            {
              title: "机构列表",
              index: "organize_manage",
              code: 10002,
            },
            {
              title: "全部人员",
              index: "organize_people_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",

          node: [
            {
              title: "流水管理",
              index: "flow_manage",
              code: 40001,
            },
            {
              title: "退款管理",
              index: "refund_manage",
              code: 40003,
            },
            {
              title: "发票管理",
              index: "invoice_manage",
              code: 40004,
            },
          ],
        },
        {
          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",
            },
            {
              title: "聚水潭对接配置",
              index: "jst_setting",
            },
            {
              title: "企信对接配置",
              index: "qx_setting",
            },
          ],
        },
      ];
      if (this.isPhone) {
        menuList = [
          {
            title: "机构管理",
            icon: "school-line",
            index: "organize_manage",
            node: [
              {
                title: "全部人员",
                index: "organize_people_manage",
                code: 10002,
              },
            ],
          },
          {
            title: "财务中心",
            icon: "money-cny-box-line",
            index: "finance_manage",

            node: [
              {
                title: "流水管理",
                index: "flow_manage",
                code: 40001,
              },
              {
                title: "退款管理",
                index: "refund_manage",
                code: 40003,
              },
            ],
          },
        ];
      }
      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() {
    const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
    this.isPhone = regExp.test(navigator.userAgent) && window.innerWidth < 860;
    if (this.isPhone) {
      this.showMenu = false;
    }
    this.handleMenu();
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.nav-menu-box-phone {
  position: fixed;
  left: 0;
  top: 52px;
  z-index: 1001;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 8%);
  padding: 0;
}
.nav-menu-box {
  background-color: #fff;
  border-right: solid 1px #e6e6e6;
}
:deep .el-menu {
  border-right: none;
  width: 100% !important;
}

.nav-menu-btn {
  position: fixed;
  padding: 17px;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 52px !important;
  height: 52px !important;
}
</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>