<template>
<div>
<el-card class="box-card" :class="[isShowCard ? '' : 'is-show-card']" >
<c-col :span="24">
<el-form-item
:label="argadr.title"
:prop="`${argadr.grp}.${argadr.rol}.pts.extkey`"
style="width: 100%"
>
<c-fullbox>
<c-input
v-model.trim="model[argadr.grp][argadr.rol].pts.extkey"
placeholder=""
maxlength="16"
:disabled="disabledExtkey"
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="disabledDetail"
@click="showDerail"
>
Details
</el-button>
</template>
</c-fullbox>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item
:label="isShowNam ? 'Name':''"
:prop="`${argadr.grp}.${argadr.rol}.pts.nam`"
style="width: 100%"
>
<c-mul-row-input
type="textarea"
:rows="2"
:cols="20"
:charmod="charmod"
v-model="model[argadr.grp][argadr.rol].pts.nam"
placeholder=""
:disabled="disabledNam || isDisabled"
@blur="handleFocus('nam')"
>
</c-mul-row-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item
:label="isShowAddress ? 'Address':''"
:prop="`${argadr.grp}.${argadr.rol}.pts.adrblk`"
>
<c-mul-row-input
type="textarea"
:rows="2"
:cols="70"
:autosize="{minRows: 1, maxRows: 2}"
:charmod="charmod"
:showTip="false"
v-model="model[argadr.grp][argadr.rol].pts.adrblk"
placeholder=""
:disabled="disabledAdrblk || isDisabled"
@blur="handleFocus('adr')"
>
</c-mul-row-input>
</el-form-item>
</c-col>
</el-card>
<!-- 临时地址名称和地址的 -->
<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>
<div>
<el-form ref="tempForm" :model="tempFormData" :rules="tempRolRules" :validate-on-rule-change="false">
<el-form-item
label="名称"
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="地址"
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%"
:visible.sync="dialogTableVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
v-if="dialogTableVisible"
:modal-append-to-body="false"
: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%"
title="详情查看"
custom-class="temp-rol"
:visible.sync="detailVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
v-if="detailVisible"
>
<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.nam" disabled></el-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="中文地址">
<el-input type="textarea" v-model="detailFormData.adr" 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
v-model="detailFormData.ref"
:customModifykey="`${argadr.grp}.${argadr.rol}.pts.ref`"
placeholder="请输入参考号"
maxlength="16"
show-word-limit
@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></el-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="英文地址">
<el-input type="textarea" v-model="detailFormData.enadr" disabled></el-input>
</el-form-item>
</c-col>
</c-col>
</c-col>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button 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: {
model: {
type: Object,
default: () => {}
},
argadr: {
type: Object,
default: function() {
return {
title:"",//角色名称
rol: "", //角色
grp: "" //所属模块
};
}
},
charmod: {
type: Number,
default: 0
},
isShowCard: {
type: Boolean,
default: true
},
isShowNam: {
type: Boolean,
default: false
},
isShowAddress: {
type: Boolean,
default: false
},
disabledExtkey: {
//extkey是否灰显(true:extkey处灰显)
type: Boolean,
default: false
},
disabledDetail: {
//details是否灰显(true:details处灰显)
type: Boolean,
default: false
},
disabledNam: {
//nam是否灰显(true:nam处灰显)
type: Boolean,
default: false
},
disabledAdrblk: {
//Adrblk是否灰显(true:Adrblk处灰显)
type: Boolean,
default: 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: [],
tableColumn: [],
detailVisible: false,
//详情数据
detailFormData:{
ptaptyextkey:'',
nam:'',
adr:'',
ennam:'',
enadr:'',
ref:''
},
isChangeRef: false,
markExtkey:"",
// 是否触发校验（客户号的有效性）
isCheckPtainr: false,
// 临时地址相关（名称和地址）
tempRolVisible: false,
tempFormData: {
name: '',
address: ''
},
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: [
],
},
};
},
watch: {},
methods: {
// 弹框
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`]);
})
}
},
// 清除
clear() {
this.$emit("clear");
},
// extkey输入框失焦
handleExtkeyBlur (e) {
let extkey = this.model[this.argadr.grp][this.argadr.rol].pts.extkey
if (extkey && extkey !== this.markExtkey) {
this.showPtapDialog()
}
},
//显示详情
showDerail(){
this.detailVisible = true
//给详情弹框赋值
this.detailFormData.ptaptyextkey=this.model[this.argadr.grp][this.argadr.rol].pts.extkey
this.detailFormData.nam=this.model[this.argadr.grp][this.argadr.rol].pts.nam
this.detailFormData.adr=this.model[this.argadr.grp][this.argadr.rol].pts.adr
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
},
// 关闭弹框
handleCloseDialogTable () {
this.dialogTableVisible = false;
this.$nextTick(()=>{
this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
})
},
handletempRolClose(){
this.tempRolVisible = false
if(!this.model[this.argadr.grp][this.argadr.rol].pts.ptainr){
this.tempFormData.name = ''
this.tempFormData.address = ''
}
this.$nextTick(()=>{
this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
})
},
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) {
// 赋值
this.model[this.argadr.grp][this.argadr.rol].pts.nam = response.data.nam
this.model[this.argadr.grp][this.argadr.rol].pts.extkey = row.ptaobjkey
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.nam = response.data.nam;
this.model[this.argadr.grp][this.argadr.rol].pts.adr = response.data.adr;
this.model[this.argadr.grp][this.argadr.rol].pts.adrblk = response.data.ennamadr;
// 此处为了回填数据时回调
this.$emit('handleChange',{
rowData: row,
})
this.isDisabled = true
this.$nextTick(()=>{
this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
})
}
this.dialogTableVisible = false;
},
// 获取弹框内的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,
}));
resolve(this.tableList)
}
}
this.tableLoading = false; //接口掉完变成false
})
},
saveRef(){
// 打开弹框并且修改过参考号才给其添加modifySet和markSet
if (this.isChangeRef) {
this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'ref')
}
this.model[this.argadr.grp][this.argadr.rol].pts.ref = this.detailFormData.ref
this.detailVisible=false
this.$nextTick(() => {
this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
})
},
// 地址和名称的两栏聚焦
handleFocus (type) {
switch (type) {
case 'nam':
this.tempRolVisible = true
this.tempFormData.address = this.model[this.argadr.grp][this.argadr.rol].pts.adrblk
this.tempFormData.name = this.model[this.argadr.grp][this.argadr.rol].pts.nam;
break;
case 'adr':
this.tempRolVisible = true
this.tempFormData.name = this.model[this.argadr.grp][this.argadr.rol].pts.nam;
this.tempFormData.address = this.model[this.argadr.grp][this.argadr.rol].pts.adrblk
break;
default:
return;
}
},
buildTemp () {
this.$refs['tempForm'].validate((validStatic) => {
if (validStatic) {
this.queryTempExtkey(true)
this.tempRolVisible = false
}
})
this.modifyPtap()
},
// 点击确定
tempSure () {
this.$refs['tempForm'].validate((validStatic) => {
if (validStatic) {
this.queryTempExtkey(false)
this.tempRolVisible = false
}
})
this.modifyPtap()
this.$nextTick(()=>{
this.root.$refs['modelForm'].validateField([`${this.argadr.grp}.${this.argadr.rol}.pts.extkey`]);
})
},
handleInput(){
this.isChangeRef = true
},
async queryTempExtkey (flg) {
let language = 'EN'
let params = {
rol: this.argadr.rol,
flg,
typflg: this.typflg,
language,
ptainr: this.model[this.argadr.grp][this.argadr.rol].pts.ptainr,
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.nam = res.data.pts.nam
this.model[this.argadr.grp][this.argadr.rol].pts.adr = res.data.pts.adr
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清空时
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.nam=''
this.model[this.argadr.grp][this.argadr.rol].pts.adr=''
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.disabledDetail = true
this.isDisabled = false
// 内容被清空，触发清空事件
this.clear()
}
this.isCheckPtainr = false
},
extkeyChange () {
this.modifyPtap()
},
modifyPtap(){
this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts, 'extkey')
this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts,'nam')
this.customAddModify(this.model[this.argadr.grp][this.argadr.rol].pts,'adrblk')
},
},
};
</script>
<style scoped lang="less">
.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;
}
}
</style>