index.vue

<template>
	<div :class="[isLable ? '' : 'card-margin']">
		
			<c-col  v-if="!noExtkey" :span="24">
				<c-col>
					<el-form-item
						:label="isFieldLabelVisible ? (`${argadr.title}${!editExtLabel ? ' ID' : ''}`) : ''"
						:prop="`${argadr.grp}.${argadr.rol}.pts.extkey`"
						style="width: 100%"
						:rules="[
              {required: requiredExtkey, message: isEn ? 'Required Field' : '必输项', trigger:['blur','change'] },
              {validator: validateExtkey, trigger:['blur'] }
            ]"
            :labelWidth="isFieldLabelVisible ? (isLabel120 ? '120px' : '180px') : '0px'"
					>
						<c-fullbox>
							<c-input
								v-model.trim="model[argadr.grp][argadr.rol].pts.extkey"
								placeholder="" maxlength="16"
                :disabled="disabledExtkey"
								:customModifykey="`${argadr.grp}.${argadr.rol}.pts.extkey`"
								clearable
								@keyup.enter.native="showPtapDialog()"
								@blur="handleExtkeyBlur"
								@clear="clear"
								@input="extkeyInput"
								@change="extkeyChange"
							>
							</c-input>
							<template slot="footer">
								<c-button style="margin:0 10px 0 10px;padding: 0 12px;" size="small" type="primary" icon="el-icon-search" :disabled="disabledExtkey"
									@click="showPtapDialog()">
								</c-button>
								<el-button 
									style="margin:0 0" 
									size="small" 
									type="primary" 
									:disabled="disabledDetailTrn"
									@click="showDetail()"
								>
									Details
								</el-button>
							</template>
						</c-fullbox>
					</el-form-item>
				</c-col>

				<!-- <c-col v-if="!noRef" :span="!noRef ? 9 : 0">
					<c-form-item :prop="`${argadr.grp}.${argadr.rol}.pts.ref`" label-width="0" style="margin-left: 10px;">
						<c-input 
							:disabled="disabledRef" 
							v-model="model[argadr.grp][argadr.rol].pts.ref" 
							:placeholder="'请输入' + '参考号'"
							maxlength="16"
							show-word-limit
							@blur="handleRefBlur"
							@input="handleInput"
						></c-input>
					</c-form-item>
				</c-col> -->
			</c-col>

			<!-- 地址名称 -->
			<template v-if="!onlySearch">
				<c-col v-if="isAdrblk || !haveAdrLabel" :span="24">
					<el-form-item 
						:label="haveAdrLabel ? adrKeyLabelShow: ''"
						:prop="`${argadr.grp}.${argadr.rol}.pts.${adrKey}`" 
            :labelWidth="isFieldLabelVisible ? (isLabel120 ? '120px' : '180px') : '0px'"
					>
            <!-- :rules="!isCheckInCompontent ? [
              { required: requiredNam, message: '必输项' },
              { validator: validatorAdrKey, trigger: ['blur', 'change'] }
            ] : []" -->
            <c-mul-row-input
              type="textarea" 
              :rows="4"
              :cols="35"
              :autosize="{minRows: 4,	maxRows: 4}"
              :charmod="getCharmod"
              :showTip="false"
              v-model="model[argadr.grp][argadr.rol].pts[adrKey]"
              placeholder=""
              :disabled="noEditNameAndAddress && (disabled || isDisabled || (!!model[argadr.grp][argadr.rol].pts.inr))"
							:isCheckInCompontent="isCheckInCompontent"
							:isRequired="requiredNam"
							:isEn="isEn"
              @blur="hanldeAdrBlur"
							:customModifykey="`${argadr.grp}.${argadr.rol}.pts.${adrKey}`"
							@checkFalse="handleCheckFalse"
            >
            </c-mul-row-input>
					</el-form-item>
				</c-col>
				<!-- 显示名称/地址字段（4栏） -->
				<template v-else>
					<c-col :span="24">
						<el-form-item 
							:label="isFieldLabelVisible ? (isEnLabel ? 'Name' : '名称') : ''" 
              :prop="isEn?`${argadr.grp}.${argadr.rol}.pts.ennam`:`${argadr.grp}.${argadr.rol}.pts.cnnam`"
              :labelWidth="isFieldLabelVisible ? (isLabel120 ? '120px' : '180px') : '0px'"
						>
						<!-- :rules="!isCheckInCompontent ? [{required: requiredNam, message: isEn ? 'Required Field' : '必输项',trigger:['blur','change'] }] : []" -->
					  <!-- :disabled="disabled || (!!model[argadr.grp][argadr.rol].pts.extkey&&!noExtkey)" -->
							<c-mul-row-input
								type="textarea" 
								:rows="2"
								:cols="70"
								:autosize="{minRows: 1,	maxRows: 2}"
								:charmod="getCharmod"
								:showTip="false"
								v-model="tempName"
								placeholder=""
                :disabled="noEditNameAndAddress && (disabled || isDisabled || (!!model[argadr.grp][argadr.rol].pts.inr))"
								:customModifykey="`${argadr.grp}.${argadr.rol}.pts.${isEn ? 'ennam' :'cnnam'}`"
								:isCheckInCompontent="isCheckInCompontent"
								:isRequired="requiredNam"
								:isEn="isEn"
								@checkFalse="handleCheckFalse"
								@blur="handleFocus('nam')"
							>
							</c-mul-row-input>
						</el-form-item>
					</c-col>

					<c-col :span="24">
						<el-form-item
							v-if="isAdrVisible"
							:label="isFieldLabelVisible ? (isEnLabel ? 'Address' : '地址') : ''"
							:prop="isEn?`${argadr.grp}.${argadr.rol}.pts.enadr` : `${argadr.grp}.${argadr.rol}.pts.cnadr`"
              :labelWidth="isFieldLabelVisible ? (isLabel120 ? '120px' : '180px') : '0px'"
						>
						<!-- :rules="!isCheckInCompontent ? [{required: requiredAdrblk, message: isEn ? 'Required Field' : '必输项',trigger:['blur','change']}] : []" -->
            <!-- :disabled="disabled || (!!model[argadr.grp][argadr.rol].pts.extkey&&!noExtkey)" -->
							<c-mul-row-input
								type="textarea" 
								:rows="rows"
								:cols="cols"
								:autosize="autosize"
								:charmod="getCharmod"
								:showTip="false"
								v-model="tempAdr"
								placeholder=""
                :disabled="noEditNameAndAddress && (disabled || isDisabled || (!!model[argadr.grp][argadr.rol].pts.inr))"
								:customModifykey="`${argadr.grp}.${argadr.rol}.pts.${isEn ? 'enadr' :'cnadr'}`"
								:isRequired="requiredAdrblk"
								:isEn="isEn"
								@blur="handleFocus('adr')"
								@checkFalse="handleCheckFalse"
							></c-mul-row-input>
						</el-form-item>
					</c-col>
				</template>
			</template>

		<!-- 弹窗 -->
		<el-dialog
			v-dialogDrag
			width="64%"
			:visible.sync="dialogTableVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
			v-if="dialogTableVisible"
			:modal-append-to-body="true"
			:append-to-body="true"
		>
			<div slot="title" style="font-size: 16px;color: black;position: realtive;">
				{{ dialogTitle }}
				<!-- 关闭按钮 -->
				<div class="close-btn" @click="handleCloseDialogTable"><i class="el-icon-close"></i></div>
			</div>
			<div v-if="!tableLoading && tableList.length === 0">暂无数据</div>
			<div v-else style="width: 100%;height: 100%;">
				<el-table id='tableRef' height="calc(100% - 32px)" style="width: 100%;" v-loading="tableLoading" :data="tableList" @row-dblclick="dbClickRow" :before-close="beforeClose">
					<el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :render-header="renderheader" :label="item.label">
					</el-table-column>
				</el-table>
				<el-pagination
					class="eContainer-pagination"
					layout="prev, pager, next, jumper, ->, sizes, total"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					:current-page="currentPage"
					:total="total"
					@size-change="sizeChange"
					@current-change="currentChange"
				></el-pagination>
			</div>
		</el-dialog>
		<!-- 临时地址保函名称和地址的 -->
		<el-dialog
			v-dialogDrag
			width="64%"
			custom-class="temp-rol"
			:visible.sync="tempRolVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:show-close="false"
			v-if="tempRolVisible"
		>
			<div slot="title" style="font-size: 16px;color: black;position: realtive;">
				临时角色信息
				<!-- 关闭按钮 -->
				<!-- <div class="close-btn" @click="handletempRolClose"><i class="el-icon-close"></i></div> -->
			</div>
			<div>
				<el-form ref="tempForm" :model="tempFormData" :rules="tempRolRules" :validate-on-rule-change="false">
					<el-form-item 
					:label="isEnLabel ? 'Name' : '名称'"
					prop="name" 
					label-width="95px">
						<c-mul-row-input
							type="textarea" 
							:rows="2"
							:cols="70"
							v-model="tempFormData.name"
							placeholder="请输入"
							:isCheckInCompontent="false"
							:showTip="false"
						></c-mul-row-input>
					</el-form-item>
					<el-form-item 
						:label="isEn ? 'Address' : '地址'"
						prop="address" 
						label-width="95px"
					>
						<c-mul-row-input
							type="textarea" 
							:rows="2"
							:cols="70"
							v-model="tempFormData.address"
							placeholder="请输入"
							:isCheckInCompontent="false"
							:showTip="false"
						></c-mul-row-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="default" @click="handletempRolClose">取消</el-button>
				<el-button type="primary" @click="buildTemp" v-if="!model[argadr.grp][argadr.rol].pts.ptainr">创建临时地址</el-button>
				<el-button type="primary" @click="tempSure">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 点击详情按钮 -->
		<el-dialog
			v-dialogDrag
		  width="64%"
			title="详情查看"
			custom-class="temp-rol"
			:visible.sync="detailVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
      :append-to-body="true"
			v-if="detailVisible"
      @close="handleCloseDetails"
		>
			<el-form :model="detailFormData" label-width="95px">
				<c-col :span="24">
					<c-col :span="12" style="padding-right: 10px">
						<c-col :span="24">
							<el-form-item label="客户编号">
								<el-input v-model="detailFormData.ptaptyextkey" disabled></el-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="中文名称">
								<el-input  type="textarea" v-model="detailFormData.cnnam" disabled></el-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="中文地址">
								<el-input type="textarea" v-model="detailFormData.cnadr" disabled></el-input>
							</el-form-item>
						</c-col>
					</c-col>
					<c-col :span="12" style="padding-left: 10px">
						<c-col :span="24">
							<!-- :prop="`${argadr.grp}.${argadr.rol}.pts.ref`" -->
							<el-form-item label="参考号">
								<c-input 
									:disabled="disabledRef"
									v-model="detailFormData.ref"
									:customModifykey="`${argadr.grp}.${argadr.rol}.pts.ref`"
									placeholder="请输入参考号"
									maxlength="16"
									show-word-limit
									@blur="handleRefBlur"
									@input="handleInput"
								></c-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="英文名称">
								<el-input type="textarea" v-model="detailFormData.ennam" :disabled="disabledDetailInfoEn" @input="changeInputEnnam"></el-input>
							</el-form-item>
						</c-col>
						<c-col :span="24">
							<el-form-item label="英文地址">
								<el-input type="textarea" v-model="detailFormData.enadr" :disabled="disabledDetailInfoEn" @input="changeInputEnadr"></el-input>
							</el-form-item>				
						</c-col>
					</c-col>
				</c-col>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button v-if="!disabledRef && !isInDisplay" type="primary" @click="saveRef">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { columnMap } from "./ptapColumn.js";
