• 开源节流


    <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="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-450px;}
    
     >>>.el-scrollbar{
        padding-top:30px!important;
        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{
        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-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{435px;height:350px;border:1px solid #ddd;
      position: absolute;top:30px;z-index:10;background: #fff;cursor:pointer}
      .right{right:0}
      .deptPagination{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>
  • 相关阅读:
    springboot配置redis缓存
    【spark】local模式运行
    mybatis从入门到精通(二) 增删查改
    学习设计模式
    学习设计模式
    mybatis从入门到精通(一) 入门
    学习NIO 之 使用方法
    学习 NIO 之 零拷贝
    Java并发
    学习设计模式
  • 原文地址:https://www.cnblogs.com/xmyfsj/p/15090485.html
Copyright © 2020-2023  润新知