MTP2.0_WEB/src/layout/components/top.vue

<template>
    <a-layout class="layout-top">
        <a-layout-header class="m-layout-header">
            <Header />
        </a-layout-header>
        <a-layout class="middleLayout">
            <a-layout-sider
                class="m-layout-left"
                width="180"
                v-model:collapsed="collapsed"
                @collapse="collapse"
                collapsible
            >
                <Menu @chooseMenu="chooseMenu" :collapsed="collapsed" />
            </a-layout-sider>
            <a-layout-content :style="{ background: '#0E0E0F', flex: 1 }">
                <Drawer :title="'挂牌'" :visible="visible"></Drawer>
                <!-- <Main /> -->
                <router-view />
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>
<script lang="ts">
import { defineComponent, ref, provide } from 'vue';

import CapitalInfo from '@/common/components/capitalInfo/index.vue';
import SecondMenu from '@/common/components/secondeMenu/index.vue';
import { useRouter } from 'vue-router';
import Drawer from '@/common/components/drawer/index.vue';
import Header from './header.vue';
import Menu from './menu.vue';
import Main from './main.vue';
import { OperationTabMenu } from '@/services/go/commonService/interface';

export default defineComponent({
    name: 'layout-top',
    components: {
        CapitalInfo,
        SecondMenu,
        Drawer,
        Main,
        Menu,
        Header,
    },
    setup(props, context) {
        const router = useRouter();
        const list = ref<OperationTabMenu[]>([]); // 右边tab栏 需要的列表数据
        const index = ref<string[]>(['0']); // 右边tab栏 具体选中的哪一个数据 默认第一个
        // 配置是否显示下半部分
        function setShowBottomPart(code: string) {
            // 显示下半部分 这里保存的是市场对应的 code
            const show: string[] = [''];
            context.emit('chooseMenu', show.includes(code));
        }
        // 选中菜单
        function chooseMenu(value: OperationTabMenu) {
            const temp = router.currentRoute.value.name;
            let name = temp;
            if (temp === 'home') {
                // 第一次进入项目
                if (value?.children.length) {
                    // 默认第一个tab页
                    name = value.children[0].code;
                    index.value = ['0'];
                } else {
                    router.push({ name: '404' });
                    return;
                }
            } else {
                // 这里处理页面刷新，还原 导航栏数据
                const i = value.children.findIndex((e) => e.code === temp);
                if (i === -1) {
                    // 切换左边菜单栏
                    if (value?.children.length) {
                        // 默认第一个tab页
                        name = value.children[0].code;
                        index.value = ['0'];
                    } else {
                        router.push({ name: '404' });
                        return;
                    }
                } else {
                    // 切换右边上面tab 栏
                    index.value = [`${i}`];
                }
            }
            list.value = value.children;
            setShowBottomPart(value.code);
            router.push({ name: name as string });
        }
        // 选中菜单的数据
        provide('thirdMenuList', list);
        provide('index', index);
        // 控制菜单是否隐藏
        const collapsed = ref<boolean>(false);
        function collapse(show: boolean) {
            collapsed.value = show;
        }

        return {
            collapsed,
            collapse,
            chooseMenu,
        };
    },
});
</script>
<style lang="less">
.layout-top {
    .flex;
    width: 100%;
    height: calc(100% - 336px);
    flex-direction: column;
    .m-layout-header {
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: @m-grey0;
        color: @m-grey1;
        padding: 0 20px;
        .flex();
        justify-content: space-between;
        img {
            margin-right: 16px;
            width: 20px;
            height: 20px;
        }
        .searchInput.ant-input-affix-wrapper {
            width: 240px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            background: @m-grey9;
            border: 0;
            vertical-align: middle;
            padding-left: 40px;
            position: relative;
            .rounded-corners(15px);
            .ant-input {
                background: @m-grey9;
                color: @m-white0;
            }
            .ant-input-suffix {
                margin-left: -215px;
                .ant-input-search-icon {
                    color: @m-grey10;
                }
            }
        }
        .m-layout-header-right {
            .flex();
            .news-container {
                padding-left: 10px;
                padding-right: 16px;
                .ant-badge {
                    margin-top: 7px;
                    cursor: pointer;
                    > svg {
                        font-size: 24px;
                    }
                    .ant-badge-dot {
                        box-shadow: 0 0 0 1px @m-red0;
                    }
                }
            }

            .ant-avatar-icon {
                margin-top: -3px;
            }
        }
    }

    .middleLayout {
        flex: 1;
        width: 100%;
        height: calc(100% - 40px);
        max-height: calc(100% - 40px);
        background: @m-grey18;
        .inlineflex;
        border-bottom: 1px solid @m-black2;
        .ant-layout-sider-has-trigger {
            background: @m-black4;
            .ant-layout-sider-children {
                background: @m-grey18;
            }
        }
        .m-layout-left {
            min-height: calc(100vh - 376px);
            background: @m-black4;
            overflow: hidden;
            .ant-layout-sider-children {
                ul.ant-menu.ant-menu-inline.left-menu {
                    height: calc(100vh - 376px);
                    overflow-y: auto;
                    li.ant-menu-submenu {
                        padding-bottom: 0;
                        .ant-menu-submenu-title {
                            color: @m-grey2;
                            font-size: 16px;
                            height: 60px;
                            line-height: 60px;
                            margin-top: 0;
                            margin-bottom: 0;
                            padding: 5px 0;
                            .icon {
                                font-size: 20px;
                            }
                            .menu-item_title {
                                display: inline-block;
                                font-size: 16px;
                                margin-left: 15px;
                            }
                        }
                        .ant-menu-sub {
                            .ant-menu-item {
                                padding-left: 60px !important;
                                margin-top: 5px;
                                margin-bottom: 5px;
                            }
                        }
                    }
                    li.ant-menu-submenu-open {
                        .ant-menu-submenu-title {
                            color: @m-white0;
                            .icon {
                                color: @m-white0;
                            }
                        }
                        .ant-menu-sub {
                            .ant-menu-item.ant-menu-item-selected {
                                background-color: @m-blue0;
                            }
                        }
                    }
                }
            }
            .ant-layout-sider-trigger {
                width: 100%;
                height: 40px;
                line-height: 40px;
                background: @m-black0;
                position: absolute;
            }
        }
        .ant-menu-vertical {
            .ant-menu-submenu-vertical {
                height: 60px;
                line-height: 60px;
                padding: 5px 0;
                .ant-menu-submenu-title {
                    height: 50px;
                    line-height: 50px;
                    .icon {
                        font-size: 20px;
                    }
                }
            }
            .ant-menu-submenu {
                .ant-menu-submenu-title {
                    .menu-item_title {
                        display: none;
                    }
                }
            }
        }
    }

    .bottomLayout {
        width: 100%;
        flex: none;
        height: @bottomHeight;
        .inlineflex;
    }
}
</style>