fe-manage/src/App.vue

<template>
	<div id="container" v-if="!isLogin">
		<nav-top />
		<div style="display: flex">
			<nav-left />
			<div style="flex: 1; display: flex; flex-direction: column; width: 0">
				<open-pages />
				<bread-crumb />
				<main>
					<a-config-provider :locale="zhCN">
						<router-view />
					</a-config-provider>
				</main>
			</div>
		</div>
	</div>
	<div id="container" v-if="isLogin">
		<router-view />
	</div>
</template>
<script>
import { computed, defineComponent, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore, createStore } from "vuex";
import NavLeft from "@/components/NavLeft";
import NavTop from "@/components/NavTop";
import OpenPages from "@/components/OpenPages";
import BreadCrumb from "@/components/BreadCrumb";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import * as api from "./api/index1";
import * as api1 from "@/api/index1";
import * as api2 from "@/api/index";

export default defineComponent({
	components: {
		NavLeft,
		NavTop,
		OpenPages,
		BreadCrumb,
	},
	setup() {
		const router = useRouter();
		const route = useRoute();
		const store = useStore();
		const isLogin = ref(false);
		// console.log("router", router.getRoutes(), route);
		console.log("版本2.0.5------------");
		const routes = computed(() => {
			return router.getRoutes().filter((e) => e.meta?.isLink);
		});
		// watch(
		//     () => route.path,
		//     () => {
		//       route.path === "/login" && (isLogin.value = true);
		//     }
		// );
		const currentRouteName = computed(() => route.name);

		function init() {
			console.log(store);
			getUserInfo();
			initDict("faceclassPic");
			initDict("faceclassClass");
			initDict("faceclassScene");
			initDict("projectLevel");
			initDict("projectSys");
			initDict("pathmapPic");
			initDict("projectClass");
			initDict("projectPic");
			getMemberInfo();
			getOrgTree();
		}

		// 监听关闭浏览器
		let time1 = ref(0);
		let time2 = ref(0);

		//添加监听事件
		function beforeunloadHandler() {
			time1.value = new Date().getTime();
			// e.returnValue = '关闭提示'; 
		}

		function unloadHandler() {
			time2.value = new Date().getTime() - time1.value;
			if(time2.value<=5){
				store.replaceState(createStore({state: {openpages:null}}).state);
				localStorage.removeItem("openpages");
			}
		}
		

		onMounted(()=>{
			window.addEventListener('beforeunload', e => beforeunloadHandler(e));
			window.addEventListener('unload', e => unloadHandler(e));
		})


		async function getMemberInfo() {
			const list = localStorage.getItem("memberInitInfo");
			if (list) {
				store.commit("SET_MEMBER_INFO", JSON.parse(list));
				return;
			}
			const memberInitInfo = await api1
				.getMemberInfo({ keyWord: "", pageNo: 1, pageSize: 10 })
				.then((res) => res.data.data.rows);
			store.commit("SET_MEMBER_INFO", memberInitInfo);
			localStorage.setItem("memberInitInfo", JSON.stringify(memberInitInfo));
		}

		async function getUserInfo() {
			const userInfo = await api2.userInfo();
			store.commit("SET_USER", userInfo.data.data);
		}

		async function initDict(key, localStory = false) {
			let list;
			if (localStory) {
				list = localStorage.getItem(key);
				if (list) {
					store.commit("SET_DICT", { key, data: JSON.parse(list) });
					return;
				}
			}
			list = await getDictList(key);
			localStory && localStorage.setItem(key, JSON.stringify(list));
			store.commit("SET_DICT", { key, data: list });
		}

		const getDictList = (param) =>
			api1
				.getDict({
					pageNo: 1,
					pageSize: 20,
					setCode: param,
				})
				.then((res) => res.data.data.rows);
		//获取组织树
		const getOrgTree = () => {
			api.getOrgTreeInfo().then((res) => {
				store.commit("getOrgtreeList", res.data.data);
			});
		};
		init();
		return {
			isLogin,
			routes,
			name: currentRouteName,
			zhCN,
		};
	}
});
</script>
<style lang="scss">
//.ant-modal {
//
//  .ant-modal-content {
//    background-image: linear-gradient(
//            180deg, rgba(103, 64, 255, .2), rgba(166, 168, 255, 0), rgba(166, 168, 255, 0)) !important;
//    border-radius: 4px;
//
//    .ant-modal-body {
//      .ant-btn {
//        border-radius: 8px;
//        width: 100px;
//        height: 40px;
//      }
//
//      .ant-btn-primary {
//        background: #4ea6ff;
//        color: #fff;
//      }
//    }
//  }
//}

#app {
	// font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
	// sans-serif;
	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
		Microsoft YaHei, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
	height: 100%;
}

#container {
	margin: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 1000px;
	min-height: 100%;
	background-color: rgba(245, 247, 250, 1);

	main {
		height: 0;
		flex: 1 1 auto;
		// flex-shrink: 0;
		display: flex;
		overflow-y: auto;
		// display: flex;
		// flex: 1 1 auto;
		width: calc(100% - 40px);
		// margin-bottom: 20px;
		margin: 0px 20px 20px 20px;
		box-sizing: border-box;
		background: #ffffff;
		box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
	}

	.cus-btn {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16px;
		border: 1px solid #4ea6ff;
		border-radius: 8px;
		background: #4ea6ff;
		cursor: pointer;
		color: #fff;
	}

	.white {
		background: #fff;
		color: #4ea6ff;
	}

	.cus-input {
		height: 40px;
		border-radius: 8px;
	}

	.cus-select {
		height: 40px;
		border-radius: 8px;
	}

	// @media screen and (max-width: 1366px) {
	//   .cmMain {
	//     width: 750px;
	//   }
	// }
	// @media screen and (min-width: 1367px) and (max-width: 1680px) {
	//   .cmMain {
	//     width: 1010px;
	//   }
	// }
	// @media screen and (min-width: 1681px) and (max-width: 1920px) {
	//   .cmMain {
	//     width: 1270px;
	//   }
	// }
	// @media screen and (min-width: 1921px) {
	//   .cmMain {
	//     width: 1270px;
	//   }
	// }
}
</style>