🔱: [client] sync upgrade with 21 commits [trident-sync]

'admin-22.12.12:发布v2.4.21版本，具体更新内容查看CHANGELOG.md' !42 修复工作流无法添加新节点问题 Merge pull request !42 from beta/bugfix_workflow 修复工作流无法添加新节点问题 1. 修复工作流无法添加新节点问题 2. 修复左侧导航无法隐藏问题 'admin-22.12.09:发布v2.4.2版本，具体更新内容查看CHANGELOG.md' !41 修复get请求传递嵌套对象或数组时无法正常编码问题 Merge pull request !41 from 随心/master !40 开启TagsView缓存后，刷新后所有的路由都变成组件缓存了 Merge pull request !40 from mrjimin/master 修复get请求传递嵌套对象或数组时无法正常编码问题 update src/layout/routerView/parent.vue. Signed-off-by: mrjimin <z8888788@163.com> update src/layout/routerView/parent.vue. 这里应该拿到的是已经设置开启组件缓存的路由，而不是全部，需要先判断item.meta.isKeepAlive Signed-off-by: mrjimin <z8888788@163.com> 'admin-22.11.30:发布v2.4.1版本，具体更新内容查看CHANGELOG.md' Merge branch 'master' of https://gitee.com/lyt-top/vue-next-admin 'admin-22.11.30:删除v2.4.0版本不需要的依赖' update src/views/error/404.vue. Signed-off-by: lyt-Top <1105290566@qq.com> update src/components/table/index.vue. Signed-off-by: lyt-Top <1105290566@qq.com> 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.29:发布v2.4.0版本，具体更新内容查看CHANGELOG.md' 'admin-22.11.19:修复v2.3.0版本动态路由事件调用关闭当前tagsview、普通路由刷新界面参数丢失问题' 'admin-22.11.18:优化v2.3.0版本tagsview风格5兼容火狐' 'admin-22.11.17:优化v2.3.0版本iframe右键菜单刷新问题' ...
2023-02-13 00:17:30 +08:00
parent 8e5fba2532
commit 80323dd641
228 changed files with 35680 additions and 25 deletions
--- a/web/src/layout/routerView/parent.vue
+++ b/web/src/layout/routerView/parent.vue
@@ -0,0 +1,108 @@
+<template>
+	<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 } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useKeepALiveNames } from '/@/stores/keepAliveNames';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { Session } from '/@/utils/storage';
+import mittBus from '/@/utils/mitt';
+
+// 引入组件
+const Iframes = defineAsyncComponent(() => import('/@/layout/routerView/iframes.vue'));
+
+// 定义变量内容
+const route = useRoute();
+const router = useRouter();
+const storesKeepAliveNames = useKeepALiveNames();
+const storesThemeConfig = useThemeConfig();
+const { keepAliveNames, cachedViews } = storeToRefs(storesKeepAliveNames);
+const { themeConfig } = storeToRefs(storesThemeConfig);
+const state = reactive<ParentViewState>({
+	refreshRouterViewKey: '', // 非 iframe tagsview 右键菜单刷新时
+	iframeRefreshKey: '', // iframe tagsview 右键菜单刷新时
+	keepAliveNameList: [],
+	iframeList: [],
+});
+
+// 设置主界面切换动画
+const setTransitionName = computed(() => {
+	return themeConfig.value.animation;
+});
+// 获取组件缓存列表(name值)
+const getKeepAliveNames = computed(() => {
+	return themeConfig.value.isTagsview ? cachedViews.value : state.keepAliveNameList;
+});
+// 设置 iframe 显示/隐藏
+const isIframePage = computed(() => {
+	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 });
+		}
+	});
+};
+// 页面加载前，处理缓存，页面刷新时路由缓存处理
+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;
+		});
+	});
+});
+// 页面加载时
+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);
+	});
+});
+// 页面卸载时
+onUnmounted(() => {
+	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,
+	}
+);
+</script>