<template>
<div class="eibs-tab">
<c-list-search @form-reset="handleReset" @form-search="formSubmit">
<template v-slot:extendsRight>
<el-button type="primary" icon="el-icon-download" size="small" @click="exportExcel">导出</el-button>
</template>
<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.seaownref" style="width: 100%">
<c-input v-model="model.infcon.seaownref" 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 :span="8">
<el-form-item label="信用证类型" prop="infcon.sealcrtyp" style="width: 100%">
<c-select v-model="model.infcon.sealcrtyp" dbCode="lcrtyp" :filterKey="['I','IT']" style="width: 100%"
placeholder="请选择信用证类型">
</c-select>
</el-form-item>
</c-col>
</el-row>
<el-row v-show="searchSlot.searchToggle">
<c-col :span="8">
<el-form-item label="客户号" prop="infcon.ptyExtkey" style="width: 100%">
<c-input v-model="model.infcon.ptyExtkey" maxlength="24" placeholder="请输入客户号"></c-input>
</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" maxlength="16" placeholder="请输入当事人参考号"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="当事人BIC/名称" prop="infcon.seapty" style="width: 100%">
<c-input v-model="model.infcon.seapty" maxlength="24" placeholder="当事人BIC编码"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="业务状态" prop="infcon.seasta" style="width: 100%">
<c-select v-model="model.infcon.seasta" style="width: 100%" dbCode="seasta" placeholder="请选择业务状态">
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="币种" prop="infcon.seacur" style="width: 100%">
<c-select v-model="model.infcon.seacur" style="width: 100%" placeholder="请选择币种" dbCode="curtxt">
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="金额区间" prop="infcon.seaamtfr" style="width: 100%">
<c-col :span="11">
<c-input v-model="model.infcon.seaamtfr" placeholder="请输入金额下限" style="width: 100%"></c-input>
</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-input v-model="model.infcon.seaamtto" placeholder="请输入金额上限" style="width: 100%"></c-input>
</c-col>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<el-form-item label="保兑指示" prop="infcon.seacnfdet" style="width: 100%">
<c-select v-model="model.infcon.seacnfdet" style="width: 100%" placeholder="请选择保兑指示">
<el-option v-for="item in codes.cnfins" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</c-select>
</el-form-item>
</c-col> -->
<!--
<c-col :span="8">
<el-form-item label="货物类型" prop="infcon.seagodcod" style="width: 100%">
<c-select v-model="model.infcon.seagodcod" dbCode="godcod" style="width: 100%" placeholder="请选择货物类型">
</c-select>
</el-form-item>
</c-col> -->
</el-row>
</el-form>
</template>
</c-list-search>
<div style="height: 90%">
<c-col :span="24">
<el-table
v-loading="load"
ref="configTable"
:data="stmData.data"
:showButtonFlg="true"
height="calc(100vh - 400px)"
size="small"
:border="true"
:highlight-current-row="true"
@sort-change="sortChange"
@row-dblclick="TableDblRow"
>
<el-table-column
v-for="(item, key) in columns"
:key="key + Math.random()"
:label="item.label"
:prop="item.prop"
:min-width="item.width"
sortable="custom"
>
<template slot-scope="scope">
<div v-if="item.prop ==='stagod'">{{getCodelabel(scope.row[item.prop],'stagod')}}</div>
<div style="text-align: right" v-else-if="item.prop.indexOf('amt') >= 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="140px">
<template slot="header">
<c-col :span="11" style="text-align: center">
<span>操作</span>
</c-col>
<c-button icon="el-icon-s-tools" @click="columnSetting(stmData.columns)"></c-button>
</template>
<template slot-scope="scope">
<c-button style="margin-left: 0" type='primary' size="small" @click="toDetail(scope.row)" slot="reference">Info
</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="total,sizes, prev, pager, next"
:total="pagination.total">
</el-pagination>
</div>
</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>
</div>
</template>
<script>
import event from '../event'
export default {
inject: ["root"],
props: ["model", "codes"],
mixins: [event],
components: {},
data() {
return {
load:false,
column:'',//排序字段
order:'',//正序倒序
selectAll: [], // 是否全选
digColumns: [], // 弹框的所有列
columnGroup: [], // 弹框选中的列
showDig: false, // 弹框的展示/隐藏
// 表格相关
stmData: {
columns: [
{
label: '业务编号',
prop: 'ownref',
width:'150px',
isShow: true
},
{
label: '信用证编号',
prop: 'issref',
width:'150px',
isShow: true
},
{
label: '币种',
prop: 'cur',
width:'80px',
isShow: true
},
{
label: '金额',
prop: 'amt',
width:'150px',
isShow: true
},
{
label: '余额',
prop: 'opnamt',
width:'150px',
isShow: true
},
{
label: '创建日期',
prop: 'credat',
width:'150px',
isShow: true
},
{
label: '到期日',
prop: 'expdat',
width:'150px',
isShow: true
},
{
label: '闭卷日期',
prop: 'clsdat',
width:'150px',
isShow: true
},
{
label: '客户号',
prop: 'benExtkey',
width:'180px',
isShow: true
},
{
label: '客户名称',
prop: 'benName',
width:'300px',
isShow: true
},
{
label: '申请人名称',
prop: 'aplName',
width:'300px',
isShow: true
},
{
label: '开证行',
prop: 'issExtkey',
width:'180px',
isShow: true
},
{
label: '远期期限',
prop: 'tenmaxday',
width:'150px',
isShow: true
},
{
label: '分行名称',
prop: 'bchName',
width:'250px',
isShow: true
},
{
label: '经办柜员',
prop: 'usrNam',
width:'150px',
isShow: true
},
],
data: [],
},
pagination: {
pageIndex: 1,
pageSize: 10,
total: 0
},
// 处理
initdialog: false,
handlerDataList: [],
currentHandleRow: {}
};
},
methods: {},
created: function () {
},
mounted(){
this.getdbCode('godcod','CN','stagod');
this.formSubmit();
},
computed: {
columns() {
return this.stmData.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>