<template>
<div class="eibs">
<c-list-search
@form-reset="handleReset('paramsForm')"
@form-search="handleSearch"
>
<template v-slot="searchSlot">
<el-form
class="m-table-search-form"
ref="paramsForm"
label-position="right"
label-width="110px"
size="small"
>
<el-row>
<div v-if="activeTab == 'bc'">
<c-col :span="8">
<el-form-item
label="业务编号"
prop="infcon.seaownref"
style="width: 100%"
>
<c-input
v-model="model.infcon.seaownref"
maxlength="16"
@change="changeOwnref"
placeholder="请输入业务编号"
></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item
label="日期"
prop="infcon.opndatfrom"
style="width: 100%"
>
<c-col :span="11">
<c-date-picker
type="date"
v-model="model.infcon.opndatfrom"
placeholder="请选择起始日期"
value-format="yyyy-MM-dd"
style="width: 100%"
></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.infcon.opndatto"
placeholder="请选择截止日期"
style="width: 100%"
value-format="yyyy-MM-dd"
></c-date-picker>
</c-col>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item
label="客户名称"
prop="infcon.searef"
style="width: 100%"
>
<c-input
v-model="model.infcon.searef"
placeholder="请输入客户名称"
></c-input>
</el-form-item>
</c-col>
</div>
<div v-if="activeTab == 'tr'">
<c-col :span="24">
<c-col :span="8">
<el-form-item label="业务编号" prop="trcon.trownref" style="width: 100%">
<c-input v-model="model.trcon.trownref"
@change="changeOwnref" maxlength="16" placeholder="请输入业务编号"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="日期" prop="trcon.opndatfrom" style="width: 100%">
<c-col :span="11">
<c-date-picker type="date" v-model="model.trcon.opndatfrom" value-format="yyyy-MM-dd"
style="width:100%" placeholder="请选择起息日"></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.trcon.opndatto" value-format="yyyy-MM-dd"
style="width:100%" placeholder="请选择Open Date to"></c-date-picker>
</c-col>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="客户名称" prop="trcon.searef" style="width: 100%">
<c-input v-model="model.trcon.searef" placeholder="请输入客户名称"></c-input>
</el-form-item>
</c-col>
</c-col>
</div>
<div v-if="activeTab == 'df'">
<c-col :span="8">
<el-form-item label="业务编号" prop="dfcon.dfownref" style="width: 100%">
<c-input v-model="model.dfcon.dfownref"
@change="changeOwnref" maxlength="16" placeholder="请输入信用证编号"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="日期" prop="dfcon.opndatfrom" style="width: 100%">
<c-col :span="11">
<c-date-picker type="date" v-model="model.dfcon.opndatfrom" placeholder="请选择起始日期" value-format="yyyy-MM-dd" style="width: 100%"></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.dfcon.opndatto" placeholder="请选择截至日期" style="width: 100%" value-format="yyyy-MM-dd"></c-date-picker>
</c-col>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="客户名称" prop="dfcon.searef" style="width: 100%">
<c-input v-model="model.dfcon.searef" placeholder="请输入客户名称"></c-input>
</el-form-item>
</c-col>
</div>
</el-row>
<el-row v-show="searchSlot.searchToggle">
<div v-if="activeTab == 'bc'">
<c-col :span="8">
<el-form-item label="是否闭卷" prop="infcon.isClosed" style="width: 100%">
<c-select v-model="model.infcon.isClosed" dbCode='cxmflg' placeholder="请选择是否闭卷">
</c-select>
</el-form-item>
</c-col>
</div>
<div v-if="activeTab == 'tr'">
<c-col :span="24">
<c-col :span="8">
<el-form-item label="代收编号" prop="trcon.pntref" style="width: 100%">
<c-input v-model="model.trcon.pntref" maxlength="16" placeholder="请输入代收编号"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="到期日" prop="trcon.matdatfrom" style="width: 100%">
<c-col :span="11">
<c-date-picker type="date" v-model="model.trcon.matdatfrom" value-format="yyyy-MM-dd"
style="width:100%" placeholder="请选择起息日"></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.trcon.matdatto" value-format="yyyy-MM-dd"
style="width:100%" placeholder="请选择Open Date to"></c-date-picker>
</c-col>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="是否闭卷" prop="trcon.isClosed" style="width: 100%">
<c-select v-model="model.trcon.isClosed" dbCode='cxmflg' placeholder="请选择是否闭卷">
</c-select>
</el-form-item>
</c-col>
</c-col>
</div>
<div v-if="activeTab == 'df'">
<c-col :span="8">
<el-form-item label="父业务编号" prop="dfcon.pntref" style="width: 100%">
<c-input v-model="model.dfcon.pntref" maxlength="16" placeholder="请输入父业务编号"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="到期日" prop="dfcon.matdatfrom" style="width: 100%">
<c-col :span="11">
<c-date-picker type="date" v-model="model.dfcon.matdatfrom" value-format="yyyy-MM-dd"
style="width:100%" placeholder="请选择开始日期"></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.dfcon.matdatto" value-format="yyyy-MM-dd"
style="width:100%" placeholder="请选择截止日期"></c-date-picker>
</c-col>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="代付行" prop="dfcon.dfbkref" style="width: 100%">
<c-input v-model="model.dfcon.dfbkref" placeholder="请输入代付行"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="是否闭卷" prop="dfcon.isClosed" style="width: 100%">
<c-select v-model="model.dfcon.isClosed" dbCode='cxmflg' placeholder="请选择是否闭卷">
</c-select>
</el-form-item>
</c-col>
</div>
</el-row>
</el-form>
</template>
</c-list-search>
<el-col :span="24" >
<c-button class="medium_bcs" size="medium" style="margin-left: 0px" type="primary" @click="toBctdav">
进口代收到单通知
</c-button>
</el-col>
<div style="height: 90%">
<c-col :span="24">
<c-tabs v-model="activeTab" @tab-click="handleClickTab" type="card" ref="elment">
<el-tab-pane label="进口代收" name="bc">
<el-table
v-loading="load"
:data="stmData.data"
height="calc(100vh - 480px)"
border
:columns="stmData.columns"
:showButtonFlg="true"
:highlight-current-row="true"
@row-dblclick="TableDblRow"
@row-click="TableRowClick"
>
<el-table-column
v-for="(item, key) in stmData.columns"
:key="key"
:label="item.label"
:prop="item.prop"
:min-width="item.width"
>
<template slot-scope="scope">
<div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
<div v-else>{{scope.row[item.prop]}}</div>
</template>
</el-table-column>
<!-- 自定义组件里加了最右边的一列”操作“ -->
<el-table-column fixed="right" prop="op" label="操作" width="180px">
<template slot="header">
<!-- 插槽里放了一个文字 一个按钮 -->
<c-col :span="11" style="text-align: center"
><span>操作</span>
</c-col>
</template>
<template slot-scope="scope">
<c-button
style="margin-right: 7px"
size="small"
type="text"
@click="handler(scope.row)"
>处理
</c-button>
<!-- 申请一个弹出主键放在插槽，加工已渲染的数据 -->
<el-popover
placement="top-start"
title="历史信息"
width="1200"
trigger="manual"
v-clickOutside="closeDisplayDialog"
:ref="'popover_' + scope.row.inr"
>
<div
style="
text-align: right;
margin-top: -30px;
margin-right: 5px;
font-size: 16px;
"
>
<span
class="el-icon-close"
style="cursor: pointer"
@click="closeDetailsDialog('popover_' + scope.row.inr)"
></span>
</div>
<el-table
:data="trnData.data"
:columns="trnData.columns"
:showButtonFlg="true"
>
<el-table-column
v-for="(item, key) in trnData.columns"
:key="key"
:label="item.label"
:prop="item.prop"
:width="item.width"
>
<template slot-scope="scope">
<div>{{ scope.row[item.prop] }}</div>
</template>
</el-table-column>
<el-table-column
fixed="right"
prop="op"
label="操作"
width="100px"
>
<template slot-scope="scope">
<c-button
style="margin-left: 0"
size="small"
@click="display(scope.row)"
>快照
</c-button
>
</template>
</el-table-column>
</el-table>
<c-button
style="margin-left: 0px"
size="small"
type="text"
@click="details(scope.row)"
slot="reference"
>
快照
</c-button>
<c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'BCD','TRD')">
Info
</c-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<div class="pagination-box"
style="display:block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pagination.pageIndex"
:page-sizes="[10, 20, 50, 100, 500]"
:page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="融资信息" name="tr">
<div style="height: 90%">
<c-col :span="24">
<el-table v-loading="load" :data="stmDataTr.data"
height="calc(100vh - 480px)"
border :columns="stmDataTr.columns" :highlight-current-row="true" @row-dblclick="TableDblRow" :showButtonFlg="true">
<el-table-column v-for="(item, key) in stmDataTr.columns" :key="key" :label="item.label" :prop="item.prop" :min-width="item.width">
<template slot-scope="scope">
<div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
<div v-else>{{scope.row[item.prop]}}</div>
</template>
</el-table-column>
<el-table-column fixed="right" prop="op" label="操作" width="180px">
<template slot="header">
<c-col :span="11" style="text-align: center">
<span>操作</span>
</c-col>
</template>
<template slot-scope="scope">
<c-button style="margin-right: 5px" size="small" type="text" @click="handler(scope.row)">处理
</c-button>
<el-popover placement="top-start" title="历史信息" width="1200" trigger="manual" v-clickOutside="closeDisplayDialog" :ref="'popover_' + scope.row.inr">
<div style="
text-align: right;
margin-top: -30px;
margin-right: 5px;
font-size: 16px;
">
<span class="el-icon-close" style="cursor: pointer" @click="closeDetailsDialog('popover_' + scope.row.inr)"></span>
</div>
<el-table :data="trnData.data" :columns="trnData.columns" :showButtonFlg="true">
<el-table-column v-for="(item, key) in trnData.columns" :key="key" :label="item.label" :prop="item.prop" :width="item.width">
<template slot-scope="scope">
<div>{{ scope.row[item.prop] }}</div>
</template>
</el-table-column>
<el-table-column fixed="right" prop="op" label="操作" width="100px">
<template slot-scope="scope">
<c-button style="margin-left: 0" size="small" @click="display(scope.row)">快照</c-button>
</template>
</el-table-column>
</el-table>
<c-button style="margin-left: 0" size="small" type="text" slot="reference" @click="details(scope.row)">
快照
</c-button>
<c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'TRD','')">
Info
</c-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<div class="pagination-box"
style="display:block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pagination.pageIndex"
:page-sizes="[10, 20, 50, 100, 500]"
:page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
</c-col>
</div>
</el-tab-pane>
<el-tab-pane label="委托方代付" name="df">
<div style="height: 90%">
<c-col :span="24">
<el-table v-loading="load" height="calc(100vh - 480px)"
border :data="stmDataDf.data" :columns="stmDataDf.columns" :highlight-current-row="true" @row-dblclick="TableDblRow" :showButtonFlg="true">
<el-table-column v-for="(item, key) in stmDataDf.columns" :key="key" :label="item.label" :prop="item.prop" :min-width="item.width">
<template slot-scope="scope">
<div style="text-align: center" v-if="item.prop.indexOf('amt') >= 0">{{moneyFormat(scope.row[item.prop],scope.row.cur)}}</div>
<div v-else>{{scope.row[item.prop]}}</div>
</template>
</el-table-column>
<el-table-column fixed="right" prop="op" label="操作" width="180px">
<template slot="header">
<c-col :span="11" style="text-align: center">
<span>操作</span>
</c-col>
</template>
<template slot-scope="scope">
<c-button style="margin-right: 5px" size="small" type="text" @click="handler(scope.row)">处理
</c-button>
<el-popover placement="top-end" title="历史信息" width="1200"
trigger="manual"
v-clickOutside="closeDisplayDialog" :ref="'popover_' + scope.row.inr">
<div style="
text-align: right;
margin-top: -30px;
margin-right: 5px;
font-size: 16px;
">
<span class="el-icon-close" style="cursor: pointer" @click="closeDetailsDialog('popover_' + scope.row.inr)"></span>
</div>
<el-table :data="trnData.data" :columns="trnData.columns" :showButtonFlg="true">
<el-table-column v-for="(item, key) in trnData.columns" :key="key" :label="item.label" :prop="item.prop" :width="item.width">
<template slot-scope="scope">
<div>{{ scope.row[item.prop] }}</div>
</template>
</el-table-column>
<el-table-column fixed="right" prop="op" label="操作" width="100px">
<template slot-scope="scope">
<c-button style="margin-left: 0" size="small" @click="display(scope.row)">快照</c-button>
</template>
</el-table-column>
</el-table>
<c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="details(scope.row)">
快照
</c-button>
<c-button style="margin-left: 0" type="text" size="small" slot="reference" @click="toInfo(scope.row,'DFD','')">
Info
</c-button>
</el-popover>
</template>
</el-table-column>
</el-table>
<div class="pagination-box"
style="display:block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pagination.pageIndex"
:page-sizes="[10, 20, 50, 100, 500]"
:page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
</c-col>
</div>
</el-tab-pane>
</c-tabs>
</c-col>
<!-- 点击处理弹框 -->
<el-dialog
v-if="initdialog"
v-dialogDrag
:visible.sync="initdialog"
title="交易列表"
append-to-body
width="70%"
>
<m-busbtn ref="childs" :trnUrl="trnUrl" :inifrm="inifrm" :activeTab="activeTab" :model="handleModel" @onChoose="handleClick"></m-busbtn>
</el-dialog>
<!--业务锁及待处理数据弹窗-->
<m-chklap ref="lockAndPending" @changeBtn="changeBtn"></m-chklap>
</div>
</div>
</template>
<script>
import commonProcess from "~/mixin/commonProcess"
import event from "../event"
import BusNavbar from "~/components/business/BusNavbar1";
import CheckLockAndPending from "~/components/business/CheckLockAndPending";
export default {
inject: ['root'],
props: ["model", "codes"],
mixins: [event],
components: {
"m-busbtn": BusNavbar,
"m-chklap": CheckLockAndPending,},
data() {
return {
sptVisible:false,
dealSptData:[],
activeTab:'bc',
oldRefId:"",
selectedModelBc:{},
selectedModelTr:{},
handleModel:{},
queryCon:{},
trnUrl:"",
inifrm:"",
ownref: "",
initdialog: false,
dialogTableVisible: false,
load:false,
trnData: {
columns: [
{
label: "业务编号",
prop: "ownref",
width:"160"
},
{
label: "交易名称",
prop: "inifrmname",
width:"220"
},
{
label: "交易码",
prop: "inifrm",
width:"100"
},
{
label: "交易时间",
prop: "inidattim",
width:"160"
},
{
label: "状态",
prop: "relflgName",
width:"100"
},
{
label: "币种",
prop: "reloricur",
width:"100"
},
{
label: "金额",
prop: "reloriamt",
width:"150"
},
],
data: [],
},
stmData: {
columns: [
{
label: "业务编号",
prop: "ownref",
width:"180px",
},
{
label: "客户号",
prop: "dreExtkey",
width:"180px",
},
{
label: "客户名称",
prop: "dreName",
width:"180px",
},
{
label: "币种",
prop: "cur",
width:"180px",
},
{
label: "代收金额",
prop: "amt",
width:"120px",
},
{
label: "托收行名称",
prop: "rmiName",
width:"180px",
},
{
label: "日期",
prop: "credat",
width:"180px",
},
{
label: "经办柜员",
prop: "ownusr",
width:"180px",
},
],
data: [
]
},
stmDataTr: {
columns: [
{
label: "业务编号",
prop: "ownref",
width: "180px"
},
{
label: "代收编号",
prop: "pntref",
width: "180px"
},
{
label: "客户号",
prop: "fipExtkey",
width: "120px"
},
{
label: "客户名称",
prop: "fipName",
width: "250px"
},
{
label: "融资币种",
prop: "cur",
width: "120px"
},
{
label: "融资金额",
prop: "amt",
width: "120px"
},
{
label: "日期",
prop: "credat",
width: "120px"
},
{
label: "到期日",
prop: "matdat",
width: "120px"
},
{
label: "经办柜员",
prop: "ownusr",
width: "120px"
},
],
data: [
]
},
stmDataDf: {
columns: [
{
label: "业务编号",
prop: "ownref",
width: "180px"
},
{
label: "父业务编号",
prop: "pntref",
width: "180px"
},
{
label: "日期",
prop: "credat",
width: "120px"
},
{
label: "币种",
prop: "cur",
width: "120px"
},
{
label: "代付金额",
prop: "amt",
width: "120px"
},
{
label: "代付行行号",
prop: "dffExtkey",
width: "120px"
},
{
label: "代付行名称",
prop: "dffName",
width: "250px"
},
{
label: "到期日",
prop: "matdat",
width: "120px"
},
{
label: "经办柜员",
prop: "ownusr"
},
],
data: [
]
},
pagination: {
pageIndex: 1,
pageSize: 10,
total: 0,
},
handlerDataList: [],
}
},
methods: {
},
created: function () {
}
}</script>
<style>
.pagination-box {
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 10px;
background: #fff;
margin-top: 5px;
}
.btn-group-wrap {
max-height: 200px;
width: 100%;
overflow-y: auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.btn-item {
margin-bottom: 10px;
margin-right: 10px;
}
.medium_bcs {
border-radius: 5px;
}
</style>