//封装的组件
<template id="employee-auto-select">
<span>
<el-autocomplete
ref="listSelect"
size="small" v-bind:style="{width: width}"
placeholder="按账号模糊搜索..."
v-model="selectValue"
clearable
:fetch-suggestions="querySearch"
:debounce=0
@select="handleSelect"></el-autocomplete>
</span>
</template>
<script>
Vue.component('employee-auto-select', {
//name: '客户下拉选择',
template:'#employee-auto-select',
props: {
width: {
type: String,
default: '150px'
},
clearable: {
type: Boolean,
default: true,
},
},
data: function () {
return {
loadObj : {
datatype: 'json',
url: ''//这里是接口地址
},
selectValue: '',
selectData: {},
options: [],
}
},
methods: {
querySearch: function (queryString, cb) {
// debugger;
if (!utils.isEmpty(queryString)) {
this.loadObj.data = {
account: queryString
}
this.loadByData(cb)
} else {
cb([]);
}
},
loadByData: function (cb) {
let me = this;
loadUri.RequestData(me.loadObj).then(data => {
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
data[i].value = data[i].employeeName + '[' + data[i].employeeAccount + ']';
}
} else {
data = [{ value: '暂无可匹配数据!' }];
}
cb(data);
}).catch(err => {
return
});
},
//=====================================
handleSelect(data) {
debugger
let me = this;
if (!utils.isEmpty(data) && !utils.isEmpty(data.employeeId)) {
me.selectData = data;
} else {
me.selectData = {};
}
this.$emit("employeeautoselect", me.selectData);
},
/======================================
clearData() {
debugger
this.selectValue = '';
this.$emit('employeeautoselect');
},
getValue() {
let me = this;
let id = '';
if (!utils.isEmpty(me.selectValue) && !utils.isEmpty(me.selectData) && !utils.isEmpty(me.selectData.employeeId)) {
id = me.selectData.employeeId;
} else {
id = '';
utils.MessageInfo('人员不存在,请重新选择人员选项!');
}
return id;
},
setNameValue(name, value) {
// debugger;
let me = this;
me.selectValue = name;
me.selectData = {
value: me.selectValue,
employeeId: value,
};
},
}
});
</script>
//父组件
<employee-auto-select ref="lastUpdatorId" style="width:150px" @employeeautoselect="employeeAutoSelected"></employee-auto-select>
<script>
employeeAutoSelected: function (item) {
debugger
let me = this;
if (!utils.isEmpty(item)) {
if(!utils.isEmpty(item.employeeAccount)){
this.searchData.account = item.employeeAccount;
}else{
this.searchData.account = '';
}
}else{
this.searchData.account = '';
}
},
</script>