mixin.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. // import Vue from 'vue'
  2. import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
  3. import { mapState } from 'vuex'
  4. // const mixinsComputed = Vue.config.optionMergeStrategies.computed
  5. // const mixinsMethods = Vue.config.optionMergeStrategies.methods
  6. const mixin = {
  7. computed: {
  8. ...mapState({
  9. layoutMode: state => state.app.layout,
  10. navTheme: state => state.app.theme,
  11. primaryColor: state => state.app.color,
  12. colorWeak: state => state.app.weak,
  13. fixedHeader: state => state.app.fixedHeader,
  14. fixSiderbar: state => state.app.fixSiderbar,
  15. fixSidebar: state => state.app.fixSiderbar,
  16. contentWidth: state => state.app.contentWidth,
  17. autoHideHeader: state => state.app.autoHideHeader,
  18. sidebarOpened: state => state.app.sidebar,
  19. multiTab: state => state.app.multiTab
  20. })
  21. },
  22. methods: {
  23. isTopMenu () {
  24. return this.layoutMode === 'topmenu'
  25. },
  26. isSideMenu () {
  27. return !this.isTopMenu()
  28. }
  29. }
  30. }
  31. const mixinDevice = {
  32. computed: {
  33. ...mapState({
  34. device: state => state.app.device
  35. })
  36. },
  37. methods: {
  38. isMobile () {
  39. return this.device === DEVICE_TYPE.MOBILE
  40. },
  41. isDesktop () {
  42. return this.device === DEVICE_TYPE.DESKTOP
  43. },
  44. isTablet () {
  45. return this.device === DEVICE_TYPE.TABLET
  46. }
  47. }
  48. }
  49. const AppDeviceEnquire = {
  50. mounted () {
  51. const { $store } = this
  52. deviceEnquire(deviceType => {
  53. switch (deviceType) {
  54. case DEVICE_TYPE.DESKTOP:
  55. $store.commit('TOGGLE_DEVICE', 'desktop')
  56. $store.dispatch('setSidebar', true)
  57. // 默认收起侧边栏
  58. // $store.dispatch('setSidebar', false)
  59. break
  60. case DEVICE_TYPE.TABLET:
  61. $store.commit('TOGGLE_DEVICE', 'tablet')
  62. $store.dispatch('setSidebar', false)
  63. break
  64. case DEVICE_TYPE.MOBILE:
  65. default:
  66. $store.commit('TOGGLE_DEVICE', 'mobile')
  67. $store.dispatch('setSidebar', true)
  68. break
  69. }
  70. })
  71. }
  72. }
  73. // 所有页
  74. const commonMixin = {
  75. watch: {
  76. '$store.state.app.loadingStatus': function (a, b) {
  77. if (!a) {
  78. if (this.disabled !== undefined) {
  79. this.disabled = a
  80. }
  81. if (this.spinning !== undefined) {
  82. this.spinning = a
  83. }
  84. }
  85. }
  86. },
  87. methods: {
  88. // 清除组件缓存
  89. clearCompCache (cache, keys, key) {
  90. if (cache[key] && cache[key].componentInstance) {
  91. cache[key].componentInstance.$destroy()
  92. if (keys.length) {
  93. var index = keys.indexOf(key)
  94. if (index > -1) {
  95. keys.splice(index, 1)
  96. }
  97. }
  98. delete cache[key]
  99. }
  100. }
  101. },
  102. beforeRouteLeave (to, from, next) {
  103. const newVal = to
  104. const oldVal = from
  105. // 是否时同一个父级菜单下的页面
  106. const mnlen = newVal.matched.length < 3
  107. const newMatched = newVal.matched[mnlen ? 1 : 2]
  108. const molen = oldVal.matched.length < 3
  109. const oldMatched = oldVal.matched[molen ? 1 : 2]
  110. const hasChildren = newMatched.name == oldMatched.name
  111. // 判断是否是新增,编辑,详情页
  112. const oa = oldVal.meta.title.indexOf('详情') >= 0
  113. const ob = oldVal.meta.title.indexOf('新增') >= 0
  114. const oc = oldVal.meta.title.indexOf('编辑') >= 0
  115. const oxt = oldVal.meta.replaceTab
  116. // console.log(hasChildren,oa||ob||oc||oxt)
  117. const key = this.$vnode.key
  118. const parentNode = this.$vnode.parent
  119. const cache = parentNode && parentNode.componentInstance ? parentNode.componentInstance.cache : null
  120. const keys = parentNode && parentNode.componentInstance ? parentNode.componentInstance.keys : null
  121. const closeTabPages = this.$store.state.app.closeTabPages
  122. const multiTab = this.$store.state.app.multiTab
  123. // console.log(closeTabPages,key)
  124. // 清空同级路由的组件缓存
  125. if (hasChildren && (oa || ob || oc || oxt) && cache && keys) {
  126. this.clearCompCache(cache, keys, key)
  127. // 单页签模式
  128. if (!multiTab) {
  129. this.$store.state.app.isNewTab = false
  130. this.$store.state.app.updateList = true
  131. }
  132. }
  133. // 单页签模式,并且不是同级菜单的清空组件
  134. if (!multiTab && !hasChildren) {
  135. this.clearCompCache(cache, keys, key)
  136. }
  137. // 批量清空组件缓存
  138. if (closeTabPages && closeTabPages.length && cache && keys) {
  139. for (let i = 0; i < closeTabPages.length; i++) {
  140. this.clearCompCache(cache, keys, closeTabPages[i])
  141. }
  142. this.$store.state.app.closeTabPages = []
  143. }
  144. // console.log(cache,keys)
  145. next()
  146. }
  147. }
  148. export { mixin, AppDeviceEnquire, mixinDevice, commonMixin }