<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" chooseLanguage="CN" :isAdrblk="false" :haveAdrLabel="true" :disabled="model.nidgrp.rec.hndtyp != 'OT'" :disabledRef="comper=='X'" :disabledExtkey="comper=='X'" @handleChange="changeApl" :requiredExtkey="true" :argadr="{title: $t('ptap.申请人'), grp: 'nidgrp', rol: 'apl'}" :ptytyp="model.nidgrp.rec.hndtyp=='OT'?'B,C,F':'C'" @clear="clearDeleteData(true)"> </c-ptap> </c-col> <c-col :span="24" v-if="model.nidgrp.rec.hndtyp != 'OT'"> <c-ptap :model="model" chooseLanguage="CN" :isAdrblk="false" :haveAdrLabel="true" :noRef="false" @handleChange="changeBdb" :isDisabled="model.nidgrp.rec.hndtyp == 'OT'" :disabledRef="!model.nidgrp.rec.fenlishi" :requiredExtkey="model.nidgrp.rec.hndtyp == 'OL'&& model.nidgrp.rec.fenlishi =='2'" :argadr="{title: $t('ptap.被担保人'), grp: 'nidgrp', rol: 'bdb'}" :ptytyp="model.nidgrp.rec.hndtyp == 'OT'?'B':'C'" @clear="clearDeleteData(true)"> </c-ptap> </c-col> <c-col :span="24" v-if="model.nidgrp.rec.hndtyp == 'OT'"> <c-ptap :model="model" chooseLanguage="CN" :isAdrblk="true" :haveAdrLabel="true" :disabled="true" :requiredExtkey="model.nidgrp.rec.hndtyp == 'OT'" :argadr="{title: $t('ptap.反担保行'), grp: 'nidgrp', rol: 'iss'}" ptytyp="B" @clear="clearDeleteData(true)"> </c-ptap> </c-col> <!-- <c-col :span="24" v-if="model.nidgrp.rec.hndtyp != 'OT'"> <c-ptap :model="model" chooseLanguage="CN" :isAdrblk="true" :haveAdrLabel="true" :disabled="true" :disabledExtkey="model.nidgrp.rec.hndtyp != 'OT'" :disabledRef="model.nidgrp.rec.hndtyp != 'OT'" :argadr="{title: $t('ptap.反担保行'), grp: 'nidgrp', rol: 'ctr'}" ptytyp="B" @clear="clearDeleteData(true)"> </c-ptap> </c-col> --> </c-col> <c-col :span="12" style="padding-left: 20px"> <!-- ==========================不为swift格式右边=================================== --> <c-col :span="24"> <c-ptap :model="model" chooseLanguage="CN" :requiredExtkey="true" :isAdrblk="false" :haveAdrLabel="true" :disabled="true" :disabledRef="comper=='X'" :disabledExtkey="comper=='X'" :argadr="{title: $t('ptap.备案海关'), grp: 'nidgrp', rol: 'ben'}" ptytyp="H" @handleChange="changeBencnt"> </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="ptyhgqName" placeholder="" @keyup.enter.native="showHGDialog()" disabled :style="{'border-bottom': isShowRed ? '2px solid red' : ''}" :customModifykey="'nidgrp.rec.ptyhgq'" ></c-input> <template slot="footer"> <c-button type="primary" size="small" icon="el-icon-search" style="margin:0 10px 0 10px;padding: 0 12px;" @click="showHGDialog()"> </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" chooseLanguage="CN" :isAdrblk="true" :disabled="comper=='X'" :disabledRef="comper=='X'" :disabledExtkey="comper=='X'" :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: 'extkey', 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"; import markSetShowRed from '~/components/business/componentMixins/markSetShowRed.js' import commonDepend from '~/mixin/commonDepend.js' export default { inject: ["root"], props: ["model", "codes"], mixins: [event, Default, commonFunctions, markSetShowRed, commonDepend], 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(); }, handleClose(done) { this.visible = false; done(); }, cancel() { this.visible = false; // 取消后,需要刷新文本区域的其它海关的值 this.formatNameToChecked(this.model.nidgrp.rec.ptyhgq); }, async save() { const rightData = []; this.codes.transferData.forEach(item => { if (this.checkedList.includes(item.extkey)) { rightData.push({ extkey: item.extkey, nam: item.nam, inr: item.inr }); } }); let str = this.checkedList.length ? this.checkedList.join("@") + "@" : ""; this.model.nidgrp.rec.ptyhgq = str; console.log(this.model.nidgrp.rec.ptyhgq,"this.model.nidgrp.rec.ptyhgq") this.model.ptyList = rightData; this.visible = false; this.customAddModify(this.model.nidgrp.rec, 'ptyhgq') }, }, mounted() { }, watch: { 'model.ptyList'(newValue) { if(newValue && newValue.length > 0) { newValue.forEach(item => { this.checkedList.push(item.extkey); }); } } }, computed: { comper() { let judgeFlag = ""; if (this.codes.sndflgJudgement == "X") { judgeFlag = "X"; } return judgeFlag; }, ptyhgqName: { get() { let nameStr = '' let nameArr = [] // 重新计算右侧 其它海关 let newCheckList = []; // 赋默认值 if (!this.visible&&this.model.nidgrp.rec.ptyhgq){ this.checkedList = this.model.nidgrp.rec.ptyhgq.split("@") ; } if(this.model.nidgrp.ben.pts.extkey&&this.model.nidgrp.ben.pts.extkey!==""){ // 如果右侧 其它海关中 中包括备案海关(先输入其它海关,然后再更改备案海关可能出现这种情况),则将其移出其它海关 if(this.checkedList.includes(this.model.nidgrp.ben.pts.extkey)){ // 查找备案海关的值,并将其移入临时数组中 this.checkedList.map((key) => { if (key!==this.model.nidgrp.ben.pts.extkey) { newCheckList.push(key) } }) // 将临时数组中的值,更新其它海关 this.checkedList =newCheckList; } } 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>