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

<template>
    <a-layout class="layout-top">
        <a-layout-header class="m-layout-header">
            <div>
                <img src="../assets/images/logoHeader.png" />
                <span>深圳市多元世纪信息技术股份有限公司</span>
            </div>
            <div class="m-layout-header-right">
                <div @click="openDrawer">
                    <span>{{ username }}，您好！</span>
                </div>
                <div class="relative">
                    <!-- <a-input-search ref="userNameInput"
                          class="searchInput"
                          readonly
                          placeholder="请输入代码/名称"
                          @pressEnter="search">
          </a-input-search> -->
                    <!-- <a-icon type="search" /> -->
                </div>
                <div class="news-container">
                    <a-badge @click="openNotice">
                        <svg class="icon svg-icon" aria-hidden="true">
                            <use xlink:href="#icon-xiaoxi"></use>
                        </svg>
                    </a-badge>
                </div>
                <div>
                    <a-popover v-model:visible="visible" trigger="click" placement="bottomRight">
                        <template #content>
                            <div v-for="item in setMenu" @click="chooseSetMenu(item.path)" :key="item.path">{{ item.name }}</div>
                        </template>
                        <a-avatar :size="24">
                            <template #icon>
                                <UserOutlined />
                            </template>
                        </a-avatar>
                    </a-popover>
                    <Setting />
                </div>
            </div>
        </a-layout-header>
        <a-layout class="middleLayout">
            <a-layout-sider class="m-layout-left" width="180" v-model:collapsed="collapsed" @collapse="collapse" collapsible>
                <a-menu theme="dark" mode="inline" class="left-menu" v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" @click="menuClick">
                    <a-sub-menu v-for="item in menuList" :key="item.code">
                        <template #title>
                            <span>
                                <svg class="icon svg-icon" aria-hidden="true">
                                    <use :xlink:href="fontIcon(item.code)"></use>
                                </svg>
                                <span class="menu-item_title" v-show="!collapsed">{{ item.title }}</span>
                            </span>
                        </template>
                        <a-menu-item :key="subItem.code" v-for="subItem in item.children">
                            <span>{{ subItem.title }}</span>
                        </a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </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 { UserOutlined } from '@ant-design/icons-vue';
    import { defineComponent, ref, provide, unref } from 'vue';
    import Setting from '@/views/setting/index.vue';
    import CapitalInfo from '@/common/components/capitalInfo/index.vue';
    import SecondMenu from '@/common/components/secondeMenu/index.vue';
    import APP from '@/services';
    import { initData } from '@/common/methods';
    import { useRouter } from 'vue-router';
    import { openModal } from '@/common/setup/modal/index';
    import Drawer from '@/common/components/drawer/index.vue';
    import Main from './main.vue';

    // 菜单栏
    const handleMenu = () => {
        const collapsed = ref<boolean>(false);
        const selectedKeys = ref<string[]>(['1-1']);
        const openKeys = ref<string[]>(['1']);
        const preOpenKeys = ref<string[]>(['1']);
        const menuList = APP.getRef('menus');
        // const menuList = [
        //     {
        //       key: '1',
        //       title: '市场',
        //       code: 'market',
        //       children: [
        //         {
        //           key: '1-1',
        //           title: '现货贸易',
        //           code: ''
        //         },
        //       ],
        //     },
        //     {
        //       key: '2',
        //       title: '查询',
        //       code: 'search',
        //       children: [
        //         {
        //           key: '2-1',
        //           title: '单据记录',
        //           code: ''
        //         },
        //         {
        //           key: '2-2',
        //           title: '资金流水',
        //           code: ''
        //         },
        //         {
        //           key: '2-3',
        //           title: '出入库',
        //           code: ''
        //         },
        //         {
        //           key: '2-4',
        //           title: '登录日志',
        //           code: ''
        //         },
        //       ],
        //     },
        //     {
        //       key: '3',
        //       title: '报表',
        //       code: 'report'
        //     },
        //   ];
        const router = useRouter();
        // 控制菜单是否隐藏
        function collapse(collapsed: boolean) {
            if (collapsed) {
                preOpenKeys.value = openKeys.value;
                openKeys.value = [];
            } else {
                openKeys.value = preOpenKeys.value;
            }
        }
        // 配置是否显示下半部分
        function setShowBottomPart(code: string): boolean {
            // 显示下半部分 这里保存的是市场对应的 code
            const show: string[] = [''];
            return show.includes(code);
        }
        function menuClick(value: any) {
            console.log('菜单： ', value);
            const key = value.key;
            setShowBottomPart(key);
            router.push({ name: key });
        }
        // 一级菜单图标
        function fontIcon(code: string): string {
            let result = 'icon-jinrongfenxi';
            switch (code) {
                case 'market':
                    result = 'icon-jinrongfenxi';
                    break;
                case 'info':
                    result = 'icon-zhangdan';
                    break;
                case 'business':
                    result = 'icon-renwu';
                    break;
                case 'manage':
                    result = 'icon-quanxian';
                    break;
                case 'search':
                    result = 'icon-chazhaojilu';
                    break;
                case 'report':
                    result = 'icon-bingtu';
                    break;
            }
            return '#' + result;
        }
        return { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick, setShowBottomPart, fontIcon };
    };

    function testAction() {
        const { openAction } = openModal('drawer');
        return { openDrawer: openAction };
    }

    // 设置
    const setFn = () => {
        const visible = ref<boolean>(false);
        const chooseSetupItem = ref<string>('');
        provide('ControlModal', chooseSetupItem);
        const setMenu = [
            // { name: '修改密码', path: 'password' },
            // { name: '收货地址', path: 'addresss' },
            // // {name: '发票', path: 'setup-password'},
            // { name: '手机号码绑定/解绑', path: 'phone' },
            // { name: '关于我们', path: 'aboutUs' },
            { name: '退出', path: 'logout' },
        ];
        const { openAction } = openModal('logout');
        function chooseSetMenu(path: string) {
            // chooseSetupItem.value = path;
            openAction();
            console.log(path);
            visible.value = false;
        }

        return { visible, setMenu, chooseSetMenu };
    };
    // 搜索
    const onSearch = () => {
        function search(value: string) {
            console.log(value);
        }
        return { search };
    };

    // 控制消息弹窗
    function controlNotice() {
        const { openAction } = openModal('notice');
        return { openNotice: openAction };
    }
    export default defineComponent({
        name: 'layout-top',
        components: {
            Setting,
            UserOutlined,
            CapitalInfo,
            SecondMenu,
            Drawer,
            Main,
        },
        setup(props, context) {
            const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick, setShowBottomPart, fontIcon } = handleMenu();
            const router = useRouter();
            // 控制消息弹窗
            const { openNotice } = controlNotice();

            initData(() => {
                // 处理路由跳转到菜单栏里第一个对应的页面
                const list = unref(menuList);
                if (list.length && list[0].children && list[0].children.length) {
                    // 处理修改具体某个菜单栏，主要处理页面刷新
                    let firstIndex = 0,
                        secondeIndex = 0;
                    for (let i = 0; i < list.length; i++) {
                        for (let j = 0; j < list[i].children.length; j++) {
                            if (window.location.hash.includes(list[i].children[j].code)) {
                                firstIndex = i;
                                secondeIndex = j;
                                break;
                            }
                        }
                    }
                    const code = list[firstIndex].children[secondeIndex].code;
                    // selectedKeys.value.length = 0;
                    // selectedKeys.value.push(code);
                    // openKeys.value.length = 0;
                    // openKeys.value.push(list[firstIndex].code);
                    selectedKeys.value = [code];
                    openKeys.value = [list[firstIndex].code];
                    context.emit('chooseMenu', setShowBottomPart(code));
                    // 处理页面刷新时候 引发路由乱跳的bug
                    if (router.currentRoute.value.fullPath === '/home') {
                        router.push(code);
                    } else {
                    }
                }
            });

            const { openDrawer } = testAction();

            const { visible, setMenu, chooseSetMenu } = setFn();
            const username = APP.get('username');
            const { search } = onSearch();
            const searchName = ref<string[]>(['']);
            return {
                collapsed,
                collapse,
                selectedKeys,
                openKeys,
                menuClick,
                username,
                menuList,
                visible,
                setMenu,
                chooseSetMenu,
                fontIcon,

                openNotice,

                openDrawer,
            };
        },
    });
</script>
<style lang="less">
    .layout-top {
        .flex;
        width: 100%;
        height: 100%;
        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;
                    }
                }
            }
            // .relative {
            //     position: relative;
            //     .a-icon {
            //         font-size: 14px;
            //         .position(absolute, 50%, auto, auto, 10px);
            //         margin-top: -7px;
            //         color: @m-grey10;
            //         z-index: 10;
            //     }
            // }
            .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%;
            .inlineflex;
            border-bottom: 1px solid @m-black2;
            .m-layout-left {
                height: 100%;
                background: @m-black4;
                .ant-layout-sider-children {
                    ul.ant-menu.ant-menu-inline {
                        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>