一、最初的修改页面

<el-dialog        title="修改"        :visible.sync="updateVisible"        v-if="updateVisible"        width="65%"><bill-batch-update-tabs ref="billBatchUpdateTabs" @refreshTable="refreshTable"                            @closeDialog="updateVisible = false"                            :data="row"></bill-batch-update-tabs></el-dialog>

二、创建 tabs 页面

<template> <el-tabs v-model="activeName"> 这里是两个tabs显示页面 ，可以进行自行添加

        <el-tab-pane label="票据批次信息" name="first">            <bill-batch-update ref="billBatchUpdate" @refreshTable="refresh"                               @closeDialog="closeDialog"                               :data="data"></bill-batch-update>        </el-tab-pane>

        <el-tab-pane label="票据列表" name="second">            <bill-member-batch-list :batchNo="batchNo" :billTotalAmt="billTotalAmt" :actAmt="actAmt" :intAmt="intAmt" flag="updateMember"></bill-member-batch-list>        </el-tab-pane>

    </el-tabs></template>

<script>

    import billMemberBatchList from "~/views/biz/billMember/billMemberBatchList";    import billBatchUpdate from "./billBatchUpdate";

    export default {        name: "billBatchUpdateTabs",        components: {billBatchUpdate, billMemberBatchList},        props: {            data: Object,        },        data() {            return {                activeName: 'first',                batchNo: this.data.batchNo,                billTotalAmt: this.data.billTotalAmt,                actAmt: this.data.actAmt,                intAmt: this.data.intAmt,            }        },        methods: {            tabsDialogOnSubmit(dialog) {                this.$refs[dialog].onSubmit();            },            closeDialog() {                this.$emit('closeDialog')            },            refresh() {                this.$emit('refreshTable')            }        }    }</script>

三、分别进行页面的书写

