Ptyp.vue

<template>
    <c-row>
        <c-col :span="11">
            <c-ptap :model="model" :argadr="{
            title: 'Drawer',
            grp: 'bodgrp',
            rol: 'drr',
        }" :disabled="true" >
            </c-ptap>

            <c-ptap :model="model" :argadr="{
            title: 'Drawee',
            grp: 'bodgrp',
            rol: 'dre',
        }" :disabled="true" >
            </c-ptap>
        </c-col>
        <c-col :span="11" :offset="1">
            <c-ptap :model="model" :argadr="{
            title: 'Collecting Bank',
            grp: 'bodgrp',
            rol: 'col',
        }" :disabled="true" >
            </c-ptap>
        </c-col>

        <c-col :span="24">
            <c-table max-height="300px" style="text-align: center;" stripe :list="this.model.botp.ptsaddp.ptsaddg || []"
                :paginationShow="false" :border="true">
                <el-table-column label="Additional Parties">
                <el-table-column label="角色" width="auto" prop="rol">
                    <template slot-scope="scope">
                        <c-select v-model="scope.row.rol" :code="ptyp2">
                        </c-select>
                    </template>

                </el-table-column>
                <el-table-column label="机构实体" width="auto" prop="ptyextkey">
                    <template slot-scope="scope">
                        <c-input v-model="scope.row.ptyextkey" maxlength="12">
                        </c-input>
                    </template>
                </el-table-column>
                <el-table-column label="名称" width="auto" prop="nam">
                    <template slot-scope="scope">
                        <c-input v-model="scope.row.nam" maxlength="12">
                        </c-input>
                    </template>
                </el-table-column>
                <el-table-column label="参考地址" width="auto" prop="ref">
                    <template slot-scope="scope">
                        <c-input v-model="scope.row.ref" maxlength="12">
                        </c-input>
                    </template>
                </el-table-column>
                <el-table-column label="Document" prop="docnam" width="auto">
                    <template slot="header" slot-scope="scope">
                        <c-row>
                            <c-col :span="12">
                                <span style="line-height: 36px;">操作</span>
                            </c-col>
                            <c-col :span="12">
                                <div style="float: right;">
                                    <span class="add_del_button add_button" @click="addTableValue">+</span>
                                    <span class="add_del_button" @click="deleteTable">-</span>
                                </div>
                            </c-col>
                        </c-row>
                    </template>
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">详情
                        </el-button>
                    </template>
                </el-table-column>
                </el-table-column>
            </c-table>
        </c-col>

    </c-row>
</template>
<script>
    import Api from "~/service/Api"
    import commonProcess from "~/mixin/commonProcess";
    import CodeTable from "~/config/CodeTable"
    import Event from "~/model/Botdcr/Event"
    import Utils from "~/utils";
    import Ptap from "~/views/Public/Ptap";

    export default {
        components: { "c-ptap": Ptap },
        inject: ['root'],
        props: ["model", "codes"],
        mixins: [commonProcess],
        data() {
            return {
                newValue: {
                    rol: "",
                    ptyextkey: "",
                    nam: "",
                    ref: "",
                },
                ptyp2: [
                    { label: "TPO Third Party", value: "TPO" },
                    { label: "TP1 Third Party .", value: "TP1" },
                    { label: "TP2 Third Party", value: "TP2" },
                    { label: "TP3 Third Party", value: "TP3" },

                    { label: "TP4 Third Party", value: "TP4" },
                    { label: "TP5 Third Party", value: "TP5" },
                    { label: "TP6 Third Party", value: "TP6" },
                    { label: "TP7 Third Party", value: "TP7" },
                    { label: "TP8 Third Party", value: "TP8" },
                ],
            }
        },
        methods: {
            ...Event,
            addTableValue(index) {
                var newTableValue = Object.assign({}, this.newValue);
                const serial = Utils.generateUUID();
                newTableValue.serialNum = serial;
                this.model.botp.ptsaddp.ptsaddg.splice(index - 1, 0, newTableValue);
            },
            deleteTable(index) {
                this.model.botp.ptsaddp.ptsaddg.splice(index, 1);
            },
        },
        created: function () {
        }
    }
</script>
<style>

</style>