Ameps20.vue 13.6 KB
<template>
  <div class="eibs-tab">
    <!-- ======================= 左边 ========================= -->
    <c-col :span="12" style="padding-right: 20px">
      <c-col :span="24">
        <el-form-item  :label="$t('hitame.保函编号')" prop="nidgrp.rec.ownref">
          <c-input disabled v-model="model.nidgrp.rec.ownref" maxlength="16" placeholder="请输入保函编号"></c-input>
        </el-form-item>
      </c-col>

      <c-col :span="24">
        <el-form-item :label="$t('hitame.修改日期')" prop="swiadd.amedat">
          <c-date-picker type="date" v-model="model.swiadd.amedat" style="width: 100%" placeholder="请选择修改日期"  @change="amedatChange">
          </c-date-picker>
        </el-form-item>
      </c-col>

			
      <c-col :span="24">
        <c-col :span="12">
          <el-form-item  :label="$t('hitame.原保函金额')" prop="oldnidgrp.cbs.max.cur">
            <c-input disabled v-model="model.oldnidgrp.cbs.max.cur" maxlength="3" placeholder="请输入原保函金额"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item  label-width="5px" prop="oldnidgrp.cbs.max.amt">
             <c-input-currency disabled v-model="model.oldnidgrp.cbs.max.amt" :currency="model.oldnidgrp.cbs.max.cur" placeholder="请输入"></c-input-currency>
          </el-form-item>
        </c-col>
      </c-col>

			<c-col :span="24">
        <c-col :span="12">
          <el-form-item  :label="$t('hitame.修改金额')" prop="swiadd.amecur">
            <c-input disabled v-model="model.swiadd.amecur" maxlength="3" @change="calcName" placeholder="请输入修改金额"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item  label-width="5px" prop="swiadd.ameamt">
           <c-input-currency :disabled="model.nidgrp.ghdflg == ''" v-model="model.swiadd.ameamt" :currency="model.swiadd.amecur" @change="calcNewamt" placeholder="请输入"></c-input-currency >
          </el-form-item>
        </c-col>
      </c-col>

			<c-col :span="24">
        <c-col :span="12">
          <el-form-item  :label="$t('hitame.保函币种和金额')" prop="swiadd.newcur">
            <c-input disabled v-model="model.swiadd.newcur" maxlength="3" @change="calcName" placeholder="请选择保函金额"></c-input>
          </el-form-item>
        </c-col>
        <c-col :span="12">
          <el-form-item  label-width="5px" prop="swiadd.newamt">
            <c-input-currency :disabled="model.nidgrp.ghdflg == ''" v-model="model.swiadd.newamt" :currency="model.swiadd.newcur" @change="calcAmeamt" placeholder="请输入"></c-input-currency>
          </el-form-item>
        </c-col>
      </c-col>

			<c-col :span="24">
        <el-form-item  :label="$t('hitame.面函标题')" prop="nitamep.mstitle">
          <c-input maxlength="60" :disabled="model.nidgrp.ghdflg==''" type="textarea" v-model="model.nitamep.mstitle" show-word-limit placeholder="请输入面函标题"  @change="setMstitleModified">
          </c-input>
        </el-form-item>
      </c-col>

			<c-col :span="24">
				<el-form-item :label="$t('hitpam.简式修改内容')">
					<c-checkbox
						:disabled="model.nidgrp.ghdflg=='' || model.nidgrp.ghdflg=='2'"
						v-model="model.nitamep.plateflg"
						true-label="X"
						false-label=""
						@change="changenPlateflg"
						class="checkbox-left"
					>简式修改</c-checkbox>
					<c-checkbox
						:disabled="model.nidgrp.ghdflg==''"
						v-model="model.nitamep.prtflg"
						true-label="X" false-label=""
						@change="chooseFulltext"
						class="checkbox-left"
					>全文修改</c-checkbox>
				</el-form-item>
			</c-col>
			<!-- <c-col :span="24" style="display: flex;align-item: center;justify-content: space-between;">
        <div style="width: calc(100% - 92px);">
          <el-form-item  label="简式修改内容" prop="swiadd.ameblk">
            <c-mul-row-input   @change="ameblkChange" :rows="850" :cols="65" :autosize="{minRows: 10, maxRows: 1000}" :disabled="model.nidgrp.ghdflg==''|| model.nitamep.plateflg==''" v-model="model.swiadd.ameblk" maxlength="21845" show-word-limit placeholder="请输入修改内容文本"></c-mul-row-input>
          </el-form-item>
        </div>
				<div style="width:72px">
          <c-checkbox  :disabled="model.nidgrp.ghdflg=='' || model.nidgrp.ghdflg=='2'" v-model="model.nitamep.plateflg" true-label="X" false-label="" @change="changenPlateflg" class="checkbox-left">简式修改</c-checkbox>
					<c-checkbox  :disabled="model.nidgrp.ghdflg==''" v-model="model.nitamep.prtflg" true-label="X" false-label="" @change="chooseFulltext" class="checkbox-left">
            全文修改</c-checkbox>
				</div>
      </c-col> -->
      
    </c-col>
 
    <!-- ======================右边====================== -->
    <c-col :span="12" style="padding-left: 20px">
			<c-col :span="24">
        <el-form-item :label="$t('hitame.修改次数')" prop="nitamep.amenbr">
          <c-input-number  :max="999" placeholder="请输入修改次数" v-model="model.nitamep.amenbr"  @change="amenbrChange"></c-input-number>
        </el-form-item>
      </c-col>

			<c-col :span="24">
        <el-form-item  :label="$t('hitame.实际修改次数')" prop="nidgrp.rec.amenbr">
          <c-input-number disabled v-model="model.nidgrp.rec.amenbr" placeholder="请输入实际修改次数"></c-input-number>
        </el-form-item>
      </c-col>

			<c-col :span="24">
        <c-col :span="16">
				  <el-form-item label="原有效期" prop="oldnidgrp.rec.expdat">
					  <c-date-picker disabled placeholder="请选择原有效期" style="width: 100%" type="date" v-model="model.oldnidgrp.rec.expdat"></c-date-picker>
				  </el-form-item>
        </c-col>
        <c-col :span="8">
					<el-form-item class="checkbox-left" label-width="10px">
						<c-checkbox disabled  class="checkbox-left" false-label="" true-label="X" v-model="model.oldnidgrp.rec.expflg">
								效期敞口
						</c-checkbox>
					</el-form-item>
				</c-col>
			</c-col>
			
			<c-col :span="24">
                <c-col :span="16">
                    <el-form-item label="新有效期" prop="swiadd.newexpdat">
                        <c-date-picker :disabled="model.swiadd.newexpflg=='X'||model.nidgrp.ghdflg==''" @change="defaultNidgrpRecExpdatN10000"
                                       placeholder="请输入新有效期" type="date" v-model="model.swiadd.newexpdat">
                        </c-date-picker>
                    </el-form-item>
                </c-col>

		  	<c-col :span="8" class="centerLable">
					<el-form-item class="checkbox-left" label-width="10px">
          	<c-checkbox true-label="X" false-label="" disabled v-model="model.swiadd.newexpflg"  @change="setExpnewtxtUnlimited" class="checkbox-left">效期敞口</c-checkbox>
					</el-form-item>
				</c-col>
      		</c-col>

			<c-col :span="24" v-if="model.nidgrp.rec.hndtyp == 'OT'">
					<c-col :span="16">
						<el-form-item :label="$t('hitopn.原反担保有效期')" prop="oldnidgrp.rec.liadat" >
							<c-date-picker disabled type="date" v-model="model.oldnidgrp.rec.liadat"></c-date-picker>
						</el-form-item>
					</c-col>
					<c-col :span="8" class="checkbox-left" label-width="10px">
						<el-form-item label="" prop="oldnidgrp.rec.liaflg" class="checkbox-left" label-width="10px">
							<c-checkbox disabled v-model="model.oldnidgrp.rec.liaflg" true-label='X' false-label='' >原反担保效期敞口</c-checkbox>
						</el-form-item>
					</c-col>
			</c-col>
			<c-col :span="24" v-if="model.nidgrp.rec.hndtyp == 'OT'">
					<c-col :span="16">
						<el-form-item :label="$t('hitopn.新反担保有效期')" prop="swiadd.newliadat" >
							<c-date-picker type="date" v-model="model.swiadd.newliadat" placeholder="请选择反担保有效期" :disabled=" model.nidgrp.rec.liaflg == 'X'"></c-date-picker>
						</el-form-item>
					</c-col>
					<c-col :span="8" class="checkbox-left" label-width="10px">
						<el-form-item label="" prop="swiadd.newliaflg" class="checkbox-left" label-width="10px">
							<c-checkbox v-model="model.swiadd.newliaflg" true-label='X' false-label='' disabled @change="clearLiadatData">新反担保效期敞口</c-checkbox>
						</el-form-item>
					</c-col>
			</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 :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;" :disabled="model.nidgrp.ghdflg == ''" @click="showHGDialog()">
							</c-button>
						</template>
					</c-fullbox>
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<div style="width: calc(100% - 120px);margin-left: 120px;display: flex;align-item: center;justify-content: space-between;">
					<div style="width: 84px;">
						<el-form-item label-width="0" prop="nidgrp.rec.cxmflg">
							<c-checkbox v-model="model.nidgrp.rec.cxmflg" true-label="Y" false-label="N" >生成查询码</c-checkbox>
						</el-form-item>
					</div>
				</div>
			</c-col>
    </c-col>
    <!-- 弹窗 -->
		<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="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 commonDepend from '~/mixin/commonDepend.js';
