mixin.js 5.2 KB

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