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