PageSidebar.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <div id='page-sidebar-wrapper' class='page-sidebar-wrapper'>
  3. <el-menu
  4. :collapse='sidebarClosed'
  5. :default-active='sidebarSelected'
  6. @open='handleOpen'
  7. @close='handleClose'
  8. @select='menuSelect'
  9. background-color='#364150'
  10. text-color='#fff'
  11. active-text-color='#ffd04b'
  12. unique-opened
  13. router
  14. class='sidebar-menu'
  15. >
  16. <template v-for='menu in menus'>
  17. <el-submenu v-if='menu.children' :index='menu.path' :key='menu.path' class='sidebar-menu-submenu'>
  18. <template slot='title'>
  19. <i v-if='menu.icon' :class='"el-icon-fa "+ menu.icon'></i>
  20. <span>{{menu.name}}</span>
  21. </template>
  22. <template v-for='submenu in menu.children'>
  23. <el-menu-item :index='submenu.path' :key='submenu.path' class='sidebar-menu-item'>
  24. <i v-if='submenu.icon' :class='"el-icon-fa "+ submenu.icon'></i>
  25. <span slot='title'>{{submenu.name}}</span>
  26. </el-menu-item>
  27. </template>
  28. </el-submenu>
  29. <el-menu-item v-else :index='menu.path' :key='menu.path' class='sidebar-menu-item' disabled>
  30. <i v-if='menu.icon' :class='"el-icon-fa "+ menu.icon'></i>
  31. <span slot='title'>{{menu.name}}</span>
  32. </el-menu-item>
  33. </template>
  34. </el-menu>
  35. </div>
  36. </template>
  37. <script>
  38. import { mapGetters, mapMutations } from 'vuex'
  39. import frameworkApi from '@/api/framework'
  40. export default {
  41. name: 'PageSidebar',
  42. props: [],
  43. data() {
  44. return {}
  45. },
  46. computed: {
  47. ...mapGetters('layout', ['sidebarClosed', 'sidebarSelected', 'permissions']),
  48. menus() {
  49. // console.log(this.permissions)
  50. let menus = frameworkApi.getMenus(this.permissions)
  51. // console.log('sidebar menus ', menus)
  52. return menus
  53. }
  54. },
  55. methods: {
  56. ...mapMutations('layout', ['setSidebarSelected']),
  57. handleOpen(val) {
  58. // console.log('handleOpen------------- ', val)
  59. },
  60. handleClose(val) {
  61. // console.log('handleClose------------- ', val)
  62. },
  63. menuSelect(index, indexPath) {
  64. this.setSidebarSelected(index)
  65. // console.log('menu select ', index, indexPath)
  66. }
  67. },
  68. created() {
  69. // console.log('--------------------- PageSidebar created')
  70. // console.log('menus ', this.menus)
  71. },
  72. mounted() {},
  73. components: {}
  74. }
  75. </script>