tgdp.vue

<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>