可信代码库-邀请组织成员查询用户信息展示

src/api/organizationManage/organizationManageApi.ts

@@ -52,3 +52,11 @@ export function getGroupjoinedListApi(params: { groupId: number }): Promise<Unit
     params,
   });
 }
+
+export function getGroupmemberinviteApi(params: { groupId: number }): Promise<UnitRes<any>> {
+  return request({
+    url: `/api/v1/group/member/invite/user`,
+    method: 'get',
+    params,
+  });
+}

src/views/Jyh/PersonalCenter/OrganizationManage/OrganizationManage.vue

@@ -151,7 +151,46 @@
   <d-modal v-model="inviteMemberModalCtrl" title="邀请成员" class="w-[600px]">
     <d-form ref="inviteMemberFormRef" layout="vertical" :data="inviteMemberFormData" message-type="none">
       <d-form-item field="userName" label="成员" required>
-        <d-input v-model="inviteMemberFormData.userName" placeholder="请输入GitCode用户名" />
+        <d-auto-complete
+          ref="autoCompleteRef"
+          style="width: 100%"
+          v-model="inviteMemberFormData.userName"
+          :source="searchResults"
+          :loading="searchLoading"
+          placeholder="请输入GitCode用户名"
+          @select="handleinviteSelect"
+          enable-lazy-load
+        >
+          <template #item="slotProps">
+            <div class="flex items-center p-1">
+              <img :src="avatarUrl" alt="头像" class="w-8 h-8 rounded-full mr-2">
+              <div>
+                <div class="font-medium">{{ slotProps.item.name || slotProps.item.login }}</div>
+                <div class="text-sm text-gray-500">{{ slotProps.item.login }}</div>
+              </div>
+            </div>
+          </template>
+          <template #nothing>
+            <div class="p-2 text-center text-gray-500">
+              {{ errorMessage || '未找到匹配用户' }}
+            </div>
+          </template>
+        </d-auto-complete>
+<!--        <d-input v-model="inviteMemberFormData.userName" placeholder="请输入GitCode用户名"   @input="handleUserInput" />-->
+<!--        &lt;!&ndash; 用户信息展示 &ndash;&gt;-->
+<!--        <div v-if="inputUserInfo" class="mt-2 p-2 border rounded-md">-->
+<!--          <div class="flex items-center">-->
+<!--            <img :src="inputUserInfo.avatarUrl" alt="头像" class="w-8 h-8 rounded-full mr-2">-->
+<!--            <div>-->
+<!--              <div class="font-medium">{{ inputUserInfo.name || inputUserInfo.login }}</div>-->
+<!--              <div class="text-sm text-gray-500">{{ inputUserInfo.login }}</div>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        &lt;!&ndash; 错误提示 &ndash;&gt;-->
+<!--        <div v-if="errorMessage" class="text-red-500 text-sm mt-1">-->
+<!--          {{ errorMessage }}-->
+<!--        </div>-->
       </d-form-item>
       <d-form-item field="role" label="角色" required>
         <d-select v-model="inviteMemberFormData.role">
@@ -161,7 +200,7 @@
     </d-form>
 
     <div class="flex justify-center">
-      <d-button variant="solid" class="mr-[8px]" :loading="inviteMemberLoading" @click="inviteMemberConfirmBtnClick">确定</d-button>
+      <d-button :disabled="errorMessage.length > 0" variant="solid" class="mr-[8px]" :loading="inviteMemberLoading" @click="inviteMemberConfirmBtnClick">确定</d-button>
       <d-button @click="closeInviteMemberModal">取消</d-button>
     </div>
   </d-modal>
@@ -176,7 +215,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, shallowRef } from 'vue';
+import { reactive, ref, shallowRef,watch } from 'vue';
 import { Message } from 'vue-devui';
 import NoData from '@/components/NoData/NoData.vue';
 import {
@@ -184,7 +223,7 @@ import {
   deleteOrganizationMemberApi, getGroupjoinedListApi,
   getOrganizationMemberListApi,
   inviteOrganizationMemberApi,
-  updateOrganizationInfoApi
+  updateOrganizationInfoApi,getGroupmemberinviteApi
 } from '@/api/organizationManage/organizationManageApi';
 import {
   type OrganizationInfoType,
@@ -196,7 +235,7 @@ import {getUserInfo} from "@/api/user";
 import dayjs from "dayjs";
 import debounce from 'lodash/debounce';
 import { useAccount } from '@/utils/hooks/useAccount';
-
+const avatarUrl = '/src/assets/imgs/avatar/male.png';
 const userInfo = shallowRef<UserInfoType>({
   username: '',
   mobile: null,
@@ -574,6 +613,73 @@ async function deleteMember() {
 function closeDeleteMemberModal() {
   deleteMemberModalCtrl.value = false;
 }
+
+// 输入的用户信息查询
+// 新增用户信息状态
+const searchResults = ref<any[]>([]);
+const searchLoading = ref(false);
+const errorMessage = ref<string>('');
+const searchKey = ref(0);
+const autoCompleteRef = ref(null);
+// 搜索处理函数（带防抖）
+const handleinviteSearch = async (keyword: string) => {
+  debugger
+  if (!keyword.trim()) {
+    searchResults.value = [];
+    errorMessage.value = '';
+    return;
+  }
+
+  searchLoading.value = true;
+  errorMessage.value = '';
+
+  try {
+    const res = await getGroupmemberinviteApi({ username: keyword.trim() });
+    console.log('用户搜索结果:', res);
+
+    if (res.data.code === 200) {
+      debugger
+      if (res.data.data.errorCode) {
+        // 用户不存在
+        searchResults.value = [];
+        errorMessage.value = res.data.data?.errorMessage || '';
+      } else {
+        // 用户存在，处理搜索结果
+        // 将单个用户对象包装成数组（如果接口返回单个对象）
+        const userData = Array.isArray(res.data.data) ? res.data.data : [res.data.data];
+
+        searchResults.value = userData.map(user => ({
+          ...user,
+          label: user.name || user.login, // 显示的标签
+          value: user.login // 选中后填充的值
+        }));
+        autoCompleteRef.value?.loadFinish();
+        console.log('searchResults结果:', searchResults.value);
+      }
+    } else {
+      searchResults.value = [];
+      errorMessage.value = res.data.msg || '搜索失败';
+    }
+  } catch (e) {
+    console.error('搜索用户失败:', e);
+    searchResults.value = [];
+    errorMessage.value = '接口错误，请重试';
+    Message.warning('接口错误，搜索失败');
+  } finally {
+    searchLoading.value = false;
+  }
+}; // 防抖时间500ms
+
+// 选择用户处理函数
+const handleinviteSelect = (item: any) => {
+  errorMessage.value = '';
+  console.log('选中用户:', inputUserInfo.value);
+};
+
+watch(
+  () => inviteMemberFormData.userName, // 监听目标字段
+  () => {handleinviteSearch(inviteMemberFormData.userName)}
+)
 </script>
 
 <style scoped lang="scss">