feat: 超级管理员租户切换

apps/web-antd/src/api/system/tenant/index.ts

@@ -0,0 +1,28 @@
+import { requestClient } from '#/api/request';
+
+enum Api {
+  root = '/system/tenant',
+  tenantDynamic = '/system/tenant/dynamic',
+  tenantDynamicClear = '/system/tenant/dynamic/clear',
+  tenantExport = '/system/tenant/export',
+  tenantList = '/system/tenant/list',
+  tenantStatus = '/system/tenant/changeStatus',
+  tenantSyncPackage = '/system/tenant/syncTenantPackage',
+}
+
+/**
+ * 动态切换租户
+ * @param tenantId 租户ID
+ * @returns void
+ */
+export function tenantDynamicToggle(tenantId: string) {
+  return requestClient.get<void>(`${Api.tenantDynamic}/${tenantId}`);
+}
+
+/**
+ * 清除 动态切换租户
+ * @returns void
+ */
+export function tenantDynamicClear() {
+  return requestClient.get<void>(Api.tenantDynamicClear);
+}

apps/web-antd/src/api/system/tenant/model.d.ts

@@ -0,0 +1,16 @@
+export interface Tenant {
+  accountCount: number;
+  address?: string;
+  companyName: string;
+  contactPhone: string;
+  contactUserName: string;
+  domain?: string;
+  expireTime?: string;
+  id: number;
+  intro: string;
+  licenseNumber?: any;
+  packageId?: string;
+  remark?: string;
+  status: string;
+  tenantId: string;
+}

apps/web-antd/src/components/TenantToggle/index.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, unref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useAccess } from '@vben/access';
+import { DEFAULT_HOME_PATH } from '@vben/constants';
+import { useTabs } from '@vben/hooks';
+
+import { message, Select } from 'ant-design-vue';
+import { storeToRefs } from 'pinia';
+
+import { tenantDynamicClear, tenantDynamicToggle } from '#/api/system/tenant';
+import { useTenantStore } from '#/store/tenant';
+
+const { hasAccessByRoles } = useAccess();
+
+// 上一次选择的租户
+const lastSelected = ref<string>();
+// 当前选择租户的id
+const selected = ref<string>();
+
+const tenantStore = useTenantStore();
+const { initTenant, setChecked } = tenantStore;
+const { tenantEnable, tenantList } = storeToRefs(tenantStore);
+
+const showToggle = computed<boolean>(() => {
+  // 超级管理员 && 启用租户
+  return hasAccessByRoles(['superadmin']) && unref(tenantEnable);
+});
+
+onMounted(async () => {
+  if (!hasAccessByRoles(['superadmin'])) {
+    return;
+  }
+  await initTenant();
+});
+
+const { closeAllTabs } = useTabs();
+const router = useRouter();
+function close(checked: boolean) {
+  // store设置状态
+  setChecked(checked);
+  // 需要关闭全部标签页
+  closeAllTabs();
+  // 切换完加载首页
+  router.push(DEFAULT_HOME_PATH);
+}
+
+/**
+ * 为什么要用any ide报错😅 实际类型为string
+ */
+async function onSelected(tenantId: any, option: any) {
+  if (unref(lastSelected) === tenantId) {
+    // createMessage.info('选择一致');
+    return;
+  }
+  await tenantDynamicToggle(tenantId);
+  lastSelected.value = tenantId;
+  message.success(`切换当前租户为: ${option.title}`);
+  close(true);
+}
+
+async function onDeselect() {
+  await tenantDynamicClear();
+  message.success('还原为默认租户');
+  lastSelected.value = '';
+  close(false);
+}
+</script>
+
+<template>
+  <div v-if="showToggle" class="mr-[8px] hidden md:block">
+    <Select
+      v-model:value="selected"
+      :field-names="{ label: 'companyName', value: 'tenantId' }"
+      :options="tenantList"
+      allow-clear
+      class="w-60"
+      placeholder="选择租户"
+      @deselect="onDeselect"
+      @select="onSelected"
+    >
+      <template #suffixIcon>
+        <span class="icon-mdi--company"></span>
+      </template>
+    </Select>
+  </div>
+</template>

apps/web-antd/src/components/TenantToggle/readme.md

@@ -0,0 +1 @@
+租户切换组件

apps/web-antd/src/layouts/basic.vue

@@ -16,6 +16,7 @@ import { openWindow } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
+import TenantToggle from '#/components/TenantToggle/index.vue';
 import { $t } from '#/locales';
 import { resetRoutes } from '#/router';
 import { useAuthStore, useNotifyStore } from '#/store';
@@ -77,6 +78,9 @@ function handleViewAll() {
 
 <template>
   <BasicLayout @clear-preferences-and-logout="handleLogout">
+    <template #header-right-1>
+      <TenantToggle />
+    </template>
     <template #user-dropdown>
       <UserDropdown
         :avatar

apps/web-antd/src/store/tenant.ts

@@ -0,0 +1,39 @@
+import { ref } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import {
+  tenantList as tenantListApi,
+  type TenantOption,
+} from '#/api/core/auth';
+
+export const useTenantStore = defineStore('app-tenant', () => {
+  const checked = ref(false);
+  const tenantEnable = ref(true);
+  const tenantList = ref<TenantOption[]>([]);
+
+  async function initTenant() {
+    const { tenantEnabled, voList } = await tenantListApi();
+    tenantEnable.value = tenantEnabled;
+    tenantList.value = voList;
+  }
+
+  async function setChecked(_checked: boolean) {
+    checked.value = _checked;
+  }
+
+  function $reset() {
+    checked.value = false;
+    tenantEnable.value = true;
+    tenantList.value = [];
+  }
+
+  return {
+    $reset,
+    checked,
+    initTenant,
+    setChecked,
+    tenantEnable,
+    tenantList,
+  };
+});