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'
import {Session} from "@/utils/storage";
import {logout} from "@/api/login";

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

const userInfo = useLoginStore().getlogin()
const hospitals = ref([] as any)
getHospitalsData().then((res: any) => {
  hospitals.value = res
  // console.log(res)
})

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:
		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'})
}

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',
        draggable: true
      }
  ).then(() => {
    // useLoginStore().setlogin('hospital', e)
    router.push('/login')
  }).catch(() => {
  })
}
const toggleFullscreen = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
}
const userCommand = async (e: string) => {
  switch (e) {
    case 'logout':
      // useLoginStore().logout()
      await logout()
      Session.clear();
      window.location.reload();
      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: 20px;
        font-weight: 600;
        color: $main-color;
        height: 70px;
        padding: 0 15px;
        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>