<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 label="通知编号" style="width: 100%">
<c-input v-model="model.seaownref" maxlength="16" placeholder="请输入通知编号"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item 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 collapse-tags multiple v-model="model.gidopentyps" style="width: 100%" :filterKey="['GJBH','GNBH']" placeholder="请选择通知类别" :clearable="true" dbCode="trntyp">
</c-select>
</el-form-item>
</c-col>
</el-row>
<!-- 可控展示区 -->
<el-row v-show="searchSlot.searchToggle">
<c-col :span="8">
<el-form-item label="客户号" style="width: 100%">
<c-input v-model="model.ptyExtkey" maxlength="16" placeholder="请输入客户号"
:disabled="seaptyNotEmpty" @change="ptyExtkeyChange"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="当事人参考号" style="width: 100%">
<c-input v-model="model.searef" maxlength="16" placeholder="请输入当事人参考号"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="当事人BIC/名称" style="width: 100%">
<c-input v-model="model.seapty" maxlength="24" placeholder="请输入当事人BIC/名称"
:disabled="ptyExtkeyNotEmpty" @change="seaptyChange"></c-input>
</el-form-item>
</c-col>
<!-- <c-col :span="24"> -->
<c-col :span="8">
<el-form-item label="保函品种" style="width: 100%">
<c-select v-model="model.seagtyp" style="width: 100%" clearable placeholder="请选择保函品种" sort="SRT" dbCode="TYPGAR" uil="CN" :filterKey="['1','2','3','4','5','6','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','O','P','Q','R','S','T','U','V','W','X','Y','Z']">
</c-select>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<el-form-item label="通知方式" style="width: 100%">
<c-select v-model="model.seapurpos" style="width: 100%" :filterKey="['ADVI','ACNF']" clearable placeholder="请选择通知方式" uil="CN" dbCode="purpos">
</c-select>
</el-form-item>
</c-col> -->
<c-col :span="8">
<el-form-item label="分离式保函" style="width: 100%">
<c-select v-model="model.fenlishi" style="width: 100%" clearable placeholder="请选择是否分离式保函">
<el-option v-for="item in fenlsh" :key="item.value" :value ="item.value" :label="item.label">
</el-option>
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="到期日" style="width: 100%">
<c-col :span="24">
<c-date-picker type="date" v-model="model.expdat" 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-col :span="8">
<c-select v-model="model.seacur" style="width: 100%" clearable placeholder="请选择币种" dbCode="curtxt">
</c-select>
</c-col>
<c-col :span="1" style="text-align: center">
<label style="display: inline-block; width: 100%"></label>
</c-col>
<c-col :span="15">
<c-input-currency v-model="model.seaamt" style="width: 100%" :maxlength="18" placeholder="请输入金额" :currency="model.seacur"></c-input-currency>
</c-col>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<el-form-item label="角色" style="width: 100%">
<c-select v-model="model.searol" style="width: 100%" placeholder="请选择角色" clearable dbCode="rolall">
</c-select>
</el-form-item>
</c-col> -->
<!-- <c-col :span="8">
<el-form-item label="业务简略信息" style="width: 100%">
<c-input v-model="model.nam" maxlength="40" placeholder="请输入业务简略信息"></c-input>
</el-form-item>
</c-col> -->
<c-col :span="8">
<el-form-item label="业务状态" style="width: 100%">
<c-select v-model="model.seasta" style="width: 100%" clearable placeholder="请选择状态" >
<el-option v-for="item in seastas" :key="item.value" :value ="item.value" :label="item.label">
</el-option>
</c-select>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<el-form-item label="处理类型" style="width: 100%">
<c-select v-model="model.hndtyp" style="width: 100%" :filterKey="['FA','FI','FR']" clearable placeholder="请选择处理类型" dbCode="hndtyp" >
</c-select>
</el-form-item>
</c-col> -->
<c-col :span="8">
<el-form-item label="电子渠道类型" style="width: 100%">
<c-select v-model="model.fromflg" style="width: 100%" :filterKey="['E','Y']" clearable placeholder="请选择电子渠道类型" dbCode="frmflg">
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="非居民客户类型" style="width: 100%">
<c-select v-model="model.ptytyp" style="width: 100%" placeholder="请选择非居民客户" >
<el-option v-for="item in ptytyps" :key="item.value" :value ="item.value" :label="item.label">
</el-option>
</c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="被保证人名称" style="width: 100%">
<c-input v-model="model.grtnam" maxlength="80" placeholder="请输入被保证人名称"></c-input>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<el-form-item label="是否已授权" style="width: 100%">
<c-select v-model="model.isauthorize" style="width: 100%" clearable placeholder="请选择是否已授权" dbCode='cxmflg'>
</c-select>
</el-form-item>
</c-col> -->
<c-col :span="24">
<c-col :span="4">
<el-form-item style="text-align: right;" class="checkbox-left">
<c-checkbox v-model="model.cmtflg" true-label='X' false-label=''>跨境人民币保函</c-checkbox>
</el-form-item>
</c-col>
<c-col :span="4">
<el-form-item style="text-align: right;margin-right: 5px;" class="checkbox-left">
<c-checkbox v-model="model.fingua" true-label='Y' false-label='' >对外担保</c-checkbox>
</el-form-item>
</c-col>
<c-col :span="4">
<el-form-item style="text-align: right;margin-right: 5px;" class="checkbox-left">
<c-checkbox v-model="model.isClaim" true-label='X' false-label=''>发生过索偿</c-checkbox>
</el-form-item>
</c-col>
<c-col :span="4">
<el-form-item style="text-align: right;margin-right: 5px;" class="checkbox-left">
<c-checkbox v-model="model.isfenlishi" true-label='X' false-label=''>分离式</c-checkbox>
</el-form-item>
</c-col>
<c-col :span="4">
<el-form-item style="text-align: right;margin-right: 5px;" class="checkbox-left">
<c-checkbox v-model="model.finfingua" true-label='Y' false-label=''>融资性保函</c-checkbox>
</el-form-item>
</c-col>
</c-col>
</el-row>
</el-form>
</template>
</c-list-search>
<el-row style="margin-bottom: 10px;">
<el-col :span="24" style="margin-top: 10px;margin-bottom: 10px;">
<c-button class="medium_bcs" style="margin-left: 20" size="medium" type="success" @click="exportExcel">导出Excel</c-button>
</el-col>
</el-row>
<el-col :span="24" style="margin-top: 10px">
<div style="height: 90%">
<c-col :span="24">
<el-table
id='infgidBSTableRef'
ref='infgidBSTableRef'
v-loading="load"
:data="tableData"
style="width:100%"
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" sortable="custom" :fixed="item.fixed" :show-overflow-tooltip="true" :min-width="item.width">
<template slot-scope="scope">
<div v-if="item.prop ==='gidfromflg'">{{getCodelabel(scope.row[item.prop],'gidfromflg')}}</div>
<div v-else-if="item.prop ==='gidgartyp'">{{getCodelabel(scope.row[item.prop],'gidgartyp')}}</div>
<div v-else-if="item.prop ==='gidhndtyp'">{{getCodelabel(scope.row[item.prop],'gidhndtyp')}}</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" label="操作" width="150px">
<template slot="header">
<c-col :span="11" style="text-align: center">
<span>操作</span>
</c-col>
<c-button icon="el-icon-s-tools" @click="columnSetting(tableColumns)"></c-button>
</template>
<template slot-scope="scope">
<c-button style="margin-left: 0" type='primary' size="small" @click="toDetail(scope.row)" slot="reference">详情
</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-col>
<!-- 自定义列属性弹框 -->
<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 v-if="handleVisible" :visible.sync="handleVisible" title="交易列表" style="padding:24px">
<el-button v-for="item in buttonsList" :key="item.value" type="primary" style="margin:3px" @click="buttonClick(item.value)">{{item.label}}</el-button>
</el-dialog>
</div>
</template>
<script>
import CodeTable from "~/config/CodeTable";
import event from "../event";
import Default from "../model/default";
export default {
inject: ["root"],
props: ["model", "codes"],
mixins:[event,Default],
components: {},
data() {
return {
seaptyNotEmpty: false,
ptyExtkeyNotEmpty: false,
isOnShow:false,
activeTab: "bs", // tabs当前展示的tab
ownref: "",
isGuarantee: "",
selectAll: [], // 是否全选
digColumns: [], // 弹框的所有列
columnGroup: [], // 弹框选中的列
showDig: false, // 弹框的展示/隐藏
ptytyps:[
{value:'NRA',label:'NRA'},
{value:'FTN',label:'FTN'},
],
seastas:[
{value:'C',label:'已结清'},
{value:'O',label:'未结清'},
],
fenlsh:[
// {value:'0',label:'非分离式'},
{value:'1',label:'融资类'},
{value:'2',label:'非融资类'},
],
tableColumns: [
{
prop: "gidownref",
label: "业务参考号",
width: 150,
isShow: true
},
{prop:"gidhndtyp",
label: "处理类型",
isShow: true,
width: 150
},
{prop:"gidgartyp",
label: "保函品种",
isShow: true,
width: 150
},
{
prop: "maxcur",
label: "币种",
width: 80,
isShow: true
},
{
prop: "maxamt",
label: "金额",
width: 150,
isShow: true
},
{prop: "maxxrfamt",
label: "等额人民币 ",
width: 150,
isShow: true
},
{
prop: "opnamt",
label: "余额",
width: 150,
isShow: true
},
{prop: "opnxrfamt",
label: "等额人民币",
width: 150,
isShow: true
},
{
prop: "orddat",
label: "通知日",
isShow: true,
width: 100
},
{
prop: "gidexpdat",
label: "效期",
isShow: true,
width: 100
},
{
prop: "clsdat",
label: "结清日期",
isShow: true,
width: 110
},
{
prop: "ptsbenextkey",
label: "客户编号",
width: 150,
isShow: true
},
{
prop: "ptsbennam",
label: "受益人名称",
width: 200,
isShow: true
},
{
prop: "ptsaplextkey",
label: "申请人编号",
width: 150,
isShow: false
},
{
prop: "ptsaplnam",
label: "申请人名称",
width: 200,
isShow: true
},
{
prop: "issExtkey",
label: "开证行",
width: 150,
isShow: true
},
{
prop: "gidfromflg",
label: "渠道类型",
isShow: true,
width: 130
},
{
prop: "gidothersno",
label: "第三方系统编号",
isShow: true,
width: 180
},
{prop: "gidiscrotra",
label: "基础贸易是/否跨境货物贸易",
isShow: true,
width: 251
},
{prop:"gidgrtnam",
label: "被担保人名称",
isShow: true,
width: 150
},
{
prop: "bchname",
label: "分行名称",
width: 150,
isShow: true
},
{
prop: "gidownusr",
label: "经办",
width: 150,
isShow: true
},
],
load: false,
tableData: [],
pagination: {
pageNum: 1,
pageSize: 10,
total: 0
},
handleVisible: false,
handleModel: {},
buttonsList: []
};
},
mounted() {
this.formSubmit();
this.getdbCode('frmflg','CN','gidfromflg');
this.getdbCode('typgar','CN','gidgartyp');
this.getdbCode('hndtyp','CN','gidhndtyp');
},
computed: {
columns() {
return this.tableColumns.filter(item => item.isShow);
},
},
methods: {
formSubmit() {
this.model.column = ''
this.model.order = ''
this.handleSearch();
},
async currentChange(num) {
this.pagination.pageNum = num;
this.handleSearch();
},
// pageSize改变
handleSizeChange(val) {
this.pagination.pageNum = 1;
this.pagination.pageSize = val;
this.handleSearch();
},
columnSetting(cols) {
this.showDig = false;
this.digColumns = [];
this.columnGroup = [];
this.selectAll = false;
// 点击自定义按钮
this.digColumns = cols;
this.showDig = true;
this.columnGroup = cols.filter(item => item.isShow).map(it => it.label);
this.selectAll = cols.length === this.columnGroup.length;
},
async handleColumnChange() {
this.selectAll = this.digColumns.length === this.columnGroup.length;
},
setAll(val) {
this.columnGroup = val ? this.digColumns.map(item => item.label) : [];
},
saveColumnEvent() {
// 保存
const list = [];
if(this.columnGroup.length < 1){
this.$notify.error({ title: '错误', message: '请至少选择1项结果列!' });
return;
}
this.digColumns.forEach(item => {
if (!this.columnGroup.includes(item.label)) {
list.push({
...item,
isShow: false
});
} else {
list.push({ ...item, isShow: true });
}
});
this.tableColumns = list;
// if (this.activeTab === "bs") {
// this.tableColumns = list;
// } else {
// this.spDefaultColumns = list;
// }
this.$nextTick(() => {
this.$refs.infgidBSTableRef.doLayout()
})
this.showDig = false;
},
buttonClick(key) {
let orInr = this.handleModel.gidinr || this.handleModel.inr;
let name =
key.toUpperCase().substring(0, 1) + key.toLowerCase().substring(1);
this.routerPush({ name, params: { orInr } });
console.log(this.$route.params.orInr,4444);
this.handleVisible=false
},
toDetail(row) {
this.routerPush({
path: "/business/gidinf",
query: { inr: row.inr,opentyp: row.opentyp,hndtyp:row.gidhndtyp,inifrm:'' }
});
},
}
};
</script>
<style scoped>
</style>