chore: login compose

src/api/platform/system/controller/dictdata.ts

@@ -31,4 +31,4 @@ export const getDictData = (id: string) => defHttp.get<DictData>({ url: `${Api.g
 export const delDictData = (ids: string) => defHttp.delete({ url: `${Api.del}/${ids}` });
 
 /** 根据字典类型查询字典数据 */
-export const getDataByDictType = (params: DictData) => defHttp.get<DictData[]>({ url: Api.getByDictType, params });
+export const getDataByDictType = (params: Recordable) => defHttp.get<DictData[]>({ url: Api.getByDictType, params });

src/views/system/ssoLogin/kics/index.vue

@@ -50,17 +50,13 @@
                     <div class="aui-inputClear">
                       <i class="icon icon-role"/>
                       <a-form-item>
-                        <ApiSelect
+                        <a-select
                           v-model:value="formData.identityProvider"
-                          :api="getDataByDictType"
-                          :params="{
-                            type: 'identityProvider',
-                            tenantId: formData.tenantId
-                          }"
+                          show-search
+                          :placeholder="t('sys.login.identityProviderPlaceholder')"
                           :bordered="false"
-                          labelField="label"
-                          valueField="value"
-                          placeholder="请选择角色"
+                          :filter-option="filterOption"
+                          :options="formData.identityProviderDictData"
                         />
                       </a-form-item>
                     </div>
@@ -95,7 +91,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { reactive, ref, unref } from 'vue';
+  import { reactive, ref, unref, onMounted } from 'vue';
   import { useUserStore } from '/@/store/modules/user';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useI18n } from '/@/hooks/web/useI18n';
@@ -106,10 +102,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useAppInject } from '/@/hooks/web/useAppInject';
   import { useRouter } from 'vue-router';
-  import { ApiSelect } from '/@/components/Form';
   import { getDataByDictType } from '/@/api/platform/system/controller/dictdata';
-  import {LoginStateEnum} from '/@/views/core/login/useLogin';
-  import {Button, Checkbox} from 'ant-design-vue';
 
   const { currentRoute, replace } = useRouter();
   const { params, query } = unref(currentRoute);
@@ -125,11 +118,20 @@
     password: '',
     identityProvider: undefined,
     tenantId: '1510456530575347712',
+    identityProviderDictData: []
   });
   const loginRef = ref();
   const loginLoading = ref<boolean>(false);
   const { getIsMobile } = useAppInject();
 
+  onMounted(async () => {
+    formData.identityProviderDictData = await getDataByDictType({  type: 'identityProvider', tenantId: formData.tenantId });
+    // 设置默认勾选
+    if(formData.identityProviderDictData[0]) {
+      formData.identityProvider = formData.identityProviderDictData[0]?.value;
+    }
+  });
+
   async function handleLogin() {
     if (!formData.username) {
       createMessage.warn(t('sys.login.accountPlaceholder'));
@@ -161,6 +163,10 @@
     }
   }
 
+  function filterOption(input: string, option: Recordable) {
+    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+  }
+
   function handleLegacyLogin() {
     query?.redirect && window.location.replace(`${query?.redirect}/login`);
   }