Ptyp.vue

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