epmet-oper-gov/src/views/main-shuju/main.vue

<template>
	<fixed1920>
		<div
			v-loading.fullscreen.lock="loading"
			:element-loading-text="$t('loading')"
			:class="[
				'g-bd',
				{ 'z-sidebar--fold': $store.state.sidebarFold },
				{
					'z-sidebar--noside': true,
				},
				{ 'z-iframe': $store.state.inIframe || ($store.state.fullscreen && $route.name=='i-1642710158240174082') },
			]"
		>
			<template v-if="!loading">
				<main-navbar
					ref="ref_navbar"
					v-if="!$store.state.inIframe && !($store.state.fullscreen && $route.name=='i-1642710158240174082')"
				/>

				<div class="g-cnt">
					<main-content
						v-if="!$store.state.contentIsNeedRefresh"
						@changeCustomerName="changeCustomerName"
					/>
				</div>
				<main-theme-tools />
			</template>
		</div>
	</fixed1920>
</template>

<script>
import MainNavbar from "./main-navbar";
import MainContent from "./main-content";
import debounce from "lodash/debounce";
import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick";
import { requestPost } from "@/js/dai/request";
import fixed1920 from "@/views/components/fixed1920.vue";
import MainThemeTools from "./main-theme-tools";

export default {
	provide() {
		return {
			// 刷新
			refresh() {
				this.$store.state.contentIsNeedRefresh = true;
				this.$nextTick(() => {
					this.$store.state.contentIsNeedRefresh = false;
				});
			},
		};
	},
	data() {
		return {
			loading: true,
			userType: localStorage.getItem("userType"),
		};
	},
	components: {
		MainNavbar,
		MainContent,
		fixed1920,
		MainThemeTools,
	},

	watch: {
		$route: "routeHandle",
	},
	async created() {
		this.windowResizeHandle();
		this.routeHandle(this.$route);
		Promise.all([this.getWorkUserInfo()]).then(() => {
			this.loading = false;
		});
	},
	computed: {},
	methods: {
		changeCustomerName(customerName) {
			this.$refs["ref_navbar"].changeCustomerName(customerName);
		},
		// 窗口改变大小
		windowResizeHandle() {
			this.$store.state.sidebarFold =
				document.documentElement["clientWidth"] <= 992 || false;
			window.addEventListener(
				"resize",
				debounce(() => {
					this.$store.state.sidebarFold =
						document.documentElement["clientWidth"] <= 992 || false;
				}, 150)
			);
		},
		// 路由, 监听
		routeHandle(route) {
			if (!route.meta.isTab) {
				this.$store.state.mainShuju.activeName = "";
				this.$store.state.mainShuju.contentTabsActiveName = "";
				return false;
			}
			var tab = this.$store.state.contentTabs.filter(
				(item) => item.name === route.name
			)[0];
			if (!tab) {
				tab = {
					...window.SITE_CONFIG["contentTabDefault"],
					...route.meta,
					name: route.name,
					params: { ...route.params },
					query: { ...route.query },
				};
				this.$store.state.contentTabs =
					this.$store.state.contentTabs.concat(tab);
			}

			this.$store.state.mainShuju.activeName = tab.menuId;
			this.$store.state.mainShuju.contentTabsActiveName = tab.name;
		},

		// 获取当前管理员信息
		async getWorkUserInfo() {
			const url = "/epmetuser/customerstaff/staffbasicinfo";
			let params = {};
			const { data, code, msg } = await requestPost(url, params);
			if (code === 0) {
				this.$store.state.user = { ...data };
				console.log("user---hahha", this.$store.state.user);
				localStorage.setItem("roleList", data.roleList);
				localStorage.setItem("customerId", data.customerId);
				localStorage.setItem("staffId", data.id);
				localStorage.setItem("agencyId", data.agencyId);
				localStorage.setItem("level", data.level);
				if (!localStorage.getItem("customerName")) {
					localStorage.setItem(
						"customerName",
						data.customerName || ""
					);
				}
			} else {
				this.$message.error(msg);
			}
		},
	},
};
</script>

<style lang="scss" src="@/assets/scss/main-shuju.scss" scoped></style>
<style lang="scss">
.info-h {
	height: calc(100% - 320px);
	// overflow: auto;
}
.info-scroll {
	&::-webkit-scrollbar {
		width: 8px;
		// background: linear-gradient(270deg, #0063FE, #0095FF);
	}

	&::-webkit-scrollbar-corner,
    /* 滚动条角落 */
  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-track {
		/*滚动条的轨道*/
		border-radius: 4px;
	}

	&::-webkit-scrollbar-corner,
	&::-webkit-scrollbar-track {
		/* 滚动条轨道 */

		background: rgba(12, 129, 254, 0.24);
		// box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
	}

	&::-webkit-scrollbar-thumb {
		/* 滚动条手柄 */
		background: linear-gradient(270deg, #1257c9, #0095ff);
	}
}
</style>