emis-frontend/src/views/emis/EmisBaseTools/TransProductPicker.vue

<template>
    <el-select
      filterable
      clearable
      v-model="svalue"
      :placeholder="placeholder"
      @blur="onBlur"
      @focus="onFocus"
      @change="onChange"
      style="width:100%"
      >
    <el-option v-for="item in optionItems" :key="item.prodCode" :label="item.prodName" :value="item.prodCode" />
  </el-select>

  <!-- style="width:100%" multiple-->

</template>
<script>
  import emitter from 'element-ui/src/mixins/emitter';
  import { listSimpleEmisTransProduct } from "@/api/emis/emisTransProduct";

  export default {
    name: "TransProductPicker",
    mixins: [emitter],
    props: {
      value: {
        type: [String, Number],
        required: false
      },
      transLineCode: {
        type: String,
        required: false
      },
      placeholder:{
        type: String,
        required: false
      },
      isInitiated:{
        type: [Boolean,String],
        required: false,
        default:false
      }
    },
    data() {
      return {
        optionItems: [],
        svalue: this.value,
        isFistInit:true,
        searchProdCode:this.value,
      };
    },
    watch: {
      value(newVal) {
        this.svalue = newVal;
      },
      transLineCode(newVal) {
        this.queryData();
      }
    },
    created() {
      this.queryData();
    },
    methods: {
      onFocus(){
        this.searchProdCode=null;
      },
      onBlur(val){
        this.$emit("input", this.svalue);
        this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
      },
      onChange() {
        this.$emit("input", this.svalue);
        let itemData ={};
        this.optionItems.forEach(item=>{
          if(item.prodCode === this.svalue){
            itemData = item;
          }
        });
        this.$emit("onChange",itemData);
        this.dispatch('ElFormItem', 'el.form.change', [this.svalue]);
      },
      queryData() {

        if(!this.transLineCode && !this.isFistInit){
          this.optionItems=[];
          return;
        }

        let queryParams = {
          pageNum: 1,
          pageSize: 3000,
          prodCode:this.searchProdCode,
          transLineCode:this.transLineCode,
          status:1
        };
        listSimpleEmisTransProduct(queryParams).then(response => {
            this.optionItems = response.rows;
        });
      },

    }
  };
</script>