PageSidebar.vue 3.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <div id='page-sidebar-wrapper' class='page-sidebar-wrapper'>
  3. <el-scrollbar tag="div" wrapClass="content-scrollbar">
  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='"iconfont "+ menu.icon'></i>
  21. <span>{{menu.name}}</span>
  22. </template>
  23. <template v-for='submenu in menu.children'>
  24. <el-submenu v-if='submenu.children' :index='submenu.path' :key='submenu.path' class='sidebar-menu-submenu'>
  25. <template slot='title'>
  26. <i v-if='submenu.icon' :class='"iconfont "+ submenu.icon'></i>
  27. <span>{{submenu.name}}</span>
  28. </template>
  29. <template v-for='threemenu in submenu.children'>
  30. <el-menu-item :index='threemenu.path' :key='threemenu.path' class='sidebar-menu-item'>
  31. <i v-if='threemenu.icon' :class='"iconfont "+ threemenu.icon'></i>
  32. <span slot='title'>{{threemenu.name}}</span>
  33. </el-menu-item>
  34. </template>
  35. </el-submenu>
  36. <el-menu-item v-else :index='submenu.path' :key='submenu.path' class='sidebar-menu-item'>
  37. <i v-if='submenu.icon' :class='"iconfont "+ submenu.icon'></i>
  38. <span slot='title'>{{submenu.name}}</span>
  39. </el-menu-item>
  40. </template>
  41. </el-submenu>
  42. <el-menu-item v-else :index='menu.path' :key='menu.path' class='sidebar-menu-item' :disabled="menu.disabled">
  43. <i v-if='menu.icon' :class='"iconfont "+ menu.icon'></i>
  44. <span slot='title'>{{menu.name}}</span>
  45. </el-menu-item>
  46. </template>
  47. </el-menu>
  48. </el-scrollbar>
  49. </div>
  50. </template>
  51. <script>
  52. import { mapGetters, mapMutations } from 'vuex'
  53. import frameworkApi from '@/api/framework'
  54. export default {
  55. name: 'PageSidebar',
  56. props: [],
  57. data() {
  58. return {}
  59. },
  60. computed: {
  61. ...mapGetters('layout', ['sidebarClosed', 'sidebarSelected', 'permissions']),
  62. menus() {
  63. // console.log(this.permissions)
  64. let menus = frameworkApi.getMenus(this.permissions)
  65. // console.log('sidebar menus ', menus)
  66. return menus
  67. }
  68. },
  69. methods: {
  70. ...mapMutations('layout', ['setSidebarSelected']),
  71. handleOpen(val) {
  72. // console.log('handleOpen------------- ', val)
  73. },
  74. handleClose(val) {
  75. // console.log('handleClose------------- ', val)
  76. },
  77. menuSelect(index, indexPath) {
  78. this.setSidebarSelected(index)
  79. // console.log('menu select ', index, indexPath)
  80. }
  81. },
  82. created() {
  83. // console.log('--------------------- PageSidebar created')
  84. // console.log('menus ', this.menus)
  85. },
  86. mounted() {},
  87. components: {}
  88. }
  89. </script>
  90. <style>
  91. .page-sidebar-wrapper .el-menu-item, .el-submenu__title {
  92. height: 46px;
  93. line-height: 46px;
  94. }
  95. </style>