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