emis-oms-frontend/src/views/oms/EmisBaseTools/GoodsInput.vue

<template>
  <div :id="createdId">
    <el-popover
          placement="bottom"
          trigger="click"
          ref="popoverRef"
          :popper-options="{ boundariesElement: '.el-form', removeOnDestroy: true }"
        >
        <div >
            <el-table
              ref="comboGridTable"
              v-loading="loading"
              style="width: 100%;"
              :data="optionItems"
              @row-click="onRowClick"
              :row-key="row => row.goodsCode"
              stripe
              :row-style="isRed"
              element-loading-text="Loading"
              >
              <el-table-column label="序号" align="center" width="60">
                  <template slot-scope="scope">
                      <span v-text="getIndex(scope.$index)"> </span>
                  </template>
              </el-table-column>
              <el-table-column label="货物名称" align="left" prop="goodsName" width="100" />
              <el-table-column label="英文名称" align="center" prop="goodsNameEn" width="100" :show-overflow-tooltip="true" />

            </el-table>
            <el-pagination v-show="pagination" small
            :total="total"
            :page-size="5"
            layout="prev, pager, next, total"
            @current-change="changePage"
            />
        </div>

      <el-input
       slot="reference"
       ref="inputValue"
       :value="slable"
       :placeholder="placeholder"
       @input="onInput"
       @click.native="onClick"
       @blur="onBlur"
       @clear="onClear"
       clearable
        >
            <template slot="suffix">
              <i slot="suffix" class="el-icon-edit"></i>
            </template>
      </el-input>

    </el-popover>

  </div>
</template>
<script>

import emitter from 'element-ui/src/mixins/emitter';
import { listSimpleEmisGoods} from "@/api/oms/emisGoods";

 export default {
   name: "GoodsInput",
   mixins: [emitter],
   props: {
      value: {
        type: String,
        required: false
      },
      sideCode: {
        type: String,
        required: false
      },
      postCode:{
        type: String,
        required: false
      },
      placeholder:{
        type: String,
        required: false
      },
      disabled:{
       type: [Boolean,String],
       required: false
      },
      pagination: {
        type: Boolean, default: true
      },
   },
   data() {
     return {
       createdId: '0',
       loading:false,

       total:0,
       optionItems: [],

       // 缺省值
       defaultTotal:0,
       defaultItems:null,

       svalue: this.value,
       slable: null,

       isInputing: false,

       isInit:true,

       queryParams:{
         pageNum:1,
         pageSize:5,
         goodsName:null,
         searchValue:null,
       }
     };
   },
   watch: {
     value(newVal,oldVal) {
        if(this.value!=null && this.isInit){
          this.svalue=this.value;
          this.queryData(null,this.svalue);
        }
     },

   },
   mounted() {
    // 给个随机id 判断是否clickoutside
    this.createdId = String(new Date().getTime())
   },
   created() {
    if(this.value!=null && this.isInit){
      this.svalue=this.value;
      this.queryData(null,this.svalue);
    }
   },
   methods: {
    onClick(){
        this.isInit=false;
        // 第一次点击时需要初始化
        if(!this.defaultItems){
          this.queryParams.pageNum=1;
          this.queryData(null,null);
        }else{
          this.total = this.defaultTotal;
          this.optionItems = [...this.defaultItems];
        }
        // this.$refs.popoverRef.doShow();
    },
    onInput(val) {
      if(val == null ) return;

      this.isInputing = true;
      this.slable = val;
      this.queryParams.pageNum = 1
      this.queryData(val,null)

    },
    onRowClick(row, column, event) {
        this.svalue=row.goodsName;
        this.slable=row.goodsName;

        this.isInputing = false;

        this.$emit("input", this.svalue);
        this.$emit("onChange",row);
        this.$refs.popoverRef.doClose();
     },
    isRed({ row }) {
     if (row.goodsName == this.svalue) {
        return {
          "color": "red",
          "font-weight": "bold",
        };
      }
    },
    onClear(el){
      this.slable = null;
      this.svalue = null;

      this.$emit("input", this.svalue);
      this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
    },
    onBlur(el) {
      // 如果编辑没有选择则清关历史记录
      if( this.isInputing ){
        this.svalue = null;
        this.slable = null;
      }
      this.$emit("input", this.svalue);
      this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
    },
    changePage(cur) {
      this.queryParams.pageNum = cur
      this.queryData()
    },
    queryData(val,key) {
       this.loading = true;
       this.queryParams.goodsName = val;

       listSimpleEmisGoods(this.queryParams).then(response => {
         this.loading = false;
         this.total = response.total;
         this.optionItems = response.rows;

       });
     },
     getIndex($index) {
          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
    },
   }
 };
</script>