export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event,Default,commonDepend],
  data() {
    return {
      mstitleModified: false,
      keyword: '',
			visible: false,
			transferData: [],
			//checkedList: [],
    };
  },
  computed: {
	  ptyhgqName: {
			get() {
				let nameStr = ''
				let nameArr = []
				//页面初始化,从数据库里带出数据 
				let oldptyhgq =[];
				oldptyhgq = this.model.nidgrp.rec.ptyhgq.split("@");
				if(this.model.checkedList.length==0&&oldptyhgq.length!=0){
					if (this.codes.markList && this.codes.markList.length > 0) {
						this.codes.markList.map((item) => {
							if (oldptyhgq.includes(item.extkey)) {
								nameArr.push(item.nam)
							}
						})
					nameStr = nameArr.join('、')
					}
				}
				//从弹出框里重新选择
				if (this.codes.markList && this.codes.markList.length > 0) {
					this.codes.markList.map((item) => {
						if (this.model.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)
			}
		}
  },
  
  methods: {
		showHGDialog() {
			this.visible = true;
			this.formatNameToChecked(this.model.nidgrp.rec.ptyhgq);
			this.getHaiGuanData();
			// 通过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
			// 	}
			// })
		},
		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.model.checkedList.includes(item.extkey)) {
          			rightData.push({
            			extkey: item.extkey,
            			nam: item.nam,
            			inr: item.inr
					});
        		}
      		});
      		let str = this.model.checkedList.length ? this.model.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.model.nidgrp.bencnt = this.model.checkedList.length ? this.model.checkedList.length + 1 : 1;
			this.customAddModify(this.model.nidgrp.rec, 'ptyhgq')
    	}
  },
	mounted() {
	},
	watch: {
		'model.ptyList'(newValue) {
			if(newValue && newValue.length > 0) {
				newValue.forEach(item => {
					this.model.checkedList.push(item.extkey);
				});
			}
		}
	},
  created: function() {}
};
</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>