index.vue 3.92 KB
<template>
    <el-tabs v-model="activeName" type="card" @tab-remove="removeTab">
        <el-tab-pane label="待办箱" name="dbx"><dbxInfo></dbxInfo></el-tab-pane>
<!--        <el-tab-pane-->
<!--                v-for="(item, index) in editableTabs"-->
<!--                :key="item.name"-->
<!--                :label="item.title"-->
<!--                :name="item.name"-->
<!--        >-->
<!--            {{item.content}}-->
<!--        </el-tab-pane>-->
    </el-tabs>
</template>

<script>
    import dbxInfo from "@/views/dbx/dbxinfo/index"

    export default {
        name: "",
        inject:['getRightTree','getTreeByBsm'],
        components: {dbxInfo},
        props: {},
        data() {
            return {
                activeName:'dbx',
                type:'all',
                total: 0,
                pageNo: 1,
                pageSize: 15,
                tableData: [],
                tableHeight: 0,
                queryData: {},
                editableTabs: [
                    // {
                    // title: 'Tab 1',
                    // name: '1',
                    // content: 'Tab 1 content'
                    // }
                ],
            };
        },
        created() {
        },
        mounted() {
            this.queryData.pageSize=this.pageSize;
            this.queryData.pageNo=this.pageNo;
        },
        methods: {
            changeActiveName(data){
              this.activeName = data;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.activeName;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.activeName = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
        },
        computed: {},
        watch: {},
    };
</script>
<style scoped lang="less">
    .el-tabs{
        height: calc(100% - 50px);
        /deep/.el-tabs__content{
            height: 100%;
            /deep/.el-tab-pane{
                height: 100%;
            }
            //background: #eaedf5;
            background-color: rgb(245, 250, 254);
            padding: 0;
        }
        /deep/ .el-tabs__item {
            height: 48px;
        }
        /deep/ .el-tabs__header{
            background-color: #ffffff;
            margin: 0;
            border-top: 1px solid #E4E7ED;
        }
        .main {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 0 18px 0 0;
            display: flex;
            flex-direction: column;
        //background-color: #eaedf5;
        background-color: rgb(245, 250, 254);
            .tips{
                color: #9B9B9B;
                margin-left: 2px;
                margin-bottom: 10px;
            }
            .demo-form-inline {
                margin-top: 18px;
                .moreSearchBtn {
                    background-color: #1ad6e1;
                    border-color: #1ad6e1;
                }
                .moreSearchBtn:focus,
                .moreSearchBtn:hover {
                    background-color: rgba(28, 200, 229, 0.6);
                }
            }
            .dataGrid {
                flex: 1;
                .pagination {
                    padding: 18px 0;
                }
            }
            .hbjDialog{
                /deep/ .el-dialog{
                    margin-top: 10vh!important;
                }
            }
            .btnGroup{
                margin: 20px auto 0;
                width: 230px;
            }
        }
    }
</style>