<template>
<div class="eibs-tab">
<c-row>
<c-col :span="24">
<c-col :span="12" style="padding-right: 20px">
<!--========================== 不为swift格式左边 =========================================-->
<c-col :span="24">
<c-ptap :model="model" :isAdrblk="false" :haveAdrLabel="true"
:disabledExtkey="true"
:disabledRef="true"
:disabled="true" :argadr="{title: $t('ptap.申请人'), grp: 'nidgrp', rol: 'apl'}"
ptytyp="C">
</c-ptap>
</c-col>
<c-col :span="24">
<c-ptap :model="model" :isAdrblk="false" :haveAdrLabel="true" :noRef="false" :disabledExtkey="true"
:disabledRef="true"
:disabled="true"
:argadr="{title: $t('ptap.被担保人'), grp: 'nidgrp', rol: 'bdb'}"
:ptytyp="model.nidgrp.rec.hndtyp == 'OT'?'B':'C'" >
</c-ptap>
</c-col>
<c-col :span="24" v-if="model.nidgrp.rec.hndtyp == 'OT'">
<c-ptap :model="model" :isAdrblk="true" :haveAdrLabel="true" :disabledExtkey="true"
:disabledRef="true"
:disabled="true"
:argadr="{title: $t('ptap.反担保行'), grp: 'nidgrp', rol: 'iss'}"
ptytyp="B">
</c-ptap>
</c-col>
<!-- <c-col :span="24" v-if="model.nidgrp.rec.hndtyp != 'OT'">
<c-ptap :model="model" :isAdrblk="true" :haveAdrLabel="true" :disabledExtkey="true"
:disabledRef="true"
:disabled="true" :argadr="{title: $t('ptap.反担保行'), grp: 'nidgrp', rol: 'ctr'}"
ptytyp="B">
</c-ptap>
</c-col>-->
</c-col>
<c-col :span="12" style="padding-left: 20px">
<!-- ==========================不为swift格式右边=================================== -->
<c-col :span="24">
<c-ptap :model="model" :isAdrblk="false" :haveAdrLabel="true"
:disabledExtkey="true"
:disabledRef="true"
:disabled="true" :argadr="{title: $t('ptap.备案海关'), grp: 'nidgrp', rol: 'ben'}" ptytyp="H" >
</c-ptap>
</c-col>
<c-col :span="24">
<el-form-item :label="$t('hitpop.其他海关已选')" prop="nidgrp.rec.ptyhgq">
<c-fullbox>
<c-input type="textarea" autosize :rows="4" v-model.trim="model.nidgrp.rec.ptyhgq"
@keyup.enter.native="showHGDialog()"
placeholder=""
disabled></c-input>
<template slot="footer">
<c-button type="primary" disabled size="small" icon="el-icon-search" style="margin:0 10px 0 10px;padding: 0 12px;" >
</c-button>
</template>
</c-fullbox>
</el-form-item>
</c-col>
<c-col :span="24" v-if="model.nidgrp.rec.hndtyp == 'OL'">
<c-ptap :model="model" :isAdrblk="true" :disabledExtkey="true"
:disabledRef="true"
:disabled="true" :haveAdrLabel="true" :argadr="{
title: $t('ptap.通知行'), grp: 'nidgrp', rol: 'adv'}" ptytyp="B">
</c-ptap>
</c-col>
</c-col>
</c-col>
</c-row>
<!-- 弹窗 -->
<el-dialog v-dialogDrag v-if="visible" :visible="visible" title="其他海关" width="50%" :before-close="handleClose">
<div style="text-align: center">
<el-transfer style="text-align: left; display: inline-block;" :data="codes.transferData" v-model="checkedList" filterable
:titles="['未添加', '已添加']" :button-texts="['移除', '添加']" :props="{
key: 'inr',
label: 'nam'
}" :format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}">
<span slot-scope="{ option }">{{ option.extkey }} - {{ option.nam }}</span>
</el-transfer>
</div>
<span slot="footer" class="dialog-footer">
<c-button @click="cancel">取消</c-button>
<c-button type="primary" @click="save()">保存</c-button>
</span>
</el-dialog>
</div>
</template>
<script>
import event from "../../event";
import Default from "../../model/default";
import Api from "~/service/Api";
import commonFunctions from "~/mixin/commonFunctions.js";
export default {
inject: ["root"],
props: ["model", "codes"],
mixins: [event, Default, commonFunctions],
data() {
return {
keyword: "",
visible: false,
transferData: [],
checkedList: []
};
},
methods: {
showHGDialog() {
this.visible = true;
this.formatNameToChecked(this.model.nidgrp.rec.ptyhgq)
// // 通过nam值遍历出checkList
// let list = [];
// if(this.model.nidgrp.rec.ptyhgq){
// list = this.model.nidgrp.rec.ptyhgq.split('、');
// }
// this.codes.markList.forEach(item => {
// if(list.includes(item.nam)) {
// this.checkedList.push(item.inr);
// }else{
// return
// }
// })
this.getHaiGuanData();
},
// 获取受益人海关数据信息
async getHaiGuanData() {
const loading = this.loading();
let res = await Api.post('/business/hitopnRule/getHaiGuanData');
loading.close();
if (res.respCode === SUCCESS) {
let nameStr = '';
let arrHg = []
let hglist = this.model.nidgrp.rec.ptyhgq
res.data.forEach(item => {
if (hglist.indexOf(item.extkey) >= 0) {
arrHg.push(item.nam);
}
});
nameStr = arrHg.join('、')
this.model.nidgrp.rec.ptyhgq = nameStr
}
},
handleClose(done) {
this.visible = false;
done();
},
cancel() {
this.visible = false;
},
async save() {
const rightData = [];
this.codes.transferData.forEach(item => {
if (this.checkedList.includes(item.inr)) {
rightData.push({
extkey: item.extkey,
nam: item.nam,
inr: item.inr
});
}
});
let list = rightData.map(item => {
return item.nam;
});
let str = list.length ? list.join("、") + "、" : "";
this.model.nidgrp.rec.ptyhgq = str.slice(0, str.length - 1);
this.model.ptyList = rightData;
this.visible = false;
this.model.nidgrp.bencnt = list.length ? list.length + 1 : 1;
},
getHg(){
let nameStr = ''
let nameArr = []
if (this.codes.markList && this.codes.markList.length > 0) {
this.codes.markList.map((item) => {
if (this.checkedList.includes(item.extkey)) {
nameArr.push(item.nam)
}
})
nameStr = nameArr.join('、')
this.model.nidgrp.bencnt = nameArr.length ? nameArr.length + 1 : 1;
}
this.model.nidgrp.rec.ptyhgq = nameStr
}
},
mounted() {
this.getHaiGuanData();
},
computed: {
comper() {
let judgeFlag = "";
if (this.codes.sndflgJudgement == "X") {
judgeFlag = "X";
}
return judgeFlag;
},
ptyhgqName: {
get() {
let nameStr = ''
let nameArr = []
if (this.codes.markList && this.codes.markList.length > 0) {
this.codes.markList.map((item) => {
if (this.checkedList.includes(item.extkey)) {
nameArr.push(item.nam)
}
})
nameStr = nameArr.join('、')
this.model.nidgrp.bencnt = nameArr.length ? nameArr.length + 1 : 1;
}
return nameStr
},
set(val) {
this.$emit('input', val)
}
}
}
};
</script>
<style scoped lang="less">
.eibs-tab {
/deep/ .el-transfer-panel {
width: 216px;
height: 400px;
}
/deep/ .el-checkbox-group.el-transfer-panel__list {
height: 296px;
}
/deep/ .el-checkbox {
float: left;
text-align: left;
}
/deep/ .el-transfer-panel__header .el-checkbox {
float: left;
text-align: left;
position: absolute;
}
/deep/ .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
position: relative;
left: 100px;
float: right;
}
}
</style>