<template>
<div class="eibs-tab">
<div v-if="showTable">
<el-table :data="model.recgrp.tgd" @selection-change="handleSelectionChange" style="width: 100%">
<!-- <el-table-column type="selection" width="50"></el-table-column>-->
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="换入币种" prop="incurrency" width="150"></el-table-column>
<el-table-column label="换入名义本金金额" prop="inamt" width="150"></el-table-column>
<el-table-column label="换入利率基准" prop="inrate" width="150"></el-table-column>
<el-table-column label="换入价格" prop="inprice" width="150"></el-table-column>
<el-table-column label="换出币种" prop="outcurrency" width="150"></el-table-column>
<el-table-column label="近端汇率" prop="nearrate" width="150"></el-table-column>
<el-table-column label="远端汇率" prop="disrate" width="150"></el-table-column>
<el-table-column label="换出名义本金金额" prop="outamt" width="150"></el-table-column>
<el-table-column label="换出利率基准" prop="outrate" width="150"></el-table-column>
<el-table-column label="换出价格" prop="outprice" width="150"></el-table-column>
<el-table-column label="交易日" prop="tradedate" width="150"></el-table-column>
<el-table-column label="起息日" prop="startdate" width="150"></el-table-column>
<el-table-column label="到期日" prop="enddate" width="150"></el-table-column>
<el-table-column label="付息频率" prop="frequency" width="150"></el-table-column>
<el-table-column label="利率衍生品类型" prop="ratederitype" width="150"></el-table-column>
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index,scope.row)" size="mini">编辑</el-button>
<el-button @click="handleDelete(scope.$index)" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="addRow" type="primary">添 加</el-button>
<!-- <el-button @click="deleteSelectedRows" type="primary">删 除</el-button>-->
</div>
</div>
<div v-else>
<el-form :model="formData" :rules="rules" :validate-on-rule-change="false" label-width="150px" ref="formRef"
style="width: 100%">
<!-- 第1行 -->
<c-row>
<!-- <c-col :span="8">
<el-form-item label="申报号码">
<c-input maxlength="24" placeholder="请输入申报号码"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="序号">
<c-input placeholder="请输入序号"></c-input>
</el-form-item>
</c-col> -->
<c-col :span="8">
<el-form-item label="换入币种" prop="incurrency">
<c-select dbCode="curtxt" placeholder="请输入换入币种" v-model="formData.incurrency"></c-select>
</el-form-item>
</c-col>
</c-row>
<!-- 第2行 -->
<c-row>
<c-col :span="8">
<el-form-item label="换入名义本金金额" prop="inamt">
<c-input-currency placeholder="请输入换入名义本金金额" v-model="formData.inamt"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="换入利率基准" prop="inrate">
<c-input placeholder="请输入换入利率基准" v-model="formData.inrate"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="换入价格" prop="inprice">
<c-input placeholder="请输入换入价格" v-model="formData.inprice"></c-input>
</el-form-item>
</c-col>
</c-row>
<!-- 第3行 -->
<c-row>
<c-col :span="8">
<el-form-item label="换出币种" prop="outcurrency">
<c-select dbCode="curtxt" placeholder="请输入换出币种" v-model="formData.outcurrency"></c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="近端汇率" prop="nearrate">
<c-input placeholder="请输入近端汇率" v-model="formData.nearrate"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="远端汇率" prop="disrate">
<c-input placeholder="请输入远端汇率" v-model="formData.disrate"></c-input>
</el-form-item>
</c-col>
</c-row>
<!-- 第4行 -->
<c-row>
<c-col :span="8">
<el-form-item label="换出名义本金金额" prop="outamt">
<c-input-currency placeholder="请输入换出名义本金金额" v-model="formData.outamt"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="换出利率基准" prop="outrate">
<c-input placeholder="请输入换出利率基准" v-model="formData.outrate"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="换出价格" prop="outprice">
<c-input placeholder="请输入远端交易价格" v-model="formData.outprice"></c-input>
</el-form-item>
</c-col>
</c-row>
<!-- 第5行 -->
<c-row>
<c-col :span="8">
<el-form-item label="交易日" prop="tradedate">
<c-date-picker placeholder="请输入交易日" type="date" v-model="formData.tradedate"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="起息日" prop="startdate">
<c-date-picker placeholder="请输入起息日" type="date" v-model="formData.startdate"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="到期日" prop="enddate">
<c-date-picker placeholder="请输入到期日" type="date" v-model="formData.enddate"></c-date-picker>
</el-form-item>
</c-col>
</c-row>
<!-- 第6行 -->
<c-row>
<c-col :span="8">
<el-form-item label="付息频率" prop="frequency">
<c-input placeholder="请输入付息频率" v-model="formData.frequency"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="利率衍生品类型" prop="ratederitype">
<c-select dbCode="dertxt" placeholder="请输入利率衍生品类型" v-model="formData.ratederitype"></c-select>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<el-form-item label="预留字段15">
<c-input placeholder="请输入预留字段15"></c-input>
</el-form-item>
</c-col> -->
</c-row>
<!-- 第7行 -->
<c-row>
<!-- <c-col :span="8">
<el-form-item label="预留字段16">
<c-input placeholder="请输入预留字段16"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="预留字段17">
<c-input placeholder="请输入预留字段17"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="预留字段18">
<c-input placeholder="请输入预留字段18"></c-input>
</el-form-item>
</c-col> -->
</c-row>
</el-form>
<div style="margin-top: 20px">
<el-button @click="saveRow" type="primary">保 存</el-button>
<el-button @click="cancel" type="primary">取 消</el-button>
</div>
</div>
</div>
</template>
<script>
import event from "../event";
export default {
props: ["model", "codes"],
mixins: [event],
data() {
return {
showTable: true,
formData: {
sta: "", // 人行报送状态 .recp.tgdpp.sta
seqno: "", // 明细主键 .recp.tgdpp.seqno
listopertype: "", // 明细操作类型 .recp.tgdpp.listopertype
incurrency: "", // 换入币种 .recp.tgdpp.incurrency
inamt: "", // 换入名义本金金额 .recp.tgdpp.inamt
inrate: "", // 换入利率基准 .recp.tgdpp.inrate
inprice: "", // 换入价格 .recp.tgdpp.inprice
outcurrency: "", // 换出币种 .recp.tgdpp.outcurrency
nearrate: "", // 近端汇率 .recp.tgdpp.nearrate
disrate: "", // 远端汇率 .recp.tgdpp.disrate
outamt: "", // 换出名义本金金额 .recp.tgdpp.outamt
outrate: "", // 换出利率基准 .recp.tgdpp.outrate
outprice: "", // 换出价格 .recp.tgdpp.outprice
tradate: "", // 交易日 .recp.tgdpp.tradate
startdate: "", // 起息日 .recp.tgdpp.startdate
enddate: "", // 到期日 .recp.tgdpp.enddate
frequency: "", // 付息频率 .recp.tgdpp.frequency
ratederitype: "", // 利率衍生品类型 .recp.tgdpp.ratederitype
acp: "", // 确认 .recp.tgdpp.acp
},
selectedRows: [],
isEdit: false,
index: -1,
};
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
},
toggleShow() {
this.showTable = !this.showTable;
},
addRow() {
this.isEdit = false;
let tgd = {
sta: "", // 人行报送状态 .recp.tgdpp.sta
seqno: "", // 明细主键 .recp.tgdpp.seqno
listopertype: "", // 明细操作类型 .recp.tgdpp.listopertype
incurrency: "", // 换入币种 .recp.tgdpp.incurrency
inamt: "", // 换入名义本金金额 .recp.tgdpp.inamt
inrate: "", // 换入利率基准 .recp.tgdpp.inrate
inprice: "", // 换入价格 .recp.tgdpp.inprice
outcurrency: "", // 换出币种 .recp.tgdpp.outcurrency
nearrate: "", // 近端汇率 .recp.tgdpp.nearrate
disrate: "", // 远端汇率 .recp.tgdpp.disrate
outamt: "", // 换出名义本金金额 .recp.tgdpp.outamt
outrate: "", // 换出利率基准 .recp.tgdpp.outrate
outprice: "", // 换出价格 .recp.tgdpp.outprice
tradate: "", // 交易日 .recp.tgdpp.tradate
startdate: "", // 起息日 .recp.tgdpp.startdate
enddate: "", // 到期日 .recp.tgdpp.enddate
frequency: "", // 付息频率 .recp.tgdpp.frequency
ratederitype: "", // 利率衍生品类型 .recp.tgdpp.ratederitype
acp: "", // 确认 .recp.tgdpp.acp
};
this.index = this.model.recgrp.tgd.push(tgd) - 1;
this.formData = this.model.recgrp.tgd[this.index];
// this.calcRmbbop().then((rtnmsg) => {
// if (rtnmsg.respCode === SUCCESS) {
// this.formData = this.model.recgrp.tgd[this.index];
// }
// });
this.toggleShow();
},
saveRow() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$set(this.model.recgrp.tgd, this.index, {...this.formData});
this.$refs.formRef.resetFields();
this.toggleShow();
} else {
// 前端校验失败
this.$notify({
title: '失败',
message: '校验失败',
type: 'error',
});
return false;
}
})
},
cancel() {
if (!this.isEdit)
this.model.recgrp.tgd.splice(this.index, 1);
this.toggleShow();
},
handleEdit(index, row) {
this.isEdit = true;
this.index = index;
this.formData = {...row};
this.toggleShow()
},
handleDelete(index) {
this.model.recgrp.tgd.splice(index, 1);
},
deleteSelectedRows() {
if (this.selectedRows.length === 0) {
this.$message.warning('请先选择要删除的数据行');
return;
}
this.selectedRows.forEach(row => {
const index = this.model.recgrp.tgd.indexOf(row);
if (index !== -1) {
this.model.recgrp.tgd.splice(index, 1);
}
});
this.$message.success('成功删除选中行');
this.selectedRows = [];
},
formatOpertype(row, column, cellValue) {
if (cellValue === "1") return "新增";
if (cellValue === "2") return "变更";
},
}
};
</script>
<style>
.el-form-item__label {
padding: 0 0 0 20px;
line-height: 20px !important;
display: flex;
align-items: center;
justify-content: flex-start;
}
</style>