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,
         searchValue:null,
         siteCode:this.sideCode,
         postCode:this.postCode
       }
     };
   },
   watch: {
     value(newVal,oldVal) {
        this.svalue = newVal;
        this.initData();
     },
     siteCode(newVal){
      this.initData();
     }
   },
   beforeDestroy(){
      // this.firstFlag = true;
   },
   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.getList()
    },
    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.getList()

      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.getList();
    },
    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.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);

      if(this.visible){
        this.getList();
      }
    },
    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]);
    },
    initData(){
      // && this.firstFlag
        if(this.svalue){
          let queryParams = {
              empCode:this.svalue
          }
          getStaffList(queryParams).then(response => {
            // this.dataList=response.rows;
            if(response.rows.length > 0) {
              const curItem = response.rows[0];
              this.showItem(curItem);
            }else{
              const curItem ={
                 empCode:this.svalue,
                 empName:''
              };
              this.showItem(curItem);
            }

            this.firstFlag = false;
          });
        }
    },
    getList() {
       this.loading = true;
       // 首次执行
      //  this.queryParams.empCode = this.firstFlag?this.value:null;
       getStaffList(this.queryParams).then(response => {
         this.loading = false;
         this.total = response.total;
         this.dataList =  response.rows;
          // if(this.firstFlag){
          //   const selItem = this.dataList.find(item => item.empCode==this.svalue)
          //   if(selItem){
          //     this.showItem(selItem);
          //   }
          //   // 首次执行结束
          //   this.firstFlag = false;
          // }
       });
     },
     showItem(item){
      console.log(item);

      // this.slable=item.empCode+'-'+item.empName;
      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>