aside.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <div class="h100" v-show="!isTagsViewCurrenFull">
  3. <el-aside class="layout-aside" :class="setCollapseStyle">
  4. <Logo v-if="setShowLogo" />
  5. <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef" @mouseenter="onAsideEnterLeave(true)" @mouseleave="onAsideEnterLeave(false)">
  6. <Vertical :menuList="state.menuList" />
  7. </el-scrollbar>
  8. </el-aside>
  9. </div>
  10. </template>
  11. <script setup lang="ts" name="layoutAside">
  12. import { defineAsyncComponent, reactive, computed, watch, onBeforeMount, ref } from 'vue';
  13. import { storeToRefs } from 'pinia';
  14. import pinia from '/@/stores/index';
  15. import { useRoutesList } from '/@/stores/routesList';
  16. import { useThemeConfig } from '/@/stores/themeConfig';
  17. import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
  18. import mittBus from '/@/utils/mitt';
  19. import { Session } from '/@/utils/storage';
  20. import { filterRoutesFun } from '/@/utils/routeFilter';
  21. // 引入组件
  22. const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
  23. const Vertical = defineAsyncComponent(() => import('/@/layout/navMenu/vertical.vue'));
  24. // 定义变量内容
  25. const layoutAsideScrollbarRef = ref();
  26. const stores = useRoutesList();
  27. const storesThemeConfig = useThemeConfig();
  28. const storesTagsViewRoutes = useTagsViewRoutes();
  29. const { routesList } = storeToRefs(stores);
  30. const { themeConfig } = storeToRefs(storesThemeConfig);
  31. const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
  32. const state = reactive<AsideState>({
  33. menuList: [],
  34. clientWidth: 0,
  35. });
  36. // 设置菜单展开/收起时的宽度
  37. const setCollapseStyle = computed(() => {
  38. const { layout, isCollapse, menuBar } = themeConfig.value;
  39. const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
  40. const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
  41. // 判断是否是手机端
  42. if (state.clientWidth <= 1000) {
  43. if (isCollapse) {
  44. document.body.setAttribute('class', 'el-popup-parent--hidden');
  45. const asideEle = document.querySelector('.layout-container') as HTMLElement;
  46. const modeDivs = document.createElement('div');
  47. modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
  48. asideEle.appendChild(modeDivs);
  49. modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
  50. return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
  51. } else {
  52. // 关闭弹窗
  53. closeLayoutAsideMobileMode();
  54. return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
  55. }
  56. } else {
  57. if (layout === 'columns') {
  58. // 分栏布局,菜单收起时宽度给 1px
  59. if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
  60. else return [asideBrColor, 'layout-aside-pc-220'];
  61. } else {
  62. // 其它布局给 64px
  63. if (isCollapse) return [asideBrColor, 'layout-aside-pc-64'];
  64. else return [asideBrColor, 'layout-aside-pc-220'];
  65. }
  66. }
  67. });
  68. // 设置显示/隐藏 logo
  69. const setShowLogo = computed(() => {
  70. let { layout, isShowLogo } = themeConfig.value;
  71. return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
  72. });
  73. // 关闭移动端蒙版
  74. const closeLayoutAsideMobileMode = () => {
  75. const el = document.querySelector('.layout-aside-mobile-mode');
  76. el?.setAttribute('style', 'animation: error-img-two 0.3s');
  77. setTimeout(() => {
  78. el?.parentNode?.removeChild(el);
  79. }, 300);
  80. const clientWidth = document.body.clientWidth;
  81. if (clientWidth < 1000) themeConfig.value.isCollapse = false;
  82. document.body.setAttribute('class', '');
  83. };
  84. // 设置/过滤路由(非静态路由/是否显示在菜单中)
  85. const setFilterRoutes = () => {
  86. /* if (themeConfig.value.layout === 'columns') return false;
  87. console.log(Session.get("userInfo").username=='平台管理员') */
  88. state.menuList = filterRoutesFun(routesList.value);
  89. };
  90. // 设置菜单导航是否固定(移动端)
  91. const initMenuFixed = (clientWidth: number) => {
  92. state.clientWidth = clientWidth;
  93. };
  94. // 鼠标移入、移出
  95. const onAsideEnterLeave = (bool: Boolean) => {
  96. let { layout } = themeConfig.value;
  97. if (layout !== 'columns') return false;
  98. if (!bool) mittBus.emit('restoreDefault');
  99. stores.setColumnsMenuHover(bool);
  100. };
  101. // 页面加载前
  102. onBeforeMount(() => {
  103. initMenuFixed(document.body.clientWidth);
  104. setFilterRoutes();
  105. // 此界面不需要取消监听(mittBus.off('setSendColumnsChildren))
  106. // 因为切换布局时有的监听需要使用,取消了监听,某些操作将不生效
  107. mittBus.on('setSendColumnsChildren', (res: MittMenu) => {
  108. state.menuList = res.children;
  109. });
  110. mittBus.on('setSendClassicChildren', (res: MittMenu) => {
  111. let { layout, isClassicSplitMenu } = themeConfig.value;
  112. if (layout === 'classic' && isClassicSplitMenu) {
  113. state.menuList = [];
  114. state.menuList = res.children;
  115. }
  116. });
  117. mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
  118. setFilterRoutes();
  119. });
  120. mittBus.on('layoutMobileResize', (res: LayoutMobileResize) => {
  121. initMenuFixed(res.clientWidth);
  122. closeLayoutAsideMobileMode();
  123. });
  124. });
  125. // 监听 themeConfig 配置文件的变化,更新菜单 el-scrollbar 的高度
  126. watch(themeConfig.value, (val) => {
  127. if (val.isShowLogoChange !== val.isShowLogo) {
  128. if (layoutAsideScrollbarRef.value) layoutAsideScrollbarRef.value.update();
  129. }
  130. });
  131. // 监听 pinia 值的变化,动态赋值给菜单中
  132. watch(
  133. pinia.state,
  134. (val) => {
  135. let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
  136. if (layout === 'classic' && isClassicSplitMenu) return false;
  137. setFilterRoutes();
  138. },
  139. {
  140. deep: true,
  141. }
  142. );
  143. </script>