|
<template>
<!-- 基础信息维护 -->
<div class="title_declaration">
<!-- 左侧菜单 -->
<el-menu
background-color="#e5f1fd"
text-color="#666"
active-text-color="#0063c7"
unique-opened
:default-active="menuActivePath"
class="leftMenu"
router
>
<div class="chose_btn">k</div>
<!-- 基础信息维护 -->
<el-submenu index="1">
<template slot="title">
<span>基础信息维护</span>
</template>
<el-menu-item index="/home/basic_staff_information/basic_staff_information_management"
>人员管理</el-menu-item
>
</el-submenu>
</el-menu>
<!-- 内容 -->
<div class="content">
<!-- 面包屑 -->
<div class="breadcrumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>{{ ownRoute.name }}</el-breadcrumb-item>
<el-breadcrumb-item v-if="itemRoute.meta.hasChildren">{{
itemRoute.name
}}</el-breadcrumb-item>
<el-breadcrumb-item v-else>{{ itemRoute.name }}</el-breadcrumb-item>
<el-breadcrumb-item v-if="itemRoute.meta.childrenTitle">{{
itemRoute.meta.childrenTitle
}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<!-- 主要内容出口 -->
<div class="main">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
// 引入local
import local from "@/utils/local";
export default {
data() {
return {
// 当前页面路由
ownRoute: {},
//当前选项路由
itemRoute: {
meta: {},
},
// 当前激活path
menuActivePath: "",
};
},
methods: {
// 获取当前页面路由
getRouters() {
local.get("allRoutes").forEach((item) => {
if (item.path === local.get("ownpath")) {
console.log(item);
this.ownRoute = item;
}
});
},
// 获取当前选项路由
getItemRoutes() {
if (this.ownRoute.children) {
this.ownRoute.children.forEach((item) => {
if (item.path === location.hash.substring(1)) {
this.itemRoute = item;
}
})
}
},
// 计算激活路由
// calcActive() {
// if (!this.itemRoute.meta.fatherPath) return;
// this.menuActivePath = this.itemRoute.meta.fatherPath;
// },
},
created() {
this.getRouters();
this.getItemRoutes();
this.menuActivePath = this.$route.path;
// this.calcActive();
},
watch: {
"$route.path"() {
this.getItemRoutes();
// this.calcActive();
},
},
};
</script>
<style lang="less" scoped>
.title_declaration {
flex: 1;
display: flex;
.el-menu {
// display: none;
border-radius: 10px;
overflow: hidden;
flex: 200px 0 0;
border-right: none;
.chose_btn {
width: 10px;
height: 50px;
background-color: orange;
float: left;
}
.el-submenu {
/deep/.el-menu {
.el-menu-item {
background-color: #f9f9f9 !important;
&.is-active,
&.is-active.parent {
background-color: #ddd !important;
color: #0063c7 !important;
}
&:hover {
background-color: #ddd !important;
color: #6ab5f6 !important;
}
}
}
}
}
.content {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
.breadcrumb {
box-sizing: border-box;
border-bottom: 2px solid #e5f1fd;
flex: 58px 0 0;
display: flex;
color: #666;
font-weight: bold;
align-items: center;
padding-left: 20px;
}
.main {
width: calc( 100vw - 240px);
flex: 1;
padding: 20px;
}
}
}
</style>
|