Zlpt_Portal/src/components/Navmenu/index.vue

<script setup lang="ts">
import { useStore } from '../../store/user'
import { mainStore } from '../../store/main'
const store = useStore()
const mainStore1 = mainStore()
const router = useRouter()
const route = useRoute()
// const navMenuList = [
//     { name: '首页', routerName: 'home' },
//     { name: '装备共享大厅', routerName: 'equipList' },
//     { name: '租赁需求大厅', routerName: 'parity' },
//     // { name: '装备管理', routerName: '/home' },
//     { name: '订单管理', routerName: '/home' },
//     // { name: '基础管理', routerName: '/home' },
//     { name: '通知公告', routerName: 'enterpriseZone' },
//     // { name: '综合查询', routerName: 'enterpriseZone' },
// ]
const isType: any = ref(null)
// console.log('🚀 ~ onCreated ~ isType.value:', isType.value, localStorage.getItem('rolesType'))
onMounted(() => {
    isType.value = localStorage.getItem('rolesType')
    // console.log('🚀 ~ onMounted ~ isType.value:', isType.value)
})
const navMenuList = ref<any[]>([])

const permissionsList = ref(['home', 'share', 'demand'])
const permissionsList1 = permissionsList.value.concat(mainStore1.permissionsInfo)

console.log('permissionsList,permissionsList', permissionsList)
watch(
    isType,
    (newValue) => {
        console.log('🚀 ~ newValue:', newValue)
        if (newValue == 1) {
            navMenuList.value = [
                { name: '首页', routerName: 'home', permissions: 'home' },
                { name: '数据大屏', routerName: 'big-screen', permissions: 'home' },
                { name: '装备共享大厅', routerName: 'equipList', permissions: 'share' },
                { name: '租赁需求大厅', routerName: 'parity', permissions: 'demand' },
                // { name: '专区设备', routerName: 'zoneEquipment' },
                { name: '公告', routerName: 'enterpriseZone', permissions: 'system:notice:list' },
            ]
        } else if (newValue == 2) {
            navMenuList.value = [
                { name: '首页', routerName: 'home' },
                { name: '数据大屏', routerName: 'big-screen' },
                { name: '装备共享大厅', routerName: 'equipList' },
                { name: '租赁需求大厅', routerName: 'parity' },
                // { name: '专区设备', routerName: 'zoneEquipment' },
                { name: '订单管理', routerName: 'orderManagement' },
                { name: '需求管理', routerName: 'sourcingNeed' },
                { name: '通知公告', routerName: 'enterpriseZone' },
            ]
        } else if (newValue == 3) {
            navMenuList.value = [
                { name: '首页', routerName: 'home' },
                { name: '数据大屏', routerName: 'big-screen' },
                { name: '装备共享大厅', routerName: 'equipList' },
                // { name: '专区设备', routerName: 'zoneEquipment' },
                { name: '租赁需求大厅', routerName: 'parity' },
                { name: '通知公告', routerName: 'enterpriseZone' },
            ]
        } else {
            navMenuList.value = []
        }
    },
    { immediate: true },
)
// const navMenuList = computed(() => {
//     // return store.leaseAndLesseeList
//     if (isType == 1)
//         return [
//             { name: '首页', routerName: 'home' },
//             { name: '装备共享大厅', routerName: 'equipList' },
//             { name: '租赁需求大厅', routerName: 'parity' },
//             // { name: '装备管理', routerName: 'goodsManagement' },
//             // { name: '订单管理', routerName: 'orderManagementCz' },
//             // { name: '接单管理', routerName: 'accept-orders' },
//             { name: '公告', routerName: 'enterpriseZone' },
//             // { name: '数据大屏', routerName: 'big-screen' },
//         ]
//     if (isType == 2)
//         return [
//             { name: '首页', routerName: 'home' },
//             { name: '装备共享大厅', routerName: 'equipList' },
//             { name: '租赁需求大厅', routerName: 'parity' },
//             { name: '订单管理', routerName: 'orderManagement' },
//             { name: '需求管理', routerName: 'sourcingNeed' },
//             { name: '通知公告', routerName: 'enterpriseZone' },
//             // { name: '数据大屏', routerName: 'big-screen' },
//         ]

//     if (isType == 3)
//         return [
//             { name: '首页', routerName: 'home' },
//             { name: '装备共享大厅', routerName: 'equipList' },
//             { name: '租赁需求大厅', routerName: 'parity' },
//             { name: '通知公告', routerName: 'enterpriseZone' },
//             // { name: '数据大屏', routerName: 'big-screen' },
//         ]
// })

const navMenuClick = (name: any) => {
    const includeList = [
        'goodsManagement',
        'orderManagementCz',
        'orderManagement',
        'sourcingNeed',
        'accept-orders',
    ]
    if (includeList.includes(name)) {
        store.editcurrentMenuItem(name)
        setTimeout(() => {
            router.push({
                name: 'my-user',
            })
        }, 500)
    } else {
        router.push({ name })
    }
}
</script>

<template>
    <ul class="nav-menu">
        <li
            v-for="item in navMenuList"
            :key="item.name"
            @click="navMenuClick(item.routerName)"
            :class="{ 'active-li': route.meta.activeName === item.routerName }"
            v-show="permissionsList1.includes(item.permissions)"
        >
            {{ item.name }}
        </li>
    </ul>
</template>

<style lang="scss" scoped>
.nav-menu {
    // height: 48px;
    padding: 6px 0;
    background-color: #f7f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 18px;

    li {
        color: #7d7d7d;
        padding: 4px 10px;

        // border-right: 1px solid #7d7d7d;

        &:hover {
            cursor: pointer;
            color: #00a288;
            font-weight: bold;
        }

        &:last-child {
            border: none;
        }
    }

    .active-li {
        color: #00a288;
        font-weight: bold;
        background-color: #c9e7e5;
        border-radius: 8px;
    }
}
</style>