emis-frontend/src/views/emis/EmisBaseTools/WarehouseInNoPicker.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
      @change="onChange">
        <el-option v-for="item in filterData" :key="item.inNo" :label="item.inNo" :value="item.inNo">
        </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 { listSimpleEmisWarehouseIn } from "@/api/emis/emisWarehouseIn";

  export default {
    name: "WarehouseInNoPicker",
    props: {
      value: {
        type: [String],
        required: false
      },
      placeholder:{
        type: [String],
        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: {
      onChange(val) {
        let selData = [];
        let selCodeStr = "";
        let selNameStr="";
        this.svalue.forEach(item=>{
          let itemData=this.filterMap[item];
          if(itemData!=null){
            selData.push(itemData)
            selCodeStr=selCodeStr+itemData.inNo+",";
          }
        });

        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() {
        listSimpleEmisWarehouseIn(this.queryParams).then(response => {
          this.filterData= response.rows
          this.filterData.forEach(item => {
            this.filterMap[item.inNo]=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>