tgbp.vue

<template>
    <div class="eibs-tab">
        <el-table :data="model.recgrp.tgb" @selection-change="handleSelectionChange" ref="multipleTable"
                  style="width: 100%">
            <el-table-column :selectable="rowSelectable" type="selection" v-if="showSelection"
                             width="55"></el-table-column>
            <el-table-column label="明细主键" prop="seqno" width="100"></el-table-column>
            <el-table-column :formatter="(row) => getCodeLabel(row.listopertype, 'opertype')" label="明细操作类型"
                             prop="listopertype" width="150"></el-table-column>
            <el-table-column label="买入币种" prop="buycurrencycode" width="150"></el-table-column>
            <el-table-column label="买入金额" prop="buyamt" width="150"></el-table-column>
            <el-table-column label="卖出币种" prop="sellcurrencycode" width="150"></el-table-column>
            <el-table-column label="卖出金额" prop="sellamt" width="150"></el-table-column>
            <el-table-column label="交易日" prop="tradedate" width="150"></el-table-column>
            <el-table-column label="到期日" prop="enddate" width="150"></el-table-column>
            <el-table-column label="结算日" prop="settledate" width="150"></el-table-column>
            <el-table-column label="价格(汇率)" prop="price" width="150"></el-table-column>
            <el-table-column :formatter="(row) => getCodeLabel(row.sta, 'rmbsta')" fixed="right" label="状态" prop="sta"
                             v-if="showSta" width="100"></el-table-column>
            <el-table-column fixed="right" label="操作" v-if="showButton" width="150">
                <template slot-scope="scope">
                    <el-button :disabled="isButtonDisabled(scope.row)" @click="handleEdit(scope.$index,scope.row)"
                               size="mini">编辑
                    </el-button>
                    <el-button :disabled="isButtonDisabled(scope.row)" @click="handleDelete(scope.$index)"
                               size="mini" v-if="showDeleteButton(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px" v-show="showButton">
            <el-button :disabled="!isFlgChecked" @click="addRow" type="primary">添 加</el-button>
            <!--                <el-button @click="deleteSelectedRows" type="primary">删 除</el-button>-->
        </div>
        <el-dialog :before-close="cancel" :visible.sync="showDialog" center title="明细信息" v-dialogDrag v-if="showDialog">
            <el-form :model="formData" :rules="rules" :validate-on-rule-change="false" label-width="150px" ref="formRef"
                     style="width: 100%">

                <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="明细操作类型" prop="recp.tgb.listopertype">
                            <c-input maxlength="24" placeholder="请输入明细操作类型" v-model="listopertype"></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-row>

                <!-- 第2行 -->
                <c-row>
                    <c-col :span="8">
                        <el-form-item label="买入币种" prop="buycurrencycode">
                            <c-select-cur dbCode="curtxt" placeholder="请输入买入币种"
                                          v-model="formData.buycurrencycode"></c-select-cur>
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="买入金额" prop="buyamt">
                            <c-input-currency placeholder="请输入买入金额" v-model="formData.buyamt"></c-input-currency>
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="价格（汇率）" prop="price">
                            <c-input-currency :precision=8 maxlength="16" placeholder="请输入价格（汇率）"
                                              v-model="formData.price"></c-input-currency>
                        </el-form-item>
                    </c-col>
                </c-row>

                <!-- 第3行 -->
                <c-row>
                    <c-col :span="8">
                        <el-form-item label="卖出币种" prop="sellcurrencycode">
                            <c-select-cur dbCode="curtxt" placeholder="请输入卖出币种"
                                          v-model="formData.sellcurrencycode"></c-select-cur>
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="卖出金额" prop="sellamt">
                            <c-input-currency placeholder="请输入卖出金额" v-model="formData.sellamt"></c-input-currency>
                        </el-form-item>
                    </c-col>
                    <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-row>

                <!-- 第4行 -->
                <c-row>
                    <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-col :span="8">
                        <el-form-item label="结算日" prop="settledate">
                            <c-date-picker placeholder="请输入结算日" type="date"
                                           v-model="formData.settledate"></c-date-picker>
                        </el-form-item>
                    </c-col>
                    <!-- <c-col :span="8">
                        <el-form-item label="预留字段7">
                            <c-input placeholder="请输入预留字段7"></c-input>
                        </el-form-item>
                    </c-col> -->
                </c-row>

                <!-- 第5行 -->
                <c-row>
                    <!-- <c-col :span="8">
                        <el-form-item label="预留字段8">
                            <c-input placeholder="请输入预留字段8"></c-input>
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="预留字段9">
                            <c-input placeholder="请输入预留字段9"></c-input>
                        </el-form-item>
                    </c-col>
                    <c-col :span="8">
                        <el-form-item label="预留字段10">
                            <c-input placeholder="请输入预留字段10"></c-input>
                        </el-form-item>
                    </c-col> -->
                </c-row>

                <!-- 第6行 -->
                <!-- <c-row>
                    <c-col :span="8">
                        <el-form-item label="处理状态">
                            <c-select placeholder="请输入处理状态"></c-select>
                        </el-form-item>
                    </c-col>
                </c-row> -->
            </el-form>
            <span class="dialog-footer" slot="footer">
				<el-button @click="saveRow" type="primary">保 存</el-button>
				<el-button @click="cancel" type="primary">取 消</el-button>
		</span>
        </el-dialog>
    </div>
