'admin-22.11.19:修复v2.3.0版本动态路由事件调用关闭当前tagsview、普通路由刷新界面参数丢失问题'

Signed-off-by: lyt-Top <1105290566@qq.com>

src/layout/navBars/tagsView/tagsView.vue

@@ -101,6 +101,7 @@ interface CurrentContextmenu {
 	query: any;
 	path: string;
 	contextMenuClickId: string | number;
+	commonUrl: string;
 }
 
 export default defineComponent({
@@ -357,29 +358,34 @@ export default defineComponent({
 			else await router.push({ name: item.name, query: item.query });
 			stores.setCurrenFullscreen(true);
 		};
-		// 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息
+		// 当前项右键菜单点击，拿 `当前点击的路由路径` 对比 `tagsView 路由数组`，取当前点击项的详细路由信息
 		// 防止 tagsView 非当前页演示时，操作异常
-		const getCurrentRouteItem = (path: string, cParams: any) => {
-			const itemRoute = Session.get('tagsViewList') ? Session.get('tagsViewList') : state.tagsViewList;
-			return itemRoute.find((v: any) => {
-				if (
-					v.path === path &&
-					isObjectValueEqual(
-						v.meta.isDynamic ? (v.params ? v.params : null) : v.query ? v.query : null,
-						cParams && Object.keys(cParams ? cParams : {}).length > 0 ? cParams : null
-					)
-				) {
-					return v;
-				} else if (v.path === path && Object.keys(cParams ? cParams : {}).length <= 0) {
-					return v;
+		// https://gitee.com/lyt-top/vue-next-admin/issues/I61VS9
+		const getCurrentRouteItem = (item: any) => {
+			let resItem: any = {};
+			state.tagsViewList.forEach((v: any) => {
+				v.transUrl = transUrlParams(v);
+				if (v.transUrl) {
+					if (v.meta.isDynamic) {
+						// 路由带参数：动态路由（xxx/:id/:name"）isDynamic
+						if (v.transUrl === transUrlParams(v) && v.transUrl === decodeURI(item.path)) resItem = v;
+					} else {
+						// 路由带参数：普通路由，因为有 tagsView 共用/不共用
+						if (v.transUrl === transUrlParams(v) && v.transUrl === item.commonUrl) resItem = v;
+					}
+				} else {
+					// 路由不带参数
+					if (v.path === decodeURI(item.path)) resItem = v;
 				}
 			});
+			if (!resItem) return null;
+			else return resItem;
 		};
 		// 当前项右键菜单点击
 		const onCurrentContextmenuClick = async (item: CurrentContextmenu) => {
-			const cParams = item.meta.isDynamic ? item.params : item.query;
-			if (!getCurrentRouteItem(item.path, cParams)) return ElMessage({ type: 'warning', message: '请正确输入路径及完整参数（query、params）' });
-			const { path, name, params, query, meta, url } = getCurrentRouteItem(item.path, cParams);
+			item.commonUrl = transUrlParams(item);
+			if (!getCurrentRouteItem(item)) return ElMessage({ type: 'warning', message: '请正确输入路径及完整参数（query、params）' });
+			const { path, name, params, query, meta, url } = getCurrentRouteItem(item);
 			switch (item.contextMenuClickId) {
 				case 0:
 					// 刷新当前
@@ -732,8 +738,12 @@ export default defineComponent({
 	.tags-style-five {
 		align-items: flex-end;
 		.tags-style-five-svg {
-			-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
-				12 27 15;
+			-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKC0wLjEzMzUwNiA1MC4xMTkyIDUwKSIgaWQ9InN2Z18xIiBkPSJtMTAwLjExOTE5LDEwMGMtNTUuMjI4LDAgLTEwMCwtNDQuNzcyIC0xMDAsLTEwMGwwLDEwMGwxMDAsMHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3Ii8+CiAgPHBhdGggZD0ibS0wLjYzNzY2LDcuMzEyMjhjMC4xMTkxOSwwIDAuMjE3MzcsMC4wNTc5NiAwLjQ3Njc2LDAuMTE5MTljMC4yMzIsMC4wNTQ3NyAwLjI3MzI5LDAuMDM0OTEgMC4zNTc1NywwLjExOTE5YzAuMDg0MjgsMC4wODQyOCAwLjM1NzU3LDAgMC40NzY3NiwwbDAuMTE5MTksMGwwLjIzODM4LDAiIGlkPSJzdmdfMiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0ibTI4LjkyMTM0LDY5LjA1MjQ0YzAsMC4xMTkxOSAwLDAuMjM4MzggMCwwLjM1NzU3bDAsMC4xMTkxOWwwLDAuMTE5MTkiIGlkPSJzdmdfMyIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z180IiBoZWlnaHQ9IjAiIHdpZHRoPSIxLjMxMTA4IiB5PSI2LjgzNTUyIiB4PSItMC4wNDE3MSIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjEuNzg3ODQiIHdpZHRoPSIwLjExOTE5IiB5PSI2OC40NTY1IiB4PSIyOC45MjEzNCIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjQuODg2NzciIHdpZHRoPSIxOS4wNzAzMiIgeT0iNTEuMjkzMjEiIHg9IjM2LjY2ODY2IiBzdHJva2U9Im51bGwiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+'),
+				url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTg5Ljc2MjQgNy4zMzAxNCA1NS4xMjUyKSIgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEiIGZpbGw9IiNGOEVBRTciIGQ9Im02Mi41NzQ0OSwxMTcuNTIwODZjLTU1LjIyOCwwIC0xMDAsLTQ0Ljc3MiAtMTAwLC0xMDBsMCwxMDBsMTAwLDB6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDxwYXRoIGQ9Im0tMC42Mzc2Niw3LjMxMjI4YzAuMTE5MTksMCAwLjIxNzM3LDAuMDU3OTYgMC40NzY3NiwwLjExOTE5YzAuMjMyLDAuMDU0NzcgMC4yNzMyOSwwLjAzNDkxIDAuMzU3NTcsMC4xMTkxOWMwLjA4NDI4LDAuMDg0MjggMC4zNTc1NywwIDAuNDc2NzYsMGwwLjExOTE5LDBsMC4yMzgzOCwwIiBpZD0ic3ZnXzIiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxwYXRoIGQ9Im0yOC45MjEzNCw2OS4wNTI0NGMwLDAuMTE5MTkgMCwwLjIzODM4IDAsMC4zNTc1N2wwLDAuMTE5MTlsMCwwLjExOTE5IiBpZD0ic3ZnXzMiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNCIgaGVpZ2h0PSIwIiB3aWR0aD0iMS4zMTEwOCIgeT0iNi44MzU1MiIgeD0iLTAuMDQxNzEiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNSIgaGVpZ2h0PSIxLjc4Nzg0IiB3aWR0aD0iMC4xMTkxOSIgeT0iNjguNDU2NSIgeD0iMjguOTIxMzQiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNiIgaGVpZ2h0PSI0Ljg4Njc3IiB3aWR0aD0iMTkuMDcwMzIiIHk9IjUxLjI5MzIxIiB4PSIzNi42Njg2NiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiA8L2c+Cjwvc3ZnPg=='),
+				url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='8' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
+			-webkit-mask-size: 18px 30px, 20px 30px, calc(100% - 30px) calc(100% + 17px);
+			-webkit-mask-position: right bottom, left bottom, center top;
+			-webkit-mask-repeat: no-repeat;
 		}
 		.layout-navbars-tagsview-ul-li {
 			padding: 0 5px;

src/layout/routerView/iframes.vue

@@ -51,22 +51,27 @@ export default defineComponent({
 		const getRoutePath = computed(() => {
 			return route.path;
 		});
+		// 关闭 iframe loading
+		const closeIframeLoading = (val: string, item: any) => {
+			nextTick(() => {
+				if (!iframeRef.value) return false;
+				iframeRef.value.forEach((v: any) => {
+					if (v.dataset.url === val) {
+						v.onload = () => {
+							if (item.meta.isIframeOpen && item.meta.loading) item.meta.loading = false;
+						};
+					}
+				});
+			});
+		};
 		// 监听路由变化，初始化 iframe 数据，防止多个 iframe 时，切换不生效
 		watch(
 			() => route.fullPath,
 			(val) => {
 				const item: any = props.list.find((v: any) => v.path === val);
-				if (item && !item.meta.isIframeOpen) item.meta.isIframeOpen = true;
-				nextTick(() => {
-					if (!iframeRef.value) return false;
-					iframeRef.value.forEach((v: any) => {
-						if (v.dataset.url === val) {
-							v.onload = () => {
-								if (item && item.meta.isIframeOpen && item.meta.loading) item.meta.loading = false;
-							};
-						}
-					});
-				});
+				if (!item) return false;
+				if (!item.meta.isIframeOpen) item.meta.isIframeOpen = true;
+				closeIframeLoading(val, item);
 			},
 			{
 				immediate: true,
@@ -75,7 +80,16 @@ export default defineComponent({
 		// 监听 iframe refreshKey 变化，用于 tagsview 右键菜单刷新
 		watch(
 			() => props.refreshKey,
-			() => {},
+			() => {
+				const item: any = props.list.find((v: any) => v.path === route.path);
+				if (!item) return false;
+				if (item.meta.isIframeOpen) item.meta.isIframeOpen = false;
+				setTimeout(() => {
+					item.meta.isIframeOpen = true;
+					item.meta.loading = true;
+					closeIframeLoading(route.fullPath, item);
+				});
+			},
 			{
 				deep: true,
 			}

src/router/index.ts

@@ -114,11 +114,12 @@ router.beforeEach(async (to, from, next) => {
 					// 后端控制路由：路由数据初始化，防止刷新时丢失
 					await initBackEndControlRoutes();
 					// 解决刷新时，一直跳 404 页面问题，关联问题 No match found for location with path 'xxx'
-					next({ path: to.path });
+					// to.query 防止页面刷新时，普通路由带参数时，参数丢失。动态路由（xxx/:id/:name"）isDynamic 无需处理
+					next({ path: to.path, query: to.query });
 				} else {
 					// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
 					await initFrontEndControlRoutes();
-					next({ path: to.path });
+					next({ path: to.path, query: to.query });
 				}
 			} else {
 				next();

src/utils/wartermark.ts

@@ -14,7 +14,7 @@ const setWatermark = (str: string) => {
 	const div = document.createElement('div');
 	div.id = id;
 	div.style.pointerEvents = 'none';
-	div.style.top = '15px';
+	div.style.top = '0px';
 	div.style.left = '0px';
 	div.style.position = 'fixed';
 	div.style.zIndex = '10000000';