wisdomisitezwfront-web/src/App.vue

<template>
	<el-config-provider :locale="i18nLocale" v-if="isRouterAlive" :button="config" :size="assemblySize">
		<router-view></router-view>
		<!-- 项目端侧边栏选择 -->
		<engineeringEngDrawer
			v-model="engVisable"
			:active="activeValue"
			:tabsShow="true"
			ref="engDrawer"
			:engList="engList"
			@select="tabsSelect"
			v-if="globalStore.accountType == 4 && tabsShow"
		>
			<template #default="{ data }">
				<span style="margin-left: 10px" @click="onUpdate(data)">{{
					activeValue == "eng" ? data.engineeringName : data.projectName
				}}</span>
			</template>
		</engineeringEngDrawer>
		<!-- 企业端侧边栏选择 -->
		<engineeringEngDrawer
			v-model="engVisable"
			:tabsShow="false"
			ref="engDrawer"
			:engList="engList"
			v-if="globalStore.accountType == 3 && tabsShow"
		>
			<template #default="{ data }">
				<span style="margin-left: 10px" @click="onUpdate(data)">{{ data.engineeringName }}</span>
			</template>
		</engineeringEngDrawer>
		<allEngineering @click="engVisable = true" v-if="tabsShow" />
	</el-config-provider>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick, provide, onMounted, watch } from "vue";
import { GlobalStore } from "@/stores";
import { useRoute } from "vue-router";
// import { useTheme } from "@/hooks/useTheme";
import { getBrowserLang } from "@/utils/util";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import { getSystemConfig } from "@/api/modules/jxjview";

import { getRelevanceList } from "@/api/modules/common";
import engineeringEngDrawer from "@/components/engineeringEngDrawer/index.vue";
import allEngineering from "@/components/allEngineering/index.vue";
import { getEngineeringName } from "@/api/modules/project";
// // 初始化主题配置
// const { initTheme } = useTheme();
// initTheme();

const globalStore = GlobalStore();
const tabsShow = ref<any>(false);
const route = useRoute();
const activeValue = ref(globalStore.activeType);
const engList = ref([]);
const engVisable = ref(false);
const isRouterAlive = ref(true);
const reload = () => {
	isRouterAlive.value = false;
	nextTick(() => {
		isRouterAlive.value = true;
	});
};

provide("reload", reload);
// 配置element按钮文字中间是否有空格
const config = reactive({
	autoInsertSpace: false
});

// element 语言配置
const i18nLocale = computed(() => {
	if (globalStore.language && globalStore.language == "zh") return zhCn;
	if (globalStore.language == "en") return en;
	return getBrowserLang() == "zh" ? zhCn : en;
});

// 配置全局组件大小
const assemblySize = computed(() => globalStore.assemblySize);

// 抽屉tab选择时
const tabsSelect = val => {
	activeValue.value = val;
	globalStore.activeType = val;
	if (val == "eng") {
		getengineering();
	} else if (val == "project") {
		getProject();
	}
};
// 获取项目信息
const getProject = async () => {
	const res = await getEngineeringName();
	engList.value = [res.result];
	if (res.result) {
		globalStore.activeSn = res.result.projectSn;
	}
};
const getengineering = async () => {
	// let newParams = JSON.parse(JSON.stringify(params));
	const res = await getRelevanceList();
	engList.value.length = 0;
	engList.value = res.result;
	console.log(engList.value);
	if (res.result && res.result.length > 0) {
		activeValue.value = "eng";
		globalStore.activeType = "eng";
		globalStore.activeSn = res.result[0].engineeringSn;
	}
};
// 点击抽屉的工程名称更新页面
const onUpdate = async row => {
	if (activeValue.value == "eng") {
		globalStore.activeSn = row.engineeringSn;
		globalStore.activeId = row.id;
	} else if (activeValue.value == "project") {
		globalStore.activeSn = row.projectSn;
		globalStore.activeId = row.id;
	}
};
onMounted(async () => {
	const res = await getSystemConfig({ configKey: "system_login_background" });
	console.log(res);
	if (res.result && res.result.length > 0) {
		globalStore.systemConfigBg = res.result[0].configValue;
	}
	const res2 = await getSystemConfig({ configKey: "system_logo" });
	console.log(res2);
	if (res2.result && res2.result.length > 0) {
		globalStore.systemConfigLogo = res2.result[0].configValue;
	}
	const res3 = await getSystemConfig({ configKey: "system_name" });
	console.log(res3);
	if (res3.result && res3.result.length > 0) {
		globalStore.systemConfigName = res3.result[0].configValue;
	}
	const res4 = await getSystemConfig({ configKey: "system_login_center_background" });
	console.log(res4);
	if (res4.result && res4.result.length > 0) {
		globalStore.systemConfigSubBg = res4.result[0].configValue;
	}
});
watch(
	() => route.path,
	n => {
		console.log(route.path);
		if (n != "/login" && globalStore.token && engList.value.length == 0) {
			getengineering();
		}
		tabsShow.value = route.meta.showSidebar;
	}
);
</script>
<style lang="scss">
:deep() {
	.tabs-option {
		display: none;
	}
}
// 地图的搜索层级功能 去掉或者加上scope就会导致地图搜索失效
.amap-sug-result {
	z-index: 2999 !important;
	.auto-item {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 14px;
		color: #666;
	}
}
</style>