<template>    <div>        <el-card class="box-card" shadow="never">            <el-form ref="searchParams" :model="searchParams" label-width="100px" :prop="searchParams">                <el-row type="flex" class="row-bg" justify="start">                    <el-col :span="8" :offset="1">                        <el-form-item label="批次号" prop="batchNo">                            <el-input type="text" v-model="searchParams.batchNo" size="small"></el-input>                        </el-form-item>                    </el-col>                    <el-col :span="8" :offset="1">                        <el-form-item label="汇票总金额" prop="billTotalAmt">                            <el-input type="text" v-model="searchParams.billTotalAmt" size="small"></el-input>                        </el-form-item>                    </el-col>                </el-row>                <el-row type="flex" class="row-bg" justify="start">                    <el-col :span="8" :offset="1">                        <el-form-item label="实付总金额" prop="actAmt">                            <el-input type="text" v-model="searchParams.actAmt" size="small"></el-input>                        </el-form-item>                    </el-col>                    <el-col :span="8" :offset="1">                        <el-form-item label="利息总金额" prop="intAmt">                            <el-input type="text" v-model="searchParams.intAmt" size="small"></el-input>                        </el-form-item>                    </el-col>                </el-row>            </el-form>        </el-card>        <el-card class="box-card" shadow="never">            <el-row type="flex" class="row-bg" justify="start" style="padding-bottom: 10px">                <!-- 业务申请页面需要的按钮 -->                <el-button v-if="isInto" size="mini" type="success" icon="el-icon-view"                           @click="intoVisible = true">引入批次                </el-button>                <el-button v-if="isAdd" size="mini" type="success" icon="el-icon-plus" @click="addBillMemberBatchData">                    新增                </el-button>                <el-button v-if="isDelete" size="mini" type="danger" icon="el-icon-delete"                           @click="delBillMemberBatchData">删除                </el-button>                <el-button v-if="isUpdate" size="mini" type="warning" icon="el-icon-edit"                           @click="updatebillMemberBatchData">修改                </el-button>                <el-button size="mini" type="primary" icon="el-icon-view" @click="viewBillMemberBatchData">查看                </el-button>            </el-row>            <elx-table ref="table"                       :url="url"                       :columns="columns"                       :initParams="initParams"                       :searchParams="searchParams"                       :checkbox="false"            >            </elx-table>            <el-dialog                    title="用户信息选择"                    :visible.sync="intoVisible"                    v-if="intoVisible"                    append-to-body                    width="60%"                    :close-on-click-modal="false"                    v-drag>                <bill-batch-list ref="billMemberBatchAdd" @refreshTable="search"                                 @closeDialog="intoVisible = false"></bill-batch-list>            </el-dialog>            <el-dialog                    title="新增"                    :visible.sync="addVisible"                    v-if="addVisible"                    append-to-body                    width="60%"                    :close-on-click-modal="false"                    v-drag>                <bill-member-batch-add ref="billMemberBatchAdd" @refreshTable="search"                                       @closeDialog="addVisible = false" :batchNo="batchNo"></bill-member-batch-add>            </el-dialog>            <el-dialog                    title="新增票据批次信息"                    :visible.sync="addLoanVisible"                    v-if="addLoanVisible"                    append-to-body                    width="60%"                    :close-on-click-modal="false"                    v-drag>                <bill-batch-add ref="billMemberLoanAdd" @refreshTable="search"                                @closeDialog="addLoanVisible = false" :applyInfo="applyInfo"></bill-batch-add>            </el-dialog>            <el-dialog                    title="修改"                    :visible.sync="updateVisible"                    v-if="updateVisible"                    append-to-body                    width="65%">                <bill-member-batch-update-tabs ref="billMemberBatchUpdateTabs" @refreshTable="refresh" @closeDialog="updateVisible = false" :billIncome="billIncome"                                               :billIncomeList="billIncomeList"></bill-member-batch-update-tabs>            </el-dialog>            <el-dialog                    title="查看"                    :visible.sync="viewVisible"                    v-if="viewVisible"                    append-to-body                    width="60%">                <bill-member-batch-view-tabs @closeDialog="viewVisible = false"                                             :data="row"></bill-member-batch-view-tabs>            </el-dialog>        </el-card>    </div></template>

