reactor:测试来电谈单问题;

src/layout/routerView/parent.vue

@@ -1,20 +1,20 @@
 <template>
-	<div class="layout-parent">
-		<router-view v-slot="{ Component }">
-			<transition :name="setTransitionName" mode="out-in">
-				<keep-alive :include="getKeepAliveNames">
-					<component :is="wrap(route.name, Component)" :key="state.refreshRouterViewKey" v-show="!isIframePage" class="w100" />
-				</keep-alive>
-			</transition>
-		</router-view>
-		<transition :name="setTransitionName" mode="out-in">
-			<Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName" :list="state.iframeList" />
-		</transition>
-	</div>
+  <div class="layout-parent">
+    <router-view v-slot="{ Component }">
+      <transition :name="setTransitionName" mode="out-in">
+        <keep-alive :include="getKeepAliveNames">
+          <component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" />
+        </keep-alive>
+      </transition>
+    </router-view>
+    <transition :name="setTransitionName" mode="out-in">
+      <Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName" :list="state.iframeList" />
+    </transition>
+  </div>
 </template>
 
 <script setup lang="ts" name="layoutParentView">
-import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted, h } from 'vue';
+import { defineAsyncComponent, computed, reactive, onBeforeMount, nextTick, watch, onMounted,onBeforeUnmount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useKeepALiveNames } from '@/stores/keepAliveNames';
@@ -25,24 +25,6 @@ import mittBus from '@/utils/mitt';
 // 引入组件
 const Iframes = defineAsyncComponent(() => import('@/layout/routerView/iframes.vue'));
 
-const wrapperMap = new Map();
-const wrap = (name: any, component: any) => {
-	let wrapper: any;
-	const wrapperName = name;
-	if (wrapperMap.has(wrapperName)) {
-		wrapper = wrapperMap.get(wrapperName);
-	} else {
-		wrapper = {
-			name: wrapperName,
-			render() {
-				return  h(component);
-			},
-		};
-		wrapperMap.set(wrapperName, wrapper);
-	}
-	return h(wrapper);
-};
-
 // 定义变量内容
 const route = useRoute();
 const router = useRouter();
@@ -51,76 +33,79 @@ const storesThemeConfig = useThemeConfig();
 const { keepAliveNames, cachedViews } = storeToRefs(storesKeepAliveNames);
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const state = reactive<ParentViewState>({
-	refreshRouterViewKey: '', // 非 iframe tagsview 右键菜单刷新时
-	iframeRefreshKey: '', // iframe tagsview 右键菜单刷新时
-	keepAliveNameList: [],
-	iframeList: [],
+  refreshRouterViewKey: '', // 非 iframe tagsview 右键菜单刷新时
+  iframeRefreshKey: '', // iframe tagsview 右键菜单刷新时
+  keepAliveNameList: [],
+  iframeList: [],
 });
 
 // 设置主界面切换动画
 const setTransitionName = computed(() => {
-	return themeConfig.value.animation;
+  return themeConfig.value.animation;
 });
 // 获取组件缓存列表(name值)
 const getKeepAliveNames = computed(() => {
-	return themeConfig.value.isTagsview ? cachedViews.value : state.keepAliveNameList;
+  return themeConfig.value.isTagsview ? cachedViews.value : state.keepAliveNameList;
 });
 // 设置 iframe 显示/隐藏
 const isIframePage = computed(() => {
-	return route.meta.isIframe;
+  return route.meta.isIframe;
 });
 // 获取 iframe 组件列表(未进行渲染)
 const getIframeListRoutes = async () => {
-	router.getRoutes().forEach((v) => {
-		if (v.meta.isIframe) {
-			v.meta.isIframeOpen = false;
-			v.meta.loading = true;
-			state.iframeList.push({ ...v });
-		}
-	});
+  router.getRoutes().forEach((v) => {
+    if (v.meta.isIframe) {
+      v.meta.isIframeOpen = false;
+      v.meta.loading = true;
+      state.iframeList.push({ ...v });
+    }
+  });
 };
 // 页面加载前，处理缓存，页面刷新时路由缓存处理
 onBeforeMount(() => {
-	state.keepAliveNameList = keepAliveNames.value;
-	mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
-		state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
-		state.refreshRouterViewKey = '';
-		state.iframeRefreshKey = '';
-		nextTick(() => {
-			state.refreshRouterViewKey = fullPath;
-			state.iframeRefreshKey = fullPath;
-			state.keepAliveNameList = keepAliveNames.value;
-		});
-	});
+  state.keepAliveNameList = keepAliveNames.value;
+  mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
+    state.refreshRouterViewKey = '';
+    state.iframeRefreshKey = '';
+    state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
+    nextTick(() => {
+      state.refreshRouterViewKey = fullPath;
+      state.iframeRefreshKey = fullPath;
+      setTimeout(()=>{
+        state.keepAliveNameList = keepAliveNames.value;
+      },100)
+    });
+  });
 });
 // 页面加载时
 onMounted(() => {
-	getIframeListRoutes();
-	// https://gitee.com/lyt-top/vue-next-admin/issues/I58U75
-	// https://gitee.com/lyt-top/vue-next-admin/issues/I59RXK
-	// https://gitee.com/lyt-top/vue-next-admin/pulls/40
-	nextTick(() => {
-		setTimeout(() => {
-			if (themeConfig.value.isCacheTagsView) {
-				let tagsViewArr: RouteItem[] = Session.get('tagsViewList') || [];
-				cachedViews.value = tagsViewArr.filter((item) => item.meta?.isKeepAlive).map((item) => item.name as string);
-			}
-		}, 0);
-	});
+  getIframeListRoutes();
+  // https://gitee.com/lyt-top/vue-next-admin/issues/I58U75
+  // https://gitee.com/lyt-top/vue-next-admin/issues/I59RXK
+  // https://gitee.com/lyt-top/vue-next-admin/pulls/40
+  nextTick(() => {
+    setTimeout(() => {
+      if (themeConfig.value.isCacheTagsView) {
+        let tagsViewArr: RouteItem[] = Session.get('tagsViewList') || [];
+        cachedViews.value = tagsViewArr.filter((item) => item.meta?.isKeepAlive).map((item) => item.name as string);
+      }
+    }, 0);
+  });
 });
 // 页面卸载时
-onUnmounted(() => {
-	mittBus.off('onTagsViewRefreshRouterView', () => {});
+onBeforeUnmount(() => {
+  mittBus.off('onTagsViewRefreshRouterView', () => {});
 });
 // 监听路由变化，防止 tagsView 多标签时，切换动画消失
 // https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/38/files
 watch(
-	() => route.fullPath,
-	() => {
-		state.refreshRouterViewKey = decodeURI(route.fullPath);
-	},
-	{
-		immediate: true,
-	}
+    () => route.fullPath,
+    () => {
+      state.refreshRouterViewKey = decodeURI(route.fullPath);
+    },
+    {
+      immediate: true,
+      deep:true
+    }
 );
 </script>