emis-frontend/src/views/emis/EmisBaseTools/GoodsMultiplePicker copy.vue

<template>
      <el-select
      multiple
      filterable
      clearable
      ref="selectRef"
      default-first-option
      v-el-select-loadmore="loadmore"
      remote
      :remote-method="remoteMethod"
      :loading="loading"
      :no-data-text="noDataText"
      v-model="svalue"
      :placeholder="placeholder"
      style="width:100%"
      allow-create
      @mouseleave.native="onMouseleave"
      @change="onChange">
      <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="hideMe">确定</el-button>
          </div>
      </div>
        <el-option v-for="item in filterData" :key="item.goodsName" :label="item.goodsName" :value="item.goodsName">
        </el-option>
    </el-select>
    <!-- <el-checkbox-group v-model="svalue">
        <el-option v-for="item in filterData" :key="item.id" :label="item.goodsName" :value="item.id">
          <el-checkbox style="pointer-events: none" :label="item.goodsName"></el-checkbox>
        </el-option>
      </el-checkbox-group> -->
</template>

<script>
  import { listSimpleEmisGoods} from "@/api/emis/emisGoods";

  export default {
    name: "GoodsMultiplePicker",
    props: {
      value: {
        type: [String],
        required: false
      },
      placeholder:{
        type: [String],
        required: false
      },
      goodsList:{
        type: [Array],
        required: false
      }
    },
    data() {
      return {
        svalue: [],
        // 搜索后的数据
        filterData:[],
        filterMap:new Map(),
        noDataText: '无数据',
        loading: false,
        queryParams:{
          pageNum: 1,
          pageSize: 10,
        }
      };
    },
    watch: {
      value(newVal) {
          console.log(this.value)
        // if(newVal != null && newVal!='') {
        //   this.svalue = this.value.spilt(',');
        // }
      },
      svalue(newVal, oldVal) {
      }
    },
    created() {
      if(this.value != null && this.value!='' && this.value!=undefined) {
        this.svalue = this.value.split(',');
      }
      this.queryData();
    },
    methods: {
      hideMe(){
        this.$refs.selectRef.blur();
      },
      blurSelect() {
        this.$refs.mutipleSelect.$refs.input.blur = () => {
          this.$refs.mutipleSelect.blur();
        };
      },
      onMouseleave(e, i) {
        // setTimeout(() => {
        //   var currTargetEl = e.relatedTarget || e.toElement
        //   if (currTargetEl) {
        //     const elTagName = currTargetEl.tagName
        //     const targetClassName = currTargetEl.className
        //     // ul 同时包含className==el-select-dropdown__list
        //     if (elTagName === 'UL' && targetClassName.indexOf('el-select-dropdown__list') !== -1) {
        //       return false
        //     } else if (elTagName === 'LI' && targetClassName.indexOf('el-select-dropdown__item') !== -1) {
        //       return false
        //     } else if (!e.target.children[1]) {
        //       return false
        //     } else {
        //       e.target.children[1].style.display = 'none'
        //     }
        //   }
        // }, 0)
        // this.$refs.selectRef.blur();
      },
      onChange(val) {
        // console.log(this.svalue);
        // console.log(this.svalue.join());
        let selData = [];
        let selCodeStr = "";
        let selNameStr="";
        this.svalue.forEach(item=>{
          let itemData=this.filterMap[item];
          if(itemData!=null){
            selData.push(itemData)
            selCodeStr=selCodeStr+itemData.goodsName+",";
            selNameStr=selNameStr+itemData.goodsName+",";
          }else{
            // if( this.$refs.selectRef.createdLabel!=null ){
              const itemData = {
                goodsCode:'-1',
                goodsName:item,
              }
              selData.push(itemData)
              selCodeStr=selCodeStr+itemData.goodsName+",";
              selNameStr=selNameStr+itemData.goodsName+",";
            //  }
          }
        });

        selCodeStr = selCodeStr.substring(0,selCodeStr.length-1);
        console.log(selData);
        console.log(selCodeStr);
        console.log(selNameStr);
        this.$emit('input', selCodeStr)
        this.$emit('onChange', selData,selNameStr)

        this.$refs.selectRef.createdLabel = null
      },
      remoteMethod(queryVal) {
        this.queryParams.pageNum=1;
        this.queryParams.goodsName=queryVal;
        this.queryData();
      },
      loadmore() {
        this.queryParams.pageNum++;
        this.queryData();
      },
      queryData() {
        listSimpleEmisGoods(this.queryParams).then(response => {
          this.filterData= response.rows
          this.filterData.forEach(item => {
            this.filterMap[item.id]=item;
          });
        });
      },

    }
  };
</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;
  }


</style>