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',
                showFlag: getToken()&&JSON.parse(getToken()).is_inner === 'true' ? true : false,
                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',
                    }
                ]
            }
        ]
        menuList.forEach(item=>{
            if(item.showFlag){
                this.menuList.push(item)
            }else{
                if(this.codeList.indexOf(item.code)>-1){
                    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){
                            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>