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

<template>
  <a-layout :class="['layout-top', isBottom ? 'layout-top-bottom' : 'layout-top-no-bottom']">
    <a-layout-header class="m-layout-header">
      <Header />
    </a-layout-header>
    <a-layout class="middleLayout">
      <a-layout-sider class="m-layout-left" width="160" 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 { useRoute, 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';
import { getHasBottom } from '@/common/setup/order/orderData';

export default defineComponent({
    name: 'layout-top',
    emits: ['chooseMenu'],
    components: {
        CapitalInfo,
        SecondMenu,
        Drawer,
        Main,
        Menu,
        Header,
    },
    setup(props, context) {
        const router = useRouter();
        const route = useRoute();
        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));
        }
        const isBottom = getHasBottom();
        // 选中菜单
        function chooseMenu(value: OperationTabMenu) {
            const matched = route.matched;
            const len = matched.length;
            let temp = 'home';
            if (matched.length > 2) {
                temp = matched[2].name as string;
            } else {
                temp = matched[len - 1].name as string;
            }
            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,
            isBottom,
        };
    },
});
</script>
<style lang="less">
.layout-top-no-bottom {
    height: 100%;
}
.layout-top-bottom {
    height: calc(100vh - 336px);
}
.layout-top {
    .flex;
    width: 100%;
    flex-direction: column;
    .m-layout-header {
        width: 100%;
        height: 32px;
        line-height: 32px;
        background: @m-grey0;
        color: @m-grey32;
        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 {
                    color: inherit;
                    margin-top: 4px;
                    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% - 32px);
        max-height: calc(100% - 32px);
        background: @m-grey18;
        .inlineflex;
        border-bottom: 1px solid @m-black2;
        .ant-layout-sider-has-trigger {
            padding-bottom: 30px;
            background: @m-black4;
            .ant-layout-sider-children {
                background: @m-grey18;
            }
        }
        .m-layout-left {
            min-height: calc(100vh - 316px);
            background: @m-black4;
            border-right: 1px solid @m-black32;
            overflow: hidden;
            .ant-layout-sider-children {
                ul.ant-menu.ant-menu-inline.left-menu {
                    height: 100%;
                    overflow-y: auto;
                    li.ant-menu-submenu {
                        padding-bottom: 0;
                        .ant-menu-submenu-title {
                            color: @m-grey33;
                            font-size: 14px;
                            height: 40px;
                            line-height: 40px;
                            margin-top: 0;
                            margin-bottom: 0;
                            padding-left: 10px !important;
                            .icon {
                                font-size: 14px;
                            }
                            .menu-item_title {
                                display: inline-block;
                                font-size: 14px;
                                margin-left: 5px;
                            }
                        }
                        .ant-menu-sub {
                            .ant-menu-item {
                                padding-left: 28px !important;
                                margin-top: 5px;
                                margin-bottom: 5px;
                                height: 30px;
                                line-height: 30px;
                                font-size: 13px;
                            }
                        }
                    }
                    li.ant-menu-submenu-open {
                        .ant-menu-submenu-title {
                            color: @m-white6;
                            .icon {
                                color: @m-white7;
                            }
                            .ant-menu-submenu-arrow {
                                &::before,
                                &::after {
                                    background: @m-white7;
                                }
                            }
                        }
                        .ant-menu-sub {
                            .ant-menu-item.ant-menu-item-selected {
                                background-color: @m-blue0;
                            }
                        }
                    }
                }
            }
            .ant-layout-sider-trigger {
                width: 100%;
                height: 30px;
                line-height: 30px;
                background: @m-black0;
                position: absolute;
                .anticon {
                    color: @m-white12;
                }
            }
        }
        .ant-layout-sider-collapsed {
            width: 60px !important;
            min-width: 60px !important;
            max-width: 60px !important;
            .ant-layout-sider-children {
                .ant-menu-inline-collapsed {
                    width: 60px;
                }
            }
            .ant-layout-sider-trigger {
                width: 60px !important;
            }
        }
        .ant-layout-content {
            overflow: hidden;
            background: @m-black31 !important;
        }
        .ant-menu-vertical {
            .ant-menu-submenu-vertical {
                height: 50px;
                line-height: 50px;
                padding: 5px 0;
                .ant-menu-submenu-title {
                    height: 40px;
                    line-height: 40px;
                    .icon {
                        font-size: 20px;
                    }
                }
            }
            .ant-menu-submenu {
                .ant-menu-submenu-title {
                    .menu-item_title {
                        display: none;
                    }
                }
            }
        }
    }

    .bottomLayout {
        width: 100%;
        flex: none;
        height: @bottomHeight;
        .inlineflex;
    }
    .ant-menu-inline-collapsed > .ant-menu-item,
    .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
    .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title,
    .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
        padding: 0 20px !important;
    }
}
</style>