adm-front/src/framework/layout/PageSidebar.vue

<template>
    <div id='page-sidebar-wrapper' class='page-sidebar-wrapper'>
        <el-scrollbar tag="div" wrapClass="content-scrollbar">
        <el-menu
            :collapse='sidebarClosed'
            :default-active='sidebarSelected'
            @open='handleOpen'
            @close='handleClose'
            @select='menuSelect'
            background-color='#364150'
            text-color='#fff'
            active-text-color='#ffd04b'
            unique-opened
            router
            class='sidebar-menu'
        >
            <template v-for='menu in menus'>
                <el-submenu v-if='menu.menuChildrens && menu.menuChildrens.length' :index='menu.url' :key='menu.id' class='sidebar-menu-submenu'>
                    <template slot='title'>
                        <i v-if='menu.icon' :class='"iconfont "+ menu.icon'></i>
                        <span>{{menu.name}}</span>
                    </template>
                    <template v-for='submenu in menu.menuChildrens'>
                        <el-submenu v-if='submenu.menuChildrens && submenu.menuChildrens.length' :index='submenu.url' :key='submenu.id' class='sidebar-menu-submenu'>
                            <template slot='title'>
                                <i v-if='submenu.icon' :class='"iconfont "+ submenu.icon'></i>
                                <span>{{submenu.name}}</span>
                            </template>
                            <template v-for='threemenu in submenu.menuChildrens'>
                                <el-menu-item :index='threemenu.url' :key='threemenu.id' class='sidebar-menu-item'>
                                    <i v-if='threemenu.icon' :class='"iconfont "+ threemenu.icon'></i>
                                    <span slot='title'>{{threemenu.name}}</span>
                                </el-menu-item>
                            </template>
                        </el-submenu>
                        <el-menu-item v-else :index='submenu.url' :key='submenu.id' class='sidebar-menu-item'>
                            <i v-if='submenu.icon' :class='"iconfont "+ submenu.icon'></i>
                            <span slot='title'>{{submenu.name}}</span>
                        </el-menu-item>
                    </template>
                </el-submenu>
                <el-menu-item v-else :index='menu.url' class='sidebar-menu-item'
                    :disabled="menu.disabled"
                    :key='menu.url'
                >
                    <i v-if='menu.icon' :class='"iconfont "+ menu.icon'></i>
                    <span slot='title'>{{menu.name}}</span>
                </el-menu-item>
            </template>
        </el-menu>
        </el-scrollbar>
    </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
import frameworkApi from '@/api/framework'
export default {
    name: 'PageSidebar',
    props: [],
    data() {
        return {}
    },
    computed: {
        ...mapGetters('layout', ['sidebarClosed', 'sidebarSelected', 'permissions', 'menus']),
        /**
         * 加载本地获取系统菜单
         */
        // ...mapGetters('layout', ['sidebarClosed', 'sidebarSelected', 'permissions']),
        // menus() {
        //     // console.log(this.permissions)
        //     let menus = frameworkApi.getMenus(this.permissions)
        //     // console.log('sidebar menus ', menus)
        //     return menus
        // }
    },
    methods: {
        ...mapMutations('layout', ['setSidebarSelected']),
        handleOpen(val) {
            // console.log('handleOpen------------- ', val)
        },
        handleClose(val) {
            // console.log('handleClose------------- ', val)
        },
        menuSelect(index, indexPath) {
            this.setSidebarSelected(index)
            // console.log('menu select ', index, indexPath)
        }
    },
    created() {
        // console.log('--------------------- PageSidebar created')
        // console.log('***********************************menus ', JSON.parse(JSON.stringify(this.menus)))
    },

    mounted() {},
    components: {}
}
</script>