|
|
<template>
|
|
|
<!-- 主内容区域 -->
|
|
|
<el-main>
|
|
|
<!-- 面包屑导航组件，动态绑定标题 -->
|
|
|
<bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
|
|
|
<!-- 路由视图，用于显示当前路由对应的组件 -->
|
|
|
<router-view class="router-view"></router-view>
|
|
|
</el-main>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import menu from "@/utils/menu"; // 导入菜单工具模块
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
menuList: [], // 存储菜单列表数据
|
|
|
role: "", // 当前用户角色
|
|
|
currentIndex: -2, // 当前选中菜单的索引
|
|
|
itemMenu: [], // 当前菜单项的子菜单数据
|
|
|
title: '' // 当前面包屑导航的标题
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
let menus = menu.list(); // 获取菜单列表
|
|
|
this.menuList = menus; // 将菜单列表赋值给组件数据
|
|
|
this.role = this.$storage.get("role"); // 从存储中获取当前用户角色
|
|
|
},
|
|
|
methods: {
|
|
|
// 菜单点击事件处理函数
|
|
|
menuHandler(menu) {
|
|
|
this.$router.push({ name: menu.tableName }); // 路由跳转到指定名称的页面
|
|
|
this.title = menu.menu; // 更新面包屑导航的标题
|
|
|
},
|
|
|
// 菜单标题改变时的处理函数
|
|
|
titleChange(index, menus) {
|
|
|
this.currentIndex = index; // 更新当前选中菜单的索引
|
|
|
this.itemMenu = menus; // 更新当前菜单项的子菜单数据
|
|
|
console.log(menus); // 打印子菜单数据到控制台（调试用）
|
|
|
},
|
|
|
// 返回首页时的处理函数
|
|
|
homeChange(index) {
|
|
|
this.itemMenu = []; // 清空子菜单数据
|
|
|
this.title = ""; // 清空面包屑导航的标题
|
|
|
this.currentIndex = index; // 更新当前选中菜单的索引
|
|
|
this.$router.push({ name: 'home' }); // 路由跳转到首页
|
|
|
},
|
|
|
// 进入个人中心时的处理函数
|
|
|
centerChange(index) {
|
|
|
this.itemMenu = [ // 设置个人中心的子菜单数据
|
|
|
{
|
|
|
"buttons": ["新增", "查看", "修改", "删除"], // 按钮权限
|
|
|
"menu": "修改密码", // 子菜单名称
|
|
|
"tableName": "updatePassword" // 对应的路由名称
|
|
|
},
|
|
|
{
|
|
|
"buttons": ["新增", "查看", "修改", "删除"], // 按钮权限
|
|
|
"menu": "个人信息", // 子菜单名称
|
|
|
"tableName": "center" // 对应的路由名称
|
|
|
}
|
|
|
];
|
|
|
this.title = ""; // 清空面包屑导航的标题
|
|
|
this.currentIndex = index; // 更新当前选中菜单的索引
|
|
|
this.$router.push({ name: 'home' }); // 路由跳转到首页
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
/* 样式部分 */
|
|
|
a {
|
|
|
text-decoration: none; /* 去掉链接下划线 */
|
|
|
color: #555; /* 设置链接文字颜色 */
|
|
|
}
|
|
|
|
|
|
a:hover {
|
|
|
background: #00c292; /* 鼠标悬停时的背景颜色 */
|
|
|
}
|
|
|
|
|
|
.nav-list {
|
|
|
width: 100%; /* 宽度占满父容器 */
|
|
|
margin: 0 auto; /* 居中对齐 */
|
|
|
text-align: left; /* 文本左对齐 */
|
|
|
margin-top: 20px; /* 设置顶部外边距 */
|
|
|
|
|
|
.nav-title {
|
|
|
display: inline-block; /* 设置为行内块元素 */
|
|
|
font-size: 15px; /* 设置字体大小 */
|
|
|
color: #333; /* 设置文字颜色 */
|
|
|
padding: 15px 25px; /* 设置内边距 */
|
|
|
border: none; /* 去掉边框 */
|
|
|
}
|
|
|
|
|
|
.nav-title.active {
|
|
|
color: #555; /* 设置激活状态的文字颜色 */
|
|
|
cursor: default; /* 设置鼠标样式为默认 */
|
|
|
background-color: #fff; /* 设置激活状态的背景颜色 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.nav-item {
|
|
|
margin-top: 20px; /* 设置顶部外边距 */
|
|
|
background: #FFFFFF; /* 设置背景颜色 */
|
|
|
padding: 15px 0; /* 设置上下内边距 */
|
|
|
|
|
|
.menu {
|
|
|
padding: 15px 25px; /* 设置内边距 */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-main {
|
|
|
background-color: #F6F8FA; /* 设置主内容区域的背景颜色 */
|
|
|
padding: 0 24px; /* 设置左右内边距 */
|
|
|
// padding-top: 60px; /* 设置顶部内边距 */
|
|
|
}
|
|
|
|
|
|
.router-view {
|
|
|
padding: 10px; /* 设置内边距 */
|
|
|
margin-top: 10px; /* 设置顶部外边距 */
|
|
|
background: #FFFFFF; /* 设置背景颜色 */
|
|
|
box-sizing: border-box; /* 使用标准盒模型 */
|
|
|
}
|
|
|
|
|
|
.bread-crumbs {
|
|
|
width: 100%; /* 宽度占满父容器 */
|
|
|
// border-bottom: 1px solid #e9eef3; /* 设置底部边框 */
|
|
|
// border-top: 1px solid #e9eef3; /* 设置顶部边框 */
|
|
|
margin-top: 10px; /* 设置顶部外边距 */
|
|
|
box-sizing: border-box; /* 使用标准盒模型 */
|
|
|
}
|
|
|
</style>
|
