100 lines
2.5 KiB
Vue
100 lines
2.5 KiB
Vue
<template>
|
||
<el-select
|
||
style="width:100%"
|
||
ref="selectRef"
|
||
filterable
|
||
clearable
|
||
remote
|
||
:remote-method="queryData"
|
||
v-model="svalue"
|
||
:placeholder="placeholder"
|
||
@blur="onBlur"
|
||
@change="onChange"
|
||
@focus="onFocus"
|
||
@visible-change="reverseArrow"
|
||
:disabled="disabled"
|
||
>
|
||
<el-option v-for="item in optionItems" :key="item.empName" :label="item.empName" :value="item.empName" ></el-option>
|
||
</el-select>
|
||
</template>
|
||
<script>
|
||
import emitter from 'element-ui/src/mixins/emitter';
|
||
import { getPayeeList} from "@/api/emis/emisStaff";
|
||
|
||
export default {
|
||
name: "PayeePicker",
|
||
mixins: [emitter],
|
||
props: {
|
||
value: {
|
||
type: [String],
|
||
required: false
|
||
},
|
||
placeholder:{
|
||
type: [String],
|
||
required: false
|
||
},
|
||
disabled:{
|
||
type: [Boolean],
|
||
required: false,
|
||
default:false,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
optionItems: [],
|
||
svalue: this.value,
|
||
queryParams:{
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
}
|
||
};
|
||
},
|
||
watch: {
|
||
value(newVal) {
|
||
this.svalue = newVal;
|
||
},
|
||
},
|
||
created() {
|
||
// this.queryData();
|
||
},
|
||
mounted(){
|
||
let rulesDom = this.$refs["selectRef"].$el.querySelector(".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"); // 找到dom
|
||
rulesDom.classList.add("el-icon-arrow-up"); // 对dom新增class
|
||
},
|
||
methods: {
|
||
onFocus(){
|
||
this.queryData();
|
||
},
|
||
onBlur(val){
|
||
this.$emit("input", this.svalue);
|
||
this.dispatch('ElFormItem', 'el.form.blur');
|
||
},
|
||
onChange() {
|
||
if(this.svalue!=null){
|
||
this.$emit("input", this.svalue);
|
||
|
||
this.$emit("change",this.svalue);
|
||
this.$emit("onChange",this.svalue);
|
||
this.dispatch('ElFormItem', 'el.form.change', [this.svalue]);
|
||
}
|
||
},
|
||
queryData(val) {
|
||
this.queryParams.searchValue=val;
|
||
getPayeeList(this.queryParams).then(response => {
|
||
this.optionItems =response.rows;
|
||
});
|
||
},
|
||
reverseArrow(flag) {
|
||
let rulesDom = this.$refs["selectRef"].$el.querySelector(
|
||
".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"
|
||
); // 找到dom
|
||
if (flag) {
|
||
rulesDom.classList.add("is-reverse"); // 对dom新增class
|
||
} else {
|
||
rulesDom.classList.remove("is-reverse"); // 对dom新增class
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|