emis-frontend/src/views/emis/EmisBaseTools/GoodsMultiplePicker.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"
      @change="onChange">
      <!-- allow-create -->
      <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" :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
      },
    },
    data() {
      return {
        svalue: [],
        // 搜索后的数据
        optionItems:[],
        itemMap:new Map(),
        loading: false,
        queryParams:{
          pageNum: 1,
          pageSize: 10,
        }
      };
    },
    watch: {
      value(newVal) {
      },

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

        let selIdStr="";
        let selNameStr="";

        let selData = [];
        this.svalue.forEach(item=>{
          let itemData=this.itemMap[item];
          if(itemData!=null){
            selData.push(itemData)
            selIdStr=selIdStr+itemData.goodsName+",";
            selNameStr=selNameStr+itemData.goodsName+",";
          }
        });

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

        this.$refs.selectRef.blur();
      },
      onFocus(){
        this.queryData();
      },
      onChange(val) {
        this.confirmOk()
      },
      queryData(queryVal) {
        this.queryParams.pageNum=1;
        this.queryParams.goodsName=queryVal;
        listSimpleEmisGoods(this.queryParams).then(response => {
          this.optionItems=response.rows
          console.log(this.optionItems);

          this.optionItems.forEach(item => {
            if(!(item.goodsName in this.itemMap)){
              this.itemMap[item.goodsName]=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>