BasicLayout.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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: '31px 20px 0', paddingTop: multiTab&&fixedHeader ? '61px' : (!multiTab&&fixedHeader?'33px':'0') }">
  41. <transition name="page-transition">
  42. <route-view v-if="isRouterAlive"/>
  43. </transition>
  44. </a-layout-content>
  45. <!-- layout footer -->
  46. <a-layout-footer>
  47. <!-- <global-footer /> -->
  48. </a-layout-footer>
  49. <!-- Setting Drawer (show in development mode) -->
  50. <setting-drawer v-if="!production"></setting-drawer>
  51. </a-layout>
  52. </a-layout>
  53. </template>
  54. <script>
  55. import { triggerWindowResizeEvent } from '@/utils/util'
  56. import { mapState, mapActions } from 'vuex'
  57. import { mixin, mixinDevice } from '@/utils/mixin'
  58. import config from '@/config/defaultSettings'
  59. import RouteView from './RouteView'
  60. import SideMenu from '@/components/Menu/SideMenu'
  61. import GlobalHeader from '@/components/GlobalHeader'
  62. import GlobalFooter from '@/components/GlobalFooter'
  63. import SettingDrawer from '@/components/SettingDrawer'
  64. import { asyncRouterMap } from '@/config/router.config'
  65. export default {
  66. name: 'BasicLayout',
  67. mixins: [mixin, mixinDevice],
  68. provide () {
  69. return {
  70. reloadView: this.reloadView
  71. }
  72. },
  73. components: {
  74. RouteView,
  75. SideMenu,
  76. GlobalHeader,
  77. GlobalFooter,
  78. SettingDrawer
  79. },
  80. data () {
  81. return {
  82. production: config.production,
  83. collapsed: false,
  84. menus: [],
  85. isRouterAlive: true
  86. }
  87. },
  88. computed: {
  89. ...mapState({
  90. // 动态主路由
  91. mainMenu: state => state.permission.routers,
  92. multiTab: state => state.app.multiTab,
  93. fixedHeader: state => state.app.fixedHeader
  94. }),
  95. contentPaddingLeft () {
  96. if (!this.fixSidebar || this.isMobile() || this.layoutMode == 'topmenu') {
  97. return '0'
  98. }
  99. if (this.sidebarOpened) {
  100. return '160px'
  101. }
  102. return '80px'
  103. }
  104. },
  105. watch: {
  106. sidebarOpened (val) {
  107. this.collapsed = !val
  108. }
  109. },
  110. created () {
  111. if (this.mainMenu) {
  112. this.menus = this.mainMenu.find((item) => item.path === '/').children
  113. } else {
  114. // 没有权限时只显示首页
  115. const noqx = asyncRouterMap.find((item) => item.path === '/').children
  116. this.menus = [noqx.find(item => item.path === '/home')]
  117. }
  118. this.collapsed = !this.sidebarOpened
  119. this.$store.dispatch('ToggleMultiTab', true)
  120. this.$store.dispatch('ToggleColor', '#1890FF')
  121. },
  122. mounted () {
  123. const userAgent = navigator.userAgent
  124. if (userAgent.indexOf('Edge') > -1) {
  125. this.$nextTick(() => {
  126. this.collapsed = !this.collapsed
  127. setTimeout(() => {
  128. this.collapsed = !this.collapsed
  129. }, 16)
  130. })
  131. }
  132. },
  133. methods: {
  134. ...mapActions(['setSidebar']),
  135. toggle () {
  136. this.collapsed = !this.collapsed
  137. this.setSidebar(!this.collapsed)
  138. triggerWindowResizeEvent()
  139. },
  140. paddingCalc () {
  141. let left = ''
  142. if (this.sidebarOpened) {
  143. left = this.isDesktop() ? '160px' : '80px'
  144. } else {
  145. left = (this.isMobile() && '0') || ((this.fixSidebar && '80px') || '0')
  146. }
  147. return left
  148. },
  149. menuSelect () {
  150. },
  151. drawerClose () {
  152. this.collapsed = false
  153. },
  154. reloadView () {
  155. this.isRouterAlive = false
  156. this.$nextTick(() => {
  157. this.isRouterAlive = true
  158. })
  159. }
  160. }
  161. }
  162. </script>
  163. <style lang="less">
  164. @import url('../components/global.less');
  165. </style>