123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <template>
- <div id='page-sidebar-wrapper' class='page-sidebar-wrapper'>
- <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='"el-icon-fa "+ menu.icon'></i>
- <span>{{menu.name}}</span>
- </template>
- <template v-for='submenu in menu.children'>
- <el-menu-item :index='submenu.path' :key='submenu.path' class='sidebar-menu-item'>
- <i v-if='submenu.icon' :class='"el-icon-fa "+ 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>
- <i v-if='menu.icon' :class='"el-icon-fa "+ menu.icon'></i>
- <span slot='title'>{{menu.name}}</span>
- </el-menu-item>
- </template>
- </el-menu>
- </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>
|