fix: enhance user selection with remote search and dynamic options in AddMemberDrawer

Author: wxg0103

ui/src/api/type/role.ts

@@ -1,5 +1,6 @@
-import { RoleTypeEnum } from '@/enums/system'
-import type { FormItemRule } from 'element-plus'
+import {RoleTypeEnum} from '@/enums/system'
+import type {FormItemRule} from 'element-plus'
+
 interface RoleItem {
   id: string,
   role_name: string,
@@ -56,6 +57,7 @@ interface CreateMemberParamsItem {
 }
 
 type Arrayable<T> = T | T[]
+
 interface FormItemModel {
   path: string
   label?: string
@@ -66,7 +68,18 @@ interface FormItemModel {
     placeholder?: string
     multiple?: boolean
     clearableFunction?: (e: any) => boolean
+    remoteMethod?: (query: string, element: any) => Promise<{ label: string, value: string }[]>
+    remoteSearchDebounce?: number
   }
 }
 
-export type { RoleItem, FormItemModel, RolePermissionItem, RoleTableDataItem, CreateOrUpdateParams, ChildrenPermissionItem, RoleMemberItem, CreateMemberParamsItem }
+export type {
+  RoleItem,
+  FormItemModel,
+  RolePermissionItem,
+  RoleTableDataItem,
+  CreateOrUpdateParams,
+  ChildrenPermissionItem,
+  RoleMemberItem,
+  CreateMemberParamsItem
+}

ui/src/api/user/user.ts

@@ -1,7 +1,8 @@
-import { Result } from '@/request/Result'
-import { get, post } from '@/request/index'
-import type { User, ResetPasswordRequest, CheckCodeRequest } from '@/api/type/user'
-import type { Ref } from 'vue'
+import {Result} from '@/request/Result'
+import {get, post} from '@/request/index'
+import type {User, ResetPasswordRequest, CheckCodeRequest} from '@/api/type/user'
+import type {Ref} from 'vue'
+
 /**
  * 获取用户基本信息
  * @param loading 接口加载器
@@ -20,20 +21,21 @@ const getProfile: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading) =
 /**
  * 获取全部用户
  */
-const getUserList: (loading?: Ref<boolean>) => Promise<Result<Record<string, any>[]>> = (
+const getUserList: (arg?: any, loading?: Ref<boolean>) => Promise<Result<Record<string, any>[]>> = (
+  arg,
   loading,
 ) => {
-  return get('/user/list', undefined, loading)
+  return get('/user/list', arg, loading)
 }
 
 /**
  * 获取全部用户
  */
-const getAllMemberList: (arg: string, loading?: Ref<boolean>) => Promise<Result<Record<string, any>[]>> = (
+const getAllMemberList: (arg: any, loading?: Ref<boolean>) => Promise<Result<Record<string, any>[]>> = (
   arg,
   loading,
 ) => {
-  return get('/user/list', undefined, loading)
+  return get('/user/list', arg, loading)
 }
 
 /**
@@ -60,7 +62,7 @@ const sendEmit: (
   type: 'register' | 'reset_password',
   loading?: Ref<boolean>,
 ) => Promise<Result<boolean>> = (email, type, loading) => {
-  return post('/user/send_email', { email, type }, undefined, loading)
+  return post('/user/send_email', {email, type}, undefined, loading)
 }
 
 /**

ui/src/views/system/role/component/AddMemberDrawer.vue

@@ -51,10 +51,15 @@ const memberFormContentLoading = ref(false)
 const formItemModel = ref<FormItemModel[]>([])
 const userFormItem = ref<FormItemModel[]>([])
 const workspaceFormItem = ref<FormItemModel[]>([])
+const userOptions = ref<Array<{ label: string; value: string }>>([])
 
 async function getUserFormItem() {
   try {
-    const res = await UserApi.getUserList(memberFormContentLoading)
+    const res = await UserApi.getUserList({}, memberFormContentLoading)
+    userOptions.value = res.data?.map((item) => ({
+      label: item.nick_name,
+      value: item.id,
+    })) || []
     userFormItem.value = [
       {
         path: 'user_ids',
@@ -66,12 +71,19 @@ async function getUserFormItem() {
           },
         ],
         selectProps: {
-          options:
-            res.data?.map((item) => ({
+          options: userOptions.value,
+          placeholder: `${t('common.selectPlaceholder')}${t('views.role.member.title')}`,
+          remoteSearchDebounce: 300,
+          remoteMethod: async (query: string, element: any) => {
+            if (!query) {
+              return userOptions.value
+            }
+            const res = await UserApi.getUserList({nick_name: query}, memberFormContentLoading)
+            return res.data?.map((item) => ({
               label: item.nick_name,
               value: item.id,
-            })) || [],
-          placeholder: `${t('common.selectPlaceholder')}${t('views.role.member.title')}`,
+            })) || []
+          }
         },
       },
     ]

ui/src/views/system/role/component/MemberFormContent.vue

@@ -21,6 +21,9 @@
                 : true
             "
             filterable
+            remote
+            :remote-method="(query) => handleRemoteSearch(query, element, model)"
+            :loading="loadingStates[`${index}-${model.path}`]"
             multiple
             :reserve-keyword="false"
             style="width: 100%"
@@ -29,7 +32,7 @@
             v-bind="model.selectProps"
           >
             <el-option
-              v-for="opt in model.selectProps?.options"
+              v-for="opt in getOptions(element, model)"
               :key="opt.value"
               :label="opt.label"
               :value="opt.value"
@@ -65,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, watch, computed} from 'vue'
+import {computed, reactive, ref, watch} from 'vue'
 import type {FormItemModel} from '@/api/type/role'
 
 const props = withDefaults(defineProps<{
@@ -85,10 +88,38 @@ const form = defineModel<Record<string, any>[]>('form', {
   default: [],
 })
 
+const loadingStates = reactive<Record<string, boolean>>({})
+
 const selectedRoles = computed(() => {
   return form.value.map((item) => item.role_id)
 })
 
+function getOptions(element: any, model: FormItemModel) {
+  const dynamicOptions = element[`_${model.path}_options`]
+  return dynamicOptions || model.selectProps?.options || []
+}
+
+async function handleRemoteSearch(query: string, element: any, model: FormItemModel) {
+  if (!model.selectProps?.remoteMethod) {
+    return
+  }
+
+  const key = `${form.value.indexOf(element)}-${model.path}`
+  loadingStates[key] = true
+
+  try {
+    const debounceTime = model.selectProps.remoteSearchDebounce || 300
+    await new Promise(resolve => setTimeout(resolve, debounceTime))
+
+    element[`_${model.path}_options`] = await model.selectProps.remoteMethod(query, element)
+  } catch (error) {
+    console.error('Remote search failed:', error)
+    element[`_${model.path}_options`] = []
+  } finally {
+    loadingStates[key] = false
+  }
+}
+
 function handleAdd() {
   form.value.push({...formItem})
 }