BasicLayout.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <a-layout :class="['layout', device]">
  3. <!-- SideMenu -->
  4. <a-drawer
  5. v-if="isMobile()"
  6. placement="left"
  7. :wrapClassName="`drawer-sider ${navTheme}`"
  8. :closable="false"
  9. :visible="collapsed"
  10. @close="drawerClose"
  11. >
  12. <side-menu
  13. mode="inline"
  14. :menus="menus"
  15. :theme="navTheme"
  16. :collapsed="false"
  17. :collapsible="true"
  18. @menuSelect="menuSelect"
  19. ></side-menu>
  20. </a-drawer>
  21. <side-menu
  22. v-else-if="isSideMenu()"
  23. mode="inline"
  24. :menus="menus"
  25. :theme="navTheme"
  26. :collapsed="collapsed"
  27. :collapsible="true"
  28. ></side-menu>
  29. <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
  30. <!-- layout header -->
  31. <global-header
  32. :mode="layoutMode"
  33. :menus="menus"
  34. :theme="navTheme"
  35. :collapsed="collapsed"
  36. :device="device"
  37. @toggle="toggle"
  38. />
  39. <!-- layout content -->
  40. <a-layout-content :style="{ height: '100%', margin: '24px 24px 0', paddingTop: fixedHeader ? '64px' : '0' }">
  41. <multi-tab v-if="multiTab"></multi-tab>
  42. <transition name="page-transition">
  43. <route-view />
  44. </transition>
  45. </a-layout-content>
  46. <!-- layout footer -->
  47. <a-layout-footer>
  48. <global-footer />
  49. </a-layout-footer>
  50. <!-- Setting Drawer (show in development mode) -->
  51. <setting-drawer v-if="!production"></setting-drawer>
  52. </a-layout>
  53. </a-layout>
  54. </template>
  55. <script>
  56. import { triggerWindowResizeEvent } from '@/utils/util'
  57. import { mapState, mapActions } from 'vuex'
  58. import { mixin, mixinDevice } from '@/utils/mixin'
  59. import config from '@/config/defaultSettings'
  60. import RouteView from './RouteView'
  61. import SideMenu from '@/components/Menu/SideMenu'
  62. import GlobalHeader from '@/components/GlobalHeader'
  63. import GlobalFooter from '@/components/GlobalFooter'
  64. import SettingDrawer from '@/components/SettingDrawer'
  65. import { asyncRouterMap } from '@/config/router.config'
  66. export default {
  67. name: 'BasicLayout',
  68. mixins: [mixin, mixinDevice],
  69. components: {
  70. RouteView,
  71. SideMenu,
  72. GlobalHeader,
  73. GlobalFooter,
  74. SettingDrawer
  75. },
  76. data () {
  77. return {
  78. production: config.production,
  79. collapsed: false,
  80. menus: []
  81. }
  82. },
  83. computed: {
  84. ...mapState({
  85. // 动态主路由
  86. mainMenu: state => state.permission.routers,
  87. nowRouteName: state => state.user.nowRouteName
  88. }),
  89. contentPaddingLeft () {
  90. if (!this.fixSidebar || this.isMobile()) {
  91. return '0'
  92. }
  93. if (this.sidebarOpened) {
  94. return '256px'
  95. }
  96. return '80px'
  97. },
  98. },
  99. watch: {
  100. sidebarOpened (val) {
  101. // console.log(this.$store.state.user.nowRouteName ,'vvvvvvvvvvv')
  102. if(this.$store.state.user.nowRouteName !='NodeMap'){
  103. this.collapsed = !val
  104. }
  105. },
  106. nowRouteName (val) {
  107. // console.log(val,'vvvvvvvvvvv')
  108. if (val == 'NodeMap') {
  109. this.collapsed = true
  110. }
  111. }
  112. },
  113. created () {
  114. if(this.mainMenu){
  115. this.menus = this.mainMenu.find((item) => item.path === '/').children
  116. }else{
  117. // 没有权限时只显示首页
  118. const noqx = asyncRouterMap.find((item) => item.path === '/').children
  119. this.menus = [noqx.find(item => item.path === '/home')]
  120. }
  121. this.collapsed = !this.sidebarOpened
  122. },
  123. mounted () {
  124. const userAgent = navigator.userAgent
  125. if (userAgent.indexOf('Edge') > -1) {
  126. this.$nextTick(() => {
  127. this.collapsed = !this.collapsed
  128. setTimeout(() => {
  129. this.collapsed = !this.collapsed
  130. }, 16)
  131. })
  132. }
  133. },
  134. methods: {
  135. ...mapActions(['setSidebar']),
  136. toggle () {
  137. this.collapsed = !this.collapsed
  138. this.setSidebar(!this.collapsed)
  139. triggerWindowResizeEvent()
  140. },
  141. paddingCalc () {
  142. let left = ''
  143. if (this.sidebarOpened) {
  144. left = this.isDesktop() ? '256px' : '80px'
  145. } else {
  146. left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
  147. }
  148. return left
  149. },
  150. menuSelect () {
  151. },
  152. drawerClose () {
  153. this.collapsed = false
  154. }
  155. }
  156. }
  157. </script>
  158. <style lang="less">
  159. @import url('../components/global.less');
  160. /*
  161. * The following styles are auto-applied to elements with
  162. * transition="page-transition" when their visibility is toggled
  163. * by Vue.js.
  164. *
  165. * You can easily play with the page transition by editing
  166. * these styles.
  167. */
  168. .page-transition-enter {
  169. opacity: 0;
  170. }
  171. .page-transition-leave-active {
  172. opacity: 0;
  173. }
  174. .page-transition-enter .page-transition-container,
  175. .page-transition-leave-active .page-transition-container {
  176. -webkit-transform: scale(1.1);
  177. transform: scale(1.1);
  178. }
  179. </style>