PageSidebar.vue 2.7 KB

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