169 lines
4.0 KiB
Vue
169 lines
4.0 KiB
Vue
<!-- Sidebar.vue -->
|
||
<template>
|
||
<div class="index">
|
||
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
|
||
<!-- logo -->
|
||
<Logo v-if="showLogo" :collapse="isCollapse" />
|
||
<!-- 菜单 -->
|
||
<happy-scroll color="rgba(0,0,0,0.5)" size="5" class="menu-scroll-container">
|
||
<el-menu
|
||
:collapse="isCollapse"
|
||
:background-color="variables.menuBg"
|
||
:text-color="variables.menuText"
|
||
:unique-opened="true"
|
||
:active-text-color="variables.menuActiveText"
|
||
:collapse-transition="false"
|
||
:default-active="activeMenu"
|
||
mode="vertical"
|
||
class="el-menu-vertical"
|
||
>
|
||
<sidebar-item
|
||
v-for="(route, index) in permissionRoutes"
|
||
:key="route.path + index"
|
||
:item="route"
|
||
:base-path="route.path"
|
||
:is-collapse="isCollapse"
|
||
/>
|
||
</el-menu>
|
||
</happy-scroll>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import SidebarItem from "./SidebarItem.vue";
|
||
import variables from "@/styles/variables.scss";
|
||
import Logo from "./Logo.vue";
|
||
|
||
export default {
|
||
name: "Sidebar",
|
||
components: { SidebarItem, Logo },
|
||
computed: {
|
||
...mapGetters(["permission_routes", "sidebar", "userType"]), // 新增：映射userType
|
||
|
||
showLogo() {
|
||
return true;
|
||
},
|
||
|
||
variables() {
|
||
return variables;
|
||
},
|
||
|
||
isCollapse() {
|
||
return !this.sidebar.opened;
|
||
},
|
||
|
||
// 修复：确保权限路由正确获取
|
||
permissionRoutes() {
|
||
const routes = this.permission_routes || [];
|
||
console.log("Sidebar - 当前权限路由:", routes);
|
||
console.log("Sidebar - 用户类型:", this.userType); // 新增：打印用户类型
|
||
|
||
// 调试：检查是否包含订单管理和资源管理路由
|
||
const hasOrderManagement = routes.some(route => route.path === '/orderManagement');
|
||
const hasResourceManagement = routes.some(route => route.path === '/resourceManagement');
|
||
console.log("是否包含订单管理:", hasOrderManagement);
|
||
console.log("是否包含资源管理:", hasResourceManagement);
|
||
|
||
return routes;
|
||
},
|
||
|
||
// 修复：激活菜单的高亮
|
||
activeMenu() {
|
||
const route = this.$route;
|
||
const { meta, path } = route;
|
||
|
||
// 如果设置了activeMenu，就使用它
|
||
if (meta.activeMenu) {
|
||
return meta.activeMenu;
|
||
}
|
||
|
||
return path;
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
console.log("Sidebar mounted - 权限路由:", this.permissionRoutes);
|
||
console.log("Sidebar mounted - 用户类型:", this.userType);
|
||
},
|
||
|
||
watch: {
|
||
permission_routes: {
|
||
handler(newRoutes) {
|
||
console.log("Sidebar - 权限路由变化:", newRoutes);
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
},
|
||
|
||
// 新增：监听用户类型变化
|
||
userType: {
|
||
handler(newType) {
|
||
console.log("Sidebar - 用户类型变化:", newType);
|
||
},
|
||
immediate: true
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
|
||
.sidebar-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.menu-scroll-container {
|
||
flex: 1;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
|
||
::v-deep .happy-scroll-container {
|
||
width: 100% !important;
|
||
min-width: unset !important;
|
||
|
||
.happy-scroll-content {
|
||
width: 100%;
|
||
min-width: unset !important;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-menu-vertical {
|
||
border: none;
|
||
height: 100%;
|
||
width: 100% !important;
|
||
min-width: 100% !important;
|
||
box-sizing: border-box;
|
||
|
||
.el-submenu__title,
|
||
.el-menu-item {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-menu--collapse {
|
||
width: 64px !important;
|
||
min-width: 64px !important;
|
||
|
||
.el-submenu__title,
|
||
.el-menu-item {
|
||
text-overflow: clip;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|