<template>
<div>
<el-select
v-model="value"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
loading-text="正在查询中..."
:remote-method="remoteMethod"
:loading="loading"
@visible-change="visibleChange"
clearable
@change="getPersonalName"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
import httpClient from '@/utils/httpClient'
import tools from '@workspace/utils/tools'
import { getRoleAllPersonal } from './api.js'
const request = httpClient.instance.request
export default {
name: 'publicSelectPersonal',
components:{},
props:{
//是否禁用
disabled: {
type: Boolean,
default: false
},
roleCode: {
type: String,
default: ''
},
//'1'-名字,'2'-empId,'3'-userId
isUserName: {
type: String,
default: '1'
},
},
data() {
return {
personalSelectList:[],//人员数据列表
value: '',//关键字
options: [],
loading: false,
}
},
watch: {
propsImposeTier: {
handler(newVal) {
},
deep: true,
immediate: true
},
},
created() {},
beforeMount(){
// this.pageSelectDataInit()
},
mounted(){},
methods: {
//获取角色下的所有人员
// async pageSelectDataInit() {
// await getRoleAllPersonal({
// pageIndex: 1,
// pageSize: 10,
// projectManagerName:'',
// role: this.roleCode
// }).then(res => {
// if (res && res.data.result === '1') {
// let resData = res.data.rows;
// if(resData && resData.length > 0){
// this.personalSelectList = resData.map(item => {
// return { value: `${item.userDesc}`, label: `${item.userDesc}【${item.orgName}】` };
// });
// }
// }
// })
// },
remoteMethod(query) {
if (query !== "") {
this.loading = true;
getRoleAllPersonal({
pageIndex: 1,
pageSize: 20,
projectManagerName: query,
role: this.roleCode
}).then(res => {
if (res && res.data.result === '1') {
let resData = res.data.rows;
if(resData && resData.length > 0){
this.personalSelectList = resData.map(item => {
return { value: `${this.isUserName == '1' ? item.userDesc:this.isUserName == '2' ? item.empId:item.userId}`, label: `${item.userDesc}【${item.orgName}】` };
});
}
setTimeout(() => {
this.loading = false;
this.options = this.personalSelectList.filter(item => {
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
});
// if (this.options.length === 0) {
// const newOption = { value: query, label: query };
// this.options = [newOption];
// }
}, 200);
}
})
// setTimeout(() => {
// this.loading = false;
// this.options = this.personalSelectList.filter(item => {
// return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
// });
// if (this.options.length === 0) {
// const newOption = { value: query, label: query };
// this.options = [newOption];
// }
// }, 200);
} else {
this.options = [];
}
},
//下拉框隐藏时调用
visibleChange(val){
this.options = !val ? [] : this.options;
},
//传给父组件
getPersonalName(val) {
this.$emit('getPersonalName', val)
}
}
}
</script>
07-29
2751
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
02-19