feat: 增加切换租户功能

apps/web-antd/src/api/request.ts

@@ -80,6 +80,10 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
       config.headers['tenant-id'] = tenantEnable
         ? accessStore.tenantId
         : undefined;
+      // 只有登录时，才设置 visit-tenant-id 访问租户
+      config.headers['visit-tenant-id'] = tenantEnable
+        ? accessStore.visitTenantId
+        : undefined;
       return config;
     },
   });
@@ -136,6 +140,10 @@ baseRequestClient.addRequestInterceptor({
     config.headers['tenant-id'] = tenantEnable
       ? accessStore.tenantId
       : undefined;
+    // 只有登录时，才设置 visit-tenant-id 访问租户
+    config.headers['visit-tenant-id'] = tenantEnable
+      ? accessStore.visitTenantId
+      : undefined;
     return config;
   },
 });

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

@@ -39,6 +39,13 @@ export function getTenant(id: number) {
   );
 }
 
+/** 获取租户精简信息列表 */
+export function getTenantList() {
+  return requestClient.get<SystemTenantApi.Tenant[]>(
+    '/system/tenant/simple-list',
+  );
+}
+
 /** 新增租户 */
 export function createTenant(data: SystemTenantApi.Tenant) {
   return requestClient.post('/system/tenant/create', data);

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

@@ -34,6 +34,7 @@ import { useAuthStore } from '#/store';
 import LoginForm from '#/views/_core/authentication/login.vue';
 
 import Help from './components/help.vue';
+import TenantDropdown from './components/tenant-dropdown.vue';
 
 const userStore = useUserStore();
 const authStore = useAuthStore();
@@ -202,6 +203,9 @@ watch(
         @read="handleNotificationRead"
       />
     </template>
+    <template #header-right-1>
+      <TenantDropdown class="w-30 mr-2" />
+    </template>
     <template #extra>
       <AuthenticationLoginExpiredModal
         v-model:open="accessStore.loginExpired"

apps/web-antd/src/layouts/components/tenant-dropdown.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { isTenantEnable, useRefresh } from '@vben/hooks';
+import { useAccessStore } from '@vben/stores';
+
+import { Button, Dropdown, Menu } from 'ant-design-vue';
+
+import { getTenantList } from '#/api/system/tenant';
+
+const { refresh } = useRefresh();
+
+const { hasAccessByCodes } = useAccess();
+const accessStore = useAccessStore();
+
+const tenantEnable = isTenantEnable();
+
+const visitTenantList = computed(() => {
+  if (tenantEnable) {
+    const list = accessStore.visitTenantId.map((item) => ({
+      label: item.name,
+      id: item.id,
+    }));
+    return list;
+  }
+  return [];
+});
+
+const tenant = ref<string>(
+  visitTenantList.value.find((item) => item.id === accessStore.tenantId)
+    ?.label || '切换租户',
+);
+
+function handleClick(id: number | undefined) {
+  if (id) {
+    accessStore.setTenantId(id);
+    refresh();
+    window.location.reload();
+  }
+}
+
+onMounted(async () => {
+  if (tenantEnable) {
+    const resp = await getTenantList();
+    accessStore.setVisitTenantId(resp);
+  }
+});
+</script>
+<template>
+  <Dropdown v-if="tenantEnable && hasAccessByCodes(['system:tenant:visit'])">
+    <template #overlay>
+      <Menu>
+        <template v-for="item in visitTenantList" :key="item.key">
+          <Menu.Item @click="handleClick(item.id)">
+            {{ item.label }}
+          </Menu.Item>
+        </template>
+      </Menu>
+    </template>
+    <Button> {{ tenant }} </Button>
+  </Dropdown>
+</template>

packages/stores/src/modules/access.ts

@@ -6,6 +6,18 @@ import { acceptHMRUpdate, defineStore } from 'pinia';
 
 type AccessToken = null | string;
 
+type VisitTenantId = {
+  accountCount: number;
+  contactMobile: string;
+  contactName: string;
+  expireTime: Date;
+  id?: number;
+  name: string;
+  packageId: number;
+  status: number;
+  website: string;
+};
+
 interface AccessState {
   /**
    * 权限码
@@ -47,6 +59,10 @@ interface AccessState {
    * 登录租户编号
    */
   tenantId: null | number;
+  /**
+   * 访问租户编号
+   */
+  visitTenantId: VisitTenantId[];
 }
 
 /**
@@ -101,6 +117,9 @@ export const useAccessStore = defineStore('core-access', {
     setTenantId(tenantId: null | number) {
       this.tenantId = tenantId;
     },
+    setVisitTenantId(visitTenantId: VisitTenantId[]) {
+      this.visitTenantId = visitTenantId;
+    },
     unlockScreen() {
       this.isLockScreen = false;
       this.lockScreenPassword = undefined;
@@ -113,6 +132,7 @@ export const useAccessStore = defineStore('core-access', {
       'refreshToken',
       'accessCodes',
       'tenantId',
+      'visitTenantId',
       'isLockScreen',
       'lockScreenPassword',
     ],
@@ -128,6 +148,7 @@ export const useAccessStore = defineStore('core-access', {
     loginExpired: false,
     refreshToken: null,
     tenantId: null,
+    visitTenantId: [],
   }),
 });