<template>
<div class="eibs-tab">
<c-list-search @form-reset="handleReset" @form-search="formSubmit('A')">
<template v-slot="searchSlot">
<el-form class="m-table-search-form" ref="paramsForm" label-position="right" label-width="110px" size="small">
<el-row>
<c-col :span="8">
<el-form-item label="业务编号" prop="infcon.ownref" style="width: 100%">
<c-input v-model="model.infcon.ownref" maxlength="16" 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 v-if="activeTab == 'sr'" :span="8">
<el-form-item label="机构流水" prop="infcon.ztls" style="width: 100%">
<c-input v-model="model.infcon.ztls" style="width: 100%"
placeholder="请输入机构流水">
</c-input>
</el-form-item>
</c-col>
<c-col v-if="activeTab == 'ck'" :span="8">
<el-form-item label="报文状态" prop="infcon.bwztai" style="width: 100%">
<c-select v-model="model.infcon.bwztai" style="width: 100%" dbCode="smhsta" placeholder="请选择报文状态">
</c-select>
</el-form-item>
</c-col>
</el-row>
<el-row v-show="searchSlot.searchToggle">
<c-col v-if="activeTab == 'sr'" :span="8">
<el-form-item label="业务状态 " prop="infcon.sta" style="width: 100%">
<c-select v-model="model.infcon.sta" style="width: 100%" dbCode="trnsta" placeholder="请选择业务状态">
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="报文类型" prop="infcon.msgtyp" style="width: 100%">
<c-select v-model="model.infcon.msgtyp" :code="msgtyp" disabled style="width: 100%" placeholder="请选择报文类型">
</c-select>
</el-form-item>
</c-col>
</el-row>
</el-form>
</template>
</c-list-search>
<el-row style="margin-bottom: 10px;">
<el-col :span="12" style="margin-top: 10px;">
<c-button class="medium_bcs" style="margin-left: 20" size="medium" type="success" @click="exportExcel">导出Excel</c-button>
</el-col>
<el-col :span="12" style="margin-top: 10px;text-align: right">
<c-button v-if="activeTab == 'sr'" type="primary" icon="el-icon-search" size="small" @click="formSubmit('C')">Cips 查询</c-button>
<c-button v-if="activeTab == 'sr'" type="primary" icon="el-icon-search" size="small" @click="formSubmit('F')">FMT 查询</c-button>
</el-col>
</el-row>
<div style="height: 90%">
<c-col :span="24">
<el-tabs v-model="activeTab" @tab-click="handleClickTab" class="y-tabs">
<!-- @tab-click="handleClickTab" -->
<el-tab-pane label="电商汇出" name="sr">
<el-table
v-loading="load"
:data="stmData.data"
:showButtonFlg="true"
height="calc(100vh - 400px)"
size="small"
:border="true"
:highlight-current-row="true"
@sort-change="sortChange"
>
<el-table-column
v-for="(item, key) in columns"
:key="key"
:label="item.label"
:prop="item.prop"
:min-width="item.width"
sortable="custom"
>
<template slot-scope="scope">
<div style="text-align: right" v-if="item.prop.indexOf('qisuje') >= 0">{{moneyFormat(scope.row[item.prop])}}</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="relrow(scope.row)"
>退回
</c-button>
<c-button
style="margin-right: 7px"
size="small"
type="text"
@click="show(scope.row)"
>查看报文
</c-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-box">
<el-pagination
style="margin-right: 30px;"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pagination.pageIndex"
:page-sizes="[10, 20, 50, 100, 500]"
:page-size="pagination.pageSize"
layout="sizes, prev, pager, next"
:total="pagination.total">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="电商汇入" name="ck">
<el-table
v-loading="load"
:data="stmDataCK.data"
:showButtonFlg="true"
height="calc(100vh - 400px)"
size="small"
:border="true"
:highlight-current-row="true"
@sort-change="sortChange"
>
<el-table-column
v-for="(item, key) in columnsCK"
:key="key"
:label="item.label"
:prop="item.prop"
:min-width="item.width"
sortable="custom"
>
<template slot-scope="scope">
<div style="text-align: right" v-if="item.prop.indexOf('qisuje') >= 0">{{moneyFormat(scope.row[item.prop])}}</div>
<div v-else>{{scope.row[item.prop]}}</div>
</template>
</el-table-column>
</el-table>
<div class="pagination-box">
<el-pagination
style="margin-right: 30px;"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pagination.pageIndex"
:page-sizes="[10, 20, 50, 100, 500]"
:page-size="pagination.pageSize"
layout="sizes, prev, pager, next"
:total="pagination.total">
</el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</c-col>
</div>
<!-- 自定义列属性弹框 -->
<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:55px;width:150px"
v-for="item in digColumns" :key="item.prop"
: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()" style="margin-left:10px;">保存</el-button>
</span>
</el-dialog>
<el-dialog v-dialogDrag width="50%" title="退回信息" v-if="visiable" :visible.sync="visiable" :append-to-body="true" :modal-append-to-body="false" destroy-on-close :before-close="handleClose">
<span>
<el-form ref="modelForm" :model="model" :rules="polrules" >
<c-col :span="24">
<c-col :span="24">
<el-form-item label="退回附言" prop="backto.remark" >
<c-input v-model="model.backto.remark" maxlength="128" :rows="2" type="textarea" placeholder="请输入退回附言"></c-input>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="退回方式" prop="backto.backType" >
<c-select v-model="model.backto.backType" :code="backtyp" style="width:50%" placeholder="请选择退回方式"></c-select>
</el-form-item>
</c-col>
</c-col>
</el-form>
</span>
<span slot="footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleOn">确 定</el-button>
</span>
</el-dialog>
<!-- 预览弹框 -->
<el-dialog :visible.sync="previewDetailVisible" center class="preview" destroy-on-close title="电商支付信息" width="70%">
<div v-if="formatData">
<mt-view :formatData="formatData" :textContent="textContext"></mt-view>
</div>
<div v-else class="printEm">
<pre v-html="textContext"></pre>
</div>
</el-dialog>
</div>
</template>
<script>
import event from '../event'
import MtView from "~/components/business/MtView";
export default {
inject: ["root"],
props: ["model", "codes"],
mixins: [event],
components: {MtView},
data() {
return {
load:false,
column:'',//排序字段
order:'',//正序倒序
selectAll: [], // 是否全选
digColumns: [], // 弹框的所有列
columnGroup: [], // 弹框选中的列
showDig: false, // 弹框的展示/隐藏
visiable:false,//退回弹窗展示/隐藏
previewDetailVisible:false,//查看报文弹窗展示/隐藏
formatData:{},//报文内容
textContext:"",
activeTab:'sr',
typ:'',
msgtyp: [
{label: "电商汇入", value: "I"},
{label: "电商汇出", value: "C"},
],
backtyp:[
{label: "业务撤销", value: "0"},
{label: "错汇", value: "1"},
],
polrules: {
"backto.remark": [
{ required: true, message: "请先输入退回附言再操作！", trigger: "blur" }
],
"backto.backType": [
{ required: true, message: "请选择退回方式！", trigger: "blur" }
],
},
// 表格相关
stmData: {
columns: [
{
label: '机构流水',
prop: 'shlsh',
width:'450px',
isShow: true
},
{
label: '业务编号',
prop: 'ownref',
width:'150px',
isShow: true
},
{
label: '报文类型',
prop: 'mt',
width:'150px',
isShow: true
},
{
label: '创建日期',
prop: 'credat',
width:'150px',
isShow: true
},
{
label: '收报日期',
prop: 'credat',
width:'150px',
isShow: true
},
{
label: '币种',
prop: 'jiyibz',
width:'80px',
isShow: true
},
{
label: '金额',
prop: 'qisuje',
width:'150px',
isShow: true
},
{
label: '业务状态',
prop: 'sta',
width:'150px',
isShow: true
},
{
label: '打印次数',
prop: 'prtcnt',
width:'120px',
isShow: true
},
{
label: 'BIC',
prop: 'sndkey',
width:'150px',
isShow: true
},
{
label: '经办柜员',
prop: 'workusr',
width:'150px',
isShow: true
},
{
label: '收款人',
prop: 'skrmch',
width:'350px',
isShow: true
},
{
label: '收款人账号',
prop: 'skrzhh',
width:'250px',
isShow: true
},
{
label: '汇款人',
prop: 'yiwmch',
width:'350px',
isShow: true
},
{
label: '汇款人地址',
prop: 'yiwdzh',
width:'350px',
isShow: true
},
{
label: '收款人开户银行信息',
prop: 'skrnam',
width:'350px',
isShow: true
},
],
data: [],
},
stmDataCK: {
columns: [
{
label: '机构流水',
prop: 'shlsh',
width:'450px',
isShow: true
},
{
label: '业务编号',
prop: 'ownref',
width:'150px',
isShow: true
},
{
label: '报文类型',
prop: 'mt',
width:'150px',
isShow: true
},
{
label: '创建日期',
prop: 'credat',
width:'150px',
isShow: true
},
{
label: '收报日期',
prop: 'credat',
width:'150px',
isShow: true
},
{
label: '币种',
prop: 'jiyibz',
width:'80px',
isShow: true
},
{
label: '金额',
prop: 'qisuje',
width:'150px',
isShow: true
},
{
label: '业务状态',
prop: 'sta',
width:'150px',
isShow: true
},
{
label: '打印次数',
prop: 'prtcnt',
width:'120px',
isShow: true
},
{
label: 'BIC',
prop: 'sndkey',
width:'150px',
isShow: true
},
{
label: '经办柜员',
prop: 'workusr',
width:'150px',
isShow: true
},
{
label: '收款人',
prop: 'skrmch',
width:'350px',
isShow: true
},
{
label: '收款人账号',
prop: 'skrzhh',
width:'250px',
isShow: true
},
{
label: '汇款人',
prop: 'yiwmch',
width:'350px',
isShow: true
},
{
label: '汇款人地址',
prop: 'yiwdzh',
width:'350px',
isShow: true
},
{
label: '收款人开户银行信息',
prop: 'skrnam',
width:'350px',
isShow: true
},
],
data: [],
},
pagination: {
pageIndex: 1,
pageSize: 10,
total: 0
},
// 处理
initdialog: false,
handlerDataList: [],
currentHandleRow: {}
};
},
methods: {
initMsttyp(){
this.model.infcon.msgtyp = this.activeTab == 'sr' ? 'C' : this.activeTab == 'ck' ? 'I' : ''
},
},
created: function () {
},
mounted(){
this.initMsttyp()
},
computed: {
columns() {
return this.stmData.columns.filter(item => item.isShow);
},
columnsCK() {
return this.stmDataCK.columns.filter(item => item.isShow);
},
},
};
</script>
<style scope>
.m-table-search {
padding: 20px 0px 10px 0px;
}
.pagination-box {
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 10px;
background: #fff;
margin-top: 5px;
}
.el-dialog__body {
padding: 10px 5px 50px;
}
.m-table-search {
padding: 20px 0px 10px 0px;
}
.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;
}
</style>