emis-frontend/src/views/emis/EmisBaseTools/EmisUserSimplePicker.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"
            element-loading-text="Loading" ref="comboGridTable" fit highlight-current-row>
            <!-- <el-table-column label="序号" align="center" min-width="50">
                  <template slot-scope="scope">
                      <span v-text="getIndex(scope.$index)"> </span>
                  </template>
            </el-table-column> -->
            <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-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, Number],
        required: false
      },
      sideCode: {
        type: String,
        required: false
      },
      postCode:{
        type: String,
        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,
         empCode:this.value,
         searchValue:null,
         ownerSiteCode:null,
         postCode:null
       }
     };
   },
   watch: {
     value(newVal,oldVal) {
        this.svalue = newVal;
        console.log("empCode1==>"+newVal);
        console.log("this.svalue1==>"+this.svalue);
        console.log("this.svalue1==>"+this.firstFlag);
        if(this.svalue!=null&&this.firstFlag){
          this.queryParams.empCode=this.svalue;
          this.queryData();
        }
     },
     siteCode(newVal){
      console.log("siteCode==>"+newVal);
      this.queryParams.ownerSiteCode=newVal;
      this.queryData();
     },
     postCode(newVal){
      console.log("postCode==>"+newVal);
      this.queryParams.postCode=newVal;
      this.queryData();
     }
   },
   mounted() {
    // 给个随机id 判断是否clickoutside
    this.createdId = String(new Date().getTime())
   },
   created() {
    this.queryData();
   },
   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.empCode;
        this.showItem(row)

        this.queryParams.searchValue=row.empName;

        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) {
      this.firstFlag = false;
      this.queryParams.empCode=null;

      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.firstFlag = false;
      this.queryParams.empCode=null;

      this.splaceholder = this.placeholder;
      this.slable = null;
      this.svalue = null;

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

      this.$emit("input", this.svalue);
      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;

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

         if(response.rows.length > 0) {
              const curItem = response.rows.find(item => item.empCode === this.svalue);
              this.showItem(curItem);
          }else{
            const curItem ={
                empCode:this.svalue,
                empName:''
            };
            this.showItem(curItem);
          }

       });
     },
     showItem(item){
      console.log(item);

      // this.slable=item.empCode+'-'+item.empName;
      if(item!=null){
        this.slable=item.empName;
        this.$emit("input", this.svalue);
        this.$emit("onChange",item);
        this.dispatch('ElFormItem', 'el.form.change', [this.svalue]);
      }
     },
     getIndex($index) {
          return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
    },
   }
 };
</script>