index.vue

<template>
  <section id="business_container">
    <transition name="fade-transform" mode="out-in">
			<!--  :include="tagsArrayRouterNames" :exclude="currentRouteName" -->
			<!--  v-if="$store.state.common.refreshRoute" -->
      <keep-alive :include="includeRoutes">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: "Business",
  watch: {
    $route() {
      if (this.$route.path.startsWith("/review") || this.$route.path.startsWith("/display")) {
        this.$store.commit("setMode", "display");
      } else {
        this.$store.commit("setMode", "normal");
      }
    },
    "$store.state.rulebpmn.tagsArry"(val) {
      // 页签列表变化时更新
			// this.getTagsArrayRouterNames(val);
			this.handleIncludeRoutes(val)
    },
    // "$store.state.common.refreshRoute"() {
    //   // 刷新组件时，先将当前路由组件排除在keep-alive要缓存的组件之外，使组件可以完成初始化刷新
		// 	this.currentRouteName = this.$route.name;
		// 	console.log('currentRouteName', this.currentRouteName)
    // }
  },
  created() {
		console.log("进入业务交易界面");
		if (this.$route.path.startsWith("/review") || this.$route.path.startsWith("/display")) {
			this.$store.commit("setMode", "display");
		} else {
			this.$store.commit("setMode", "normal");
		}
  },
  mounted() {
    // 初次加载页面时获取页签列表
		this.getTagsArrayRouterNames(this.$store.state.rulebpmn.tagsArry);
		// console.log('this=======>', this)
  },
  updated() {
    // 在组件完成刷新的时候再把keep-alive排除的组件置空，使原本在缓存列表中的组件可以正常缓存
    this.currentRouteName = "";
  },
  computed: {
    cachedViews() {
      return this.$store.state.TagsView.cachedViews;
    },
    visitedViews() {
      return this.$store.state.TagsView.visitedViews;
    },
    key() {
      return this.$route.path;
    },
    keepAlive() {
      if (this.$route.meta) {
        const metaKeepAlive = this.$route.meta.keepAlive;
        if (typeof metaKeepAlive === "boolean" && metaKeepAlive) {
          return true;
        } else if (
          typeof metaKeepAlive === "string" &&
          "true" === metaKeepAlive
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
		},
  },
  data() {
    return {
			tagsArrayRouterNames: [],
			includeRoutes: [],
      currentRouteName: "" // 当前路由名称
    };
  },
  methods: {
		handleIncludeRoutes (tagsArry) {
			this.includeRoutes = []
			tagsArry.map((item) => {
				if (item.routeName === 'home' && !this.includeRoutes.includes('home')) {
					this.includeRoutes.push(item.routeName)
				}
				if (item.routeName !== 'home') {
					if (item.route.meta.keepAlive && !this.includeRoutes.includes(item.routeName)) {
						this.includeRoutes.push(item.routeName)
					}
				}
			})
		},
    // 获取当前打开的页签中对应的路由名称
    getTagsArrayRouterNames(tagsArray) {
      // 为了不影响原有的tagsArray，复制出新的页签数组
      let newTagsArray = tagsArray.concat();
      // 去掉第一项的home页签
      newTagsArray.shift();
      // 提取页签对应的路由名称
      // this.tagsArrayRouterNames = newTagsArray.map(tag => {
      // 	return tag.route.name
      // })
      let cacheRoute = [];
      newTagsArray.forEach(item => {
        const metaKeepAlive = item.route.meta.keepAlive;
        if (typeof metaKeepAlive === "boolean" && metaKeepAlive) {
          if (!cacheRoute.includes(item.route.name)) {
            cacheRoute.push(item.route.name);
					}
        } else if (typeof metaKeepAlive === "string" && "true" === metaKeepAlive) {
          if (!cacheRoute.includes(item.route.name)) {
            cacheRoute.push(item.route.name);
					}
        }
        item.route.matched.forEach(b => {
          const metaKeepAlive = b.meta.keepAlive;
          if (typeof metaKeepAlive === "boolean" && metaKeepAlive) {
            if (!cacheRoute.includes(b.name)) {
							cacheRoute.push(b.name);
						}
          } else if (typeof metaKeepAlive === "string" && "true" === metaKeepAlive) {
						if (!cacheRoute.includes(b.name)) {
							cacheRoute.push(b.name);
						}
          }
        });
			});
			// console.log('cacheRoute=======', cacheRoute)
			this.tagsArrayRouterNames = cacheRoute;
    }
  }
};
</script>

<style scoped lang="less">
#business_container {
  flex: 1;
	// box-shadow: 0 1px 15px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
	height: 100%;
	// padding: 0 20px;
}
#business_container .eContainer,
#business_container .eContainer-search {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  // padding-top: 20px;
}
#business_container .eContainer {
	// padding-top: 42px;
	box-sizing: border-box;
	::v-deep .c-page-container-div {
		 .el-form {
			height: calc(100% - 54px)!important;
		}
		.c-content-scrollbar {
			height: 100% !important;
		}
	}
}
.eContainer-search {
	::v-deep .el-form {
		height: 100%;
	}
}
::v-deep .m-review-content {
	.eContainer {
		height: 100%;
		.el-form {
				height: 100%!important;
		}
	}
}
// @media screen and (min-width: 2561px) {
//   #business_container .eContainer {
//     width: 85%;
//   }
// }

// @media screen and (min-width: 1921px) and (max-width: 2560px) {
//   #business_container .eContainer {
//     width: 90%;
//   }
// }

// @media screen and (max-width: 1920px) {
//   #business_container .eContainer {
//     width: 96%;
//   }
// }

// #business_container .eContainer {
//   background-color: #ffffff;
//   // box-shadow: 0 1px 15px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
// }
// #business_container .eContainer .eContainer,
// #business_container .eContainer .eContainer-search,
// #business_container .eContainer-search .eContainer,
// #business_container .eContainer-search .eContainer-search {
//   width: 100%;
//   margin: 0;
//   padding-top: 0;
//   background-color: unset;
//   box-shadow: unset;
// }
// #business_container .eibs::before,
// #business_container .eibs-tab::before,
// #business_container .eibs::after,
// #business_container .eibs-tab::after {
//   content: "";
//   display: block;
//   clear: both;
// }

.eibs {
  margin-top: 20px;
}
</style>