职工 远程搜索优化

mes-ui/mes-ui-admin-vue3/src/views/heli/dept/DeptForm.vue

@@ -24,7 +24,7 @@
         />
       </el-form-item>
       <el-form-item label="负责人" prop="leaderUserId">
-       <UserSelect v-model="formData.leaderUserId" @update:newValue="handleSelectedUser" />
+       <UserSelect v-model="formData.leaderUserId" :leaderUserId="formData.leaderUserId" @update:newValue="handleSelectedUser" />
       </el-form-item>
       <!--      <el-form-item label="联系电话" prop="phone">
         <el-input v-model="formData.phone" maxlength="11" placeholder="请输入联系电话" />

mes-ui/mes-ui-admin-vue3/src/views/heli/hlvuestyle/userSelect.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, toRefs,computed } from 'vue'
+import { ref, onMounted, toRefs, computed } from 'vue'
 import * as UserApi from '@/api/system/user'
 
 interface UserVO {
@@ -31,58 +31,104 @@ interface UserVO {
   nickname: string
 }
 const props = defineProps({
-  initialUserList: {
-    type: Array as PropType<UserVO[]>,
-    default: () => []
+  leaderUserId: {
+    type: [Number, String],
+    required: true // 如果是必需的属性，可以设置为true
   }
 })
+const userParams = {
+  pageNo: 1,
+  pageSize: 10,
+  status: undefined, // 根据实际情况调整参数
+  username: undefined,
+  nickname: undefined
+}
 const valueName: any = ref() //选中的值
-const valueNameObject:any = ref(); // 存储选中的完整用户对象
+const valueNameObject: any = ref() // 存储选中的完整用户对象
 
 const emit = defineEmits(['update:newValue'])
 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
 const userSelectList = ref<UserApi.UserVO[]>([])
 const userSelectLoading = ref(false)
+const leaderUserId = toRefs(props).leaderUserId // 获取 props 中的 leaderUserId
+const initialValue: any = ref(null) // 存储初始选中的用户 ID
+
+const gitlist = async () => {
+  const data = await UserApi.getUserPage(userParams)
+  userList.value = data.list
+  // 设置初始值
+  if (leaderUserId.value) {
+    valueName.value = leaderUserId.value
+    const initialUser = await UserApi.getUser(valueName.value)
 
+    // 查找初始用户是否已经在 userList 中
+    let foundInitialUserInList = false
+    for (const user of userList.value) {
+      if (user.id === initialUser.id) {
+        foundInitialUserInList = true
+        break
+      }
+    }
+    // 如果初始用户不在列表中，则将其添加到列表开头
+    if (!foundInitialUserInList && !userSelectList.value.length) {
+      userList.value = []
+      userList.value.unshift(initialUser)
+    }
+  }
+  remoteMethod('')
+}
+
+const remoteMethod = async (query: any) => {
+  userSelectLoading.value = true
+  userSelectList.value = []
+
+  try {
+    if (query) {
+      // 根据 username 查询
+      userParams.username = query
+      const dataByUsername = await UserApi.getUserPage(userParams)
+
+      // 将根据 username 查询的结果添加到临时列表（用于去重）
+      let tempUserList = [...dataByUsername.list]
+
+      // 根据 nickname 查询（假设 nickname 查询返回的数据与 username 不重复）
+      userParams.username = undefined
+      userParams.nickname = query
+      const dataByNickname = await UserApi.getUserPage(userParams)
+
+      // 将根据 nickname 查询的结果合并至临时列表，并去重
+      tempUserList = [
+        ...tempUserList,
+        ...dataByNickname.list.filter(
+          (item) => !tempUserList.some((selectItem) => selectItem.id === item.id)
+        )
+      ]
+
+      // 设置最终的用户选择列表为去重后的结果
+      userSelectList.value = tempUserList
+    } else {
+      // 加载所有数据（无查询条件时的情况）
+      const data = await UserApi.getUserPage({ ...userParams, pageNo: 1 })
+      userList.value = [...userList.value, ...data.list]
+      userSelectList.value = userList.value
+    }
+  } catch (error) {
+    console.error(error)
+  } finally {
+    userSelectLoading.value = false
+  }
+}
 // 初始化用户列表
 onMounted(async () => {
-  const userParams = {
-    pageNo: 1,
-    pageSize: 10,
-    status: undefined, // 根据实际情况调整参数
-  }
   try {
-    const data = await UserApi.getUserPage(userParams)
-    userList.value = data.list
-    // 设置初始值，如果需要的话
-    remoteMethod('')
+    await gitlist()
   } catch (error) {
     console.error(error)
   }
 })
 
-const remoteMethod = (query: any) => {
-  if (query) {
-    userSelectLoading.value = true
-    setTimeout(() => {
-      userSelectLoading.value = false
-      userSelectList.value = userList.value
-        .filter(
-          (item) =>
-            item.nickname.toLowerCase().includes(query.toLowerCase()) ||
-            item.username.toLowerCase().includes(query.toLowerCase())
-        )
-        .slice(0, 10) //只显示前10个
-    }, 200)
-  } else {
-    userSelectList.value = userList.value.slice(0, 10) //只显示前10个
-  }
-}
-
 const onSelectChange = (newValue: any) => {
-  valueNameObject.value = userList.value.find(user => user.id === newValue); // 更新选中的完整用户对象
+  valueNameObject.value = userList.value.find((user) => user.id === newValue) // 更新选中的完整用户对象
   emit('update:newValue', valueNameObject.value)
 }
-
-
 </script>