开源节流

<template>
            <div  id="deptCodeBoxTableContract"  class="deptCodeBox" :class="{right:positionType == 'right'}" v-show="companyCodeTable">
              <el-input v-model="companyCodeItem" prefix-icon="el-icon-search"
              @input="delayGet($event)" @keyup.enter.native="choseItemFirst" :placeholder="$t('modules.placeholders.input')" type="text" clearable>
              </el-input>
              <el-table
                  :data="companyCodeData"
                   ref="singleTable"
                  style="width:450px"
                  height="280" @row-click="choseItem">
                  <el-table-column
                    fixed
                    prop="id"
                    :label="$t('modules.balanceAdvance.contractId')"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="contractName"
                    :label="$t('modules.balanceAdvance.contractName')"
                    width="200" :show-overflow-tooltip="true">
                     </el-table-column>
                     <el-table-column
                       prop="supplierName"
                       :label="$t('modules.shProxyDelayFee.supplierName')"
                       width="150" :show-overflow-tooltip="true">
                        </el-table-column>
                </el-table>
            <div class="deptPagination" v-show="companyCodeTable">
              <el-pagination background @size-change="pageSizeDeptChange" @current-change="deptCurrentChange"
                  :current-page="companyCodePage.currentPage" :page-sizes="companyCodePage.pageSizeOpts"
                  :page-size="companyCodePage.pageSize" layout="total, sizes, prev,slot,next, jumper"
                  :total="companyCodePage.totalSize">
                  <span class="current-number">{{companyCodePage.currentPage}}</span>
                </el-pagination>
            </div>
         </div>
  </div>
</template>

<script>
  export default {
    name: "contractNation",
    props: [
      'companyCodeTitle',
        'multiple',
      'positionType'
    ],
    data() {
      return {
        notifyTxt:'请选择合同名称',
        searchForm: {
          companyCode:[],
          companyCodeStr:'',
          renewProgress:'',
          certificateClass:'',
          deadLineBronze:'',
          companyItems:[]
        },
        searchRules: {
          companyCode: [{required: true, message: '请选择合同名称', trigger: 'blur'}]
        },
        deptCodeList:[],
        companyCodeData:[],
        screenHeight:'400',
        tableHeight:window.innerHeight-280,// tableHeight:window.innerHeight-280,
        rowHeight:'32',
        tableData:[],
        companyCodeOptions:[],
        companyCodeItem:"",
        companyCodeTable:false,
        companyCodePage:{
          totalSize:0,
          pageSize: 20,
          currentPage: 1,
        },
        loading:false,
        systemType:"ATMS",
        avtorNotify:"提示:只能上传zip,rar,7z,jpg,png,pdf,docx,doc,ppt,pptx格式文件,文件和不应超过10M",
        excelNotify:"提示:只能上传xls,xlsx格式的文件",
        viewportHeight:'',
        showError:false,
        contractParams:{
          contractType: ""
        },
      }
    },
    created(){
      this.tableData=[];
      this.viewportHeight=window.innerHeight;
      this.companyCodePage={
        totalSize:0,
        pageSize: 20,
        currentPage: 1,
      }
    },
    beforeMount(){

    },
    watch: {
        getContractParams: function (newData,oldData) {
        debugger;
        if(newData!=null && newData!=""){
            this.contractParams=newData;
        }
        this.queryCompanyData();
        }
    },
    computed: {
        getContractParams() {
          return this.$store.state.global.contractParams;
        }
    },
    mounted() {
      var myDiv = document.getElementById("deptCodeBoxTableContract");
      myDiv.addEventListener("click",function(event){
          event=event||window.event;
          event.stopPropagation();
       });
       this.queryCompanyData();
    },
    methods: {
      delayGet() {
          if (this.resizeTimer) {
              clearTimeout(this.resizeTimer);
              this.resizeTimer = null;
          }
        this.companyCodePage={
            totalSize:0,
            pageSize: 20,
            currentPage: 1
        };
          this.resizeTimer = setTimeout(this.queryCompanyData(), 600);
      },
      deptCurrentChange(val){
        this.companyCodePage.currentPage = val;
        this.queryCompanyData()
        event.stopPropagation();
      },
      queryCompanyData(){
        debugger;
        if(this.contractParams.contractType!=""){
           let queryCompanyListUrl = "/air-atms-core-bill/airCommon/listContract";
           this.contractParams.pageStart=this.companyCodePage.currentPage;
           this.contractParams.pageSize=this.companyCodePage.pageSize;
           this.contractParams.searchKey=this.companyCodeItem;
           this.$httpExt().post(queryCompanyListUrl, this.contractParams).then((response) => {
                 this.loading=false;
                 var res = response.result;
                 this.companyCodeData = res.records;
                 this.companyCodePage.totalSize = res.total;
           }).catch((error)=> {

           })
        }
      },
      //展示页数切换
      pageSizeDeptChange(val) {
        this.companyCodePage.pageSize = val;
        this.queryCompanyData();
        event.stopPropagation();
      },
      handlecompanyCodeTable(params){
        debugger;
        if(params=="0"){
          this.companyCodeTable=false;
          this.companyCodeItem="";
        }else{
          this.companyCodeItem="";
          this.companyCodePage={
            totalSize:0,
            pageSize: 20,
            currentPage: 1,
          }
          this.queryCompanyData();
          this.companyCodeTable=!this.companyCodeTable;
          event.stopPropagation();
        }
      },
      closeCompanyCodeTable(){
        this.companyCodeTable=false;
        this.companyCodeItem="";
        this.companyCodePage={
          totalSize:0,
          pageSize: 20,
          currentPage: 1,
        };
        this.contractParams={
          contractType:""
        }
        event.stopPropagation();
      },
      handleDeptCode(){
        this.companyCodeOptions=[];
        this.searchForm.companyCode="";
        this.searchForm.companyCodeStr="";
        this.companyCodeItem="";
        this.searchForm.companyItems=[];
        this.$emit("clearContractCode",this.searchForm);
        this.queryCompanyData();
        //this.$store.commit('setContractParams',{});
        event.stopPropagation();
      },
      choseItemFirst(){
         if(this.companyCodeData.length>0){
           let item={"contractId":this.companyCodeData[0].id,"contractName":this.companyCodeData[0].contractName};
           this.companyCodeOptions.push(item);
           this.searchForm.companyItems.push(this.companyCodeData[0]);
           this.filterArray();
           this.companyCodeItem='';
           this.companyCodeTable=false;
           this.queryCompanyData();
         }
      },
      choseItem(row, event, column){
        if(this.multiple){
          let item={"contractId":row.id,"contractName":row.contractName};
          this.companyCodeOptions.push(item);
          this.searchForm.companyItems.push(row);
        }else{
          let item={"contractId":row.id,"contractName":row.contractName};
          this.companyCodeOptions=[];
          this.companyCodeOptions.push(item);
          this.searchForm.companyItems.push(row);
          this.companyCodeTable=false;
        }
        this.filterArray();
      },
      filterArray(){
        var result = [];
        var arr=this.companyCodeOptions;
        var obj = {};
        for(var i =0; i<arr.length; i++){
            if(!obj[arr[i].contractId]){
                result.push(arr[i]);
                obj[arr[i].contractId] = true;
            }
        }
        let companyCodeStr="";
        this.searchForm.companyCode=[];
        for (var i=0;i<result.length;i++) {
          if(i==result.length-1){
             companyCodeStr=companyCodeStr+result[i].contractId+"\/"+result[i].contractName;
          }else{
             companyCodeStr=companyCodeStr+result[i].contractId+"\/"+result[i].contractName+",";
          }
          this.searchForm.companyCode.push(result[i].contractId);
        }
        this.searchForm.companyCodeStr=companyCodeStr;
        this.$emit("setContractCode",this.searchForm);
      },
    }
  }
