<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>