You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

113 lines
2.5 KiB

<template>
<el-select
v-model="userId"
v-select-load-more="loadStaff"
filterable
:clearable="clearable"
:placeholder="placeholder"
default-first-option
size="small"
@change="handleSelect"
>
<el-option
v-for="item in staffList"
:key="item.userId"
:label="item.nickName"
:value="item.userId"
>
<div>
<div class="inline-block item">
<span class="title">姓名:</span>
<span class="option">{{ item.nickName }}</span>
</div>
<div class="inline-block item">
<span class="title">联系电话:</span>
<span class="option">{{ item.phonenumber }}</span>
</div>
</div>
</el-option>
</el-select>
</template>
<script>
import { listAll } from '@/api/system/user'
export default {
props: {
clearable: {
type: Boolean,
default: false
},
teacher: {
type: String,
default: undefined
},
placeholder: {
type: String,
default: '选择员工'
},
value: {
type: String,
default: undefined
}
},
data() {
return {
userId: this.value,
staffList: [],
pageNum: 1,
hasMoreData: false
}
},
watch: {
value: {
handler(newValue, oldValue) {
this.userId = newValue
},
immediate: true
}
},
created() {
this.loadStaff()
},
methods: {
loadStaff: function() {
if (this.pageNum === 1) {
listAll({
pageNum: this.pageNum
}).then(response => {
if (response.code === 200) {
this.staffList = response.rows.filter(item => item.userId !== '1');
this.hasMoreData = response.rows.length > 0
this.pageNum = this.pageNum + 1
} else {
this.msgError(response.msg)
}
})
} else if (this.hasMoreData) {
listAll({
pageNum: this.pageNum
}).then(response => {
if (response.code === 200) {
this.staffList = this.staffList.concat(response.rows)
this.hasMoreData = response.rows.length > 0
this.pageNum = this.pageNum + 1
} else {
this.msgError(response.msg)
}
})
}
},
handleSelect: function(val) {
this.$emit('input', val)
this.$emit('change', val)
}
}
}
</script>
<style ref="stylesheet/scss" lang="scss" scoped>
.option{
padding-right: 15px;
color: #333;
font-weight: normal;
}
</style>