157 lines
4.1 KiB
Vue
157 lines
4.1 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<layout-header
|
|
:login-path="loginPath"
|
|
:logout-url="logoutUrl"
|
|
:change-password-url="changePasswordUrl"
|
|
:tx-img="txImg"
|
|
:user-name="userName"
|
|
:use-more-nav-bar="useMoreNavBar"
|
|
:menu-store="menuStore"
|
|
:user-store="userStore"
|
|
:nav-store="navStore"
|
|
@command="emits('command', $event)"
|
|
>
|
|
<template #logo>
|
|
<slot name="logo"></slot>
|
|
</template>
|
|
<template #userOtherInfo>
|
|
<slot name="userOtherInfo"></slot>
|
|
</template>
|
|
<template #NavBar>
|
|
<slot name="NavBar"></slot>
|
|
</template>
|
|
<template #dropdown>
|
|
<slot name="dropdown"></slot>
|
|
</template>
|
|
</layout-header>
|
|
</el-header>
|
|
<el-container>
|
|
<el-aside>
|
|
<el-scrollbar style="height: calc(100vh - 50px)">
|
|
<el-menu
|
|
router
|
|
unique-opened
|
|
:default-active="route.meta.props && route.name ? route.name : route.meta.activeMenu || route.path"
|
|
background-color="rgb(48, 65, 86)"
|
|
text-color="#edf7ff"
|
|
active-text-color="#409eff"
|
|
>
|
|
<layout-menu :menus="routes" />
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</el-aside>
|
|
<el-main>
|
|
<el-scrollbar style="height: calc(100vh - 50px)">
|
|
<router-view v-slot="{ Component }">
|
|
<transition name="view" mode="out-in">
|
|
<el-card :key="route.path">
|
|
<el-page-header v-if="route.meta.isBack !== false" title="返回" @back="router.back()">
|
|
<template #content>
|
|
{{route.matched.filter((item) => item.meta?.title).at(-1).meta.title }}
|
|
</template>
|
|
</el-page-header>
|
|
<component :is="Component"></component>
|
|
</el-card>
|
|
</transition>
|
|
</router-view>
|
|
</el-scrollbar>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import LayoutHeader from "./header/index.vue";
|
|
import LayoutMenu from "./menu/index.vue";
|
|
import { computed } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import tx from './header/tx.png'
|
|
import {
|
|
ElContainer,
|
|
ElHeader,
|
|
ElAside,
|
|
ElScrollbar,
|
|
ElMenu,
|
|
ElCard,
|
|
ElMain,
|
|
ElPageHeader
|
|
} from 'element-plus'
|
|
import "element-plus/es/components/container/style/css";
|
|
import "element-plus/es/components/header/style/css";
|
|
import "element-plus/es/components/aside/style/css";
|
|
import "element-plus/es/components/scrollbar/style/css";
|
|
import "element-plus/es/components/menu/style/css";
|
|
import "element-plus/es/components/card/style/css";
|
|
import "element-plus/es/components/main/style/css";
|
|
import "element-plus/es/components/page-header/style/css";
|
|
|
|
defineOptions({
|
|
name: "Layout",
|
|
});
|
|
const props = defineProps({
|
|
menuStore: { type: Object, required: true },
|
|
userStore: { type: Object, required: true },
|
|
navStore: { type: Object, required: true },
|
|
loginPath: { type: String, default: "/login" },
|
|
logoutUrl: { type: String, default: "/sys/logout" },
|
|
changePasswordUrl: { type: String, default: "/sys/user/password" },
|
|
txImg: { type: String, default: tx },
|
|
userName: { type: String, default: '' },
|
|
useMoreNavBar: { type: Boolean, default: true },
|
|
});
|
|
const emits = defineEmits(["command"]);
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const routes = computed(() => props.menuStore.getMenus);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.el-header {
|
|
--el-header-padding: 0;
|
|
--el-header-height: 50px;
|
|
}
|
|
|
|
.el-aside {
|
|
width: 210px;
|
|
background-color: rgb(48, 65, 86);
|
|
}
|
|
|
|
.el-menu {
|
|
width: 210px;
|
|
min-height: calc(100vh - 50px);
|
|
border-right: none;
|
|
background-color: rgb(48, 65, 86);
|
|
|
|
:deep {
|
|
span {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep {
|
|
.el-sub-menu__title *,
|
|
.el-menu-item * {
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.is-always-shadow {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
.el-main {
|
|
--el-main-padding: 0;
|
|
}
|
|
|
|
.el-card {
|
|
margin: 20px;
|
|
border: none !important;
|
|
min-height: calc(100vh - 90px);
|
|
}
|
|
</style>
|