md

src/views/emis/EmisBaseTools/EmisTmsSiteBatchPicker.vue

@@ -0,0 +1,123 @@
+<template>
+  <el-select
+     style="width:100%"
+     ref="selectRef"
+     filterable
+     clearable
+     remote
+     :remote-method="remoteDebounce"
+     v-model="svalue"
+     :placeholder="placeholder"
+     auto-complete="new-password"
+
+     :disabled="disabled"
+
+     @blur="onBlur"
+     @change="onChange"
+     @click.native="onClick"
+     @visible-change="reverseArrow"
+     >
+       <el-option v-for="item in optionItems" :key="item.id" :label="item.batchName+'('+item.carNo+')'" :value="item.batchNo" ></el-option>
+   </el-select>
+</template>
+<script>
+ import emitter from 'element-ui/src/mixins/emitter';
+ import { listEmisTmsSiteBatch} from "@/api/emis/emisTmsSiteBatch";
+
+ import { debounce} from "@/utils/custom";
+
+ export default {
+   name: "EmisTmsSiteBatchPicker",
+   mixins: [emitter],
+   props: {
+     value: {
+       type: [String],
+       required: false
+     },
+     placeholder:{
+       type: [String],
+       required: false
+     },
+     disabled:{
+       type: [Boolean],
+       required: false
+     },
+
+   },
+   data() {
+     return {
+       svalue: this.value,
+       optionItems: [],
+
+       // 缺省值
+       defaultItems: null,
+       countryMap:new Map()
+     };
+   },
+   watch: {
+     value(newVal,oldVal) {
+         this.svalue=this.value;
+         this.queryData(null,this.svalue);
+     },
+   },
+   created() {
+     if(this.svalue!=null){
+         this.queryData(null,this.svalue);
+     }
+   },
+   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: {
+     onClick(){
+       // 第一次点击时需要初始化
+       if(!this.defaultItems){
+         this.queryData(null,null);
+       }else{
+         this.optionItems = [...this.defaultItems];
+       }
+     },
+     onBlur(val){
+       this.$emit("input", this.svalue);
+       this.dispatch('ElFormItem', 'el.form.blur');
+     },
+     onChange() {
+         this.$emit("input", this.svalue);
+         let itemData = this.optionItems.find(item => item.batchNo == this.svalue);
+         this.$emit("change",itemData);
+         this.$emit("onChange",itemData);
+         this.dispatch('ElFormItem', 'el.form.change', [this.svalue]);
+     },
+     remoteDebounce(val,key){
+       debounce(this.queryData(val,key),2000);
+     },
+     queryData(val,key) {
+       this.optionItems=[];
+       let queryParams = {
+         pageNum:1,
+         pageSize:10,
+         batchNo:key,
+         searchValue:val
+       };
+       listEmisTmsSiteBatch(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>