BasicLayout.vue 5.1 KB

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