index.vue

<template>
    <div class="eContainer-search">
        <el-form :model="model" :rules="rules" ref="modelForm" label-width="120px" 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">
            </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"


    export default {
        name: 'Infcpd',
        components: {
            "m-infsea": Infsea,
        },
        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>