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.meta.icon"></i><span>{{
            item.name
          }}</span></li>
      </ul>
      <div class="user-box">
        <!-- 超级管理员可切换医院 -->
        <el-select class="select-hospital" style="width: 150px;"
                   v-model="hospital" size="small" @change="selectHospital">
          <el-option v-for="item in hospitals" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
        <!--        <el-button text>
                  <el-icon>
                    <Search/>
                  </el-icon>
                </el-button>-->
        <el-button text @click="userStore.showHomeMsg=true">
          <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>
    <el-drawer
        class="message-drawer-box"
        v-model="userStore.showHomeMsg"
        title="通知消息"
    >
      <div class="body">
        <el-card style="margin-top: 10px;" v-for="(item, index) in messageTable">
          <template #header>
            <div class="card-header">
              <span>{{ item.category }}</span>
            </div>
          </template>
          <p class="text item">{{ item.message }}</p>
          <template #footer>
            <span>{{ item.creatorName }}</span>
            <span style="float: inline-end;">{{ item.createTime }}</span>
          </template>
        </el-card>
      </div>

      <div class="footer">
        <el-pagination
            v-model:page-size="size"
            v-model:current-page="current"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next, jumper, sizes"
            :page-sizes="[10, 20, 30, 50]"
            :total="total"
        />
      </div>
    </el-drawer>
  </div>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'
import {useUserStore} from '@/stores/user-info-store'
import userInfoForm from '@/components/user-info.vue'
import {logout} from "@/api/login";
import * as hospitalApi from "@/api/hospital";
import * as msgApi from "@/api/sys-message";

const router = useRouter()
const route = useRoute()
const userStore = useUserStore();
const userInfo = userStore.getlogin()
const hospital = ref("");
const preHospital = ref("");
const hospitals = ref([] as any)
const menus = ref([] as any)
const isShowUserInfoDrawer = ref(false)
const menuActive = ref('/')
const messageTable = ref([] as any)
const current = ref(1);
const size = ref(10);
const total = ref(0);

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

onMounted(() => {
  init();
})

function init() {
  getHospitalList();
  handleMenu();
  messageTable.value = [];
  current.value = 1
  total.value = 0
}

function handleMenu() {
  useUserStore().getMenuPathList().then((res: any) => {
    menus.value = res.menus;
  });
}

function handleSizeChange() {
  messageTable.value = [];
  loadMsg()
}

function handleCurrentChange() {
  messageTable.value = [];
  loadMsg()
}

async function loadMsg() {
  const res = await msgApi.page(current.value, size.value)
  if (res.code == 0) {
    total.value = res.data.total
    res.data.records.forEach((row: any) => {
      messageTable.value.push(row)
    })
  }
}

const menuToPath = (e: any) => {
  menuActive.value = e.path
  router.push(e.path)
}

async function getHospitalList() {
  const data: any = await hospitalApi.getCurrentHospital();
  hospitalApi.getMyHospitalList().then((res: any) => {
    hospitals.value = [];
    if (res.code == 0 && res.data.length > 0) {
      hospitals.value = res.data;
      if (data.data && data.data != 'null') {
        hospital.value = data.data;
      }
      preHospital.value = hospital.value
    }
  })
}

// 切换医院
const selectHospital = (e: any) => {
  if (hospitals.value.length == 0) return;
  // 根据实际情况看是否需要重新登录
  ElMessageBox.confirm(
      '是否跳转到所选择医院？',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        draggable: true
      }
  ).then(() => {
    hospitalApi.changeHospital(hospital.value).then((res: any) => {
      if (res.code == 0) {
        window.location.reload();
      } else {
        hospital.value = preHospital.value;
        ElMessage.error("切换失败")
      }
    })
  }).catch(() => {
    hospital.value = preHospital.value;
  })
}
const toggleFullscreen = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    document.documentElement.requestFullscreen();
  }
}

const userCommand = async (e: string) => {
  switch (e) {
    case 'logout':
      await logout()
      useUserStore().logout();
      window.location.replace("/");
      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>