company

<template>
        <el-form-item :label="deptCodeTitle" prop="deptCode" style="position: relative;" class="deptCodeInput company-star">
           <span class="requrie-star">*</span>
            <el-input v-model="searchForm.deptCodeStr" placeholder="请选择公司" :disabled="true" @click.native="handleDeptCodeTable('1')" v-show='showInput? showInput : true'>
               <i slot="suffix" class="el-input__icon el-icon-refresh" style="cursor: pointer;" @click="handleDeptCode"></i>
            </el-input>
            <div  id="deptCodeBoxTableCompnay"  class="deptCodeBox" v-show="deptCodeTable">
              <el-input v-model="deptCodeItem" prefix-icon="el-icon-search"
              @input="delayGet($event)" @keyup.enter.native="choseItemFirst" placeholder="请输入公司代码或名称" type="text" clearable>
              </el-input>
              <el-table
                  :data="deptCodeData"
                   ref="singleTable"
                  style="width: 435px"
                  height="280" @row-click="choseItem">
                  <el-table-column
                    fixed
                    prop="bukrs"
                    label="公司代码"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="butxt"
                    label="公司名称"
                    width="335">
                     </el-table-column>
                </el-table>
            <div class="deptPagination" v-show="deptCodeTable">
              <el-pagination background @size-change="pageSizeDeptChange" @current-change="deptCurrentChange"
                  :current-page="deptCodePage.currentPage" :page-sizes="deptCodePage.pageSizeOpts"
                  :page-size="deptCodePage.pageSize" layout="total, sizes, prev,slot,next, jumper"
                  :total="deptCodePage.totalSize">
                  <span class="current-number">{{deptCodePage.currentPage}}</span>
                </el-pagination>
            </div>
         </div>
       </el-form-item>
  </div>
</template>

<script>
  export default {
    name: "deptCode",
    props: [
      'deptCodeTitle',
      'multiple',
      'showInput'
    ],
    data() {
      return {
        notifyTxt:'请选择公司名称',
        searchForm: {
          deptCode:[],
          deptCodeStr:'',
        },
        searchRules: {
          compnayCode: [{required: true, message: '请选择公司名称', trigger: 'blur'}]
        },
        deptCodeList:[],
        deptCodeData:[],
        screenHeight:'400',
        tableHeight:window.innerHeight-280,// tableHeight:window.innerHeight-280,
        rowHeight:'32',
        tableData:[],
        deptCodeOptions:[],
        deptCodeItem:"",
        deptCodeTable:false,
        deptCodePage:{
          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,
      }
    },
    created(){
      this.tableData=[];
      this.viewportHeight=window.innerHeight;
    },
    beforeMount(){

    },
    watch: {
        selectArr:'selectArrChange',
        headArr:'headArrChange'
    },
    mounted() {
      var myDiv = document.getElementById("deptCodeBoxTableCompnay");
      if(myDiv){
        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.deptCodePage={
            totalSize:0,
            pageSize: 20,
            currentPage: 1
        };
          this.resizeTimer = setTimeout(this.queryCompanyData(), 600);
      },
      deptCodeChange(item){
        //当前的值赋值给查询条件
        this.editForm.deptCode=item;
        this.searchForm.deptCode=item;
      },
      deptCurrentChange(val){
        this.deptCodePage.currentPage = val;
        this.queryCompanyData()
      },
      queryCompanyData(){
        let queryCompanyListUrl = "/air-atms-core-contract/listCompCode";
        let param = {
          bukrs: this.deptCodeItem,
          currentPage:this.deptCodePage.currentPage,
          pageSize: this.deptCodePage.pageSize
        }
        this.$httpExt().post(queryCompanyListUrl, param).then((response) => {
              this.loading=false;
              var res = response.result;
              this.deptCodeData = res.records;
              this.deptCodePage.totalSize = res.total;
        }).catch(function(err) {
            console.log(err)
        })
      },
      //展示页数切换
      pageSizeDeptChange(val) {
        this.deptCodePage.pageSize = val;
        this.queryCompanyData()
      },
      handleDeptCodeTable(params){
        if(params=="0"){
          this.deptCodeTable=false;
          this.deptCodeItem="";
        }else{
          this.deptCodeItem="";
          this.deptCodePage={
            totalSize:0,
            pageSize: 20,
            currentPage: 1,
          }
          this.queryCompanyData();
          this.deptCodeTable=!this.deptCodeTable;
          event.stopPropagation();
        }
      },
      closeDeptCodeTable(){
        this.deptCodeTable=false;
        this.deptCodeItem="";
        this.deptCodePage={
          totalSize:0,
          pageSize: 20,
          currentPage: 1,
        }
        event.stopPropagation();
      },
      handleDeptCode(){
        this.deptCodeOptions=[];
        this.searchForm.deptCode="";
        this.searchForm.deptCodeStr="";
        this.deptCodeItem="";
        this.$emit("clearCompanyCode",this.searchForm);
        this.queryCompanyData();
        event.stopPropagation();
      },
      choseItemFirst(){
         if(this.deptCodeData.length>0){
           let item={"deptCode":this.deptCodeData[0].bukrs,"deptName":this.deptCodeData[0].butxt};
           this.deptCodeOptions.push(item);
           this.filterArray();
           this.deptCodeItem='';
           this.deptCodeTable=false;
           this.queryCompanyData();
         }
      },
      choseItem(row, event, column){
        if(this.multiple){
         let item={"deptCode":row.bukrs,"deptName":row.butxt};
         this.deptCodeOptions.push(item);
        }else{
          let item={"deptCode":row.bukrs,"deptName":row.butxt};
          this.deptCodeOptions=[];
          this.deptCodeOptions.push(item);
          this.deptCodeTable=false;
        }
        this.filterArray();
      },
      filterArray(){
        var result = [];
        var arr=this.deptCodeOptions;
        var obj = {};
        for(var i =0; i<arr.length; i++){
            if(!obj[arr[i].deptCode]){
                 result.push(arr[i]);
                 obj[arr[i].deptCode] = true;
            }
        }
        let deptCodeStr="";
        this.searchForm.deptCode=[];
        for (var i=0;i<result.length;i++) {
          if(i==result.length-1){
             deptCodeStr=deptCodeStr+result[i].deptCode+"\/"+result[i].deptName;
          }else{
             deptCodeStr=deptCodeStr+result[i].deptCode+"\/"+result[i].deptName+",";
          }
          this.searchForm.deptCode.push(result[i].deptCode);
        }
        this.searchForm.deptCodeStr=deptCodeStr;
        this.$emit("setCompanyCode",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:48px;left:0;z-index:10;background: #fff;cursor:pointer}
  .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>