feat: 优化只有只有一个租户和一个账号的交互

TencentBlueKing · Nov 24, 2023 · 9065afb · 9065afb
1 parent 5db0f5b
commit 9065afb
Show file tree

Hide file tree

Showing 5 changed files with 9,228 additions and 19 deletions.
diff --git a/src/bk-login/pages/src/http/api.ts b/src/bk-login/pages/src/http/api.ts
@@ -17,8 +17,8 @@ interface UserParams {
 
 // export const getUser = () => fetch.get(`${apiPrefix}/user`);
 
-// 查询租户是否可见
-export const getVisible = () => fetch.get(`${apiPrefix}/tenant-global-settings/`);
+// 查询租户全局配置
+export const getGlobalInfos = () => fetch.get(`${apiPrefix}/tenant-global-infos/`);
 
 // 查询单个租户信息
 export const getTenant = (id: string) => fetch.get(`${apiPrefix}/tenants/${id}/`);

diff --git a/src/bk-login/pages/src/views/components/password.vue b/src/bk-login/pages/src/views/components/password.vue
@@ -5,7 +5,7 @@
     </bk-form-item>
 
     <bk-form-item property="password">
-      <bk-input size="large" v-model="formData.password" type="password" placeholder="请输入密码"></bk-input>
+      <bk-input size="large" v-model="formData.password" type="password" placeholder="请输入密码" @enter="handleLogin"></bk-input>
     </bk-form-item>
 
     <p class="error-text" v-if="errorMessage">{{ errorMessage }}</p>

diff --git a/src/bk-login/pages/src/views/home.vue b/src/bk-login/pages/src/views/home.vue
@@ -1,17 +1,28 @@
 <template>
-  <bk-form form-type="vertical">
+  <bk-form form-type="vertical" v-bkloading="{ loading }">
     <section v-if="!hasStorage">
       <h1 class="login-header">请选择登录租户</h1>
 
       <bk-form-item>
-        <bk-input
-          v-if="!tenantVisible"
-          size="large"
-          placeholder="填写租户ID"
-          v-model="tenantId"
-          @blur="handleGetTenant"
-          @enter="handleGetTenant">
-        </bk-input>
+        <div style="display: flex;" v-if="!tenantVisible">
+          <bk-input
+            class="tenant-input"
+            size="large"
+            placeholder="填写租户ID"
+            v-model="tenantId"
+            @enter="handleGetTenant">
+          </bk-input>
+
+          <bk-button 
+            size="large" 
+            theme="primary"
+            :disabled="!tenantId"
+            :outline="!!tenant"
+            class="tenant-button"
+            @click="handleGetTenant">
+            识别
+          </bk-button>
+        </div>
 
         <bk-select v-else size="large" filterable @change="handleTenantChange">
           <bk-option
@@ -67,7 +78,7 @@
           {{ tenant?.name.charAt(0).toUpperCase() }}
         </span>
         {{ tenant?.name }}
-        <bk-popover v-if="changList.length" trigger="click" theme="light" placement="bottom" ext-cls="tenant-popover">
+        <bk-popover v-if="changList.length && !isOnlyOneTenant" trigger="click" theme="light" placement="bottom" ext-cls="tenant-popover">
           <div class="tenant-change">
             <Transfer class="bk-icon" />
             <span>切换租户</span>
@@ -81,7 +92,7 @@
             </section>
           </template>
         </bk-popover>
-        <div v-else class="tenant-change" @click="addTenant">
+        <div v-else-if="!isOnlyOneTenant" class="tenant-change" @click="addTenant">
           <Transfer class="bk-icon" />
           <span>切换租户</span>
         </div>
@@ -110,7 +121,7 @@
 </template>
 
 <script setup lang="ts">
-import { getAllTenantList, getIdpList, getTenant, getTenantList, getVisible, signIn } from '@/http/api';
+import { getAllTenantList, getIdpList, getTenant, getTenantList, getGlobalInfos, signIn } from '@/http/api';
 import { Done, Transfer } from 'bkui-vue/lib/icon';
 import { type Ref, onBeforeMount, ref, watch, computed } from 'vue';
 import Password from './components/password.vue';
@@ -136,10 +147,12 @@ interface Plugin {
 
 type Category = 'enterprise' | 'social';
 
+const loading = ref(false);
 const allTenantList: Ref<Tenant[]> = ref([]);
 const tenantId = ref('');
 const tenantIdList: Ref<string[]> = ref([]);
 const tenantList = ref<Tenant[]>([]);
+const hasStorage = ref(!!localStorage.getItem('tenantId'));
 
 // 选择租户
 const handleTenantChange = (id: string) => {
@@ -192,10 +205,11 @@ const signInAndFetchIdp = async () => {
   const res = await getIdpList();
   idps.value = res;
   [activeIdp.value] = res;
+  handleChangeIdp(activeIdp.value);
+  loading.value = false;
 };
 
 const tenantVisible = ref(false);
-const hasStorage = ref(!!localStorage.getItem('tenantId'));
 
 // 存在登录过的租户
 if (hasStorage.value) {
@@ -231,6 +245,8 @@ const handleChangeIdp = (idp: Idp) => {
 
 const protocolVisible = ref(false);
 
+const isOnlyOneTenant = ref(false);
+
 watch(
   () => tenantIdList.value,
   (val) => {
@@ -242,11 +258,20 @@ watch(
   { immediate: true },
 );
 onBeforeMount(() => {
-  getVisible().then((res) => {
+  loading.value = true;
+  getGlobalInfos().then((res) => {
     tenantVisible.value = res.tenant_visible;
-    if (res.tenant_visible) {
+    // 如果只有一个租户，不用选择租户
+    if (res.enabled_auth_tenant_number === 1) {
+      isOnlyOneTenant.value = true;
+      hasStorage.value = true;
+      tenant.value = res.only_enabled_auth_tenant;
+      tenantId.value = res.only_enabled_auth_tenant.id;
+      signInAndFetchIdp();
+    } else if (res.tenant_visible) { // 如果租户可见，改为选择租户
       getAllTenantList().then((res) => {
         allTenantList.value = res;
+        loading.value = false;
       });
     }
   });
@@ -263,6 +288,16 @@ onBeforeMount(() => {
   margin-bottom: 32px;
 }
 
+.tenant-input {
+  flex-grow: 1;
+}
+
+.tenant-button {
+  margin-left: 8px;
+  width: 72px;
+  height: 40px;
+}
+
 .tenant-content {
   font-size: 20px;
   color: #313238;

diff --git a/src/bk-login/pages/src/views/user.vue b/src/bk-login/pages/src/views/user.vue
@@ -55,9 +55,10 @@ const handleLogin = () => {
 onBeforeMount(() => {
   getUserList().then((res) => {
     userList.value = res;
-    // 如果只有一个账号，默认选中
+    // 如果只有一个账号，默认选中并登录
     if (res.length === 1) {
       userId.value = res[0].id;
+      handleLogin();
     }
   });
 });