Zlpt_Portal/src/views/user/index.vue

<script setup lang="ts">
import Header from 'components/header/index.vue'
import { useRouter } from 'vue-router'
import { useStore } from '../../store/user'
import { useRoute } from 'vue-router'

const store: any = useStore()
const router = useRouter()
const route = useRoute()
const userInfo = JSON.parse(localStorage.getItem('main')).userInfo
// const isAdmin = ref(userInfo.admin)
// 临时管理员权限
// console.log('🚀 ~ userInfo:', userInfo)
// const isAdmin = ref(userInfo.userId == 226 || userInfo.userId == 225 || userInfo.admin)
const isAdmin = ref(true) // 临时放开权限
// console.log('🚀 ~ isAdmin:', isAdmin.value)

import imgSrc from '@/assets/img/logo.png'

const handleSelect = (name: any, path: any) => {
    console.log('🚀 ~ handleSelect ~ name:', name)
    if (name == 'admin') {
        const token = localStorage.getItem('tokenNew')
        const host = window.location.origin

        if (host.indexOf('sgwpdm.ah.sgcc.com.cn') > -1) {
            window.open(`${host}/iws/glweb/login?token=${token}`)
        } else {
            if (import.meta.env.VITE_ENV === 'production') {
                window.open(`${host}/glweb/?token=${token}`)
            } else {
                window.open(`${host}/iws/glweb/?token=${token}`)
                // window.open(`${'http://localhost:1024'}/iws/glweb/?token=${token}`)
            }
        }
    } else {
        store.editcurrentMenuItem(name)
        router.push({
            name,
        })
    }
}

const isType: any = computed(() => {
    return localStorage.getItem('rolesType')
})

// 定义菜单项接口
interface MenuItem {
    title: string
    name: string
    permission: string[]
}

// 按角色分组定义菜单---出租方
const lessorMenus: MenuItem[] = [
    { title: '装备管理', name: 'goodsManagement', permission: ['1'] },
    { title: '装备审核', name: 'goodsAuditing', permission: ['1'] },
    { title: '出租订单', name: 'orderManagementCz', permission: ['1'] },
    { title: '接单管理', name: 'accept-orders', permission: ['1'] },
    { title: '装备维保', name: 'quality-manage', permission: ['1'] },
    { title: '合同管理', name: 'contract-manage', permission: ['1'] },
    /* { title: '自有装备管理', name: 'owned-manage', permission: ['1'] }, */
    { title: '外租装备管理', name: 'rent-manage', permission: ['1'] },
    { title: '机械化施工装备配置率', name: 'rent-facility', permission: ['1'] },
    { title: '后台管理', name: 'admin', permission: ['1'] },
]
// 按角色分组定义菜单---承租方
const lesseeMenus: MenuItem[] = [
    { title: '需求管理', name: 'sourcingNeed', permission: ['2'] },
    { title: '租赁订单', name: 'orderManagement', permission: ['2'] },
    { title: '收货地址管理', name: 'address-manage', permission: ['2'] },
    { title: '后台管理', name: 'admin', permission: ['2'] },
]

// 合并所有菜单项
const allList: MenuItem[] = [...lessorMenus, ...lesseeMenus]
const rolesType: any = ref('')
if (localStorage.getItem('rolesTypeName')) {
    rolesType.value = localStorage.getItem('rolesTypeName')
} else {
    rolesType.value = '承租方'
}
const menuList: any = computed(() => {
    return rolesType.value == '承租方'
        ? allList.filter((e) => {
              if (isAdmin.value) {
                  return e.permission.includes('2')
              } else {
                  return e.permission.includes('2') && e.name != 'admin'
              }
          })
        : allList.filter((e) => {
              if (isAdmin.value) {
                  return e.permission.includes('1')
              } else {
                  return e.permission.includes('1') && e.name != 'admin'
              }
          })
})

const activeItem = computed(() => {
    if (rolesType.value == '出租方') {
        return 'goodsManagement'
    } else {
        return 'sourcingNeed'
    }
})
router.push({
    name: activeItem.value,
})

const onChange = (val: any) => {
    if (val == '承租方') {
        store.editcurrentMenuItem('sourcingNeed')
        router.push({
            name: 'sourcingNeed',
        })
        localStorage.setItem('rolesTypeName', '承租方')
    } else {
        store.editcurrentMenuItem('goodsManagement')
        router.push({
            name: 'goodsManagement',
        })
        localStorage.setItem('rolesTypeName', '出租方')
    }
}
onBeforeUnmount(() => {
    store.editcurrentMenuItem(null)
})
</script>

<template>
    <!-- 个人中心页面 -->

    <div style="width: 100%; display: flex; background-color: #f5f5f5; justify-content: flex-end">
        <Header style="margin-right: 20px" />
    </div>
    <div class="app-container" id="user-container">
        <div class="left-menu">
            <div class="logo-title" @click="$router.push({ name: 'home' })">
                <el-image
                    style="width: 100%; height: 60px; cursor: pointer"
                    :src="imgSrc"
                    fit="contain"
                />
            </div>
            <div style="margin-top: 10px; width: 100%">
                <el-radio-group v-model="rolesType" @change="onChange">
                    <el-radio-button label="承租方" value="承租方" />
                    <el-radio-button label="出租方" value="出租方" />
                </el-radio-group>
            </div>
            <el-menu
                class="el-menu-vertical-demo"
                @select="handleSelect"
                :default-active="route && route.name ? route.name : ''"
            >
                <template v-for="(item, index) in menuList" :key="index">
                    <el-menu-item :index="item.name">
                        {{ item.title }}
                    </el-menu-item>
                </template>
            </el-menu>
        </div>
        <div class="right-content">
            <router-view />
        </div>
    </div>
</template>

<style lang="scss">
.app-container {
    display: flex;
    height: calc((100vh - 47px));
    width: 100%;

    .left-menu {
        width: 260px;
        background-color: #f7f9fa;

        .logo-title {
            cursor: pointer;
            text-align: center;
            padding: 15px;
            color: #fff;
        }

        .pic-box {
            width: 260px;
            height: 180px;
            text-align: center;

            img {
                margin: 30px 0 10px 0;
                width: 90px;
                height: 90px;
                border-radius: 50%;
            }

            span {
                display: block;
            }
        }
    }

    .btn-box {
        height: 45px;
        display: flex;

        span {
            height: 100%;
            line-height: 45px;
            flex: 1;
            cursor: pointer;
            text-align: center;
            color: #82b8ff;
        }
    }

    .right-content {
        flex: 1;
        padding: 15px;
        background-color: #eeeff6;
        overflow-y: auto;
    }

    .active {
        color: #2282ff;
        border-bottom: 2px solid #2282ff;
        font-weight: bold;
    }
}
.el-radio-group {
    width: 100%;
}
.el-radio-button {
    width: 50%;
    box-sizing: border-box;
}
.el-radio-button__inner {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 !important;
}
</style>