feat: 新增租户下拉组件

src/components/custom/tenant-select.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { SelectOption } from 'naive-ui';
+import { useLoading } from '@sa/hooks';
+import { fetchTenantList } from '@/service/api';
+
+defineOptions({ name: 'TenantSelect' });
+
+const value = defineModel<CommonType.IdType>('value', { required: false, default: '000000' });
+const enabled = defineModel<boolean>('enabled', { required: false, default: false });
+
+const tenantOption = ref<SelectOption[]>([]);
+const { loading, startLoading, endLoading } = useLoading();
+
+async function handleFetchTenantList() {
+  startLoading();
+  const { data, error } = await fetchTenantList();
+  if (error) return;
+  enabled.value = data.tenantEnabled;
+  tenantOption.value = data.voList.map(tenant => {
+    return {
+      label: tenant.companyName,
+      value: tenant.tenantId
+    };
+  });
+  endLoading();
+}
+
+handleFetchTenantList();
+</script>
+
+<template>
+  <NSelect
+    v-if="enabled"
+    v-model:value="value"
+    placeholder="请选择/输入公司名称"
+    :options="tenantOption"
+    :loading="loading"
+  />
+</template>

src/layouts/modules/global-header/index.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
 import { useFullscreen } from '@vueuse/core';
 import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
+import { fetchChangeTenant } from '@/service/api/system/tenant';
 import { useAppStore } from '@/store/modules/app';
+import { useAuthStore } from '@/store/modules/auth';
 import { useThemeStore } from '@/store/modules/theme';
 import GlobalLogo from '../global-logo/index.vue';
 import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
@@ -25,8 +28,15 @@ interface Props {
 defineProps<Props>();
 
 const appStore = useAppStore();
+const authStore = useAuthStore();
 const themeStore = useThemeStore();
 const { isFullscreen, toggle } = useFullscreen();
+
+const tenantId = ref<CommonType.IdType>(authStore.userInfo?.user?.tenantId || '000000');
+
+watch(tenantId, async () => {
+  await fetchChangeTenant(tenantId.value);
+});
 </script>
 
 <template>
@@ -38,6 +48,7 @@ const { isFullscreen, toggle } = useFullscreen();
       <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
     </div>
     <div class="h-full flex-y-center justify-end">
+      <TenantSelect v-if="authStore.userInfo?.user?.userId === 1" class="mr-12px w-150px" />
       <GlobalSearch />
       <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
       <LangSwitch

src/service/api/system/tenant.ts

@@ -46,3 +46,11 @@ export function fetchSyncTenantDict() {
     method: 'get'
   });
 }
+
+/** 动态切换租户 */
+export function fetchChangeTenant(tenantId: CommonType.IdType) {
+  return request<boolean>({
+    url: `/system/tenant/dynamic/${tenantId}`,
+    method: 'get'
+  });
+}

src/typings/components.d.ts

@@ -141,6 +141,7 @@ declare module 'vue' {
     TableHeaderOperation: typeof import('./../components/advanced/table-header-operation.vue')['default']
     TableRowCheckAlert: typeof import('./../components/advanced/table-row-check-alert.vue')['default']
     TableSiderLayout: typeof import('./../components/advanced/table-sider-layout.vue')['default']
+    TenantSelect: typeof import('./../components/custom/tenant-select.vue')['default']
     ThemeSchemaSwitch: typeof import('./../components/common/theme-schema-switch.vue')['default']
     WaveBg: typeof import('./../components/custom/wave-bg.vue')['default']
   }

src/typings/storage.d.ts

@@ -44,5 +44,7 @@ declare namespace StorageType {
     };
     /** The login form rember */
     loginRember: Api.Auth.PwdLoginForm;
+    /** The tenant id */
+    tenantId: CommonType.IdType;
   }
 }

src/views/_builtin/login/modules/pwd-login.vue

@@ -122,7 +122,7 @@ async function handleSocialLogin(type: Api.System.SocialSource) {
 <template>
   <NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
     <NFormItem v-if="tenantEnabled" path="tenantId">
-      <NSelect v-model:value="model.tenantId" placeholder="请选择/输入公司名称" :options="tenantOption" />
+      <TenantSelect v-model:value="model.tenantId" :enabled="tenantEnabled" />
     </NFormItem>
     <NFormItem path="username">
       <NInput v-model:value="model.username" :placeholder="$t('page.login.common.userNamePlaceholder')" />

src/views/_builtin/login/modules/register.vue

@@ -95,7 +95,7 @@ handleFetchCaptchaCode();
 <template>
   <NForm ref="formRef" :model="model" :rules="rules" size="large" :show-label="false" @keyup.enter="handleSubmit">
     <NFormItem v-if="tenantEnabled" path="tenantId">
-      <NSelect v-model:value="model.tenantId" placeholder="请选择/输入公司名称" :options="tenantOption" />
+      <TenantSelect v-model:value="model.tenantId" :enabled="tenantEnabled" />
     </NFormItem>
     <NFormItem path="username">
       <NInput v-model:value="model.username" :placeholder="$t('page.login.common.userNamePlaceholder')" />