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

<template>
  <div :id="createdId">
    <el-popover
          placement="bottom"
          trigger="click"
          ref="popoverRef"
          effect="light"
          :show-arrow="false"
        >
      <span  slot="reference">
         <el-input ref="inputValue" :value="slable" :placeholder="splaceholder" @input="changeValue" @focus="onfocus" @blur="onblur" @clear="onclear" clearable  >
            <template slot="suffix">
              <i class="el-icon-arrow-down select-down" :class="visible&&'rotate180'"></i>
            </template>
         </el-input>
      </span>
      <div >
        <!-- class="el-table--scrollable-y" border max-height="300px" -->
          <el-table
             v-loading="loading"
             style="width: 100%;"
             :data="dataList"
             @row-click="onRowClick"
             stripe
             size="mini"
            ref="comboGridTable" fit highlight-current-row>
            <el-table-column label="客户编码" align="left" prop="customerCode" width="100" />
            <el-table-column label="客户名称" align="center" prop="customerName" width="280" :show-overflow-tooltip="true" />
            <!-- <el-table-column label="所属公司" align="center" prop="company" 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-popover>

  </div>
</template>
<script>

import emitter from 'element-ui/src/mixins/emitter';
import { listMonthUser } from "@/api/emis/emisCustomerUser";

 export default {
   name: "CustomerSimplePicker",
   mixins: [emitter],
   props: {
      value: {
        type: [String, Number],
        required: false
      },
      isInitiated:{
        type: [Boolean,String],
        required: false,
        default:false
      },
      placeholder:{
          type: String,
          required: false
        },
      disabled:{
        type: [Boolean,String],
        required: false
      },
      pagination: {
        type: Boolean, default: true
      },
   },
   data() {
     return {
       createdId: '0',
       loading:false,
       visible:false,
       dataList: [],
       total:0,
       svalue: this.value,
       slable: null,
       isEdit:false,
       splaceholder:this.placeholder,
       firstFlag:true,
       queryParams:{
         pageNum:1,
         pageSize:5,
         searchValue:null,
       }
     };
   },
   watch: {
     value(newVal,oldVal) {
        this.svalue = newVal;
     },

   },
   mounted() {
    // 给个随机id 判断是否clickoutside
    this.createdId = String(new Date().getTime())
   },
   created() {

   },
   methods: {
    changeValue(val) {
      if(this.queryParams.searchValue === val ) return;
      this.slable = val;
      this.isEdit = true;
      this.queryParams.searchValue = val
      this.queryParams.pageNum = 1
      this.queryData()
    },
    onRowClick(row, column, event) {
        this.svalue=row.customerCode;
        this.slable=row.customerName;

        this.$emit("input", this.svalue);
        this.$emit("onChange",row);
        this.$refs.popoverRef.doClose();
     },
    changePage(cur) {
      this.queryParams.pageNum = cur
      this.queryData()

      this.visible = true
      this.$refs.popoverRef.doShow();
    },
    onfocus(el) {
      if(this.slable) {
        this.splaceholder= this.slable
      }
      this.visible = true
      this.slable = null;
      this.queryParams.searchValue = null;
      this.queryParams.pageNum = 1
      this.queryData();
    },
    onclear(el){
      this.splaceholder = this.placeholder;
      this.slable = null;
      this.svalue = null;

      this.queryParams.searchValue = null;
      this.queryParams.pageNum = 1;

      this.$emit("input", this.svalue);
      this.$emit("onChange",null);
      this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);

      if(this.visible){
        this.queryData();
      }
    },
    onblur(el) {
      if(this.slable=='' || this.slable=='' || !this.isEdit) {
        this.slable = this.splaceholder;
      }
      this.$emit("input", this.svalue);
      this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
    },
    queryData() {
      this.loading = true;
      listMonthUser(this.queryParams).then(response => {
        this.loading = false;
        this.total = response.total;
        this.dataList =  response.rows;
      });
    },

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