<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>