12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <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.children' :index='menu.path' :key='menu.path' 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.children'>
- <el-submenu v-if='submenu.children' :index='submenu.path' :key='submenu.path' 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.children'>
- <el-menu-item :index='threemenu.path' :key='threemenu.path' 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.path' :key='submenu.path' 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.path' :key='menu.path' class='sidebar-menu-item' :disabled="menu.disabled">
- <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 { mapGetters, mapMutations } from 'vuex'
- import frameworkApi from '@/api/framework'
- export default {
- name: 'PageSidebar',
- props: [],
- data() {
- return {}
- },
- computed: {
- ...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 ', this.menus)
- },
- mounted() {},
- components: {}
- }
- </script>
- <style>
- .page-sidebar-wrapper .el-menu-item, .el-submenu__title {
- height: 46px;
- line-height: 46px;
- }
- </style>
|