index.vue

<template>
    <!-- 顶部按钮区 -->
    <!-- <div class="topBtnGroup">
            <c-button size="small" type="primary" v-show="showflg == true" icon="el-icon-arrow-right"
                @click="showflg=false">收起</c-button>
            <c-button size="small" type="primary" v-show="showflg == false" icon="el-icon-arrow-left"
                @click="showflg=true">展开</c-button>

            <div class="btnGroup" v-show="showflg == true && tabVal == 'infsea'">
                <c-button size="small" type="primary">导Excel</c-button>
                <c-button size="small" type="primary" icon="el-icon-search">Search</c-button>
                <c-button size="small" type="primary">Display</c-button>
                <c-button size="small" type="primary">Use</c-button>
                <c-button size="small" type="primary">Clear</c-button>
                <c-button size="small" type="primary">Exit</c-button>
            </div>

            <div class="btnGroup" v-show="showflg == true && (tabVal != 'infsea')">
                <c-button size="small" type="primary" icon="el-icon-search">Search</c-button>
                <el-button-group>
                    <c-button size="small" type="primary" icon="el-icon-arrow-left"></c-button>
                    <c-button size="small" type="primary" icon="el-icon-arrow-right"></c-button>
                </el-button-group>
                <c-button size="small" type="primary">Print</c-button>
                <c-button size="small" type="primary">Use</c-button>
                <c-button size="small" type="primary">Loginfo</c-button>
                <c-button size="small" type="primary">Exit</c-button>
            </div>

        </div> -->

    <div class="eContainer">
        <el-form :model="model" :rules="rules" ref="modelForm" label-width="150px" label-position="right" size="small"
            :validate-on-rule-change="false">
            <m-infsea v-show="!showPanel" :model="model" :codes="codes" @updateShowPanel="updateShowPanel($event)"/>
            <c-tabs v-show="showPanel" v-model="tabVal" ref="elment" type="card" @tab-click="tabClick">

                <!-- <el-tab-pane label="查询信息" name="infsea">
                    <c-content :height="120">
                    <m-infsea :model="model" :codes="codes" />
                    </c-content>
                </el-tab-pane> -->

                <el-tab-pane label="汇款信息" name="infconp">
                    <c-content>
                    <m-infconp :model="model" :codes="codes" />
                    </c-content>
                </el-tab-pane>

                <el-tab-pane label="Completion" name="coninfp">
                    <m-coninfp :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="Transactions" name="trnpan">
                    <m-trnpan :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="CBS Info" name="cbsinfp">
                    <m-cbsinfp :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="CBE Info" name="cbeinfp">
                    <m-cbeinfp :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="FEP/FCP Info" name="fepinfp">
                <c-content>
                    <m-fepinfp :model="model" :codes="codes" />
                </c-content>
                </el-tab-pane>

                <el-tab-pane label="SEP Info" name="sepinfp">
                    <m-sepinfp :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="分录信息" name="gleinfp">
                    <m-gleinfp :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="报文信息" name="smhinfp">
                    <m-smhinfp :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="经办信息" name="peninfp">
                    <m-peninfp :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="Engagement" name="liainfp">
                    <m-liainfp :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="Print" name="prtpan">
                    <m-prtpan :model="model" :codes="codes" />
                </el-tab-pane>

                <el-tab-pane label="Order" name="ordpan">
                    <m-ordpan :model="model" :codes="codes" />
                </el-tab-pane>
            </c-tabs>
        </el-form>
        <div>
     <c-button
          v-show="showPanel"
          style="margin-left: 90%;bottom: 10%;position:sticky"
          size="small"
          @click="showPanel=false">
          返回
     </c-button>
  </div>
    </div>
</template>
<script>
    import Api from "~/service/Api"
    import CodeTable from "~/config/CodeTable"
    import Infcpd from "~/model/Infcpd"
    import commonProcess from "~/mixin/commonProcess"
    import Check from "~/model/Infcpd/Check"
    import Default from "~/model/Infcpd/Default"
    import Pattern from "~/model/Infcpd/Pattern"
    import Infsea from "./Infsea"
    import Infconp from "./Infconp"
    // import Coninfp from "./Coninfp"
    import Trnpan from "./Trnpan"
    import Cbsinfp from "./Cbsinfp"
    import Cbeinfp from "./Cbeinfp"
    import Fepinfp from "./Fepinfp"
    import Sepinfp from "./Sepinfp"
    import Gleinfp from "./Gleinfp"
    import Smhinfp from "./Smhinfp"
    import Peninfp from "./Peninfp"
    import Liainfp from "./Liainfp"
    import Prtpan from "./Prtpan"
    import Ordpan from "./Ordpan"

    import Coninfp from "~/views/Public/Coninfp";


    export default {
        name: 'Infcpd',
        components: {
            "m-infsea": Infsea,
            "m-infconp": Infconp,
            "m-coninfp": Coninfp,
            "m-trnpan": Trnpan,
            "m-cbsinfp": Cbsinfp,
            "m-cbeinfp": Cbeinfp,
            "m-fepinfp": Fepinfp,
            "m-sepinfp": Sepinfp,
            "m-gleinfp": Gleinfp,
            "m-smhinfp": Smhinfp,
            "m-peninfp": Peninfp,
            "m-liainfp": Liainfp,
            "m-prtpan": Prtpan,
            "m-ordpan": Ordpan,
        },
        provide() {
            return {
                root: this
            }
        },
        mixins: [commonProcess],    // 里面包含了Default、Check等的公共处理
        data() {
            return {
                tabVal: "",
                trnName: "infcpd",
                model: new Infcpd().data,
                checkRules: Check,
                defaultRules: Default,
                pattern: Pattern,
                rules: null,
                codes: { ...CodeTable },
                showflg: true,
                showPanel:false,
            }
        },
        methods: {
            tabClick() {
            },
        async updateShowPanel(value) {
            this.showPanel = value;
             if(value){
            this.tabVal = "infconp"  
            }else{
            this.tabVal = ""
          }
        },
        },
        created: async function () {
            console.log("进入infcpd交易");
            let rtnmsg = await this.init({})
            if (rtnmsg.respCode == SUCCESS) {
                this.updateModel(rtnmsg.data);
            }
            else {
                this.$notify.error({ title: '错误', message: '服务请求失败！' });
            }
        }
    }
</script>
<style>
    .infcpdTab .el-tabs__content {
        padding: 10px 0 10px 0;
    }

    .infcpdTab .infrow {
        padding: 0 10px 0 10px;
    }
    .m-table-search-form {
  position: flex;
  flex-direction: row;
}
.m-table-search-form .el-form-item__content {
  width: calc(100% - 110px);
}
</style>