<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=" 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-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:48px;left:0;z-index:10;background: #fff;cursor:pointer}
.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>