Ptyp.vue

<template>
  <c-row>
    <c-col :span="11">
        <c-ptap
        :model="model"
        :argadr="{
            title: 'Drawer',
            grp: 'bodgrp',
            rol: 'drr',
        }"
        :disabled="true"
        :disabledRef="true"
        :disabledExtkey="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="scope.row.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="scope.row.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">
                        <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/Botame/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: "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(){
        console.log(this.root);
    }
}
</script>
<style>

</style>