130 lines
4.3 KiB
Vue
130 lines
4.3 KiB
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>
|