TenantSwitcher 租户切换

租户切换组件，用于多租户系统中切换当前租户。

💡 使用场景：在多租户系统中，用户可能属于多个租户，需要切换当前操作的租户上下文。仅在开启多租户功能时显示。

功能特性

• 🏢 租户切换 - 下拉选择切换当前租户
• 📋 租户列表 - 显示用户可访问的租户列表
• ✅ 当前标识 - 高亮显示当前选中的租户
• 🔄 状态同步 - 与全局租户状态自动同步

基础用法

<template>
  <TenantSwitcher @change="handleTenantChange" />
</template>

<script setup lang="ts">
import TenantSwitcher from '@/components/TenantSwitcher/index.vue'

const handleTenantChange = (tenantId: number) => {
  console.log('切换到租户:', tenantId)
  // 执行切换租户后的逻辑，如刷新数据
}
</script>

在导航栏中使用

<template>
  <div class="navbar">
    <div class="navbar-left">
      <TenantSwitcher @change="onTenantChange" />
    </div>
    
    <div class="navbar-right">
      <!-- 其他导航内容 -->
    </div>
  </div>
</template>

<script setup lang="ts">
const onTenantChange = async (tenantId: number) => {
  // 切换租户后重新加载数据
  await reloadUserData()
  // 刷新当前页面数据
  location.reload()
}
</script>

API

Props

组件无需传入 Props，租户数据从全局 Store 获取。

Events

事件名	参数	说明
change	(tenantId: number)	租户切换时触发

租户数据结构

interface Tenant {
  id: number
  name: string
}

与 Store 集成

组件使用 useTenantStore 管理租户状态：

import { useTenantStoreHook } from '@/store/modules/tenant'

const tenantStore = useTenantStoreHook()

// 获取租户列表
const tenantList = tenantStore.tenantList

// 获取/设置当前租户 ID
const currentTenantId = tenantStore.currentTenantId

// 获取当前租户信息
const currentTenant = tenantStore.currentTenant

样式定制

.tenant-switcher {
  // 触发器样式
  &__trigger {
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
  }

  // 租户名称样式
  &__label {
    max-width: 120px;
    font-size: 13px;
  }

  // 悬停效果
  &:hover {
    .tenant-switcher__trigger {
      background: rgba(0, 0, 0, 0.04);
    }
  }

  // 当前选中项样式
  :deep(.el-dropdown-menu__item.is-active) {
    font-weight: 600;
    color: var(--el-color-primary);
  }
}

显示条件

组件仅在以下条件满足时显示：

• 租户列表不为空（tenantList.length > 0）

注意事项

1. 多租户系统：此组件仅适用于多租户架构的系统
2. 权限控制：租户列表应只包含用户有权访问的租户
3. 数据刷新：切换租户后通常需要刷新页面数据
4. Token 处理：切换租户可能需要重新获取 Token

相关链接

• 状态管理
• 权限控制