<script>    import billMemberBatchAdd from "~/views/biz/billMember/billMemberBatchAdd";    import billMemberBatchUpdateTabs from "~/views/biz/billMember/billMemberBatchUpdateTabs";    import billMemberBatchViewTabs from "~/views/biz/billMember/billMemberBatchViewTabs";    import BillBatchAdd from "~/views/biz/bill/billBatchAdd";    import BillBatchList from "~/views/biz/bill/billBatchList";

    export default {        name: "billMemberBatchList",        components: {            BillBatchList,            BillBatchAdd,            billMemberBatchAdd,            billMemberBatchUpdateTabs,            billMemberBatchViewTabs        },        props: {            batchNo: String,            billTotalAmt: String,            actAmt: String,            intAmt: String,            flag: String,

            //业务申请页面传过来的数据            operate: String,            applyInfo: Object,            //合同页面传过来的数据            params: Object,        },        created() {            if (this.flag === "apply") {                this.initParams = {"applyNo": this.applyInfo.applyNo};                this.url = "/loan/billBatchAction.do?_md=selectBillDetailByApplyNo";                const _this = this;                this.$http.post("/loan/billBatchAction.do?_md=selectBillBatchByApplyNo",                    {"applyNo": this.applyInfo.applyNo}).then(response => {                    if (response.data) {                        _this.isInto = false;                        _this.isAdd = false;                        _this.predDiscDate = response.data.predDiscDate;                        _this.applyBatchNo = response.data.batchNo;                    }                });            } else if (this.flag === "cont") {                this.initParams = {"contNo": this.params.contNo};                this.url = "/loan/billBatchAction.do?_md=selectBillDetailByContNo";                const _this = this;                this.$http.post("/loan/billBatchAction.do?_md=selectBillBatchByContNo",                    {"contNo": this.params.contNo}).then(response => {                    if (response.data) {                        _this.isInto = false;                        _this.isAdd = false;                        _this.isUpdate = false;                        _this.predDiscDate = response.data.predDiscDate;                        _this.applyBatchNo = response.data.batchNo;                    }                });            } else {                this.isInto = false;                this.url = "/loan/billDetailAction.do?_md=selectBillDetailByBatchNo";            }        },        data() {            return {                //业务申请所需变量                isInto: true,                isAdd: true,                isUpdate: true,                isDelete: true,                addLoanVisible: false,

                url: "",                addUrl: "/loan/billDetailAction.do?_md=insertBillDetail",                intoVisible: false,                addVisible: false,                deleteVisible: false,                updateVisible: false,                viewVisible: false,                billIncome: {},                initParams: {},                billIncomeList: {},                row: {},                searchParams: {                    batchNo: this.batchNo, billTotalAmt: this.billTotalAmt, actAmt: this.actAmt, intAmt: this.intAmt                },                columns: [{                    prop: "billNo",                    label: "票据号"                }, {                    prop: "billType",                    label: "票据种类",                    selectKey: 'STD_DRFT_TYPE'                }, {                    prop: "ccy",                    label: "币种",                    selectKey: 'STD_ZX_CUR_TYPE'                }, {                    prop: "billAmt",                    label: "票面金额"                }, {                    prop: "signAddr",                    label: "汇票签发地",                    selectKey: 'STD_ZB_DRFT_ADDR'                }, {                    prop: "oppBankName",                    label: "是否电子汇票",                    selectKey: 'STD_ZX_YES_NO'                }, {                    prop: "billIssueDate",                    label: "出票日期"                }, {                    prop: "billEndDate",                    label: "票据到期日期",                    selectKey: 'STD_ZB_GROUP_TYPE'                }, {                    prop: "payee",                    label: "收款人名称"                }, {                    prop: "sts",                    label: "票据状态",                    selectKey: 'STD_ZB_DRFT_STATUS'                }],            }        },        methods: {            getSelectRows() {                return this.$refs.table.getSelectedRows();            },            search() {                this.$refs.table.search();            },            resetForm() {                this.$refs.searchParams.resetFields();            },            refresh() {                this.$refs.table.refresh();            },            addBillMemberBatchData() {                if (this.flag === "apply") {                    this.addLoanVisible = true                } else {                    this.addVisible = true                }            },            delBillMemberBatchData() {                const rows = this.getSelectRows();                const _this = this;                if (rows.length !== 1) {                    this.$error("请选择一行数据");                    return;                }                const billNo = rows[0].billNo;                this.$http.post("/loan/billDetailAction.do?_md=deleteBillDetailByPrimaryKey",                    {"billNo": billNo}).then(function (response) {                    if (response.success) {                        _this.$success(response.msg);                        _this.$refs.table.refresh();                    }                }).catch(function (error) {                    _this.$error(error.message);                })            },            updatebillMemberBatchData() {                const rows = this.getSelectRows();                if (rows.length !== 1) {                    this.$error("请选择一行数据");                    return;                }                this.billIncomeList = {...rows[0]};

                this.$http.post("/loan/billIncomeAction.do?_md=selectBillIncomeByPrimaryKey", {"billNo": this.billIncomeList.billNo}).then((response) => {                    if (response.success) {                        this.billIncome = response.data;                        // this.row = rows;                        this.updateVisible = true;                    } else {                        this.$error(response.msg);                    }                }).catch((error) => {                    this.$error(error.message);                });            },            viewBillMemberBatchData() {                const rows = this.getSelectRows();                const _this = this;                if (rows.length !== 1) {                    _this.$error("请选择一行数据");                } else {                    _this.row = {...rows[0]};                    _this.viewVisible = true;                }            },            dialogOnSubmit(dialog) {                this.$refs[dialog].onSubmit();            }        }    }</script>