Setpan.vue

<template>
    <c-row class="eibs-tab">
        <!-- ====================顶部==================== -->
        <c-col :span="6" style="margin-left:9px">
            <el-form-item label="参考号" label-width="50px">
                <c-input
                    v-model="model.setmod.ref"
                    maxlength="16"
                    :readonly="true"
                    placeholder="请输入our reference"
                ></c-input>
            </el-form-item>
        </c-col>
        <c-col :span="4">
            <el-form-item label="结算金额" label-width="100px">
                <c-input
                    v-model="model.setmod.doccur"
                    style="width: 100%"
                    placeholder="CNY"
                    :readonly="true"
                    
                ></c-input>
            </el-form-item>
        </c-col>

        <c-col :span="6">
            <el-form-item label="" label-width="7px">
                <c-input
                    v-model="model.setmod.docamt"
                    :readonly="true"
                    placeholder="请输入document amount"
                ></c-input>
            </el-form-item>
        </c-col>

        <c-col :span="5">
            <el-form-item label="类型" label-width="100px">
                <c-select
                    v-model="model.setmod.dspflg"
                    disabled
                    style="width: 100%"
                    placeholder="请选择Type of settlement"
                >
                    <el-option
                        v-for="item in codes.dspflg"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </c-select>
            </el-form-item>
        </c-col>
        <c-col :span="2" style="text-align:right">
            <!-- <el-form-item label="" label-width="20px"> -->
                <c-button style="margin-right:10px" size="small" type="primary" @click="onSetmodDet">
                    详情
                </c-button>
            <!-- </el-form-item> -->
        </c-col>

        <!--
        <c-col :span="12">
        <el-form-item label="自贸区账号">
            <c-input  v-model="model.setmod.zmqacc" maxlength="20"  placeholder="请输入自贸区账号"></c-input>
        </el-form-item>
       </c-col>    
       <c-col :span="6" style="text-align:center">
	    <c-checkbox v-model="model.setmod.xreflg">Recalculate Rates</c-checkbox>
       </c-col> 
       -->
       <c-col :span="23" style="margin-left:9px;height:25px">
           <el-divider></el-divider>
       </c-col>
        <!-- ==============中部表格===================== -->

        <c-col :span="23" style="height:24px;margin-left:9px">
            <el-form-item
                class="formItemLabel"
                label="Foreign Commission/Charges:"
                label-width="300px"
            >
            </el-form-item>
        </c-col>
        
        <c-col :span="23" style="margin-left:9px">
            <c-table
                style="text-align: center"
                :list="model.setmod.setfog.setfol"
                :paginationShow="false"
                :border="true"
            >
                <el-table-column label="Payer" prop="ptydbt" width="101px">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.ptydbt">
                            <el-option
                                        v-for="item in codes.ptydbt"
                                        :key="item.value"
                                        :label="item.value"
                                        :value="item.value"
                                    >
                                        <span style="float: left">{{ item.label }}</span>
                                    </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Payee" width="101px">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.payee">
                            <el-option
                                v-for="item in codes.payee"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                            >
                            <span style="float: left">{{ item.label }}</span>
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Source" prop="src" width="70px">
                </el-table-column>
                <el-table-column label="Disp" prop="dsp" width="76px">
                </el-table-column>
                <el-table-column
                    label="Text for Payer"
                    prop="txtdbt"
                    width="auto"
                >
                </el-table-column>
                <el-table-column
                    label="Text for Payee"
                    prop="txtpay"
                    width="auto"
                >
                </el-table-column>
                <el-table-column label="Currency" prop="cur" width="93px">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.cur">
                            <el-option
                                v-for="item in codes.cur"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Amount" prop="amt" width="150px">
                </el-table-column>
                <el-table-column label="" prop="det" width="80px" fixed="right">
                    <template slot-scope="scope" slot="header">
                        <el-button
                            circle
                            style="padding:4px"
                            class="el-icon-plus"
                            size="mini"
                            @click="addRow(scope)"
                        >
                        </el-button>
                        <el-button
                            style="padding:4px"
                            circle
                            class="el-icon-minus"
                            size="mini"
                            @click="removeRow(scope)"
                        >
                        </el-button>
                    </template>
                    <template slot-scope="scoped">
                        <el-button
                            style="margin-left:0"
                            size="small"
                            type="primary"
                            @click="detail1(scoped.$index, scoped.row)"
                            >详情</el-button
                        >
                    </template>
                </el-table-column>
            </c-table>
        </c-col>
        <c-col>
            <el-dialog :visible.sync="dialogVisible" center>
                <c-col>
                    <el-form :model="dialog" label-width="200px">
                        <c-col :span="16" >
                            <el-form-item label="收款人">
                                <el-select v-model="dialog.payee" style="width: 100%">
                                    <el-option
                                        v-for="item in codes.payee"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </c-col>
                        <c-col :span="16">
                            <el-form-item label="收款人摘要">
                                <c-input v-model="dialog.txtpay" style="width: 100%"/>
                            </el-form-item>
                        </c-col>
                        <c-col :span="16">
                            <el-form-item label="付款人">
                                <el-select v-model="dialog.ptydbt" style="width: 100%">
                                    <el-option
                                        v-for="item in codes.ptydbt"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </c-col>
                        <c-col :span="16">
                            <el-form-item label="付款人摘要">
                                <c-input v-model="dialog.txtdbp" style="width: 100%"/>
                            </el-form-item>
                        </c-col>
                        <c-col :span="16">
                            <c-col :span="18">
                                <el-form-item label="费用">
                                    <c-select v-model="dialog.cur" style="width: 100%">
                                        <el-option
                                            v-for="item in codes.cur"
                                            :key="item.value"
                                            :labelF="item.label"
                                            :value="item.value"
                                        />
                                    </c-select>
                                </el-form-item>
                            </c-col>
                            <c-col :span="6">
                                <el-form-item label="" label-width="20px">
                                    <c-input v-model="dialog.amt" style="width: 100%"/>
                                </el-form-item>
                            </c-col>
                        </c-col>
                        <c-col :span="16">
                            <el-form-item>
                                <c-checkbox v-model="dialog.forflg">CG00005</c-checkbox>
                            </el-form-item>
                        </c-col>
                    </el-form>
                </c-col>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveDialog">确 定</el-button>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                </span>
            </el-dialog>
        </c-col>
        <!--=================== Own Commission/Charges:================== -->
        <c-col :span="23" style="margin-left:9px;height:24px;margin-top:25px">
            <el-form-item class="formItemLabel" label="Own Commission/Charges:" label-width="200px"> </el-form-item>
        </c-col>
        <c-col :span="23" style="margin-left:9px">
            <c-table
                style="text-align: center"
                :list="model.setmod.setfeg.setfel"
                :paginationShow="false"
                :border="true"
            >
                <el-table-column label="Role" width="101px">
                    <template #default="scope">
                        <el-select v-model="scope.row.rol">
                            <el-option
                                v-for="item in codes.setfelRol"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                            >
                            <span style="float: left">{{ item.label }}</span>
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Code" prop="feecod" width="101px">
                </el-table-column>
                <el-table-column label="Source" prop="src" width="70px">
                </el-table-column>
                <el-table-column label="Disp" width="76px">
                    <template #default="scope">
                        <el-select v-model="scope.row.dsp" @change="dispDefault">
                            <el-option
                                v-for="item in codes.setfeldsp"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                            >
                            <span style="float: left">{{ item.label }}</span>
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Units" prop="unt" width="70px">
                </el-table-column>
                <el-table-column
                    label="Long Fee Text"
                    prop="feetxtinf"
                    width="auto"
                >
                </el-table-column>
                <el-table-column label="Currency" prop="cur" width="100px">
                </el-table-column>
                <el-table-column
                    label="Original Amount"
                    prop="ogiamt"
                    width="150px"
                >
                </el-table-column>
                <el-table-column label="Fee Amount" prop="amt" width="150px">
                </el-table-column>
                <el-table-column label="" prop="det" width="80px" fixed="right">
                     <template slot-scope="scope" slot="header">
                        <el-button
                            circle
                            style="padding:4px"
                            class="el-icon-plus"
                            size="mini"
                            @click="addRow(scope)"
                        >
                        </el-button>
                        <el-button
                            style="padding:4px"
                            circle
                            class="el-icon-minus"
                            size="mini"
                            @click="removeRow(scope)"
                        >
                        </el-button>
                    </template>
                    <template slot-scope="scoped">
                        <el-button
                            style="margin-left:0"
                            size="small"
                            type="primary"
                            @click="detail2(scoped.$index, scoped.row)"
                            >详情</el-button
                        >
                    </template>
                </el-table-column>
            </c-table>
        </c-col>
        <setpan-dialog ref="setpanDialog" :model="model" :idx="index" :codes="codes"/>
        <c-col :span="23" style="margin-left:9px;height:24px;margin-top:25px">
            <el-form-item class="formItemLabel" label="Settlement:" label-width="200px">
            </el-form-item>
        </c-col>
        <c-col :span="23" style="margin-left: 9px">
            <c-table
                style="text-align: center"
                :list="model.setmod.setglg.setgll"
                :paginationShow="false"
                :border="true"
            >
                <el-table-column label="Mod" prop="modflg" width="46px">
                </el-table-column>
                <el-table-column label="Role" prop="rol" width="55px">
                </el-table-column>
                <el-table-column label="in" prop="acccur" width="101px">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.acccur">
                            <el-option
                                v-for="item in codes.acccur"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                            >
                            <span style="float: left">{{ item.label }}</span>
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column
                    label="Amount Paid"
                    prop="fmtaccamt"
                    width="120px"
                >
                </el-table-column>
                <el-table-column label="Disp." width="101px">
                    <template #default="scope">
                        <el-select v-model="scope.row.dsp">
                            <el-option
                                v-for="item in codes.setglldsp"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value"
                            >
                            <span style="float: left">{{ item.value }}</span>
                            <span style="float: left;margin-left:20px">{{ item.label }}</span>
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="Account" prop="act" width="auto">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.act">
                            <el-option
                                v-for="item in scope.act"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="C" prop="debcdtflg" width="45px">
                </el-table-column>
                <el-table-column label="Curr." prop="cur" width="55px">
                </el-table-column>
                <el-table-column
                    label="Original Amount"
                    prop="fmtamt"
                    width="150px"
                >
                </el-table-column>
                <el-table-column label="Rate" prop="rat" width="120px">
                </el-table-column>
                <el-table-column label="操作" width="135px" fixed="right"> 
                    <template>
                        <el-button
                            style="margin-left:0"
                            size="small"
                            type="primary"
                            >Get</el-button
                        >
                        <el-button
                            style="margin-left:0"
                            size="small"
                            type="primary"
                            >详情</el-button
                        >
                    </template>
                </el-table-column>
                <!-- <el-table-column label="" width="80px">
                    <template>
                        <el-button
                            style="margin-left:0"
                            size="small"
                            type="primary"
                            >详情</el-button
                        >
                    </template> </el-table-column> -->
            </c-table>
        </c-col>

        <!-- <c-col :span="12" style="margin-bottom: 10px;">
            <span v-text="model.setmod.retmsg" data-path=".setmod.retmsg">
            </span>
        </c-col> -->

        <!-- <c-col :span="12" style="margin-bottom: 10px;">
            <span v-text="model.setmod.zmqacclab" data-path=".setmod.zmqacclab">
            </span>
        </c-col> -->

        <!-- <c-col :span="12" style="margin-bottom: 10px;">
            <span
                v-text="model.setmod.setglg.labdspflg"
                data-path=".setmod.setglg.labdspflg"
            >
            </span>
        </c-col> -->
    </c-row>
