heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/materialplan/userSelectNew.vue

<template>
  <!-- 负责人选择 -->
  <el-select  v-if="status1==false" v-model="propsmodelValue" v-loading="loading" element-loading-background="rgb(255, 255, 255)" placeholder="请选择相关人员" :remote-method="remoteMethod" remote-show-suffix remote clearable reserve-keyword filterable :loading="userSelectLoading" @change="onSelectChange" @clear="clearchange" @visible-change="onVisibleChange">
    <el-option v-for="item in userSelectList" :key="item.id" :label="item.username + ' ' + item.nickname" :value="item.id" />
  </el-select>
   <el-select  v-else style="text-decoration: line-through" v-model="propsmodelValue" v-loading="loading" element-loading-background="rgb(255, 255, 255)" placeholder="请选择相关人员" :remote-method="remoteMethod" remote-show-suffix remote clearable reserve-keyword filterable :loading="userSelectLoading" @change="onSelectChange" @clear="clearchange" @visible-change="onVisibleChange">
    <el-option v-for="item in userSelectList" :key="item.id" :label="item.username + ' ' + item.nickname" :value="item.id"  />
  </el-select>
</template>

<script lang="ts" setup>
import { ref, onMounted, toRefs, computed } from 'vue'
import * as UserApi from '@/api/system/user'

const props = defineProps({
  modelValue: {
    type: [Number, String],
    required: true // 如果是必需的属性，可以设置为true
  }
})
const userParams = {
  pageNo: 1,
  pageSize: 10,
  status: 0, // 根据实际情况调整参数
  username: undefined,
  nickname: undefined,
  userNickName: undefined
}
const valueName: any = ref() //选中的值
const valueNameObject: any = ref() // 存储选中的完整用户对象

const emit = defineEmits(['update:newValue'])
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const userSelectList = ref<UserApi.UserVO[]>([])
const loading = ref(true)
const userSelectLoading = ref(false)
const propsmodelValue = toRefs(props).modelValue // 获取 props 中的 modelValue
const initialValue: any = ref(null) // 存储初始选中的用户 ID

const status1 = ref(false)

const gitlist = async () => {
  const data = await UserApi.getAllUser()
  userList.value = []
  userSelectList.value = []
  userList.value = [...userList.value, ...data]
  // 设置初始值
  if (propsmodelValue.value) {
    valueName.value = propsmodelValue.value
    const initialUser = await UserApi.getUser(valueName.value)
    if (initialUser.status == 1) {
      status1.value = true
    } else {
      status1.value = false
    }
    // 查找初始用户是否已经在 userList 中
    let foundInitialUserInList = false
    for (const user of userList.value) {
      if (user.id === initialUser.id) {
        // propsmodelValue.value=initialUser.username+' '+initialUser.nickname

        foundInitialUserInList = true
        break
      }
    }
    // 如果初始用户不在列表中，则将其添加到列表开头
    if (!foundInitialUserInList && !userSelectList.value.length) {
      userList.value.unshift(initialUser)
      //  propsmodelValue.value=initialUser.username+' '+initialUser.nickname
    }
    // loading.value = false
  }
  userSelectList.value = userList.value
  loading.value = false
}

const remoteMethod = async (query: any) => {
  userSelectLoading.value = true
  userSelectList.value = []
  try {
    if (query) {
      userParams.userNickName = query
      const data = await UserApi.getUserPage(userParams)
      userList.value = data.list
      userSelectList.value = data.list
    } else {
      gitlist()
    }
  } catch (error) {
    console.error(error)
  } finally {
    userSelectLoading.value = false
  }
}
// 初始化用户列表
onMounted(async () => {
  try {
    await gitlist()
  } catch (error) {
    console.error(error)
  }
})
watch(propsmodelValue, (newValue: any) => {
  if (newValue) {
    userList.value = []
    gitlist()
  }
})

const onVisibleChange = (isVisible: boolean) => {
  if (!isVisible) {
    // 下拉框关闭时，重置查询参数和下拉框列表
    userParams.userNickName = undefined
    userList.value = []
    userSelectList.value = []
  } else {
    gitlist()
  }
}
//清空逻辑传递空值
const clearchange = () => {
  emit('update:newValue', undefined)
}
//选择之后传递的值
const onSelectChange = (newValue: any) => {
  valueNameObject.value = userList.value.find((user) => user.id === newValue) // 更新选中的完整用户对象
  emit('update:newValue', valueNameObject.value)
}
</script>