Newer
Older
KaiFengPC / src / layout / components / Sidebar / index.vue
@zhangdeliang zhangdeliang on 27 Jul 3 KB update
  1. <template>
  2. <div
  3. :class="{ 'has-logo': showLogo }"
  4. :style="{
  5. backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground,
  6. }"
  7. >
  8. <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
  9. <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
  10. <el-menu
  11. :default-active="activeMenu"
  12. :collapse="isCollapse"
  13. :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
  14. :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
  15. :unique-opened="true"
  16. :active-text-color="theme"
  17. :collapse-transition="false"
  18. mode="vertical"
  19. >
  20. <sidebar-item v-for="(item, index) in sidebarRouters" :key="item.path + index" :item="item" :base-path="item.path" />
  21. </el-menu>
  22. </el-scrollbar>
  23. </div>
  24. </template>
  25.  
  26. <script setup>
  27. import Logo from './Logo';
  28. import SidebarItem from './SidebarItem';
  29. import variables from '@/assets/styles/variables.module.scss';
  30. import useAppStore from '@/store/modules/app';
  31. import useSettingsStore from '@/store/modules/settings';
  32. import usePermissionStore from '@/store/modules/permission';
  33. import useUserStore from '@/store/modules/user';
  34. import bus from '@/utils/mitt';
  35.  
  36. const route = useRoute();
  37. const appStore = useAppStore();
  38. const settingsStore = useSettingsStore();
  39. const permissionStore = usePermissionStore();
  40. const router = useRouter();
  41. const pinias = useUserStore();
  42. const sidebarRouters = ref([]);
  43. const { proxy } = getCurrentInstance();
  44.  
  45. const showLogo = computed(() => settingsStore.sidebarLogo);
  46. const sideTheme = computed(() => settingsStore.sideTheme);
  47. const theme = computed(() => settingsStore.theme);
  48. const isCollapse = computed(() => !appStore.sidebar.opened);
  49.  
  50. const activeMenu = computed(() => {
  51. const { meta, path } = route;
  52. // if set path, the sidebar will highlight the path you set
  53. if (meta.activeMenu) {
  54. return meta.activeMenu;
  55. }
  56. return path;
  57. });
  58.  
  59. // 菜单切换设置
  60. function setMenuData() {
  61. let key = localStorage.getItem('routerPartKFC');
  62. let routeArr = JSON.parse(JSON.stringify(permissionStore.sidebarRouters));
  63. routeArr = routeArr.filter(item => item.path != '/index');
  64. let paths = '';
  65. let newArr = [];
  66. routeArr.map(item => {
  67. if (key == item.name) {
  68. newArr.push(item);
  69. }
  70. });
  71. // 默认打开子系统的第一个页面
  72. if (localStorage.getItem('fromDoorKFC') == 'chengguanweiScreen') {
  73. console.log(newArr, 'newArr');
  74. if (newArr.length == 0) {
  75. proxy.$modal.msgError('暂无权限查看该系统');
  76. return;
  77. }
  78. if (!!!newArr[0].children[0].children) {
  79. // 二级
  80. paths = newArr[0].path + '/' + newArr[0].children[0].path;
  81. } else if (!!!newArr[0].children[0].children[0].children) {
  82. // 三级
  83. paths = newArr[0].path + '/' + newArr[0].children[0].path + '/' + newArr[0].children[0].children[0].path;
  84. } else {
  85. // 四级
  86. paths =
  87. newArr[0].path +
  88. '/' +
  89. newArr[0].children[0].path +
  90. '/' +
  91. newArr[0].children[0].children[0].path +
  92. '/' +
  93. newArr[0].children[0].children[0].children[0].path;
  94. }
  95. } else {
  96. paths = route.path; //当前的路由
  97. }
  98. // console.log('路由跳转位置--', paths);
  99. router.push(paths); //重定向打开路由
  100. sidebarRouters.value = newArr; //添加子菜单
  101. // 海绵综合一张图,不显示左侧菜单列表
  102. setTimeout(() => {
  103. if (paths == '/sponeScreen/HaiMianScreen') {
  104. bus.emit('HaiMianScreenMenu', true);
  105. } else {
  106. bus.emit('HaiMianScreenMenu', false);
  107. }
  108. });
  109. }
  110. onMounted(() => {
  111. setMenuData();
  112. bus.on('selfMenuXG', e => {
  113. setMenuData();
  114. });
  115. });
  116. onBeforeUnmount(() => {
  117. bus.off('selfMenuXG');
  118. });
  119. </script>