emis-frontend/src/views/emis/EmisBaseTools/EmisUserSimplePicker.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.empCode"
              stripe
              :row-style="isRed"
              element-loading-text="Loading"
              >
              <el-table-column label="员工编号" align="left" prop="empCode" width="100" />
              <el-table-column label="员工名称" align="center" prop="empName" width="100" :show-overflow-tooltip="true" />
              <el-table-column label="所属网点" align="center" prop="ownerSiteName" 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 class="el-icon-arrow-down select-down" :class="visible&&'rotate180'"></i> -->
              <i slot="suffix" class="el-icon-search"></i>
            </template>
      </el-input>

    </el-popover>

  </div>
</template>
<script>

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

 export default {
   name: "EmisUserSimplePicker",
   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,
         empCode:null,
         searchValue:null,
         ownerSiteCode:this.sideCode,
         postCode:this.postCode
       }
     };
   },
   watch: {
     value(newVal,oldVal) {
          this.svalue=this.value;
          this.queryData(null,this.svalue);

          if(!this.svalue){
            this.slable=null;
          }
     },
     siteCode(newVal){
      this.queryParams.ownerSiteCode=newVal;
      this.defaultItems=null;
     },
     postCode(newVal){
      this.queryParams.postCode=newVal;
      this.defaultItems=null;
     }
   },
   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.empCode;
        this.slable=row.empName;

        this.isInputing = false;

        this.$emit("input", this.svalue);
        this.$emit("onChange",row);
        this.$refs.popoverRef.doClose();
     },
    isRed({ row }) {
     if (row.empCode == 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.searchValue = val;
       this.queryParams.empCode = key;

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

          // 初始值存储
          if(key==null && val==null){
            this.defaultTotal = this.total+0;
            this.defaultItems=[...this.optionItems]
          }

          if(!this.isInputing ){
            let selectItem = response.rows.find(item => item.empCode == this.svalue);
            if(selectItem){
              this.slable = selectItem.empName;
            }
          }


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