113 lines
2.4 KiB
Vue
113 lines
2.4 KiB
Vue
|
<template>
|
|||
|
|
<el-select
|
|||
|
|
v-model="selectedValue"
|
|||
|
|
:multiple="multiple"
|
|||
|
|
filterable
|
|||
|
|
remote
|
|||
|
|
:remote-method="handleSearch"
|
|||
|
|
:loading="loading"
|
|||
|
|
:placeholder="placeholder"
|
|||
|
|
style="width: 100%"
|
|||
|
|
@change="handleChange"
|
|||
|
|
:clearable="clearable"
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="user in filteredUsers"
|
|||
|
|
:key="user.userId"
|
|||
|
|
:label="`${user.nickName}（${user.dept && user.dept.deptName ? user.dept.deptName : '无部门'}）`"
|
|||
|
|
:value="user.userId"
|
|||
|
|
>
|
|||
|
|
<span>{{ user.nickName }}</span>
|
|||
|
|
<span style="color: #999; font-size: 12px; margin-left: 8px;">{{ user.dept && user.dept.deptName ? user.dept.deptName : '无部门' }}</span>
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { selectUser } from '@/api/system/user'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'UserSelect',
|
|||
|
|
props: {
|
|||
|
|
value: {
|
|||
|
|
type: [String, Number, Array],
|
|||
|
|
default: null
|
|||
|
|
},
|
|||
|
|
multiple: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
placeholder: {
|
|||
|
|
type: String,
|
|||
|
|
default: '请选择用户'
|
|||
|
|
},
|
|||
|
|
clearable: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userList: [],
|
|||
|
|
loading: false,
|
|||
|
|
searchKeyword: '',
|
|||
|
|
filteredUsers: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
selectedValue: {
|
|||
|
|
get() {
|
|||
|
|
return this.value
|
|||
|
|
},
|
|||
|
|
set(val) {
|
|||
|
|
this.$emit('input', val)
|
|||
|
|
this.$emit('change', val)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
searchKeyword(val) {
|
|||
|
|
this.filterUsers(val)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.fetchUsers()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
fetchUsers() {
|
|||
|
|
this.loading = true
|
|||
|
|
selectUser({}).then(res => {
|
|||
|
|
this.userList = res.data || res.rows || []
|
|||
|
|
this.filteredUsers = this.userList
|
|||
|
|
this.loading = false
|
|||
|
|
}).catch(() => {
|
|||
|
|
this.loading = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleSearch(query) {
|
|||
|
|
this.searchKeyword = query
|
|||
|
|
},
|
|||
|
|
filterUsers(keyword) {
|
|||
|
|
if (!keyword) {
|
|||
|
|
this.filteredUsers = this.userList
|
|||
|
|
} else {
|
|||
|
|
const lower = keyword.toLowerCase()
|
|||
|
|
this.filteredUsers = this.userList.filter(user => {
|
|||
|
|
return (
|
|||
|
|
(user.nickName && user.nickName.toLowerCase().includes(lower)) ||
|
|||
|
|
(user.dept && user.dept.deptName && user.dept.deptName.toLowerCase().includes(lower))
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleChange(val) {
|
|||
|
|
this.$emit('input', val)
|
|||
|
|
this.$emit('change', val)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
</style>
|