</template>
<script>
import Event from "~/model/Ditopn/Event";
import CommonProcess from "~/mixin/CommonProcess";
import SetpanDialog from "./SetpanDialog.vue";
import Api from "~/service/Api"
import Utils from "~/utils/index"

export default {
    inject: ['root'],
    components: { SetpanDialog },
    props: ["model", "codes"],
    mixins: [CommonProcess],
    data() {
        return {
            dialogVisible: false,
            dialog: {
                payee: "",
                ptydbt: "",
                txtpay: "",
                txtdbt: "",
                CG00005: "",
            },
            dialog2: {
                feetxtinf:"",
                feetxt:"",
            },
            index: 0,
        };
    },
    methods: {
        ...Event,
        //第一个表格
        addRow() {
            let newRow = { ...dialog };
            this.model.setmod.setfog.setfol.push(newRow);
        },
        removeRow() {
            this.model.setmod.setfog.setfol.pop();
        },
        saveDialog() {
            this.dialogVisible = false;
            this.model.setmod.setfog.setfol[this.index] = this.dialog;
        },
        // 第二个表格
        detail1(index, row) {
            this.executeDefault("setfel/det").then(res=>{
                this.dialogVisible = true;
                this.dialog = row;
                this.index = index;
            })
            
        },
        dispDefault(){
            this.executeDefault("mac").then(res=>{
                Utils.copyValueFromVO(this.model, res.data)
            })
            
        },
        // 第三个表格
        detail2(index, row) {
            const that = this;
            const rule = "setmod.setfeg.setfel("+(index+1)+").det";
            that.executeRule(rule).then(res=>{
                that.$refs.setpanDialog.visiable = true;
                that.$refs.setpanDialog.formData = Object.assign({}, that.model.setmod.setfeg.setfel[index]);
                that.index = index;
                that.dialog2 = row
            })
        },
    },
    created: function () {},
};
</script>
<style scoped>
.el-col >>> .el-divider--horizontal {
    margin-top: 10px;
}
.formItemLabel >>> .el-form-item__label{
    text-align: left;
    font-weight:bold;
}
</style>