161 lines
3.8 KiB
Vue
161 lines
3.8 KiB
Vue
<template>
|
||
<el-select
|
||
style="width:100%"
|
||
ref="selectRef"
|
||
filterable
|
||
clearable
|
||
remote
|
||
:remote-method="queryData"
|
||
v-model="svalue"
|
||
:placeholder="placeholder"
|
||
auto-complete="false"
|
||
:disabled="disabled"
|
||
no-data-text=""
|
||
allow-create
|
||
@blur="onBlur"
|
||
@change="onChange"
|
||
@click.native="onClick"
|
||
@visible-change="reverseArrow"
|
||
>
|
||
<el-option v-for="(item,index) in optionItems" :key="index" :label="item.carNo" :value="item.carNo" ></el-option>
|
||
</el-select>
|
||
|
||
|
||
</template>
|
||
<script>
|
||
import emitter from 'element-ui/src/mixins/emitter';
|
||
import { listSimpleEmisTmsCar } from "@/api/emis/emisTmsCar";
|
||
|
||
|
||
export default {
|
||
name: "CarSimplePicker",
|
||
mixins: [emitter],
|
||
props: {
|
||
value: {
|
||
type: String,
|
||
required: false
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
required: false
|
||
},
|
||
countryCode: {
|
||
type: String,
|
||
required: false
|
||
},
|
||
disabled:{
|
||
type: [Boolean,String],
|
||
required: false
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
loading:false,
|
||
|
||
svalue: this.value,
|
||
optionItems: [],
|
||
// 缺省值
|
||
defaultItems: null,
|
||
itemMap:new Map(),
|
||
|
||
queryParams:{
|
||
pageNum:1,
|
||
pageSize:10,
|
||
countryCode:this.countryCode,
|
||
carNo:null,
|
||
searchVal:null
|
||
}
|
||
};
|
||
},
|
||
watch: {
|
||
value(newVal,oldVal) {
|
||
this.svalue=this.value;
|
||
// this.queryData(null,this.svalue);
|
||
},
|
||
|
||
countryCode(newVal, oldVal) {
|
||
if(newVal!=oldVal){
|
||
this.queryParams.countryCode=newVal
|
||
this.defaultItems=null;
|
||
}
|
||
}
|
||
},
|
||
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
|
||
},
|
||
created() {
|
||
// if(this.svalue!=null){
|
||
// this.queryData(null,this.svalue);
|
||
// }
|
||
},
|
||
methods: {
|
||
onClick(){
|
||
// 第一次点击时需要初始化
|
||
if(!this.defaultItems){
|
||
this.queryData(null,null);
|
||
}else{
|
||
this.optionItems = [...this.defaultItems];
|
||
}
|
||
},
|
||
onChange() {
|
||
this.$emit("input", this.svalue);
|
||
let itemData = this.optionItems.find(item => item.siteCode == this.svalue);
|
||
this.$emit("onChange",itemData);
|
||
},
|
||
onClear(){
|
||
this.$emit("input", this.svalue);
|
||
this.$emit("onChange",null);
|
||
},
|
||
onBlur(val){
|
||
this.$emit("input", this.svalue);
|
||
this.dispatch('ElFormItem', 'el.form.blur');
|
||
},
|
||
queryData(val,key) {
|
||
this.optionItems=[];
|
||
|
||
this.queryParams.carNo=val;
|
||
this.queryParams.searchValue=val;
|
||
|
||
console.log("====>==1",this.queryParams)
|
||
|
||
listSimpleEmisTmsCar(this.queryParams).then(response => {
|
||
this.optionItems=response.rows;
|
||
// 初始值存储
|
||
if(key==null && val==null){
|
||
this.defaultItems=[...this.optionItems]
|
||
}
|
||
});
|
||
},
|
||
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>
|
||
|
||
<style lang="scss" scoped>
|
||
// right: 30px;
|
||
// cursor: pointer;
|
||
:deep .el-select.remote-select{
|
||
.el-select__caret::before{
|
||
content: '\e6e1';
|
||
}
|
||
.is-focus{
|
||
.el-select__caret{
|
||
transform: rotateZ(0deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
</style>
|