jonhon-mes-web/src/page/index/sidebar/leftMenu.vue

<template>
    <div class="menu_flex">
        <div class="first_menu">
            <div class="first_menu_bg">
                <div class="menu_item" v-for="(item, index) in newMneu" :class="item.activeMenu == true ? 'xz_bg' : ''"
                @click="slectMenu(item, index)" :title="item.name">
                <span><i :class="item.source"></i></span>
                <span>{{ item.name }}</span>
            </div>
            </div>
            
        </div>
        <div class="second_menu">
            <transition name="fade">
                <span class="avue-logo_subtitle" key="0">
                    <img class="logo-img" src="@/assets/logo.png" />
                </span>
            </transition>
            <transition name="fade">
                <span class="logo-name">电镀智能化-MES{{ setting.styleRadio }}</span>
            </transition>
            <transition name="fade">
                <span class="logo-version">版本V2.1.8</span>
            </transition>
            <div class="menu-name">{{ slectMneuData.name }}</div>

            <div v-for="(v, j) in slectMneuData.children">
                <div class="second_item" :class="v.activeMenu2 == true ? 'active_second' : ''" @click="secondMenu(v, j)"
                    v-if="!v.children">
                    <div class="second_title second_hover" :title="v.name">{{ v.name }}</div>
                </div>
                <div v-else class="second_item">
                    <el-popover placement="right-start" :show-arrow="true" :offset="0" :hide-after='0'
                        popper-class="log-popover"
                        popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
                        <template #reference>
                            <span class="right_menu_item_box second_title" @click='open(item)'
                                style="display:block;height: 50px;line-height: 50px;padding-left: 12px;">
                                <div>{{ v.name }}
                                    <el-icon>
                                        <ArrowRight />
                                    </el-icon>
                                </div>
                            </span>
                        </template>
                        <template #default v-if="v.children && v.children.length != 0">
                            <div class="third_box" v-if="v.children && v.children.length != 0">
                                <div class="third_box_item second_title" v-for="third in v.children" :key="third.id"
                                    style="display:block;height: 40px;line-height: 40px;padding-left: 12px;" @click='open(third)'>
                                    {{ third.name }}
                                </div>
                            </div>
                        </template>
                    </el-popover>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { computed, ref, onMounted } from 'vue'
import { mapState, useStore } from "vuex"
import { useRoute, useRouter } from 'vue-router'
import logo from '../logo.vue';
import sidebarItem from './sidebarItem.vue';
const store = useStore()
const { setting } = mapGetters(['setting'])

const router = useRouter()
const route = useRoute()
const myProps = defineProps({
    menulist: {
        type: Boolean,
        default: false
    },
})
const newMneu = ref([])
// 初始化页面
const initMenu = () => {
    myProps.menulist.forEach(item => {
        newMneu.value.push({ ...item, activeMenu: false })
    });
    slectMenu(newMneu.value[0], 0)
}
// 选中一级菜单
const slectMneuData = ref({})
const slectMenu = (item, v) => {
    slectMneuData.value = item
    if (slectMneuData.value.children) {
        slectMneuData.value.children.forEach(v => {
            v.activeMenu2 = false
        })
    }
    newMneu.value.forEach((item, index) => {
        if (index == v) {
            item.activeMenu = true
        } else {
            item.activeMenu = false
        }
    })
}
// 选中二级三级菜单
const secondMenu = (v, j) => {
    slectMneuData.value.children.forEach((item, index) => {
        if (index == j) {
            item.activeMenu2 = true
        } else {
            item.activeMenu2 = false
        }
    })
    open(v)
}
const activeMenu = computed(() => {
    const { meta, path } = route;
    if (meta.activeMenu) {
        return meta.activeMenu;
    }
    return path;
})

// 跳转页面
const pathKey = ref('')
const getPath = (item) => {
    return item[pathKey.value];
}

// 打开页面
const queryKey = ref({})
const open = (item) => {
    console.log(99999, item)
    router.push({
        path: item.path,
    });
}

onMounted(() => {
    initMenu()
})
</script>
<style lang="scss" scoped>
.menu_flex {
    display: flex;
    height: 100%;
    overflow: hidden;

    .first_menu {
        width: 75px;
        background: url(@/assets/menu_bg.jpg) no-repeat center;
        background-size: auto 100%;
        min-height: 100%;
        overflow: auto;
       
        box-shadow: none;
        border-radius: 0px 60px 0px 0px;
        color: rgb(190, 194, 201);
        .first_menu_bg{
             padding-top: 60px;
            background: url(@/assets/menu_bg.svg) no-repeat center;
            background-size: 100% 100%;
        }
        .menu_item {
            width: 100%;
            height: 68px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            padding: 18px auto 0;

            &:hover {
                background: rgba($color: #000000, $alpha: 0.3);
            }

            span {
                color: #fff;

                &:nth-child(1) {
                    width: 20px;
                    height: 20px;
                    margin: 8px auto 0;
                }

                &:nth-child(2) {
                    font-size: 14px;
                    text-align: center;
                    padding-top: 12px;
                }
            }
        }

        .xz_bg {
            background: rgba(255, 140, 25, 0.5);
        }
    }

    .second_menu {
        flex: 1;
        height: 100%;
        overflow: auto;
        padding-top: 20px;

        .avue-logo_subtitle {
            padding: 0 12px;

            .logo-img {
                display: block;
                width: 100%;
            }
        }

        .logo-name {
            color: rgb(102, 102, 102);
            font-size: 18px;
            font-weight: 400;
            line-height: 27px;
            text-align: center;
            display: block;
            margin-top: 24px;
            margin-bottom: 18px;
            font-style: italic;
        }

        .logo-version {
            color: rgba(66, 66, 66, 1);
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            display: block;
            text-align: center;
        }

        .menu-name {
            text-align: center;
            color: rgb(102, 102, 102);
            font-size: 18px;
            font-weight: 550;
            line-height: 25px;
            margin-top: 18px;
            position: relative;
            margin-bottom: 18px;

            &::after {
                content: '';
                width: 25px;
                height: 1px;
                background: rgba(187, 187, 187, 1);
                position: absolute;
                left: 10px;
                top: 14px;
            }

            &::before {
                content: '';
                width: 25px;
                height: 1px;
                background: rgba(187, 187, 187, 1);
                position: absolute;
                right: 10px;
                top: 14px;
            }
        }

        .second_item {
            text-align: center;
            color: rgb(102, 102, 102);

            .second_title {
                height: 50px;
                line-height: 50px;
                cursor: pointer;
                font-size: 14px;
                color: rgb(102, 102, 102);
            }



            .second_ch {
                height: 40px;
                line-height: 40px;
                cursor: pointer;

                &:hover {
                    background: rgba($color: #000000, $alpha: 0.3);

                }
            }
        }

        .three_menu {
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            font-size: 14px;
            color: rgb(102, 102, 102);
            text-align: center;
        }

        .second_title_all {
            position: relative;
            z-index: 2;

            &::after {
                content: '';
                width: 100%;
                height: 1px;
                background: #ccc;
                position: absolute;
                top: 35px;
                left: 0;
            }
        }

        .second_hover {
            &:hover {
                background: rgba($color: #000000, $alpha: 0.3);
            }
        }

        .active_second {
            background: rgb(193, 210, 255);

            .second_title {
                color: rgba(0, 68, 251, 1);
            }
        }
    }

    .third_box{
        background: #000;
    }

}
:deep(.iconfont ){
    font-size: 20px;
}
</style>