spfm-market-front/src/pages/main/documentCollection/home.vue

<template>
    <div class="inner-container">
        <div class="tabBox">
            <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick" type="card">
                <el-tab-pane v-for="(item, index) in routerList" :key="index" :name="item.path" :label="item.label">
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="infoBox">
            <router-view />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeName: "",
            showList: [],
            routerList: [
                { label: "我接收的", path: "/documentCollectionApproval", name: "incomeExcelTemplate" },
                { label: "我发起的", path: "/documentCollectionApprovalIssuedCollect", name: "incomeExcelView" },
                { label: "模板管理", path: "/documentCollectionApprovalIssuedMoud", name: "incomeExcelIssued" },
                
                // { label: "收入附件收集", path: "/incomeExcelAppendixs", name: "incomeExcelAppendix" }
            ],
        };
    },
    computed: {
        menuList: function () {
            let arr = [];
            this.routerList.map((item) => {
                this.showList.map((row) => {
                    if (item.path == row) {
                        arr.push(item);
                    }
                });
            });
            return arr;
        },
    },
    methods: {
        handleClick(val) {
            if (this.$route.path != this.activeName) {
                console.log(this.activeName);
                this.$router.push(this.activeName);
            }
        },
    },
    mounted() {
        this.activeName = this.$route.path;
    },
    created() {
        JSON.parse(sessionStorage.childrenMenus).map((item) => {
            this.showList.push(item.jspUrl);
        });
    },
    watch: {
        $route(to, from) {
            this.activeName = this.$route.path;
        },
    },
};
</script>
<style  lang="scss" scoped>
.el-tabs__content {
    display: none;
}

.inner-container {
    background: #ffffff;
    padding-top: 20px;
    margin: 15px;
    overflow: auto;
    width: calc(100% - 30px);
    max-width: calc(100% - 30px);
    height: 100%;
    overflow-x: hidden;

    &-viewport {
        width: 100%;
        overflow: auto;
    }
}

.tabBox {
    border-bottom: 1px solid #e1e1e1;
    height: 60px;
}

.infoBox {
    background: #f4f4f4 !important;
    height: 100%;
    width: calc(100%)
}

::v-deep .el-tabs__item {
    width: 166px;
    text-align: center;
    border-left: 10px solid #ffffff;
    border-right: 10px solid #ffffff;

}

::v-deep .el-tabs__header {
    margin: 0px;
    background: #d8eaf6;
    color: black;
    margin-left: 20px;
    display: inline-block;
    border: 0px
}

::v-deep .is-active {
    background: #0583cd;
    color: white;
}

::v-deep .el-tabs__item:hover {
    color: black;
}

::v-deep .is-active:hover {
    background: #0583cd;
    color: white;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: 0px
}
</style>