hotline-web/src/layout/components/main.vue

<template>
	<el-main class="layout-main"
		:style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
		<el-scrollbar ref="layoutMainScrollbarRef" class="layout-main-scroll layout-backtop-header-fixed"
			wrap-class="layout-main-scroll" view-class="layout-main-scroll">
			<LayoutParentView />
			<LayoutFooter v-if="isFooter" />
		</el-scrollbar>
		<el-backtop :target="setBacktopClass" />
	</el-main>
</template>

<script setup lang="ts" name="layoutMain">
import { defineAsyncComponent, onMounted, computed, ref, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '@/stores/tagsViewRoutes';
import { useThemeConfig } from '@/stores/themeConfig';
import { useUserInfo } from '@/stores/userInfo';
import { NextLoading } from '@/utils/loading';
import mittBus from '@/utils/mitt';
import signalR from '@/utils/signalR';

// 引入组件
const LayoutParentView = defineAsyncComponent(() => import('@/layout/routerView/parent.vue'));
const LayoutFooter = defineAsyncComponent(() => import('@/layout/footer/index.vue'));

// 定义变量内容
const layoutMainScrollbarRef = ref<RefType>();
const route = useRoute();
const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
// 设置 footer 显示/隐藏
const isFooter = computed(() => {
	return themeConfig.value.isFooter && !route.meta.isIframe;
});
// 设置 header 固定
const isFixedHeader = computed(() => {
	return themeConfig.value.isFixedHeader;
});


// 设置主内容区的高度
const setMainHeight = computed(() => {
	if (isTagsViewCurrenFull.value) return '0px';
	const { isTagsview, layout } = themeConfig.value;
	const { showTelControl } = userInfos.value;
	if (isTagsview && layout !== 'classic' && showTelControl) {
		return '85px';
	} else if (isTagsview && layout !== 'classic' && !showTelControl) {
		return '85px';
	} else {
		return '51px';
	}

});
// 设置 Backtop 回到顶部
const setBacktopClass = computed(() => {
	if (themeConfig.value.isFixedHeader) return `.layout-backtop-header-fixed .el-scrollbar__wrap`;
	else return `.layout-backtop .el-scrollbar__wrap`;
});
// 页面加载前
onMounted( async () => {
	NextLoading.done(600);
	// 监听页面需要滚动事件
	mittBus.on('scrollTopEmit', (res: any) => {
		layoutMainScrollbarRef.value?.scrollTo(res.top ? res.top : 0, res.left ? res.left : 0)// 滚动到一组特定坐标(x，y)
	});
	await nextTick();
	await signalR.joinGroup('CallCenter'); // 加入分组
});
// 暴露变量
defineExpose({
	layoutMainScrollbarRef,
});
</script>