kboss/f/web-kboss/src/layout/components/Sidebar/index.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", "orgType"]), // 新增：映射orgType

    showLogo() {
      return true;
    },

    variables() {
      return variables;
    },

    isCollapse() {
      return !this.sidebar.opened;
    },

    // 修复：确保权限路由正确获取
    permissionRoutes() {
      const routes = this.permission_routes || [];
      console.log("=== Sidebar 权限路由调试 ===");
      console.log("当前权限路由:", routes);
      console.log("用户类型:", this.userType);
      console.log("组织类型:", this.orgType);

      // 调试：检查是否包含订单管理和资源管理路由
      const hasOrderManagement = routes.some(route => route.path === '/orderManagement');
      const hasResourceManagement = routes.some(route => route.path === '/resourceManagement');
      console.log("是否包含订单管理:", hasOrderManagement);
      console.log("是否包含资源管理:", hasResourceManagement);

      // 检查用户类型和组织类型是否正确
      console.log("当前用户类型:", this.userType);
      console.log("当前组织类型:", this.orgType);
      console.log("=== Sidebar 调试结束 ===");

      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);
    console.log("Sidebar mounted - 组织类型:", this.orgType);
    console.log("sessionStorage userType:", sessionStorage.getItem('userType'));
    console.log("sessionStorage orgType:", sessionStorage.getItem('orgType'));
  },

  watch: {
    permission_routes: {
      handler(newRoutes) {
        console.log("Sidebar - 权限路由变化:", newRoutes);
      },
      deep: true,
      immediate: true
    },

    // 新增：监听用户类型变化
    userType: {
      handler(newType) {
        console.log("Sidebar - 用户类型变化:", newType);
      },
      immediate: true
    },

    // 新增：监听组织类型变化
    orgType: {
      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>