123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- // 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
- // console.log(closeTabPages,key)
- // 清空同级路由的组件缓存
- if(hasChildren&&(oa||ob||oc||oxt)&&cache&&keys){
- this.clearCompCache(cache,keys,key)
- }
- // 批量清空组件缓存
- if(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 }
|