</template>

<script>
    import event from "../event";
    import moment from 'moment';
    import commonMixin from "../../../../../../mixin/commonMixin";
    import {checkRuleOfTGB} from "RcpmisRules"

    export default {
        props: ["model", "codes"],
        mixins: [commonMixin, event],
        data() {
            return {
                formData: {
                    sta: '',			//  人行报送状态		.recp.tgbpp.sta
                    seqno: '',			//  明细主键		.recp.tgbpp.seqno
                    buycurrencycode: '',			//  买入币种		.recp.tgbpp.buycurrencycode
                    buyamt: '',			//  买入金额		.recp.tgbpp.buyamt
                    sellcurrencycode: '',			//  卖出币种		.recp.tgbpp.sellcurrencycode
                    sellamt: '',			//  卖出金额		.recp.tgbpp.sellamt
                    tradedate: '',			//  交易日 		.recp.tgbpp.tradedate
                    enddate: '',			//  到期日 		.recp.tgbpp.enddate
                    settledate: '',			//  结算日		.recp.tgbpp.settledate
                    price: '',			//  价格(汇率) 		.recp.tgbpp.price
                },
            };
        },
        computed: {
            rules() {
							let checks = checkRuleOfTGB().call({module:"TGBAME"}).call(this,this,moment);
              return checks
                // return {
                //     buyamt: [
                //         {required: true, message: '必输项'}
                //     ],
                //     buycurrencycode: [
                //         {required: true, message: '必输项'},
                //         {
                //             validator: (rule, value, callback) => {
                //                 if (this.formData.sellcurrencycode === "CNY" && this.formData.buycurrencycode === "CNY") {
                //                     callback(new Error("买入币种和卖出币种不能同为人民币"));
                //                 } else if (this.formData.sellcurrencycode === this.formData.buycurrencycode) {
                //                     callback(new Error("买入币种和卖出币种不能相同"));
                //                 }
                //                 callback();
                //             }, trigger: 'blur'
                //         }
                //     ],
                //     price: [
                //         {required: true, message: '必输项'}
                //     ],
                //     sellamt: [
                //         {required: true, message: '必输项'}
                //     ],
                //     sellcurrencycode: [
                //         {required: true, message: '必输项'},
                //         {
                //             validator: (rule, value, callback) => {
                //                 if (this.formData.sellcurrencycode === "CNY" && this.formData.buycurrencycode === "CNY") {
                //                     callback(new Error("买入币种和卖出币种不能同为人民币"));
                //                 } else if (this.formData.sellcurrencycode === this.formData.buycurrencycode) {
                //                     callback(new Error("买入币种和卖出币种不能相同"));
                //                 }
                //                 callback();
                //             }, trigger: 'blur'
                //         }
                //     ],
                //     settledate: [
                //         {required: true, message: '必输项'},
                //         {
                //             validator: (rule, value, callback) => {
                //                 let rq = new Date(value);
                //                 let re = new Date(this.formData.tradedate);
                //                 if (moment(rq).diff(moment(re), 'days') < 0) {
                //                     return callback(new Error("结算日需大于等于交易日期!"))
                //                 } else {
                //                     callback();
                //                 }
                //             }, trigger: 'blur'
                //         }
                //     ],
                //     tradedate: [
                //         {required: true, message: '必输项'}
                //     ],
                //     enddate: [
                //         {required: true, message: '必输项'},
                //         {
                //             validator: (rule, value, callback) => {
                //                 if (value === "") {
                //                     callback(new Error("起息日不能为空"));
                //                 }
                //                 let rq = new Date(value);
                //                 let re = new Date(this.formData.tradedate);
                //                 if (moment(rq).diff(moment(re), 'days') < 0) {
                //                     return callback(new Error("到期日需大于等于交易日期!"))
                //                 } else {
                //                     callback();
                //                 }
                //                 let rl = new Date(this.formData.settledate);
                //                 if (moment(rq).diff(moment(rl), 'days') < 0) {
                //                     return callback(new Error("到期日需大于等于起息日!"))
                //                 } else {
                //                     callback();
                //                 }
                //                 callback();
                //             }, trigger: 'blur'
                //         }
                //     ]
                // }
            }
        },
        watch: {
            'model.rmbbut.flg': {
                handler(newValue) {
                    const dectyp = this.model.pblmod.dectyp;
                    const opertype = this.model.recgrp.ads.opertype;
                    if (dectyp === "D" && opertype === "1") {
                        if (newValue === "X") {
                            this.model.recgrp.tgb.forEach(row => {
                                if (row.sta !== 'D' && row.sta !== 'G' && row.acp !== 'X') {
                                    this.$refs.multipleTable.toggleRowSelection(row);
                                }
                            })
                        } else {
                            this.$refs.multipleTable.clearSelection();
                        }
                    }
                },
            },
            "model.recgrp.ads.opertype": {
                handler(newValue) {
                    const dectyp = this.model.pblmod.dectyp;
                    if (dectyp === "D") {
                        if (newValue === "3") {
                            this.model.recgrp.tgb.forEach(row => {
                                if (row.sta !== 'D' && row.sta !== 'G' && row.acp !== 'X') {
                                    this.$refs.multipleTable.toggleRowSelection(row);
                                }
                            })
                        } else {
                            this.$refs.multipleTable.clearSelection();
                        }
                    }
                }
            },
        },
        methods: {
            handleSelectionChange(selection) {
                this.selectedRows = selection;
                // 当前行被选中时，备份原始值并更新值
                selection.forEach(row => {
                    if (row.acp !== 'X') {
                        row.backupValue = row.listopertype;
                        if (row.backupValue === '2' || row.backupValue === '3' || row.sta === '8') {
                            row.listopertype = '3';
                        } else {
                            if (row.sta === 'D' || row.sta === 'G') {
                                row.listopertype = row.backupValue;
                            } else {
                                row.listopertype = '1';
                            }
                        }
                        // 添加一个标记，表示当前行已被选中
                        row.acp = 'X';
                    }
                });
                // 检查哪些行被取消选中，并恢复它们的原始值
                this.model.recgrp.tgb.forEach(row => {
                    if (!selection.includes(row) && row.acp === 'X') {
                        row.listopertype = row.backupValue;
                        // 清除选中标记
                        row.acp = '';
                    }
                })
            },
            addRow() {
                this.isEdit = false;
                let tgb = {
                    // sta: "",			//  人行报送状态		.recp.tgbpp.sta
                    seqno: this.model.recgrp.tgb.length + 1,			//  明细主键		.recp.tgbpp.seqno
                    listopertype: '1',			//  明细操作类型		.recp.tgbpp.listopertype
                    buycurrencycode: '',			//  买入币种		.recp.tgbpp.buycurrencycode
                    buyamt: '',			//  买入金额		.recp.tgbpp.buyamt
                    sellcurrencycode: '',			//  卖出币种		.recp.tgbpp.sellcurrencycode
                    sellamt: '',			//  卖出金额		.recp.tgbpp.sellamt
                    tradedate: '',			//  交易日 		.recp.tgbpp.tradedate
                    enddate: '',			//  到期日 		.recp.tgbpp.enddate
                    settledate: '',			//  结算日		.recp.tgbpp.settledate
                    price: '',			//  价格(汇率) 		.recp.tgbpp.price'
                    acp: 'X',
                };
                this.index = this.model.recgrp.tgb.push(tgb) - 1;
                this.formData = this.model.recgrp.tgb[this.index];
                this.toggleShow();
            },
            saveRow() {
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        this.$set(this.model.recgrp.tgb, 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.tgb.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.tgb.splice(index, 1);
            },
            deleteSelectedRows() {
                if (this.selectedRows.length === 0) {
                    this.$message.warning('请先选择要删除的数据行');
                    return;
                }
                this.selectedRows.forEach(row => {
                    const index = this.model.recgrp.tgb.indexOf(row);
                    if (index !== -1) {
                        this.model.recgrp.tgb.splice(index, 1);
                    }
                });
                this.$message.success('成功删除选中行');
                this.selectedRows = [];
            },
        }

    };
</script>
<style>
</style>