Merge branch 'master' of https://gitee.com/y_project/RuoYi-Vue

疯狂的狮子li

2020-12-11 f56f57a2364ff5cf1279527c2f130aae88b65ce7

 ruoyi-ui/src/layout/components/AppMain.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,160 @@
<!-- @author ruoyi 20201128 æ”¯æŒä¸‰çº§ä»¥ä¸Šèœå•ç¼“å­˜ -->
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :max="20" :exclude="notCacheName">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
import Global from "@/layout/components/global.js";

export default {
  name: 'AppMain',
  computed: {
    notCacheName() {
      var visitedViews = this.$store.state.tagsView.visitedViews;
      var noCacheViews = [];
      Object.keys(visitedViews).some((index) => {
        if (visitedViews[index].meta.noCache) {
          noCacheViews.push(visitedViews[index].name);
        }
      });
      return noCacheViews;
    },
    key() {
      return this.$route.path;
    },
  },
  mounted() {
    // å…³é—­æ ‡ç­¾è§¦å‘
    Global.$on("removeCache", (name, view) => {
      this.removeCache(name, view);
    });
  },
  methods: {
    // èŽ·å–有keep-alive子节点的Vnode
    getVnode() {
      // åˆ¤æ–­å­é›†éžç©º
      if (this.$children.length == 0) return false;
      let vnode;
      for (let item of this.$children) {
        // å¦‚æžœdata中有key则代表找到了keep-alive下面的子集，这个key就是router-view上的key
        if (item.$vnode.data.key) {
          vnode = item.$vnode;
          break;
        }
      }
      return vnode ? vnode : false;
    },
    // ç§»é™¤keep-alive缓存
    removeCache(name, view = {}) {
      let vnode = this.getVnode();
      if (!vnode) return false;
      let componentInstance = vnode.parent.componentInstance;
      // è¿™ä¸ªkey是用来获取前缀用来后面正则匹配用的
      let keyStart = vnode.key.split("/")[0];
      let thisKey = `${keyStart}${view.fullPath}`;
      let regKey = `${keyStart}${view.path}`;

      this[name]({ componentInstance, thisKey, regKey });
    },
    // ç§»é™¤å…¶ä»–
    closeOthersTags({ componentInstance, thisKey }) {
      Object.keys(componentInstance.cache).forEach((key, index) => {
        if (key != thisKey) {
          // é”€æ¯å®žä¾‹(这里存在多个key指向一个缓存的情况可能前面一个已经清除掉了所有要加判断)
          if (componentInstance.cache[key]) {
            componentInstance.cache[key].componentInstance.$destroy();
          }
          // åˆ é™¤ç¼“å­˜
          delete componentInstance.cache[key];
          // ç§»é™¤key中对应的key
          componentInstance.keys.splice(index, 1);
        }
      });
    },
    // ç§»é™¤æ‰€æœ‰ç¼“å­˜
    closeAllTags({ componentInstance }) {
      // é”€æ¯å®žä¾‹
      Object.keys(componentInstance.cache).forEach((key) => {
        if (componentInstance.cache[key]) {
          componentInstance.cache[key].componentInstance.$destroy();
        }
      });
      // åˆ é™¤ç¼“å­˜
      componentInstance.cache = {};
      // ç§»é™¤key中对应的key
      componentInstance.keys = [];
    },
    // ç§»é™¤å•ä¸ªç¼“å­˜
    closeSelectedTag({ componentInstance, regKey }) {
      let reg = new RegExp(`^${regKey}`);
      Object.keys(componentInstance.cache).forEach((key, i) => {
        if (reg.test(key)) {
          // é”€æ¯å®žä¾‹
          if (componentInstance.cache[key]) {
            componentInstance.cache[key].componentInstance.$destroy();
          }
          // åˆ é™¤ç¼“å­˜
          delete componentInstance.cache[key];
          // ç§»é™¤key中对应的key
          componentInstance.keys.splice(i, 1);
        }
      });
    },
    // åˆ·æ–°å•ä¸ªç¼“å­˜
    refreshSelectedTag({ componentInstance, thisKey }) {
      Object.keys(componentInstance.cache).forEach((key, index) => {
        if (null != thisKey && key.replace("/redirect", "") == thisKey) {
          // 1 é”€æ¯å®žä¾‹(这里存在多个key指向一个缓存的情况可能前面一个已经清除掉了所有要加判断)
          if (componentInstance.cache[key]) {
            componentInstance.cache[key].componentInstance.$destroy();
          }
          // 2 åˆ é™¤ç¼“å­˜
          delete componentInstance.cache[key];
          // 3 ç§»é™¤key中对应的key
          componentInstance.keys.splice(index, 1);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>