// import Vue from 'vue' import { deviceEnquire, DEVICE_TYPE } from '@/utils/device' import { mapState } from 'vuex' // const mixinsComputed = Vue.config.optionMergeStrategies.computed // const mixinsMethods = Vue.config.optionMergeStrategies.methods const mixin = { computed: { ...mapState({ layoutMode: state => state.app.layout, navTheme: state => state.app.theme, primaryColor: state => state.app.color, colorWeak: state => state.app.weak, fixedHeader: state => state.app.fixedHeader, fixSiderbar: state => state.app.fixSiderbar, fixSidebar: state => state.app.fixSiderbar, contentWidth: state => state.app.contentWidth, autoHideHeader: state => state.app.autoHideHeader, sidebarOpened: state => state.app.sidebar, multiTab: state => state.app.multiTab }) }, methods: { isTopMenu () { return this.layoutMode === 'topmenu' }, isSideMenu () { return !this.isTopMenu() } } } const mixinDevice = { computed: { ...mapState({ device: state => state.app.device }) }, methods: { isMobile () { return this.device === DEVICE_TYPE.MOBILE }, isDesktop () { return this.device === DEVICE_TYPE.DESKTOP }, isTablet () { return this.device === DEVICE_TYPE.TABLET } } } const AppDeviceEnquire = { mounted () { const { $store } = this deviceEnquire(deviceType => { switch (deviceType) { case DEVICE_TYPE.DESKTOP: $store.commit('TOGGLE_DEVICE', 'desktop') $store.dispatch('setSidebar', true) // 默认收起侧边栏 // $store.dispatch('setSidebar', false) break case DEVICE_TYPE.TABLET: $store.commit('TOGGLE_DEVICE', 'tablet') $store.dispatch('setSidebar', false) break case DEVICE_TYPE.MOBILE: default: $store.commit('TOGGLE_DEVICE', 'mobile') $store.dispatch('setSidebar', true) break } }) } } // 所有页 const commonMixin = { watch: { '$store.state.app.loadingStatus': function (a, b) { if (!a) { if (this.disabled !== undefined) { this.disabled = a } if (this.spinning !== undefined) { this.spinning = a } } } }, methods: { // 清除组件缓存 clearCompCache (cache, keys, key) { if (cache[key] && cache[key].componentInstance) { cache[key].componentInstance.$destroy() if (keys.length) { var index = keys.indexOf(key) if (index > -1) { keys.splice(index, 1) } } delete cache[key] } } }, beforeRouteLeave (to, from, next) { const newVal = to const oldVal = from // 是否时同一个父级菜单下的页面 const mnlen = newVal.matched.length < 3 const newMatched = newVal.matched[mnlen ? 1 : 2] const molen = oldVal.matched.length < 3 const oldMatched = oldVal.matched[molen ? 1 : 2] const hasChildren = newMatched.name == oldMatched.name // 判断是否是新增,编辑,详情页 const oa = oldVal.meta.title.indexOf('详情') >= 0 const ob = oldVal.meta.title.indexOf('新增') >= 0 const oc = oldVal.meta.title.indexOf('编辑') >= 0 const oxt = oldVal.meta.replaceTab // console.log(hasChildren,oa||ob||oc||oxt) const key = this.$vnode.key const parentNode = this.$vnode.parent const cache = parentNode && parentNode.componentInstance ? parentNode.componentInstance.cache : null const keys = parentNode && parentNode.componentInstance ? parentNode.componentInstance.keys : null const closeTabPages = this.$store.state.app.closeTabPages const multiTab = this.$store.state.app.multiTab // console.log(closeTabPages,key) // 清空同级路由的组件缓存 if (hasChildren && (oa || ob || oc || oxt) && cache && keys) { this.clearCompCache(cache, keys, key) // 单页签模式 if (!multiTab) { this.$store.state.app.isNewTab = false this.$store.state.app.updateList = true } } // 单页签模式,并且不是同级菜单的清空组件 if (!multiTab && !hasChildren) { this.clearCompCache(cache, keys, key) } // 批量清空组件缓存 if (closeTabPages && closeTabPages.length && cache && keys) { for (let i = 0; i < closeTabPages.length; i++) { this.clearCompCache(cache, keys, closeTabPages[i]) } this.$store.state.app.closeTabPages = [] } // console.log(cache,keys) next() } } export { mixin, AppDeviceEnquire, mixinDevice, commonMixin }