import { getPtaTableDtat, getPtsptaByInr, getTempExtkey } from "~/service/business/common";
import commonFunctions from '~/mixin/commonFunctions.js';
import commonDepend from '~/mixin/commonDepend.js'
// 机构信息模块
export default {
  inject: ["root"],
  mixins: [commonFunctions,commonDepend],
  props: {
    // isDisabled: {
    //   type: Boolean,
    //   default: false
    // },
    model: {
      type: Object,
      default: () => {}
    },
    argadr: {
      type: Object,
      default: function() {
        return {
          title: "", //角色名称
          rol: "", //角色
          extflds: [], //model和grp中间模型字段支持0个或无数个
          grp: "" //所属模块
        };
      }
    },
    ptytyp: {
      // 决定弹框的表头--客户类型
      type: String
    },
    typflg: {
      // 生成临时客户的客户类型
			type: String,
			default: 'C'
    },
    bchinr: {
      type: String
    },
    disabled: {
      //地址名称是否灰显
      type: Boolean,
      default: false
		},
		isLable:{
      type: Boolean,
      default: true
		},
		noEditNameAndAddress:{
			//国内修改受益人地址名称亮显
			type:Boolean,
			default:true
		},
    disabledRef: {
      //ref是否灰显 (true:参考号处灰显)
      type: Boolean,
      default: false
    },
    // 详情弹框内的英文名称和和地址是否可以修改
    disabledDetailInfoEn: {
      type: Boolean,
      default: true
    },
    disabledExtkey: {
      //extkey是否灰显(true:申请人处灰显)
      type: Boolean,
      default: false
    },
    disabledDetailTrn: {
      //detail是否灰显(true:Detail处灰显)
      type: Boolean,
      default: false
    },
    isAdrblk: {
      //false：申请人参考号/申请人/申请人名称/申请人地址 true：申请人参考号/申请人/名称地址
      type: Boolean,
      default: true
    },
    // 表示地址名称字段的取值的key，默认取地址名称, 部分取值为nam
    adrKey: {
      type: String,
      default: "adrblk"
    },
    adrKeyLabel: {
      type: String,
      //default: '名称及地址'
    },
    onlySearch: {
      //是否只展示extkey(true：textarea不显示)
      type: Boolean,
      default: false
		},
		//ref框放入详情后面需要删除
    // noRef: {
    //   //true：参考号不显示,确定ref框放入详情后面需要删除
    //   type: Boolean,
    //   default: false
		// },
	  noExtkey: {
		  //true：extkey不显示
		  type: Boolean,
		  default: false
		},
		//不显示地址栏(4栏)
		isAdrVisible: {
			type: Boolean,
			default: true
		},
    editExtLabel: {
      //自定义ID label(false：申请人id)
      type: Boolean,
      default: true
    },
    haveAdrLabel: {
      //false:textarea无lable
      type: Boolean,
      default: true
		},
		rows: {
			type: Number,
      default: 4
		},
		cols: {
			type: Number,
      default: 70
		},
		autosize: {
			type: Object, 
			default: () => {
				return {
					minRows: 1,
					maxRows: 4
				}
			}
		},
		//融资的label长度为120px
		isLabel120:{
			type:Boolean,
			default:true
		},
		//选择语言的种类
		chooseLanguage:{
			type: String,
			default:""
		},
		// extkey必填星号*是否显示
		requiredExtkey: {
			type: Boolean,
      default: false
		},
		// 名称必填星号*是否显示
		requiredNam: {
			type: Boolean,
      default: false
		},
		// 地址必填星号*是否显示
		requiredAdrblk: {
			type: Boolean,
      default: false
		},
		//国际保函角色label不显示
		isFieldLabelVisible: {
			type: Boolean,
      default: true
		},
		isShowCard: {
			type: Boolean,
			default: true
		},
		isCheckInCompontent: {
			type: Boolean,
			default: true
    },
    charmod: {
      type: Number,
      default: -1
		},
		// 区分extkey的取值字段，默认取ptaobjkey，自动化签约那里需要取值ptaptyextkey
		getExtkeyCode: {
			type: String,
			default: 'ptaobjkey'
		}
	},
	computed: {
    tempAdr:{
      set(val){
        if(this.isEn){
          this.model[this.argadr.grp][this.argadr.rol].pts.enadr = val;
        }else{
          this.model[this.argadr.grp][this.argadr.rol].pts.cnadr = val;
        }
      },
      get(){
        if(this.isEn){
          return this.model[this.argadr.grp][this.argadr.rol].pts.enadr;
        }else{
          return this.model[this.argadr.grp][this.argadr.rol].pts.cnadr;
        }
      }
    },
    tempName:{
      set(val){
        if(this.isEn){
          this.model[this.argadr.grp][this.argadr.rol].pts.ennam = val;
        }else{
          this.model[this.argadr.grp][this.argadr.rol].pts.cnnam = val;
        }
      },
      get(){
        if(this.isEn){
          return this.model[this.argadr.grp][this.argadr.rol].pts.ennam;
        }else{
          return this.model[this.argadr.grp][this.argadr.rol].pts.cnnam;
        }
      }
    },
    //组件使用的语言
		useLanguage () {
			if(this.chooseLanguage !== ''){
				return this.chooseLanguage
			}else{
				if(this.model[this.argadr.grp] && this.model[this.argadr.grp].rec && this.model[this.argadr.grp].rec.giduil){
					return this.model[this.argadr.grp].rec.giduil 
				}
			}
			return 'EN'
		},
		isEn () {
			return (this.useLanguage === 'CN') ? false : true
		},
		getCharmod () {
			return this.charmod === -1 ? (this.isEn ? 2 : 0) : this.charmod
		},
		adrKeyLabelShow(){
			if(this.adrKeyLabel){
				return this.adrKeyLabel
			}else{
				if(this.isEn){
					return ""
				}else{
					return  "名称地址"
				}
			}
    },
    isEnLabel(){
       //根据交易码获取label的国际化
       let trnName = '';
       if (this.root.trnName) {
         trnName = this.root.trnName.toUpperCase();
       }
       if (trnName.startsWith('GI') || trnName.startsWith('GE')
          || trnName.startsWith('GC') || trnName.startsWith('GF')) {
         return true;
       } else {
         return false;
       }
    }
	},
  data() {
    return {
      dialogTitle: "", // 弹框标题
      dialogTableVisible: false, // 控制弹框的展示和隐藏
      tableLoading: false,
      total: 0,
      isDisabled: false,
      currentPage: 1, // 页数
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 5, // 条数
      tableList: [],
      inputValue: "",
			tableColumn: [],
			// 临时地址相关（名称和地址）
			tempRolVisible: false,
			tempFormData: {
				name: '',
				address: ''
			},
			markExtkey: '',
			//控制详情弹框
			detailVisible:false,
			isChangeRef: false,
			isChangeEnnam: false,
			isChangeEnadr: false,
			//详情数据
			detailFormData:{
				ptaptyextkey:'',
				cnnam:'',
				cnadr:'',
				ennam:'',
				enadr:'',
				ref:''
			},
			tempRolRules:{
				name:[
          {
            validator: (rule, value, callback) => {
              if (this.tempFormData.name && this.tempFormData.address) {
                if(this.tempFormData.name.length + this.tempFormData.address.length > 141) {
                  callback(new Error('名址总长度不能超过140'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            },
          },
          { required: false, message: '请输入名称', trigger: 'blur' },
        ],
        address: [
          // {
          //   validator: (rule, value, callback) => {
          //     if (this.tempFormData.name && this.tempFormData.address) {
          //       if(this.tempFormData.name.length + this.tempFormData.address.length > 141) {
          //         callback(new Error("名址总长度不能超过140"))
          //       }
          //     } else{
          //       callback()
          //     }
          //   },
          //   trigger: 'blur'
          // },
        ],
			},
			// 初始化只执行一次的标识
			isOnce: false,
			// 是否触发校验（客户号的有效性）
			isCheckPtainr: false
		};
	},
	watch:{
		model:{
			deep:true,
			handler(val,oldVal){
				const extKeyValue = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
				// 一旦执行就不会再次执行
				if (!this.isOnce) {
					this.isOnce = true
					this.markExtkey = extKeyValue
				}
			}
		}
	},
	mounted () {
		this.$nextTick(() => {
			const extKeyValue = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
			if (extKeyValue) {
				this.markExtkey = extKeyValue
			}
		})
	},
  methods: {
    validateExtkey(rule, value, callback) {
      if (value !== '' && !this.model[this.argadr.grp][this.argadr.rol].pts.ptainr && this.isCheckPtainr) {
        callback(new Error('无效的客户号'));
      } else {
        callback()
      }
    },
    validatorAdrKey (rule, value, callback) {
      if (value && /[\u4E00-\u9FA5]/g.test(value)) {
        callback(new Error('不能包含中文!'))
      } else {
        callback()
      }
    },
		handleRefBlur () {
			this.$emit('blurRef')
		},
    // 表头 头部换行，以 / 作为换行标志
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("/")[0]),
        h("br"),
        h("span", {}, column.label.split("/")[1])
      ]);
    },
    async showPtapDialog() {
			if (this.tableLoading || this.dialogTableVisible) {
				return
			}
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
      // 分层取值
      await this.getTableData(value);
      if (this.total == 1) {
					this.dbClickRow(this.tableList[0]);
      } else {
				// 设置弹框标题
				this.dialogTitle = `${this.argadr.title}详情`;
				this.dialogTableVisible = true;
        this.tableColumn = columnMap['C'];
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
				})
      }
		},
		showDetail(){
			this.detailVisible=true
      //给详情弹框赋值
      this.detailFormData.ptaptyextkey=this.model[this.argadr.grp][this.argadr.rol].pts.extkey
      this.detailFormData.cnnam=this.model[this.argadr.grp][this.argadr.rol].pts.cnnam
      this.detailFormData.cnadr=this.model[this.argadr.grp][this.argadr.rol].pts.cnadr
      this.detailFormData.ennam=this.model[this.argadr.grp][this.argadr.rol].pts.ennam
			this.detailFormData.enadr=this.model[this.argadr.grp][this.argadr.rol].pts.enadr
			this.detailFormData.ref=this.model[this.argadr.grp][this.argadr.rol].pts.ref

		},
    handleCloseDetails() {
      this.detailVisible = false
      this.isChangeRef = false
      this.isChangeEnnam = false
      this.isChangeEnadr = false
    },
		sizeChange(num){
      this.pageSize = num;
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
			this.getTableData(value);
		},
    currentChange(num) {
      this.currentPage = num;
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
      this.getTableData(value);
    },

    // 获取弹框内的table数据
    async getTableData(value) {
			return new Promise(async (resolve) => {
				this.tableLoading = true;
				this.tableList = [];
				// 获取table的表格数据
				let params = {
					ptytyp: this.ptytyp,
					extkey: value || "",
					bchinr: this.bchinr,
					pageNum: this.currentPage,
					pageSize: this.pageSize
        };
				const loading = this.loading();
				const res = await getPtaTableDtat(params, this.moduleRouter());
				loading.close();
				if (res.respCode == SUCCESS) {
					if (res.data && res.data.list) {
						this.total = res.data.total;
						this.tableList = res.data.list.map(it => ({
							...it,
							// 添加新key将Party Number和Address Number换行
							partyNumberAndAdressNumber: `${it.ptaptyextkey || ""}\n${it.ptaobjkey || ""}`,
							bchbranchAndBchbchname: `${it.bchbranch || ""}\n${it.bchbchname || ""}`,
							adrnam1AndPtanam1: `${it.adrnam1 || ""}\n${it.ptanam1 || ""}`,
							adradr1AndAdrstr1: `${it.adradr1 || ""}\n${it.adrstr1 || ""}`,
							adrstr2Andadrloccty: `${it.adrstr2 || ""}\n${it.adrloccty || ""}`,
							adrloczipAndadrloctxt: `${it.adrloczip || ""}\n${it.adrloctxt || ""}`
						}));
						resolve(this.tableList)
					}
				}
				this.tableLoading = false; //接口掉完变成false
			})
		},
    async dbClickRow(row, column, event) {
      let params = {
        inr: row.ptainr,
        rol: this.argadr.rol
      };
			const response = await getPtsptaByInr(params, this.moduleRouter());
      if (response.respCode == SUCCESS) {
				// 回填数据
				if(this.argadr.title == "Obligor"){
					this.$alert(`额度占用主体变更为： ${row[this.getExtkeyCode]}客户`, '提示', {
          confirmButtonText: '确定'
        });
				}
				let language = this.useLanguage
				// 此字段为了回调中判断extkey字段是否被修改
				let isChangeExtkey = true
				if (this.model[this.argadr.grp][this.argadr.rol].pts.extkey !== row[this.getExtkeyCode]) {
					isChangeExtkey = false
					this.model[this.argadr.grp][this.argadr.rol].pts.extkey = row[this.getExtkeyCode]; // 这是textarea--extkey
				}
				// 备份的extkey
				this.markExtkey = row[this.getExtkeyCode]
				this.model[this.argadr.grp][this.argadr.rol].pts.ptainr = row.ptainr;
        this.model[this.argadr.grp][this.argadr.rol].pts.ptyinr = response.data.ptyinr;
        // 名址分开的名称取值逻辑修改
        this.model[this.argadr.grp][this.argadr.rol].pts.nam = language==='CN'?response.data.cnnam : response.data.ennam
        this.model[this.argadr.grp][this.argadr.rol].pts.ptynam1 = response.data.cnnam;
        this.model[this.argadr.grp][this.argadr.rol].pts.rol = this.argadr.rol.toUpperCase();
        if (!this.onlySearch) {
          this.model[this.argadr.grp][this.argadr.rol].pts.ennam = response.data.ennam;
          this.model[this.argadr.grp][this.argadr.rol].pts.enadr = response.data.enadr;
          this.model[this.argadr.grp][this.argadr.rol].pts.cnnam = response.data.cnnam;
          this.model[this.argadr.grp][this.argadr.rol].pts.cnadr = response.data.cnadr;
          this.model[this.argadr.grp][this.argadr.rol].pts.adrblk = response.data.ennamadr;
					if(this.model[this.argadr.grp][this.argadr.rol].ptytyp || this.model[this.argadr.grp][this.argadr.rol].ptytyp==''){
						this.model[this.argadr.grp][this.argadr.rol].ptytyp = response.data.ptytyp
					}
        }
				// 此处为了回填数据时回调
				this.$emit('handleChange',{
					rowData: row,
					isChangeExtkey: isChangeExtkey
        })
        this.isDisabled = true
				// warning提示相关
				this.handleShowWarning(response)

				this.isCheckPtainr = true
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
				})
			}
			this.modifyPtap()
      this.dialogTableVisible = false;
		},
		modifyPtap(){
			this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'extkey')
			if(this.isAdrblk){
				if(this.adrKey =='adrblk'){
					this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'adrblk')
				}else{
					this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts,'nam')
				}
			}else{
				if(this.isEn){
					this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'ennam')
					this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'enadr')
				}else{
					this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts,'cnnam')
					this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'cnadr')
				}
			}
		},
		handleShowWarning (response) {
			if (response.warnList && response.warnList.length) {
				let curWarnList = this.root.model.warnList || []
				response.warnList.map((resItem) => {
					if (resItem.message) {
						let hasFlag = curWarnList.some((item) => {
							return item.key === resItem.key
						})
						if (hasFlag) {
							curWarnList.forEach((item) => {
								if (item.key === resItem.key) {
									if (item.message !== resItem.message) {
										Object.assign(item, resItem)
										// item = {
										// 	...item,
										// 	...resItem
										// }
									}
									return;
								}
							})
						} else {
							curWarnList.push(resItem)
						}
					} else {
						let ind = curWarnList.findIndex((item) => {
							return item.key === resItem.key
            })
            if (ind > -1) {
              curWarnList.splice(ind, 1)
            }
					}
				})
				
				this.$set(this.root.model, 'warnList', curWarnList)
				// 判断是否存在未读的warning，不存在则不弹出弹框，存在即弹出
				let isHasNoRead = false
				if (curWarnList && curWarnList.length > 0) {
					isHasNoRead = curWarnList.some((item) => {
						return item.readFlag === 'N'
					})
				}
				if (isHasNoRead) {
					this.$store.commit('updateWarningVisible', true)
				}
			}
		},
		handleCloseDialogTable () {
			this.dialogTableVisible = false;
			if (!this.onlySearch) {
				if (this.isAdrblk || !this.haveAdrLabel) {
					let adrblk = this.model[this.argadr.grp][this.argadr.rol].pts[this.adrKey]
					if (adrblk) {
						this.model[this.argadr.grp][this.argadr.rol].pts.extkey = this.markExtkey
					}
				} else {
          let nam = '';
          if (this.isEn) {
              nam = this.model[this.argadr.grp][this.argadr.rol].pts.ennam;
          } else {
              nam = this.model[this.argadr.grp][this.argadr.rol].pts.cnnam;
          }
          let adr = '';
          if (this.isEn) {
              adr = this.model[this.argadr.grp][this.argadr.rol].pts.enadr;
          } else {
              adr = this.model[this.argadr.grp][this.argadr.rol].pts.cnadr;
          }
					if ((this.isAdrVisible && nam && adr) || (!this.isAdrVisible && nam)) {
						this.model[this.argadr.grp][this.argadr.rol].pts.extkey = this.markExtkey
					}
				}
			}
			// 弹框关闭时校验客户号
			this.isCheckPtainr = true
			this.$nextTick(()=>{
				this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
			})
		},
    beforeClose(done) {
      this.dialogTableVisible = false;
      this.currentPage = 1;
      done();
		},
		// 地址失去焦点
		hanldeAdrBlur (e) {
      //更新名称地址
      let ptainr = this.model[this.argadr.grp][this.argadr.rol].pts.ptainr;
      if (ptainr !== '') {
        let extkey = this.model[this.argadr.grp][this.argadr.rol].pts.extkey || '';
        if (extkey.startsWith('9999') || extkey.startsWith('Temp')) {
          this.queryTempExtkey(1, true)
          this.modifyPtap()
        }
        return
      }
			if (this.root && this.root.codes && !this.root.codes[`${this.argadr.grp}_${this.argadr.rol}_isCheckFalse`]) {
				return;
			}
			let curVal = e.target.value.replace(/\r?\n/g, '')
			if (!curVal) {
				return
      }
			this.$confirm("是否创建一个临时地址编号?", "提示", {
				closeOnClickModal:false,
				closeOnPressEscape:false,
				distinguishCancelAndClose:true,
				confirmButtonText: "是",
				cancelButtonText: "否",
				cancelButtonClass: 'btn-custom-cancel',
				type: "warning",
      }).then(() => {
				this.queryTempExtkey(1, true)
				this.modifyPtap()
      }).catch((action) => {
				if (action === 'cancel') {
					this.queryTempExtkey(1, false)
					this.modifyPtap()
				}
				if(action == 'close'){
					this.model[this.argadr.grp][this.argadr.rol].pts[this.adrKey] = ''
				}
			});
		},
		// 获取临时生成的地址的extkey;paramsType为标识组件类型，1：标识只有地址；2：标识有地址和名称
		async queryTempExtkey (paramsType, flg) {
			let language = this.useLanguage
			let params = {
				rol: this.argadr.rol,
				flg,
				typflg: this.typflg,
        language,
        ptainr: this.model[this.argadr.grp][this.argadr.rol].pts.ptainr
			}
			if (paramsType === 1) {
				params = {
					...params,
					adrblk: this.model[this.argadr.grp][this.argadr.rol].pts[this.adrKey]
				}
			} else {
				params = {
					...params,
					namelc: this.tempFormData.name,
					adrelc: this.tempFormData.address,
				}
			}
			const loading = this.loading();
			let res = await getTempExtkey(params, this.moduleRouter())
			loading.close();
			if (res.respCode == SUCCESS) {
				this.model[this.argadr.grp][this.argadr.rol].pts.extkey = res.data.extkey
				this.$nextTick(()=>{
					this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
				})
				// 备份的extkey
				this.markExtkey = res.data.extkey
				this.model[this.argadr.grp][this.argadr.rol].pts.rol = res.data.rol.toUpperCase()
				this.model[this.argadr.grp][this.argadr.rol].pts.ptainr = res.data.ptainr
				this.model[this.argadr.grp][this.argadr.rol].pts.ptyinr = res.data.ptyinr
				this.model[this.argadr.grp][this.argadr.rol].pts.nam = res.data.nam
        this.model[this.argadr.grp][this.argadr.rol].pts.adrblk = res.data.pts.adrblk
        this.model[this.argadr.grp][this.argadr.rol].pts.cnnam = res.data.pts.cnnam
        this.model[this.argadr.grp][this.argadr.rol].pts.cnadr = res.data.pts.cnadr
        this.model[this.argadr.grp][this.argadr.rol].pts.ennam = res.data.pts.ennam
        this.model[this.argadr.grp][this.argadr.rol].pts.enadr = res.data.pts.enadr

        //置灰名址
        this.isDisabled = true;
				// 此处为了回填数据时回调
				this.$emit('handleChange',{
					rowData: res.data
				})
			} else {
				this.model[this.argadr.grp][this.argadr.rol].pts.extkey = ''
				this.$message.error(res.respMsg)
			}
		},
		// extkey输入框失焦
		handleExtkeyBlur (e) {
			let extkey = this.model[this.argadr.grp][this.argadr.rol].pts.extkey
			if (extkey && extkey !== this.markExtkey) {
				this.showPtapDialog()
			}
		},
		// 地址和名称的两栏聚焦
		handleFocus (type) {
			switch (type) {
				case 'nam':
					this.tempRolVisible = true
					this.tempFormData.address = this.isEn ? this.model[this.argadr.grp][this.argadr.rol].pts.enadr : this.model[this.argadr.grp][this.argadr.rol].pts.cnadr
					this.tempFormData.name = this.isEn ? this.model[this.argadr.grp][this.argadr.rol].pts.ennam : this.model[this.argadr.grp][this.argadr.rol].pts.cnnam;
					break;
				case 'adr':
					this.tempRolVisible = true
					this.tempFormData.name = this.isEn ? this.model[this.argadr.grp][this.argadr.rol].pts.ennam : this.model[this.argadr.grp][this.argadr.rol].pts.cnnam;
					this.tempFormData.address = this.isEn? this.model[this.argadr.grp][this.argadr.rol].pts.enadr : this.model[this.argadr.grp][this.argadr.rol].pts.cnadr
					break;
				default:
					return;
			}
		},
		handletempRolClose () {
      this.tempRolVisible = false
      if (!this.model[this.argadr.grp][this.argadr.rol].pts.ptainr) {
        this.tempFormData.name = ''
        this.tempFormData.address = ''
        if (!this.onlySearch) {
          if (this.isAdrblk || !this.haveAdrLabel) {
            this.model[this.argadr.grp][this.argadr.rol].pts[this.adrKey] = ''
          } else {
            this.tempName = ''
            this.tempAdr = ''
          }
        }
      }
			this.$nextTick(()=>{
				this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
			})
		},
		buildTemp () {
			this.$refs['tempForm'].validate((validStatic) => {
				if (validStatic) {
					this.queryTempExtkey(2, true)
					this.tempRolVisible = false	
				}
			})
			this.modifyPtap()
		},
		// 点击确定
		tempSure () {
			this.$refs['tempForm'].validate((validStatic) => {
				if (validStatic) {
					this.queryTempExtkey(2, false)
					this.tempRolVisible = false
				}
			})
			this.modifyPtap()
			this.$nextTick(()=>{
				this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
			})
		},
		clear () {
			this.$emit('clear')
			this.handleDeleteCurWarning()
			this.$nextTick(()=>{
				this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
			})
		},
		handleDeleteCurWarning() {
			this.root.model.warnList.map((item, index) => {
				let curRole = item.id ? item.id.substring(item.id.indexOf('.') + 1) : ''
				if (curRole === this.argadr.rol) {
					this.root.model.warnList.splice(index, 1)
				}
			})

    },
    //判断名称和地址是否灰显 (C 或者 B)
    nameAndAddressDisabled(){
      let extkey = this.model[this.argadr.grp][this.argadr.rol].pts.extkey || '';
      if (extkey === '' || extkey.startsWith('9999') || extkey.startsWith('Temp')) {
         return false;
      }
      return true;
    },
		//extkey清空时
		extkeyInput(){
			if (!this.model[this.argadr.grp][this.argadr.rol].pts.extkey) {
        this.model[this.argadr.grp][this.argadr.rol].pts.nam=''
        this.model[this.argadr.grp][this.argadr.rol].pts.ennam=''
        this.model[this.argadr.grp][this.argadr.rol].pts.enadr=''
        this.model[this.argadr.grp][this.argadr.rol].pts.cnnam=''
        this.model[this.argadr.grp][this.argadr.rol].pts.cnadr=''
				this.model[this.argadr.grp][this.argadr.rol].pts.adrblk=''
				this.model[this.argadr.grp][this.argadr.rol].pts.ptainr=''
				this.model[this.argadr.grp][this.argadr.rol].pts.ptyinr=''
				this.markExtkey = ''
				this.isDisabled = false
				
				// 内容被清空，触发清空事件
				this.clear()
			}

			this.isCheckPtainr = false
		},
		extkeyChange () {
			this.modifyPtap()
		},
		handleInput(){
			this.$emit('handleInput')
			this.isChangeRef = true
		},
    changeInputEnnam() {
      this.isChangeEnnam = true
    },
    changeInputEnadr() {
      this.isChangeEnadr = true
    },
		saveRef(){
			// 打开弹框并且修改过参考号才给其添加modifySet和markSet
			if (this.isChangeRef) {
				this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'ref')
			}
			if (this.isChangeEnnam) {
				this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'ennam')
        this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'adrblk')
			}
			if (this.isChangeEnadr) {
				this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'enadr')
        this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'adrblk')
			}
			this.model[this.argadr.grp][this.argadr.rol].pts.ref = this.detailFormData.ref
			this.model[this.argadr.grp][this.argadr.rol].pts.ennam = this.detailFormData.ennam
			this.model[this.argadr.grp][this.argadr.rol].pts.enadr = this.detailFormData.enadr
      let tmpAdrblk = this.detailFormData.ennam + "\n" + this.detailFormData.enadr
      let adrblkArray = tmpAdrblk.split('\n')
      let finAdrblk = ''
      if (adrblkArray.length > 4) {
        for (let idx = 0; idx < 4; idx++) {
          if (idx === 3) {
            finAdrblk = finAdrblk + adrblkArray[idx]
          } else {
            finAdrblk = finAdrblk + adrblkArray[idx] + '\n'
          }
        }
      } else {
        finAdrblk = tmpAdrblk
      }
      this.model[this.argadr.grp][this.argadr.rol].pts.adrblk = finAdrblk
			this.detailVisible = false
      this.$emit('saveRef')
      this.$nextTick(() => {
      	this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
			})
		},
		// 地址输入框组件是否检验成功
		handleCheckFalse (flag) {
			this.$set(this.root.codes, `${this.argadr.grp}_${this.argadr.rol}_isCheckFalse`, flag)
		}
  },
};
</script>
<style scoped lang="less">
::v-deep .el-dialog__body {
	height: calc(100% - 55px)
}
.el-table .cell {
  white-space: pre-wrap;
}
::v-deep .temp-rol {
	.el-dialog__body {
		height: calc(100% - 120px);
		.el-form-item--small .el-form-item__label {
			width: 95px!important;
		}
	}
}
.close-btn {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.close-btn:hover {
	background: rgba(0, 0, 0, .1)
}

.box-card {
	margin-bottom: 10px;
	/deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
		margin-bottom: 10px;
	}
	/deep/ .el-card__body {
		padding: 10px 10px 10px 0px;
	}
}
.is-show-card {
	border: none!important;
	box-shadow: none!important;
	margin-bottom: 0!important;
	/deep/ .el-card__body {
		padding: 0!important;
	}
}
::v-deep .el-input--suffix .el-input__inner{
	padding-right: 15px;
}
.el-dialog__body .el-form{
	padding: 30px 40px 0px 0px;
}
.field-margin {
  /deep/ .el-form-item__content {
    margin-left: 10px!important;
  }
}
.card-margin {
	/deep/ .box-card {
	margin-left: 120px;
	}
}
</style>