Commit 7f2c205e by 潘际乾

电证整合,解决keep-alive缓存iframe刷新的问题

parent c6b99326
......@@ -17,7 +17,6 @@
</template>
<SubMenu :subMenuList="item.children" :openFlgArr="openFlgArr" />
</el-submenu>
<!-- <el-menu-item v-else :key="item.path" :index="item.isDz ? null : item.path" @click="gotoView(item)"> -->
<el-menu-item v-else :key="item.path" :index="item.path"
:route="item.isDz ? { name: 'DzSys', params: { path: getDynamicPath(item.path), title: item.name}} : { path: item.path }">
<template slot="title">
......@@ -40,14 +39,6 @@ export default {
getOpenFlag(index) {
return this.openFlgArr.includes(index);
},
// gotoView(item) {
// if (!item.isDz) {
// return
// }
// const path = item.path
// const p = path.split("/")
// this.$router.push({name: 'DzSys', params: {path: p[p.length - 1], title: item.name}})
// }
getDynamicPath(path) {
const p = path.split("/")
return p[p.length - 1]
......
......@@ -214,7 +214,6 @@ import Dbiusr from "./Dbiusr"
import Dbibch from "./Dbibch"
import Infact from "./Infact"
import DzSys from "~/views/Layout/dz/DzSys.vue";
/**
* 带有name的才会被添加进顶部的标签页里
......@@ -443,6 +442,6 @@ const BusRouter = [
{ path: 'Ordrel', component: Ordrel, name: 'Ordrel', meta: { title: 'Ordrel' } },
{ path: 'Infact', component: Infact, name: 'Infact', meta: { title: '账户' } },
{ path: 'dzsys/:path', component: DzSys, name: 'DzSys', meta: { title: (tag) => { return '电证 - ' + tag.params.title } } },
{ path: 'dzsys/:path', name: 'DzSys', meta: { title: (tag) => { return '电证 - ' + tag.params.title } } },
]
export default BusRouter
\ No newline at end of file
......@@ -5,10 +5,22 @@
<router-view :key="key" />
</keep-alive>
</transition>
<component
v-for="item in hasOpenComponentsArr"
:key="item.name"
:is="item.name"
v-show="$route.path === item.path"
></component>
</section>
</template>
<script>
import Vue from "vue";
import DzSys from "~/views/Layout/dz/DzSys.vue";
import { getDzSysMenu } from "~/views/Layout/dz/menus.js";
export default {
name: "Business",
watch: {
......@@ -18,19 +30,78 @@ export default {
} else {
this.$store.commit("setMode", "normal");
}
this.componentsArr.forEach(comp => {
if (!this.visitedViews.find(view => view.path === comp.path)) {
comp.hasOpen = false
}
})
// 判断当前路由是否iframe页
this.isOpenIframePage();
},
},
created: () => {
created() {
console.log("进入业务交易界面");
// 设置iframe页的数组对象
const componentsArr = []
const dzSysMenu = getDzSysMenu()
this.getComponentsArr(componentsArr, dzSysMenu ? dzSysMenu.children : []);
componentsArr.forEach((item) => {
Vue.component(item.name, DzSys);
});
this.componentsArr = componentsArr;
// 判断当前路由是否iframe页
this.isOpenIframePage();
},
computed: {
cachedViews() {
return this.$store.state.TagsView.cachedViews;
},
visitedViews() {
return this.$store.state.TagsView.visitedViews;
},
key() {
return this.$route.path;
},
// 实现懒加载,只渲染已经打开过(hasOpen:true)的iframe页
hasOpenComponentsArr() {
return this.componentsArr.filter(item => item.hasOpen);
}
},
data() {
return {
componentsArr: []
}
},
methods: {
// 根据当前路由设置hasOpen
isOpenIframePage() {
const target = this.componentsArr.find(item => {
return item.path === this.$route.path
});
if (target && !target.hasOpen) {
target.hasOpen = true;
}
},
// 遍历路由的所有页面,把含有iframeComponent标识的收集起来
getComponentsArr(arr, menus) {
for (let i = 0; i < menus.length; i++) {
const menu = menus[i];
if (menu.children.length) {
const tempArr = []
this.getComponentsArr(tempArr, menu.children)
arr.push(...tempArr)
} else {
arr.push({
name: menu.value,
path: menu.path,
hasOpen: false, // 是否打开过,默认false
})
}
}
}
}
};
</script>
......
......@@ -14,10 +14,11 @@ const generateMenuTree = (menus) => {
} else {
arr.push({
name: menu.label,
value: 'dzsys-' + menu.value,
path: '/business/dzsys/' + menu.value,
isDz: true,
icon: "el-icon-document",
children: []
isDz: true,
icon: "el-icon-document",
children: []
})
}
}
......@@ -25,16 +26,16 @@ const generateMenuTree = (menus) => {
}
export const getDzSysMenu = () => {
const menuStr = window.sessionStorage.getItem('menu')
if (!menuStr) {
return null;
}
const menusConfig = JSON.parse(menuStr);
// menusConfig.unshift( { id: null, label: "登陆", value: "login", subMenu: [] } )
return {
name: '电证系统',
index: 'dzsys',
path: 'dzsys',
children: generateMenuTree(menusConfig)
}
const menuStr = window.sessionStorage.getItem('menu')
if (!menuStr) {
return null;
}
const menusConfig = JSON.parse(menuStr);
// menusConfig.unshift( { id: null, label: "登陆", value: "login", subMenu: [] } )
return {
name: '电证系统',
index: 'dzsys',
path: 'dzsys',
children: generateMenuTree(menusConfig)
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment