<template>
<div class="eibs-tab">
<c-list-search @form-reset="handleReset" @form-search="formSubmit">
<!-- 持续展示区 -->
<template v-slot="searchSlot">
<el-form class="m-table-search-form" ref="paramsForm" label-position="right" label-width="110px" size="small" :model="model">
<el-row>
<c-col :span="8">
<el-form-item v-if="activeTab === 'sc'" label="索偿编号" style="width: 100%">
<c-input v-model.trim="model.claimownref" maxlength="16" placeholder="请输入索偿编号"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="通知/保函编号" style="width: 100%">
<c-input v-model.trim="model.seaownref" maxlength="16" placeholder="请输入通知/保函编号"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item v-if="activeTab !== 'sc'" label="通知日" style="width: 100%">
<c-col :span="11">
<c-date-picker type="date" v-model="model.opndatfrom" style="width: 100%" placeholder="请选择起始日期" value-format="yyyy-MM-dd"></c-date-picker>
</c-col>
<c-col :span="2" style="text-align: center">
<label style="display: inline-block; width: 100%">-</label>
</c-col>
<c-col :span="11">
<c-date-picker type="date" v-model="model.opndatto" style="width: 100%" placeholder="请选择截止日期" value-format="yyyy-MM-dd"></c-date-picker>
</c-col>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="通知类别" style="width: 100%">
<c-select v-model="model.gidopentyps" collapse-tags :filterKey="['GJBH','GNBH']" multiple style="width: 100%" placeholder="请选择保函类型" dbCode="trntyp">
</c-select>
</el-form-item>
</c-col>
</el-row>
<!-- 可控展示区 -->
<el-row v-show="searchSlot.searchToggle">
<c-col :span="24">
<c-col :span="8">
<el-form-item label="客户号/名称" style="width: 100%">
<c-input v-model.trim="model.ptyExtkey" maxlength="16" placeholder="请输入客户号/名称"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item v-if="false" label="通知方式" style="width: 100%">
<c-select v-model="model.hndtyps" collapse-tags multiple style="width: 100%" placeholder="请选择通知方式" dbCode="hndtyp" :clearable="true">
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item v-if="activeTab !== 'sc'" label="是否结清" style="width: 100%">
<c-select v-model="model.isclear" style="width: 100%" placeholder="请选择是否结清" :clearable="true" dbCode='cxmflg'>
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item v-if="activeTab === 'sc'" label="结清状态" style="width: 100%">
<c-select v-model="model.clssta" collapse-tags style="width: 100%" placeholder="请选择结清状态" dbCode="cxmflg">
</c-select>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<el-form-item label="通知方式" style="width: 100%">
<c-select v-model="model.seapurpos" :filterKey="['ADVI']" collapse-tags style="width: 100%" placeholder="请选择通知方式" uil="CN" dbCode="purpos" :clearable="true">
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="保函号" style="width: 100%">
<c-input v-model.trim="model.issref" maxlength="16" placeholder="请输入保函号"></c-input>
</el-form-item>
</c-col> -->
<!-- <c-col :span="8">
<el-form-item v-if="activeTab === 'sc'" label="索偿日期" style="width: 100%">
<c-col :span="11">
<c-date-picker type="date" v-model="model.claimdatfrom" style="width: 100%" placeholder="请选择起始日期" value-format="yyyy-MM-dd"></c-date-picker>
</c-col>
<c-col :span="2" style="text-align: center">
<label style="display: inline-block; width: 100%">-</label>
</c-col>
<c-col :span="11">
<c-date-picker type="date" v-model="model.claimdatto" style="width: 100%" placeholder="请选择截止日期" value-format="yyyy-MM-dd"></c-date-picker>
</c-col>
</el-form-item>
</c-col> -->
</c-col>
</el-row>
</el-form>
</template>
</c-list-search>
<!-- 保函开立入口 -->
<el-col :span="24" style="margin-top: 10px;margin-bottom: 10px;">
<c-button class="medium_bcs" size="medium" type="primary" @click="toOpn('getopn')" style="margin-left: 0px">国际保函通知
</c-button>
<c-button class="medium_bcs" size="medium" type="primary" @click="toOpn('netopn')" style="margin-left: 30px">国内保函通知</c-button>
</el-col>
<el-col :span="24" style="margin-top: 10px">
<el-tabs v-model="activeTab" @tab-click="handleClick" class="y-tabs">
<!-- 保函信息 -->
<el-tab-pane label="保函信息" name="bs">
<div style="height: 90%">
<c-col :span="24">
<el-table id='infgidBSTableRef' v-loading="load" :data="tableData" style="width:100%" size="small" height="calc(100vh - 390px)" :highlight-current-row="true" @row-click="TableRowClick" @row-dblclick="TableDblRow">
<el-table-column label="通知编号" prop="ownref" align="left" fixed="left" min-width="150">
</el-table-column>
<el-table-column label="保函编号" prop="issref" align="left" min-width="150">
</el-table-column>
<el-table-column label="通知类别" prop="opentyp" align="left" min-width="150">
<template slot-scope="scope">
<span> {{getCodelabel(scope.row.opentyp,"opentyp") }}
</span>
</template>
</el-table-column>
<el-table-column label="通知日" prop="orddat" align="left" min-width="150" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="币种" prop="cur" align="left" wmin-width="150" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="金额" prop="amt" align="left" min-width="120">
<template slot-scope="scope">
<span> {{moneyFormat(scope.row.amt,2) }}
</span>
</template>
</el-table-column>
<el-table-column label="余额" prop="amt1" align="left" min-width="150" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span> {{moneyFormat(scope.row.amt1,2) }}
</span>
</template>
</el-table-column>
<el-table-column label="受益人名称" prop="bennam" align="left" min-width="370" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="申请人名称" prop="aplnam" align="left" min-width="370" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="担保行名称" prop="garbnk" align="left" min-width="150" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="有效期" prop="expdat" align="left" min-width="150" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="修改次数" prop="amenbr" align="left" min-width="150" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="索偿次数" prop="gcdcnt" align="left" min-width="150" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="通知状态" prop="clssta" align="left" min-width="150" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span> {{getCodelabel(scope.row.clssta,"clssta") }}
</span>
</template>
</el-table-column>
<el-table-column label="保函类型" prop="gartyp" align="left" min-width="150" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span> {{getCodelabel(scope.row.gartyp,"typgar") }}
</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="240px">
<template slot-scope="scope">
<c-button style="margin-left: 0" type='text' size="small" @click="getButtons(scope.row,'getGetselTrnCode')">处理
</c-button>
<el-popover v-clickOutside="closeDisplayDialog" :ref="`popover-${scope.row.inr}`" trigger="manual" placement="top-end">
<div class="header-wrap">
<div class="title">关联交易</div>
<div class="close-btn" @click="handleCloseInfo(scope.row)"><i class="el-icon-close"></i></div>
</div>
<div style="max-height:400px;overflow: auto;">
<el-table :data="infoTableData" style="width:100%" size="small" :border="true">
<el-table-column label="编号" prop="ownref" align="left" width="150">
</el-table-column>
<el-table-column label="交易名称" prop="inifrmname" align="left" width="100">
</el-table-column>
<el-table-column label="交易码" prop="inifrm" align="left" width="100">
</el-table-column>
<el-table-column label="交易时间" prop="inidattim" align="left" width="200">
</el-table-column>
<el-table-column label="状态" prop="relflgName" align="left" width="100">
</el-table-column>
<el-table-column label="币种" prop="reloricur" align="left" width="100">
</el-table-column>
<el-table-column label="金额" prop="reloriamt" align="left" width="150">
<template slot-scope="scope">
<span> {{ moneyFormat(scope.row.reloriamt, scope.row.reloricur) }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<c-button style="margin-left: 5px" type='text' size="small" @click="goDisplay(scope.row)">快照</c-button>
</template>
</el-table-column>
</el-table>
</div>
<c-button slot="reference" style="margin-left: 5px" type='text' size="small" @click="showDisplayDialog(scope.row)">详情</c-button>
</el-popover>
<c-button style="margin-left: 5px" type='text' @click="toDetail(scope.row)" size="small" slot="reference">Info</c-button>
</template>
</el-table-column>
</el-table>
<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" :page-size="pagination.pageSize" :current-page="pagination.pageNum" @size-change="handleSizeChange" @current-change="currentChange">
</el-pagination>
</c-col>
</div>
</el-tab-pane>
<!-- 索偿信息 -->
<el-tab-pane label="索偿信息" name="sc">
<div style="height: 90%">
<c-col :span="24">
<el-table id='infgidSpTableRef' v-loading="spload" :data="spTableData" @row-dblclick="TableClickRow" :highlight-current-row="true" :border="true" style="width:100%" size="medium">
<el-table-column label="索偿编号" prop="ownref" min-width="160" align="left">
</el-table-column>
<el-table-column label="通知编号" prop="gidownref" min-width="150" align="left">
</el-table-column>
<el-table-column label="索偿登记日期" prop="credat" min-width="120" align="left">
</el-table-column>
<el-table-column label="币种" prop="cur" min-width="80" align="left">
</el-table-column>
<el-table-column label="索偿金额" prop="gcdamt" min-width="130" align="left">
<template slot-scope="scope">
<span> {{moneyFormat(scope.row.gcdamt,2) }}
</span>
</template>
</el-table-column>
<el-table-column label="索偿余额" prop="gcdopnamt" min-width="130" align="left">
<template slot-scope="scope">
<span> {{moneyFormat(scope.row.gcdopnamt,2) }}
</span>
</template>
</el-table-column>
<el-table-column label="结清状态" prop="clearsta" min-width="130" align="left">
<template slot-scope="scope">
<span> {{getCodelabel(scope.row.clearsta,"clssta") }}
</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="240px">
<template slot-scope="scope">
<c-button style="margin-left: 5px" type='text' size="small" @click="getButtons(scope.row,'getGcdTrnCode')">处理
</c-button>
<el-popover v-clickOutside="closeDisplayDialog" :ref="`popover-${scope.row.inr}`" trigger="manual" placement="top-end">
<div class="header-wrap">
<div class="title">关联交易</div>
<div class="close-btn" @click="handleCloseInfo(scope.row)"><i class="el-icon-close"></i></div>
</div>
<div style="max-height:400px;overflow: auto;">
<el-table :data="infoTableData" style="width:100%" size="small" :border="true">
<el-table-column label="编号" prop="ownref" align="left" width="150">
</el-table-column>
<el-table-column label="交易名称" prop="inifrmname" align="left" width="100">
</el-table-column>
<el-table-column label="交易码" prop="inifrm" align="left" width="100">
</el-table-column>
<el-table-column label="交易时间" prop="inidattim" align="left" width="200">
</el-table-column>
<el-table-column label="状态" prop="relflgName" align="left" width="100">
</el-table-column>
<el-table-column label="币种" prop="reloricur" align="left" width="100">
</el-table-column>
<el-table-column label="金额" prop="reloriamt" align="left" width="150">
<template slot-scope="scope">
<span> {{ moneyFormat(scope.row.reloriamt, scope.row.reloricur) }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<c-button style="margin-left: 5px" type='text' size="small" @click="goDisplay(scope.row)">快照</c-button>
</template>
</el-table-column>
</el-table>
</div>
<c-button slot="reference" style="margin-left: 5px" type='text' size="small" @click="showDisplayDialog(scope.row)">详情</c-button>
</el-popover>
<c-button style="margin-left: 0" type='text' size="small" @click="toDetailOth(scope.row)" slot="reference">Info</c-button>
</template>
</el-table-column>
</el-table>
<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="spPagination.total" :page-size="spPagination.pageSize" :current-page="spPagination.pageNum" @size-change="sphandleSizeChange" @current-change="spcurrentChange">
</el-pagination>
</c-col>
</div>
</el-tab-pane>
</el-tabs>
<!-- 自定义列属性弹框 -->
<el-dialog v-dialogDrag class="showColumnDialog" v-if="showDig" :visible.sync="showDig" :title="'自定义列属性'" appenD-to-body style="padding:20px">
<el-form-item label-width="0" style="display: flex;align-items: center">
<el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
<el-checkbox class="selectColumnClass checkbox-left" style="margin-right:45px;" v-for="item in digColumns" :key="item.label" :label="item.label">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<span slot="footer" style="text-align:center">
<el-checkbox class="selectAllClass checkbox-left" :indeterminate="
columnGroup.length > 0 &&
columnGroup.length < digColumns.length
" v-model="selectAll" @change="setAll">全选</el-checkbox>
<el-button type="primary" @click="saveColumnEvent(spDefaultColumns)" style="margin-left:10px;">保存</el-button>
</span>
</el-dialog>
</el-col>
<!-- 处理弹框 -->
<el-dialog v-dialogDrag v-if="handleVisible" :visible.sync="handleVisible" title="交易列表" style="padding:24px">
<div class="m-list-btns">
<m-busbtn ref="childs" :ownref="ownref" trnCode="getsel" ownrefPath="gidgrp" :codes="dbCodes" :model="handleModel" tabIndex="3" :queryCode="queryCode" :branch="branch" @onChoose="onChoose">11</m-busbtn>
</div>
</el-dialog>
<el-dialog v-dialogDrag v-if="sptVisible" :visible.sync="sptVisible" :title="'当前业务存在以下待处理数据'" :append-to-body="true">
<el-table :data="dealSptData" style="width:100%" size="small" :border="true">
<el-table-column label="数据状态" prop="sta" align="left" min-width="80px">
<template slot-scope="scope">
<c-select-value-to-label v-model="scope.row.sta" dbCode="SPTSTA" disabled>
</c-select-value-to-label>
</template>
</el-table-column>
<el-table-column label="操作时间" prop="dattim" align="left" min-width="100px">
</el-table-column>
<el-table-column label="描述" prop="objnam" align="left" min-width="200px">
</el-table-column>
<el-table-column label="操作人" prop="usr" align="left" min-width="80px">
</el-table-column>
</el-table>
<div slot="footer">
<el-button @click="sptVisible = false">取消</el-button>
<el-button type="primary" @click="$goRoute && $goRoute()">继续</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import event from "../event";
import BusNavbar from "~/components/business/BusNavbar";
export default {
inject: ["root"],
props: ["model", "codes"],
mixins: [event],
components: { "m-busbtn": BusNavbar },
data() {
return {
sptVisible:false,
dealSptData:[],
activeTab: "bs", // tabs当前展示的tab
spload: false,
spTableData: [],
spPagination: {
pageNum: 1,
pageSize: 10,
total: 0
},
ownref: "",
isGuarantee: "",
gopnCode: "", //开立交易码
nopnCode: "",
selectAll: [], // 是否全选
digColumns: [], // 弹框的所有列
columnGroup: [], // 弹框选中的列
showDig: false, // 弹框的展示/隐藏
load: false,
tableData: [],
pagination: {
pageNum: 1,
pageSize: 10,
total: 0
},
handleVisible: false,
handleModel: {},
buttonsList: [],
queryCode: "",
branch: "",
selectedModel: {},
// 历史信息弹框
oldinr:'',
infoTableData: [],
dbCodes:{
buttonlabels:[],
opentyp:[],
purpos:[],
hndtyp:[],
clssta:[],
typgar:[],
}
};
},
watch: {
"$store.state.UserContext.currentOrg": {
handler(newVal) {
console.log("newVal", newVal);
this.model.branch = newVal.departmentNumber;
this.formSubmit();
},
deep: true
}
},
computed: {},
mounted() {
this.model.branch = JSON.parse(
sessionStorage.getItem("currentOrg")
).departmentNumber;
this.getdbCode("atptxt", "CN", "buttonlabels");
this.getdbCode("trntyp","CN","opentyp");
this.getdbCode("purpos", "CN", "purpos");
this.getdbCode("hndtyp", "CN", "hndtyp");
this.getdbCode("clssta", "CN", "clssta");
this.getdbCode("typgar", "CN", "typgar");
// this.formSubmit();
},
methods: {
...event
// 保函/索赔信息点击处理
}
};
</script>
<style scoped lang="less">
.eibs-tabs
/deep/ {
.m-table-search {
padding: 20px 0px 10px 0px;
}
}
.header-wrap {
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 16px;
color: #000;
}
.close-btn {
padding: 3px;
cursor: pointer;
}
}
.m-list-btns {
height: 300px;
overflow: auto;
}
.medium_bcs{
border-radius: 5px;
}
</style>