mixin.js 5.4 KB

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