You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
3.2 KiB
77 lines
3.2 KiB
<template>
|
|
<!-- 左侧导航栏组件 -->
|
|
<el-aside class="index-aside" width="200px"> <!-- 定义左侧导航栏宽度为200px -->
|
|
<div class="index-aside-inner"> <!-- 内部容器 -->
|
|
<div v-for="item in menuList" v-bind:key="item.roleName"> <!-- 遍历菜单列表，根据角色显示对应菜单 -->
|
|
<el-menu
|
|
background-color="#263238" <!-- 设置背景颜色 -->
|
|
text-color="#fff" <!-- 设置文字颜色 -->
|
|
active-text-color="#ffd04b" <!-- 设置激活项的文字颜色 -->
|
|
default-active="0" <!-- 默认激活项索引 -->
|
|
v-if="role==item.roleName" <!-- 根据角色名称判断是否显示 -->
|
|
>
|
|
<el-menu-item @click="menuHandler('home')" index="0">首页</el-menu-item> <!-- 首页菜单项 -->
|
|
<el-submenu :index="1+''"> <!-- 子菜单：个人中心 -->
|
|
<template slot="title">
|
|
<span>个人中心</span> <!-- 菜单标题 -->
|
|
</template>
|
|
<el-menu-item
|
|
@click="menuHandler('updatePassword')" <!-- 点击事件处理函数 -->
|
|
:index="1-1" <!-- 设置菜单项索引 -->
|
|
>修改密码</el-menu-item> <!-- 修改密码子菜单项 -->
|
|
<el-menu-item
|
|
@click="menuHandler('center')" <!-- 点击事件处理函数 -->
|
|
:index="1-2" <!-- 设置菜单项索引 -->
|
|
>个人信息</el-menu-item> <!-- 个人信息子菜单项 -->
|
|
</el-submenu>
|
|
<el-submenu
|
|
v-for=" (menu,index) in item.backMenu" <!-- 遍历后端菜单 -->
|
|
v-bind:key="menu.menu" <!-- 设置唯一标识符 -->
|
|
:index="index+2+''" <!-- 设置菜单项索引 -->
|
|
>
|
|
<template slot="title">
|
|
<span>{{menu.menu}}</span> <!-- 动态显示菜单标题 -->
|
|
</template>
|
|
<el-menu-item
|
|
v-for=" (child,sort) in menu.child" <!-- 遍历子菜单 -->
|
|
v-bind:key="sort" <!-- 设置唯一标识符 -->
|
|
@click="menuHandler(child.tableName)" <!-- 点击事件处理函数 -->
|
|
:index="(index+2)+'-'+sort" <!-- 设置菜单项索引 -->
|
|
>{{child.menu}}</el-menu-item> <!-- 动态生成的子菜单项 -->
|
|
</el-submenu>
|
|
</el-menu>
|
|
</div>
|
|
</div>
|
|
</el-aside>
|
|
</template>
|
|
|
|
<script>
|
|
import menu from "@/utils/menu"; // 导入菜单工具模块
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuList: [], // 存储菜单列表数据
|
|
dynamicMenuRoutes: [], // 存储动态路由数据
|
|
role: "" // 当前用户角色
|
|
};
|
|
},
|
|
mounted() {
|
|
let menus = menu.list(); // 获取菜单列表
|
|
this.menuList = menus; // 将菜单列表赋值给组件数据
|
|
this.role = this.$storage.get("role"); // 从存储中获取当前用户角色
|
|
console.log(this.menuList); // 打印菜单列表到控制台（调试用）
|
|
console.log(this.role); // 打印当前用户角色到控制台（调试用）
|
|
},
|
|
methods: {
|
|
menuHandler(name) { // 定义菜单点击事件处理函数
|
|
this.$router.push({ name: name }); // 路由跳转到指定名称的页面
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 样式部分暂无内容 */
|
|
</style>
|