Ptyp.vue

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

            <c-ptap :model="model" :argadr="{
            title: 'Drawee',
            grp: 'bodgrp',
            rol: 'dre',
        }" :disabledRef="true" :disabledExtkey="true" :disabled="true" >
            </c-ptap>
        </c-col>
        <c-col :span="11" :offset="1">
            <c-ptap :model="model" :argadr="{
            title: 'Collecting Bank',
            grp: 'bodgrp',
            rol: 'col',
        }" :disabledRef="true" :disabledExtkey="true" :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-col :span="24">
            <c-edit-table :model="model" v-bind="ptsaddg">
                <el-table-column label="操作" text-align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">详情
                        </el-button>
                    </template>
                </el-table-column>
            </c-edit-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 {
                // ptsaddg: {
                //     columns: [
                //         {
                //             title: "角色",
                //             width: "120px",
                //             dataIndex: "rol",
                //             show: "select",
                //             code: [
                //                 { label: "1st Third Party", value: "TP1" },
                //                 { label: "2nd Third Party", value: "TP2" },
                //             ]
                //         },
                //         {
                //             title: "机构实体",
                //             width: "180px",
                //             dataIndex: "ptyextkey",
                //             show: "input",
                //         },
                //         {
                //             title: "名称",
                //             width: "300px",
                //             dataIndex: "nam",
                //         },
                //         {
                //             title: "参考地址",
                //             width: "300px",
                //             dataIndex: "ref",
                //         },
                //     ],
                //     urls: "botp.ptsaddp.ptsaddg",
                // },

                newValue: {
                    rol:"",
                    ptyextkey:"",
                    nam:"",
                    ref:"",
                },
                ptyp2: [
                    { label: "TP0 Third Party", value: "TP0" },
                    { label: "TP1 1st Third Party", value: "TP1" },
                    { label: "TP2 2nd Third Party", value: "TP2" },
                    { label: "TP3 3rd Third Party", value: "TP3" },
                    { label: "TP4 4th Third Party", value: "TP4" },
                    { label: "TP5 5th Third Party", value: "TP5" },
                    { label: "TP6 6th Third Party", value: "TP6" },
                    { label: "TP7 7th Third Party", value: "TP7" },
                    { label: "TP8 8th 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 () {
            onsole.log(this.root);
        }
    }
</script>
<style>

</style>