'admin-21.03.18:修复tagsView切换页面参数丢失问题、添加通知滚动空界面'

src/components/notice/index.vue

@@ -0,0 +1,113 @@
+<template>
+	<div class="notice-container">
+		<ul class="notice-ul" :class="directionStyle">
+			<li v-for="(v, k) in noticeList" :key="k" class="notice-li">
+				{{ v }}
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onBeforeMount, onUnmounted } from 'vue';
+export default {
+	name: 'notice',
+	props: {
+		// 滚动方向 可选值"<upper|right|lower|left>"
+		direction: {
+			type: String,
+			default: () => 'lower',
+		},
+	},
+	setup(props) {
+		console.log(props);
+		const state = reactive({
+			noticeList: ['asdasds', 'bbbbb'],
+			isScroll: false,
+			directionStyle: '',
+		});
+		// 初始化通知滚动
+		const initNoticeScroll = () => {
+			window.setInterval(onNoticeScroll, 2000);
+		};
+		// 处理通知滚动数据
+		const onNoticeScroll = () => {
+			const { direction } = props;
+			if (direction === 'upper') setDirectionStyle();
+			state.isScroll = true;
+			if (direction === 'lower') setDirectionStyle();
+			window.setTimeout(() => {
+				if (direction === 'upper') {
+					state.noticeList.push(state.noticeList[0]);
+					state.noticeList.shift();
+				} else if (direction === 'lower') {
+					state.noticeList.unshift(state.noticeList[state.noticeList.length - 1]);
+					state.noticeList.pop();
+				}
+				state.isScroll = false;
+				setDirectionStyle();
+			}, 500);
+		};
+		// 动态设置方向样式
+		const setDirectionStyle = () => {
+			const { direction } = props;
+			if (direction === 'upper') {
+				state.isScroll ? (state.directionStyle = 'notice-ul-upper') : (state.directionStyle = '');
+				console.log(1111);
+			} else if (direction === 'lower') {
+				state.isScroll ? (state.directionStyle = 'notice-ul-lower') : (state.directionStyle = '');
+			}
+			console.log(state.directionStyle);
+		};
+		// 页面加载前
+		onBeforeMount(() => {
+			initNoticeScroll();
+		});
+		// 页面卸载时
+		onUnmounted(() => {
+			window.clearInterval();
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.notice-container {
+	position: relative;
+	height: 40px;
+	display: block;
+	position: relative;
+	overflow: hidden;
+	.notice-ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		display: block;
+		position: absolute;
+		width: 100%;
+		.notice-li {
+			height: 40px;
+			line-height: 40px;
+			color: #3a3a3a;
+			background-color: #ffe4ca;
+			padding: 0 15px;
+			cursor: pointer;
+		}
+	}
+	.notice-ul-upper {
+		transition: all 0.5s;
+		margin-top: -40px;
+		top: 0;
+		left: 0;
+	}
+	.notice-ul-lower {
+		transition: all 0.5s;
+		margin-bottom: -40px;
+		bottom: 0;
+		left: 0;
+	}
+}
+</style>

src/router/index.ts

@@ -452,6 +452,21 @@ export const dynamicRoutes = [
 							icon: 'iconfont icon-ditu',
 						},
 					},
+					{
+						path: '/fun/rollNotice',
+						name: 'rollNotice',
+						component: () => import('/@/views/fun/rollNotice/index.vue'),
+						meta: {
+							title: 'notice 滚动通知',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'iconfont icon-tongzhi',
+						},
+					},
 				],
 			},
 			{
@@ -500,6 +515,21 @@ export const dynamicRoutes = [
 							icon: 'el-icon-s-order',
 						},
 					},
+					{
+						path: '/pages/filteringDetails1',
+						name: 'filteringDetails1',
+						component: () => import('/@/views/pages/filtering/details1.vue'),
+						meta: {
+							title: '过滤筛选组件详情111',
+							isLink: '',
+							isHide: true,
+							isKeepAlive: false,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'el-icon-s-order',
+						},
+					},
 					{
 						path: '/pages/iocnfont',
 						name: 'iocnfont',

src/utils/setIconfont.ts

@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-	'//at.alicdn.com/t/font_2298093_rwhkigmjh19.css',
+	'//at.alicdn.com/t/font_2298093_ets0yznyu8g.css',
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 ];
 // 第三方 js url

