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

<template>
  <div :id="createdId">
    <el-popover
          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 >
          <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="$t('名称')" align="left" prop="name" width="100" />
            <el-table-column :label="$t('电话')" align="left" prop="phone" width="100" />
            <el-table-column :label="$t('地址')" align="left" prop="country" width="100" :show-overflow-tooltip="true" >
              <template slot-scope="scope">
                  <div>{{scope.row.countryName}}{{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.countyName}} {{scope.row.address}}</div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('公司')" align="left" 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 { listEmisCustomerAddress } from "@/api/emis/emisCustomerAddress";

export default {
   name: "CustomerAddressSimplePicker",
   mixins: [emitter],
   props: {
      value: {
        type: [String, Number],
        required: false
      },
      addressType:{
       type:[String,Number]
      },
      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,
         addressType: this.addressType,
         searchValue:null,
       }
     };
   },
   watch: {
     value(newVal) {
       this.svalue = newVal;
       this.slable = this.svalue;
     },
   },
   mounted() {
    this.createdId = String(new Date().getTime()) // 给个随机id 判断是否clickoutside
   },
   created() {
   },
   methods: {
    showItem(item){
      this.svalue=item.name;
      this.slable=item.name;
    },
    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.showItem(row)
        this.queryParams.searchValue=row.name;

        this.$emit("input", this.svalue);
        this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
        this.dispatch('ElFormItem', 'el.form.change', [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);

      if(this.visible){
        this.getList();
      }
    },
    onblur(el) {
      if(this.slable=='' || this.slable=='' || !this.isEdit) {
        this.slable = this.splaceholder;
      }
    },
    getList() {
       this.loading = true;

       // 首次执行
      //  this.queryParams.empCode = this.firstFlag?this.value:null;

       listEmisCustomerAddress(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;
          // }
       });
     },

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