</script>
<style  type="text/css" scoped>
  >>>.el-pagination{text-align: left;}
  >>>.el-pagination--small span:not([class*=suffix]) {
      text-align: center;
  }
  >>>.curent-num{color:#409EFF}
  >>>.el-pagination__sizes {
      margin: 0 10px 0 10px;
  }
  >>>.el-alert__closebtn {
      top: 2px;
      right: 5px;
      color:red;
      font-weight: bold;
  }
  >>>.el-dialog__body {
    padding: 12px 20px;
  }

 >>>.el-select-dropdown__list{min-width:450px;}

 >>>.el-scrollbar{
    padding-top:30px!important;
    width:480px;
  }

  >>>.el-table__body tr td{
     cursor: pointer;
  }

  >>>.el-table__body tr.current-row>td{
    background:#409EFF!important;
    color: #fff;
  }

  .current-row td a{
    color: #fff;
  }


  >>>.companyInput .el-form-item__content input{
    width:200px;
  }

  .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }

  .expirspan{border-bottom:1px dashed red}
  .requrie-star{
      color:#F56C6C;position:absolute;top:7px;left:22px
    }


   .company-star .requrie-star{
      top: 4px;
      left: -76px;
    }

   >>>.el-pagination button, .el-pagination span:not([class*=suffix]){min-width:10px}

   >>>.deptCodeInput .el-input.is-disabled .el-input__inner{background: #fff;color:#606266}
   >>>.deptCodeInput .el-input.is-disabled .el-input__inner:hover{cursor: pointer;}


  .deptCodeBox{width:435px;height:350px;border:1px solid #ddd;
  position: absolute;top:30px;z-index:10;background: #fff;cursor:pointer}
  .right{right:0}
  .deptPagination{width:435px;height:28px;border:1px solid #ddd;
  border-bottom:0;position: absolute;top:310px;left:0;z-index:10;background: #fff;padding-bottom:2px}
</style>