src/views/fun/rollNotice/index.vue

@@ -0,0 +1,18 @@
+<template>
+	<div class="roll-notice-container">
+		<el-card shadow="hover" header="滚动通知演示"> </el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+export default {
+	name: 'rollNotice',
+	setup() {
+		const state = reactive({});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>

src/views/layout/navBars/breadcrumb/setings.vue

@@ -596,32 +596,34 @@ export default defineComponent({
 					onMenuBarHighlightChange();
 					getThemeConfig.value.isCollapse = false;
 				});
-				// 刷新页面时，设置了值，直接取缓存中的值进行初始化
-				setTimeout(() => {
-					// 顶栏背景渐变
-					if (getLocal('navbarsBgStyle')) {
-						const breadcrumbIndexEl: any = document.querySelector('.layout-navbars-breadcrumb-index');
-						breadcrumbIndexEl.style.cssText = getLocal('navbarsBgStyle');
-					}
-					// 菜单背景渐变
-					if (getLocal('asideBgStyle')) {
-						const asideEl: any = document.querySelector('.layout-container .el-aside');
-						asideEl.style.cssText = getLocal('asideBgStyle');
-					}
-					// 菜单字体背景高亮
-					if (getLocal('menuBarHighlightClass')) {
-						let els = document.querySelector('.el-menu-item.is-active');
-						if (!els) return false;
-						els.setAttribute('class', getLocal('menuBarHighlightClass'));
-					}
-					// 灰色模式/色弱模式
-					if (getLocal('appFilterStyle')) {
-						const appEl: any = document.querySelector('#app');
-						appEl.style.cssText = getLocal('appFilterStyle');
-					}
-					// 开启水印
-					onWartermarkChange();
-				}, 300);
+				window.addEventListener('load', () => {
+					// 刷新页面时，设置了值，直接取缓存中的值进行初始化
+					setTimeout(() => {
+						// 顶栏背景渐变
+						if (getLocal('navbarsBgStyle')) {
+							const breadcrumbIndexEl: any = document.querySelector('.layout-navbars-breadcrumb-index');
+							breadcrumbIndexEl.style.cssText = getLocal('navbarsBgStyle');
+						}
+						// 菜单背景渐变
+						if (getLocal('asideBgStyle')) {
+							const asideEl: any = document.querySelector('.layout-container .el-aside');
+							asideEl.style.cssText = getLocal('asideBgStyle');
+						}
+						// 菜单字体背景高亮
+						if (getLocal('menuBarHighlightClass')) {
+							let els = document.querySelector('.el-menu-item.is-active');
+							if (!els) return false;
+							els.setAttribute('class', getLocal('menuBarHighlightClass'));
+						}
+						// 灰色模式/色弱模式
+						if (getLocal('appFilterStyle')) {
+							const appEl: any = document.querySelector('#app');
+							appEl.style.cssText = getLocal('appFilterStyle');
+						}
+						// 开启水印
+						onWartermarkChange();
+					}, 400);
+				});
 			});
 		});
 		onUnmounted(() => {

src/views/layout/navBars/tagsView/tagsView.vue

@@ -103,10 +103,11 @@ export default {
 			tagsViewmoveToCurrentTag();
 		};
 		// 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中
-		const addTagsView = (path: string) => {
+		const addTagsView = (path: string, to: any) => {
 			if (state.tagsViewList.some((v: any) => v.path === path)) return false;
 			const item = state.tagsViewRoutesList.find((v: any) => v.path === path);
 			if (item.meta.isLink && !item.meta.isIframe) return false;
+			item.query = to?.query ? to?.query : route.query;
 			state.tagsViewList.push({ ...item });
 			addBrowserSetSession(state.tagsViewList);
 		};
@@ -121,7 +122,10 @@ export default {
 					if (v.path === path) {
 						state.tagsViewList.splice(k, 1);
 						setTimeout(() => {
-							router.push(arr[arr.length - 1].path);
+							// 最后一个
+							if (state.tagsViewList.length === k) router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
+							// 否则，跳转到下一个
+							else router.push({ path: arr[k].path, query: arr[k].query });
 						}, 0);
 					}
 				}
@@ -142,44 +146,36 @@ export default {
 			state.tagsViewRoutesList.map((v: any) => {
 				if (v.meta.isAffix && !v.meta.isHide) {
 					state.tagsViewList.push({ ...v });
-					if (state.tagsViewList.some((v: any) => v.path === path)) router.push(path);
-					else router.push(v.path);
+					if (state.tagsViewList.some((v: any) => v.path === path)) router.push({ path, query: route.query });
+					else router.push({ path: v.path, query: route.query });
 				}
 			});
 			addBrowserSetSession(state.tagsViewList);
 		};
 		// 6、开启当前页面全屏
 		const openCurrenFullscreen = (path: string) => {
+			const item = state.tagsViewList.find((v: any) => v.path === path);
 			nextTick(() => {
-				router.push(path);
+				router.push({ path, query: item.query });
 				const element = document.querySelector('.layout-main');
 				const screenfulls: any = screenfull;
 				screenfulls.request(element);
 			});
 		};
-		// 7、设置了 `isHide` 界面的，页面离开时关闭当前界面
-		const removeCurrentTagsView = (from: any) => {
-			const { meta, path } = from;
-			state.tagsViewList.map((v: any, k: number) => {
-				if (meta.isHide && path === v.path) {
-					state.tagsViewList.splice(k, 1);
-					addBrowserSetSession(state.tagsViewList);
-				}
-			});
-		};
 		// 当前项右键菜单点击
 		const onCurrentContextmenuClick = (data: any) => {
 			let { id, path } = data;
+			let currentTag = state.tagsViewList.find((v: any) => v.path === path);
 			switch (id) {
 				case 0:
 					refreshCurrentTagsView(path);
-					router.push(path);
+					router.push({ path, query: currentTag.query });
 					break;
 				case 1:
 					closeCurrentTagsView(path);
 					break;
 				case 2:
-					router.push(path);
+					router.push({ path, query: currentTag.query });
 					closeOtherTagsView(path);
 					break;
 				case 3:
@@ -205,7 +201,7 @@ export default {
 		const onTagsClick = (v: any, k: number) => {
 			state.routePath = v.path;
 			state.tagsRefsIndex = k;
-			router.push(v.path);
+			router.push(v);
 		};
 		// 更新滚动条显示
 		const updateScrollbar = () => {
@@ -328,10 +324,9 @@ export default {
 			initSortable();
 		});
 		// 路由更新时
-		onBeforeRouteUpdate((to, from) => {
-			removeCurrentTagsView(from);
+		onBeforeRouteUpdate((to) => {
 			state.routePath = to.path;
-			addTagsView(to.path);
+			addTagsView(to.path, to);
 			getTagsRefsIndex(to.path);
 			tagsViewmoveToCurrentTag();
 		});

src/views/pages/filtering/details1.vue

@@ -0,0 +1,33 @@
+<template>
+	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
+		<div class="layout-view-bg-white">
+			<div class="w100 h100 flex">
+				<div class="flex-margin color-primary">测试界面</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, computed } from 'vue';
+import { useStore } from '/@/store/index.ts';
+export default {
+	name: 'filteringDetails1',
+	setup() {
+		const store = useStore();
+		const state = reactive({
+			tagViewHeight: '',
+		});
+		// 设置主内容的高度
+		const initTagViewHeight = computed(() => {
+			let { isTagsview } = store.state.themeConfig.themeConfig;
+			if (isTagsview) return `114px`;
+			else return `80px`;
+		});
+		return {
+			initTagViewHeight,
+			...toRefs(state),
+		};
+	},
+};
+</script>

src/views/pages/filtering/index.vue

@@ -143,10 +143,17 @@ export default {
 		};
 		// 当前列表项点击
 		const onTableItemClick = (v: object) => {
-			router.push({
-				path: '/pages/filteringDetails',
-				query: { id: v.id },
-			});
+			if (v.id === 1) {
+				router.push({
+					path: '/pages/filteringDetails',
+					query: { id: v.id },
+				});
+			} else {
+				router.push({
+					path: '/pages/filteringDetails1',
+					query: { id: v.id },
+				});
+			}
 		};
 		// 分页点击
 		const onHandleSizeChange = (val: number) => {