<template>
<div class="eibs-tab">
<div v-if="showTable">
<el-table :data="model.recgrp.tge" @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 :formatter="formatOpertype" label="明细操作类型" prop="listopertype"
width="150"></el-table-column>
<el-table-column label="名义本金" prop="notionalamt" width="150"></el-table-column>
<el-table-column label="币种" prop="currencycode" width="150"></el-table-column>
<el-table-column label="名义本金1" prop="notionalamt1" width="150"></el-table-column>
<el-table-column label="币种1" prop="currencycode1" width="150"></el-table-column>
<el-table-column label="交易日" prop="tradedate" width="150"></el-table-column>
<el-table-column label="行权日" prop="exedate" width="150"></el-table-column>
<el-table-column label="行权价" prop="exeprice" width="150"></el-table-column>
<el-table-column label="交易方向" prop="tradedirection" width="150"></el-table-column>
<el-table-column label="期权费" prop="optionamt" width="150"></el-table-column>
<el-table-column label="行权方式" prop="exeway" width="150"></el-table-column>
<el-table-column label="交割日" prop="delidate" 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="notionalamt">
<c-input-currency placeholder="请输入名义本金" v-model="formData.notionalamt"></c-input-currency>
</el-form-item>
</c-col>
</c-row>
<!-- 第2行 -->
<c-row>
<c-col :span="8">
<el-form-item label="币种" prop="currencycode">
<c-select dbCode="curtxt" placeholder="请输入币种" v-model="formData.currencycode"></c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="名义本金1" prop="notionalamt1">
<c-input-currency placeholder="请输入名义本金1" v-model="formData.notionalamt1"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="币种1" prop="currencycode1">
<c-select dbCode="curtxt" placeholder="请输入币种1" v-model="formData.currencycode1"></c-select>
</el-form-item>
</c-col>
</c-row>
<!-- 第3行 -->
<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="exedate">
<c-date-picker placeholder="请输入行权日" type="date" v-model="formData.exedate"></c-date-picker>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="行权价" prop="exeprice">
<c-input placeholder="请输入行权价" v-model="formData.exeprice"></c-input>
</el-form-item>
</c-col>
</c-row>
<!-- 第4行 -->
<c-row>
<c-col :span="8">
<el-form-item label="交易方向" prop="tradedirection">
<c-select dbCode="tradir" placeholder="请输入交易方向" v-model="formData.tradedirection"></c-select>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="期权费" prop="optionamt">
<c-input-currency placeholder="请输入期权费" v-model="formData.optionamt"></c-input-currency>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="行权方式" prop="exeway">
<c-select dbCode="exeway" placeholder="请输入行权方式" v-model="formData.exeway"></c-select>
</el-form-item>
</c-col>
</c-row>
<!-- 第5行 -->
<c-row>
<c-col :span="8">
<el-form-item label="交割日" prop="delidate">
<c-date-picker placeholder="请输入交割日" type="date" v-model="formData.delidate"></c-date-picker>
</el-form-item>
</c-col>
<!-- <c-col :span="8">
<el-form-item label="预留字段19">
<c-input placeholder="请输入预留字段19"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="预留字段20">
<c-input placeholder="请输入预留字段20"></c-input>
</el-form-item>
</c-col> -->
</c-row>
<!-- 第6行 -->
<!-- <c-row>
<c-col :span="8">
<el-form-item label="预留字段21">
<c-input placeholder="请输入预留字段21"></c-input>
</el-form-item>
</c-col>
<c-col :span="8">
<el-form-item label="预留字段22">
<c-input placeholder="请输入预留字段22"></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.tgepp.sta
seqno: "", // 明细主键 .recp.tgepp.seqno
listopertype: "", // 明细操作类型 .recp.tgepp.listopertype
notionalamt: "", // 名义本金 .recp.tgepp.notionalamt
currencycode: "", // 币种 .recp.tgepp.currencycode
notionalamt1: "", // 名义本金1 .recp.tgepp.notionalamt1
currencycode1: "", // 币种1 .recp.tgepp.currencycode1
tradedate: "", // 交易日 .recp.tgepp.tradedate
exedate: "", // 行权日 .recp.tgepp.exedate
exeway: "", // 行权方式 .recp.tgepp.exeway
exeprice: "", // 行权价 .recp.tgepp.exeprice
tradedirection: "", // 交易方向 .recp.tgepp.tradedirection
optionamt: "", // 期权费 .recp.tgepp.optionamt
delidate: "", // 交割日 .recp.tgepp.delidate
acp: "", // 确认 .recp.tgepp.acp
},
selectedRows: [],
isEdit: false,
index: -1,
};
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
},
toggleShow() {
this.showTable = !this.showTable;
},
addRow() {
this.isEdit = false;
let tge = {
sta: "", // 人行报送状态 .recp.tgepp.sta
seqno: "", // 明细主键 .recp.tgepp.seqno
listopertype: "", // 明细操作类型 .recp.tgepp.listopertype
notionalamt: "", // 名义本金 .recp.tgepp.notionalamt
currencycode: "", // 币种 .recp.tgepp.currencycode
notionalamt1: "", // 名义本金1 .recp.tgepp.notionalamt1
currencycode1: "", // 币种1 .recp.tgepp.currencycode1
tradedate: "", // 交易日 .recp.tgepp.tradedate
exedate: "", // 行权日 .recp.tgepp.exedate
exeway: "", // 行权方式 .recp.tgepp.exeway
exeprice: "", // 行权价 .recp.tgepp.exeprice
tradedirection: "", // 交易方向 .recp.tgepp.tradedirection
optionamt: "", // 期权费 .recp.tgepp.optionamt
delidate: "", // 交割日 .recp.tgepp.delidate
acp: "", // 确认 .recp.tgepp.acp
};
this.index = this.model.recgrp.tge.push(tge) - 1;
this.formData = this.model.recgrp.tge[this.index];
// this.calcRmbbop().then((rtnmsg) => {
// if (rtnmsg.respCode === SUCCESS) {
// this.formData = this.model.recgrp.tge[this.index];
// }
// });
this.toggleShow();
},
saveRow() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$set(this.model.recgrp.tge, 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.tge.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.tge.splice(index, 1);
},
deleteSelectedRows() {
if (this.selectedRows.length === 0) {
this.$message.warning('请先选择要删除的数据行');
return;
}
this.selectedRows.forEach(row => {
const index = this.model.recgrp.tge.indexOf(row);
if (index !== -1) {
this.model.recgrp.tge.splice(index, 1);
}
});
this.$message.success('成功删除选中行');
this.selectedRows = [];
},
formatOpertype(row, column, cellValue) {
if (cellValue === "1") return "新增";
if (cellValue === "2") return "变更";
},
}
};
</script>
<style>
</style>