BasicLayout.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  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. <router-view ></router-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. provide () {
  70. return {
  71. reloadView: this.reloadView
  72. }
  73. },
  74. components: {
  75. RouteView,
  76. SideMenu,
  77. GlobalHeader,
  78. GlobalFooter,
  79. SettingDrawer
  80. },
  81. data () {
  82. return {
  83. production: config.production,
  84. collapsed: false,
  85. menus: [],
  86. isRouterAlive: true
  87. }
  88. },
  89. computed: {
  90. ...mapState({
  91. // 动态主路由
  92. mainMenu: state => state.permission.routers,
  93. multiTab: state => state.app.multiTab,
  94. fixedHeader: state => state.app.fixedHeader
  95. }),
  96. contentPaddingLeft () {
  97. if (!this.fixSidebar || this.isMobile() || this.layoutMode == 'topmenu') {
  98. return '0'
  99. }
  100. if (this.sidebarOpened) {
  101. return '160px'
  102. }
  103. return '80px'
  104. }
  105. },
  106. watch: {
  107. sidebarOpened (val) {
  108. this.collapsed = !val
  109. }
  110. },
  111. created () {
  112. if (this.mainMenu) {
  113. this.menus = this.mainMenu.find((item) => item.path === '/').children
  114. } else {
  115. // 没有权限时只显示首页
  116. const noqx = asyncRouterMap.find((item) => item.path === '/').children
  117. this.menus = [noqx.find(item => item.path === '/home')]
  118. }
  119. this.collapsed = !this.sidebarOpened
  120. this.$store.dispatch('ToggleMultiTab', true)
  121. this.$store.dispatch('ToggleColor', '#1890FF')
  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() ? '160px' : '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. reloadView () {
  156. this.isRouterAlive = false
  157. this.$nextTick(() => {
  158. this.isRouterAlive = true
  159. })
  160. }
  161. }
  162. }
  163. </script>
  164. <style lang="less">
  165. @import url('../components/global.less');
  166. </style>