<template>
|
<div class="app-wrapper" :class="classObj">
|
<!-- 头部菜单 - 根据环境配置显示 -->
|
<div class="header" style="width: auto; overflow: inherit" v-if="!containerOperate?.specialcontainer && menuConfig.showHeader">
|
<AppHeader @menuCollapse="changeMenuCollapse"></AppHeader>
|
</div>
|
<div class="header" style="width: auto; overflow: inherit" v-if="containerOperate?.specialcontainer && menuConfig.showHeader">
|
<template v-if="currentMenuCode!='activityInitiate'&¤tMenuCode!='activityInitiate6'">
|
<AppActHeader ref='appActHeaderRef' ></AppActHeader>
|
</template>
|
</div>
|
<div :class="containerOperate?.specialcontainer?'content-wrapperall':'content-wrapper'">
|
<!-- 左侧菜单 - 根据环境配置显示 -->
|
<LeftSidebar
|
v-if="!containerOperate?.specialcontainer && menuConfig.showLeftMenu"
|
class="sidebar-container"
|
:menuState="menuState"
|
></LeftSidebar>
|
<div class="main-container">
|
<!-- 顶部菜单 - 根据环境配置显示 -->
|
<topMenu class="nav-head" v-if="!containerOperate?.specialcontainer && menuConfig.showTopMenu"></topMenu>
|
<!-- <el-main class="main">
|
<Breadcrumb id="breadcrumb" class="breadcrumb" />
|
</el-main> -->
|
<el-scrollbar
|
class="scrollbar-main"
|
:style="{ 'max-height': layoutConfig.mainContainerHeight, 'min-width':'900px' }"
|
ref="scrollViewContainer"
|
>
|
<router-view v-slot="{ Component, route }">
|
<transition name="slide-left" mode="out-in">
|
<keep-alive :include="cachedViews" :exclude="excludeViews">
|
<component
|
:is="Component"
|
:key="route.path"
|
v-if="isRouterAlive"
|
/>
|
</keep-alive>
|
</transition>
|
</router-view>
|
</el-scrollbar>
|
<!-- 版权信息 - 根据环境配置显示 -->
|
<div class="fontDiv" v-if="menuConfig.showFooter">中国交通建设集团有限公司 版权所有</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
// 左侧菜单列表
|
import LeftSidebar from './components/sideBar/index.vue'
|
// 顶部menu
|
import topMenu from './components/topMenu.vue'
|
import AppHeader from './components/appHeader.vue'
|
import AppActHeader from './components/appActHeader.vue'
|
import Breadcrumb from './components/Breadcrumb.vue'
|
import { storeToRefs } from 'pinia'
|
import { useNavTabs } from '@/stores/modules/navTabs'
|
import { useRoute } from 'vue-router'
|
// 导入环境配置工具
|
import { getMenuConfig, getLayoutConfig } from '@/utils/env'
|
|
const navTabsStore = useNavTabs()
|
const appActHeaderRef=ref()
|
// 获取需要缓存的页面，加入到Tabs里的都缓存
|
const { cachedViews, excludeViews } = storeToRefs(navTabsStore)
|
const scrollViewContainer = ref()
|
const isRouterAlive = ref<boolean>(true)
|
|
// 环境配置
|
const menuConfig = computed(() => getMenuConfig())
|
const layoutConfig = computed(() => getLayoutConfig())
|
|
const reload = () => {
|
isRouterAlive.value = false
|
nextTick(() => {
|
isRouterAlive.value = true
|
})
|
}
|
const classObj = ref<boolean>(true)
|
const menuState = ref<boolean>(false) // 控制左侧菜单的展开收起
|
|
// 切换左侧菜单的展示隐藏
|
const changeMenuCollapse = (state: boolean) => {
|
menuState.value = state
|
}
|
const route = useRoute()
|
const key = computed(() => {
|
return route.path + Math.random()
|
})
|
provide('reload', reload)
|
const containerOperate=ref()
|
const currentMenuCode=ref()
|
onMounted(() => {
|
console.log('route.query',route.query)
|
currentMenuCode.value=route.query.actcode
|
// 如果值是specialcontainer=只显示页面 没有菜单和头部
|
containerOperate.value=route.query
|
})
|
</script>
|
<style scoped lang="scss">
|
.app-wrapper {
|
position: relative;
|
}
|
.main {
|
background-color: #ebeef7;
|
box-shadow: inset 2px 3px 10px #eaeaea;
|
padding: 10px 20px 0;
|
.main-content {
|
padding: 24px;
|
background: #fff;
|
border-radius: 4px;
|
box-shadow: 0 0 12px #0000000d;
|
border: 1px solid #e4e7ed;
|
}
|
|
.nobg {
|
padding: 0px;
|
background: transparent !important;
|
box-shadow: 0 0 0px #0000000d;
|
border-width: 0;
|
}
|
}
|
|
.breadcrumb {
|
margin-bottom: 10px;
|
font-size: 12px;
|
}
|
|
.content-wrapper {
|
width: 100%;
|
height: calc(100vh);
|
display: flex;
|
}
|
.content-wrapperall{
|
width: 100%;
|
height: 100vh;
|
display: flex;
|
}
|
.sidebar-container {
|
background-color: #374768;
|
}
|
|
.main-container {
|
flex: 1;
|
height: 100%;
|
text-align: left;
|
//height: 92px;
|
padding: 0;
|
overflow: hidden;
|
position: relative;
|
|
.nav-head {
|
//width: 100%;
|
//height: 30%;
|
//padding: 0 20px;
|
margin-bottom: 0px;
|
//display: flex;
|
//flex-direction: row;
|
//align-items: center;
|
}
|
}
|
|
.scrollbar-main {
|
width: 100%;
|
margin: auto;
|
padding: 0px 10px 0 10px;
|
// background-color: #fcfcfc;
|
// border-radius: 5px;
|
}
|
|
// 动画设置
|
.slide-left-enter-from {
|
transform: translateX(-20px);
|
opacity: 0;
|
}
|
|
.slide-left-enter-to {
|
transform: translateX(0px);
|
}
|
|
.slide-left-leave-from {
|
transform: translateX(0);
|
}
|
|
.slide-left-leave-to {
|
transform: translateX(20px);
|
opacity: 0;
|
}
|
|
.slide-left-enter-active,
|
.slide-left-leave-active {
|
transition: all 0.3s;
|
}
|
|
.fontDiv {
|
position: absolute;
|
bottom: 0px;
|
left: 0px;
|
right: 0;
|
color: #646c9a;
|
width: 100%;
|
font-size: 12px;
|
height: 30px;
|
text-align: center;
|
line-height: 30px;
|
// padding-left: 42%;
|
background-color: #dce6f4;
|
}
|
</style>
|
