Ptyp.vue

<template>
<div class="eibs">
            <!-- ==================左边================ -->
    <c-col :span="12" style="padding-right: 20px;">
        <c-col :span="24">
            <c-ptap :model="model" :argadr="{
            title: '收款人',
            grp: 'bodgrp',
            rol: 'drr',
        }" :disabledRef="false" :disabledExtkey="true" :disabled="true">
            </c-ptap>

            <c-ptap :model="model" :argadr="{
            title: '付款人',
            grp: 'bodgrp',
            rol: 'dre',
        }" :disabledRef="true" :disabledExtkey="true" :disabled="true" >
            </c-ptap>
        </c-col>
    </c-col>

            <!-- ============右边================= -->
            <c-col :span="12" style="padding-left: 20px;">
        <c-col :span="24">
            <c-ptap :model="model" :argadr="{
            title: '代收行',
            grp: 'bodgrp',
            rol: 'col',
        }" :disabledRef="true" :disabledExtkey="true" :disabled="true" >
            </c-ptap>
        </c-col>
        </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="其它参与方">
                    <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="单据" 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>
    </div>
</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 第三当事人", value: "TPO" },
                    { label: "TP1 第一第三当事人 .", value: "TP1" },
                    { label: "TP2 第二第三当事人", value: "TP2" },
                    { label: "TP3 第三第三当事人", value: "TP3" },
                    { label: "TP4 第四第三当事人", value: "TP4" },
                    { label: "TP5 第五第三当事人", value: "TP5" },
                    { label: "TP6 第六第三当事人", value: "TP6" },
                    { label: "TP7 第七第三当事人", value: "TP7" },
                    { label: "TP8 第八第三当事人", 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>