BasicLayout.vue 4.8 KB

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