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

<template>
  <div :id="createdId">
    <el-popover
          trigger="click"
          ref="popoverRef"
          effect="light"
          :show-arrow="false"
        >
        <div >
          <el-table
              v-loading="loading"
             ref="comboGridTable"
             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="$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-column :label="$t('企业名称')" align="left" prop="enterpriseName" width="100" :show-overflow-tooltip="true"/>
            <el-table-column :label="$t('企业税号')" align="left" prop="enterpriseTaxId" 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="svalue"
        :placeholder="placeholder"
        @input="handleInput"
        @focus="onFocus"
        @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 { listSimpleEmisCustomerAddress } from "@/api/emis/emisCustomerAddress";

export default {
   name: "CustomerAddressSimplePicker",
   mixins: [emitter],
   props: {
      value: {
        type: [String, Number],
        required: false
      },
      useSiteCode:{
        type:[String,Number]
      },
      addressType:{
       type:[String,Number]
      },
      countryCode:{
       type:[String]
      },
      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,

       total:0,
       optionItems: [],

       // 缺省值
       defaultTotal:0,
       defaultItems:null,

       sId: null,
       svalue: this.value,

       isInputing: false,

       queryParams:{
         pageNum:1,
         pageSize:5,
         searchValue:null,
         useSiteCode:this.useSiteCode,
         addressType: this.addressType,
         country:this.countryCode,
       }
     };
   },
   watch: {
    value(newVal,oldVal) {
        // if(this.value!=null){
        // }
        this.svalue=this.value;

     },
     countryCode(newVal){
      this.queryParams.country=newVal;
      this.defaultItems=null;
     },
     addressType(newVal){
      this.queryParams.addressType=newVal;
      this.defaultItems=null;
     },
     useSiteCode(newVal){
      this.queryParams.useSiteCode=newVal;
      this.defaultItems=null;
     }

   },
   mounted() {
    this.createdId = String(new Date().getTime()) // 给个随机id 判断是否clickoutside
   },
   created() {
    if(this.svalue!=null){
      this.svalue = this.value;
    }
   },
   methods: {
    onFocus(){
        // 第一次点击时需要初始化
        if(!this.defaultItems){
          this.queryParams.pageNum=1;
          this.queryData(null,null);
        }else{
          this.total = this.defaultTotal;
          this.optionItems = [...this.defaultItems];
        }
        // this.$refs.popoverRef.doShow();
    },
    handleInput(val) {
      if(val == null ) return;
      this.isInputing = true;
      this.svalue = val;
      this.queryParams.pageNum = 1
      this.queryData(val,null)

    },
    onRowClick(row, column, event) {
        this.svalue=row.name;

        this.isInputing = false;

        this.sId=row.id;

        this.$emit("input", this.svalue);
        this.$emit("onChange",row);
        this.$refs.popoverRef.doClose();
     },
    isRed({ row }) {
     if (row.id == this.sId) {
        return {
          "color": "red",
          "font-weight": "bold",
        };
      }
    },
    changePage(cur) {
      this.queryParams.pageNum = cur
      this.queryData(this.queryParams.searchValue)
    },
    onClear(el){
      this.svalue = null;

      this.$emit("input", this.svalue);
      this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
    },
    onBlur(el) {
      this.$emit("input", this.svalue);
      this.dispatch('ElFormItem', 'el.form.blur', [this.svalue]);
    },
    queryData(val,key) {
       this.loading = true;
      this.loading = true;
      this.queryParams.searchValue = val;

      listSimpleEmisCustomerAddress(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]
          }

       });
     },

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