rax-medical/src/views/index.vue

<template>
    <div class="page-content">
        <div class="head-box">
            <div class="logo-box">
                <img src="@/assets/imgs/logo.png" />
            </div>
            <ul class="menu-box">
                <li class="menu-item" v-for="item in menus" :key="item.path" :class="{ 'active': menuActive.indexOf(item.path) === 0 }"
                    @click="menuToPath(item)"><i :class="item.icon"></i><span>{{ item.label
                    }}</span></li>
            </ul>
            <div class="user-box">
                <!-- 超级管理员可切换医院 -->
                <el-select v-if="userInfo.permissions === '超级管理员'" class="select-hospital" style="width: 150px;"
                    :model-value="userInfo.hospital" size="small" @change="selectHospital">
                    <el-option v-for="item in hospitals" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <span v-else class="area">{{ userInfo.hospital }}</span>
                <el-button text>
                    <el-icon>
                        <Search />
                    </el-icon>
                </el-button>
                <el-button text>
                    <el-badge is-dot>
                        <el-icon>
                            <Bell />
                        </el-icon>
                    </el-badge>
                </el-button>
                <el-button text @click="toggleFullscreen">
                    <el-icon>
                        <FullScreen />
                    </el-icon>
                </el-button>
                <el-dropdown trigger="click" @command="userCommand">
                    <span class="el-dropdown-link">
                        {{ userInfo.name }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="info">个人信息</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div class="main-content">
            <RouterView />
        </div>
        <el-drawer v-model="isShowUserInfoDrawer" size="35%" :with-header="false">
            <userInfoForm @close="isShowUserInfoDrawer = false" />
        </el-drawer>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useLoginStore } from '@/stores/user-info-store'
import { getHospitalsData } from '@/static-data/core'
import userInfoForm from '@/components/user-info.vue'

const router = useRouter()
const route = useRoute()

const userInfo = useLoginStore().getlogin()
const hospitals: any = getHospitalsData()

const menus = [] as any
switch (userInfo.permissions) {
    case '超级管理员':
        menus.push({ label: '首页', path: '/home', icon: 'icon-shouye' })
        menus.push({ label: '权限管理', path: '/permissions-manage', icon: 'icon-users' })
        menus.push({ label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli' })
        menus.push({ label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang' })
        menus.push({ label: '后台管理', path: '/system-manage', icon: 'icon-houtaiguanli' })
        menus.push({ label: '日志管理', path: '/logs-manage', icon: 'icon-setting' })
        break;
    case '高级管理员':
        menus.push({ label: '首页', path: '/home', icon: 'icon-shouye' })
        menus.push({ label: '权限管理', path: '/permissions-manage', icon: 'icon-users' })
        menus.push({ label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli' })
        menus.push({ label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang' })
        menus.push({ label: '日志管理', path: '/logs-manage', icon: 'icon-setting' })
        break;
    case '中级管理员':
        menus.push({ label: '首页', path: '/home', icon: 'icon-shouye' })
        menus.push({ label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli' })
        menus.push({ label: '远程管理', path: '/remote-manage', icon: 'icon-anquanbaozhang' })
        break;
    case '普通用户':
        menus.push({ label: '首页', path: '/home', icon: 'icon-shouye' })
        menus.push({ label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli' })
        break;
    default:
        break;
}

const isShowUserInfoDrawer = ref(false)
const menuActive = ref('/')

router.isReady().then(() => {
    menuActive.value = route.path
})
router.beforeEach((to, from, next) => {
    menuActive.value = to.path
    next()
});

onMounted(() => {

})

const menuToPath = (e: any) => {
    menuActive.value = e.path
    router.push(e.path)
}
// 切换医院
const selectHospital = (e: any) => {
    // 根据实际情况看是否需要重新登录
    ElMessageBox.confirm(
        '是否跳转到登录页面登录到所选择医院？',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success',
        }
    ).then(() => {
        useLoginStore().setlogin('hospital', e)
        router.push('/login')
    }).catch(() => { })
}
const toggleFullscreen = () => {
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        document.documentElement.requestFullscreen();
    }
}
const userCommand = (e: string) => {
    switch (e) {
        case 'logout':
            useLoginStore().logout()
            router.push('/login')
            break;
        case 'info':
            isShowUserInfoDrawer.value = true
            break;
        default:
            break;
    }
}
</script>

<style lang='scss' scoped>
.page-content {
    width: 100%;
    height: 100%;

    .head-box {
        position: relative;
        width: 100%;
        height: 70px;
        padding: 0 464px 0 284px;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        .logo-box {
            position: absolute;
            top: 0;
            left: 24px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            height: 100%;

            img {
                height: 50px;
            }
        }
        

        .menu-box {
            display: flex;
            align-items: center;
            flex-shrink: 0;

            .menu-item {
                cursor: pointer;
                display: flex;
                align-items: center;
                font-size: 17px;
                font-weight: 600;
                color: $main-color;
                height: 70px;
                padding: 0 10px;
                margin: 0;
                transition: all .5s;
                -webkit-transition: all .5s;

                &:hover {
                    background: #f2f3f5;
                    transition: all .5s;
                    -webkit-transition: all .5s;
                }

                &.active {
                    background: #f2f3f5;
                    transition: all .5s;
                    -webkit-transition: all .5s;
                }

                i {
                    margin-right: 5px;
                }
            }
        }

        .user-box {
            position: absolute;
            width: 440px;
            height: 100%;
            top: 0;
            right: 20px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            background: white;

            .select-hospital {
                margin-right: 20px;
            }

            .area {
                cursor: pointer;
                font-size: 14px;
                color: $main-color;
                line-height: 1.6;
                padding: 0 20px;
                border: 1px solid #8c9094;
                border-radius: 7px;
                margin-right: 20px;
            }

            &>.el-button {
                margin: 0;
            }

            &>.el-dropdown {
                flex-shrink: 0;
                margin-left: 10px;
            }

            .el-dropdown-link {
                cursor: pointer;
            }
        }
    }
    &>.main-content {
        width: 100%;
        height: calc(100% - 70px);
        background: #f5f7fa;
    }
}

// @media screen and (max-width: 1610px) {
//     .page-content {
//         .head-box {
//             justify-content: flex-start;
//             .logo-box {
//                 position: relative;
//                 top: auto;
//                 left: auto;
//             }
//         }
//     }
    
// }
</style>