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

<template>
  <el-select
  multiple
  filterable

  clearable
  ref="selectRef"
  remote
  :remote-method="queryData"
  :loading="loading"
  v-model="svalue"
  :placeholder="placeholder"
  style="width:100%"
  @focus="onFocus"

   class="mutiSelect"
  @change="onChange"
  @visible-change="reverseArrow"
  >
   <!-- @change="onChange" -->
  <!-- collapse-tags -->
  <div style="padding: 0px 8px 0 20px;width:100%;line-height:34px;display:inline-flex;    border-bottom: 1px solid #e7e7e7;">
      <div style="width:50%">
        <span style="font-size: 13px;font-weight: 600;">选择供应商</span>
      </div>
      <div style="width:50%;text-align:right">
        <el-button type="primary" size="mini" style="padding:2px 10px" @click="confirmOk">确定</el-button>
      </div>
  </div>
    <el-option v-for="item in optionItems.filter(el=> !svalue.includes(el.code) )" :key="item.id" :label="item.name" :value="item.code">
    </el-option>
</el-select>
</template>

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

export default {
name: "EmisSupplierMultiplePicker",
mixins: [emitter],
props: {
  value: {
    type: [String],
    required: false
  },
  placeholder:{
    type: [String],
    required: false
  },
},
data() {
  return {
    svalue: [],
    // 搜索后的数据
    optionItems:[],
    itemMap:new Map(),
    loading: false,
    queryParams:{
      pageNum: 1,
      pageSize: 50,
      code:this.value,
      name:null
    }
  };
},
watch: {
  value(newVal) {
    if(this.value) {
      this.svalue = this.value.split(',');
      // this.queryData(null,this.value,this.value);
    }
    // this.queryParams.sortCodeStr=this.value;
    // console.log("xxxx===>xxx2:",this.queryParams)
    // this.queryData(null);
  },

},
created() {
  if(this.value) {
    this.svalue = this.value.split(',');
    this.queryData(null,this.value,this.value);
  }
},
methods: {
  confirmOk(){

    let selCodeStr="";
    if(this.svalue&&this.svalue.length>0){
      selCodeStr=this.svalue.join(',');
    }
    console.log("===>==1=>》:",this.svalue,selCodeStr);
    this.$emit('input', selCodeStr)
    this.$emit('onChange',selCodeStr)
    // this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);

    this.$refs.selectRef.blur();
  },
  onFocus(){
    let selCodeStr=null;
    if(this.svalue&&this.svalue.length>0){
      selCodeStr=this.svalue.join(',');
    }
    this.queryData(null,null,selCodeStr);
  },
  onChange(val) {
    let selCodeStr="";
    if(this.svalue&&this.svalue.length>0){
      selCodeStr=this.svalue.join(',');
    }
    // this.queryData(null,null,selCodeStr);
    this.$emit('input', selCodeStr)
    this.$emit('onChange',selCodeStr)
  },
  queryData(val,key,sortCodeStr) {
    this.queryParams.pageNum=1;
    this.queryParams.name=val;
    this.queryParams.code=key;
    this.queryParams.sortCodeStr=sortCodeStr;

    console.log("xxxx===>xxx2:",this.queryParams)
    listSimpleEmisSupplier(this.queryParams).then(response => {
      this.optionItems=response.rows

      this.optionItems.forEach(item => {
        if(!(item.code in this.itemMap)){
          this.itemMap[item.code]=item;
        }
      });

    });
  },
   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>
.el-s-thead{
width: 100%;
color: rgb(177 47 41);
font-size: 14px;
font-weight: 600;
display: inline-flex;
padding: 10px;
border-bottom: 1px solid #e6e3e3;
min-width: 300px;
}

.el-data{
width: 100%;
color: #000;
font-size: 14px;
font-weight: 600;
display: inline-flex;
padding: 5px;
border-bottom: 1px solid #e6e3e3;
}

.el-tag.el-tag--info {
    background-color: #f4f4f5;
    border-color: #e9e9eb;
    color: #000000;
    font-weight: 600;
}

.mutiSelect :deep .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
   	display: none;
}



</style>