zjugis_OA/client/src/views/OaSystem/oaLayout/menus.vue

<template>
  <div class="oa_menus">
    <div class="menus-user">
      <div class="userImg" @click="userImgClick">
        <ElAvatar :src="avatar" alt="" class="userIcon" />
        <div class="glBox" v-show="data?.sl">
          <span>司龄{{ data?.sl }}年</span>
        </div>
        <div class="userHover">
          <p>个人档案</p>
        </div>
      </div>
      <div class="userInfo">
        <h4>{{ userName }}</h4>
        <p>{{ deptName }}</p>
      </div>
    </div>
    <div class="menus-btns">
      <div class="btn" @click="toPageHandle('/mainOfficeCenter')">
        <img src="@/assets/imgs/OA/bjzx_icon.png" alt="" />
        <p>办件中心</p>
        <div class="tip" v-show="attendCount > 0">{{ attendCount }}</div>
      </div>
    </div>
    <div class="menus-tabs">
      <el-menu default-active="2" class="el-menu-vertical-demo">
        <div
          v-for="(item, index) in reactiveData.routes"
          :key="index"
          class="menuDiv"
          @mouseenter="handleMouseEnter(item, index)"
          @mouseleave="handleMouseLeave(item, index)"
          v-show="item.name != '个人档案'"
        >
          <el-menu-item @click="menuClick(item, index)" :index="String(index)">
            <Icon :icon="item.icon" />
            <span>{{ item.name }}</span>
          </el-menu-item>
          <MenusActive :menuData="menuData" v-if="mouseenterIndex == index" />
        </div>
      </el-menu>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Icon } from '@/components/Icon'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import avatarImg from '@/assets/imgs/avatar.gif'
import { useUserStore } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import MenusActive from './menusActive.vue'
import { useQuery } from '@tanstack/vue-query'
import { getRecordsDetail } from '@/api/oa/staffRecords'
import { getAttendCount } from '@/api/oa/index'

defineOptions({ name: 'Header' })
const { t } = useI18n()

const { wsCache } = useCache()

const { push, replace, currentRoute } = useRouter()
const router = useRouter()
const userStore = useUserStore()
const tagsViewStore = useTagsViewStore()

const user = wsCache.get(CACHE_KEY.USER)
console.log('user: ', user)
const avatar = user.user.avatar ? user.user.avatar : avatarImg

const userName = user.user.nickname ? user.user.nickname : 'Admin'

const deptName = user.user.deptName ? user.user.deptName : '部门信息'
const userId = user.user.id // 当前登录的编号
const { data } = useQuery(['fetch-staff-detail-left', userId], async () => {
  return await getRecordsDetail({ userId })
})

/***
 * 根据用户ID获取待办角标
 */
const attendCount = ref<number>(0)
const initAttendCount = async () => {
  const result = await getAttendCount({
    userId: userId
  })
  if (result) {
    attendCount.value = result
  }
}
initAttendCount()

const mouseenterIndex = ref(-1)
const loginOut = () => {
  ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  })
    .then(async () => {
      await userStore.loginOut()
      tagsViewStore.delAllViews()
      replace('/login?redirect=/index')
    })
    .catch(() => {})
}
const userImgClick = () => {
  push('/oaSystem/mineCenter')
}
const reactiveData: any = reactive({
  routes: []
})

const initMenus = async () => {
  let locals: any = localStorage.getItem('roleRouters')
  let roleRouters = JSON.parse(JSON.parse(locals).v)?.[0]?.children

  let childArr = roleRouters?.slice(0, roleRouters?.length)
  reactiveData.routes = childArr
}

const menuClick = (item: any, idx: any) => {
  if (item.name == '运营中心') {
    const url = router.resolve({
      path: '/oaView/marketView'
    })
    // 打开新窗口
    window.open(url.href)
    return
  }
  if (item.children == null) {
    push('/oaSystem/' + item.path)
  } else {
    return
  }
}
const menuData = ref()
const handleMouseEnter = (item: any, index: any) => {
  if (item.children != null) {
    mouseenterIndex.value = index
    menuData.value = item
  } else {
    mouseenterIndex.value = -1
  }
}
const toPageHandle: (path: string) => void = (path: string) => {
  push({
    path
  })
}
const handleMouseLeave = (item: any, index: any) => {
  mouseenterIndex.value = -1
}
/** 初始化 **/
onMounted(() => {
  initMenus()
})
</script>
<style lang="scss" scoped>
.oa_menus {
  width: calc(100%);
  height: 100%;
  // background: #183868;

  .menus-user {
    display: flex;
    width: 100%;
    height: 180px;
    padding-top: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #5383bd;
    flex-wrap: wrap;
    justify-content: center;

    .userImg {
      position: relative;
      display: flex;
      width: 60px;
      height: 60px;
      padding: 3px;
      cursor: pointer;
      background-color: #fff;
      border-radius: 50%;
      align-items: center;
      justify-content: center;

      .userIcon {
        width: 100%;
        height: 100%;
      }

      .glBox {
        position: absolute;
        bottom: -10px;
        left: 50%;
        z-index: 1;
        display: flex;
        width: 64px;
        height: 18px;
        margin-left: -32px;
        background: #f9a527;
        border-radius: 14px;
        align-items: center;
        justify-content: center;

        span {
          font-size: 12px;
          color: #fff;
        }
      }

      .userHover {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000, $alpha: 30%);
        border-radius: 50%;
        align-items: center;
        justify-content: center;

        p {
          font-size: 10px;
          color: #fff;
        }
      }
    }

    .userImg:hover {
      .userHover {
        display: flex;
      }
    }

    .userInfo {
      width: 100%;
      margin-top: 0;

      h4 {
        margin-bottom: 5px;
        font-size: 18px;
        color: #fff;
        text-align: center;
      }

      p {
        font-size: 14px;
        font-weight: 400;
        color: #bcd1f0;
        text-align: center;
      }
    }
  }

  .menus-btns {
    width: 100%;
    height: 40px;
    padding: 0 20px;
    margin-bottom: 10px;
    position: relative;
    .tip {
      background-color: #f00;
      position: absolute;
      right: 15px;
      top: -10px;
      font-size: 12px;
      color: #fff;
      width: 22px;
      height: 22px;
      line-height: 22px;
      border-radius: 50%;
      text-align: center;
    }
    .btn {
      display: flex;
      width: 100%;
      height: 100%;
      cursor: pointer;
      background: #05ce9e;
      border-radius: 20px;
      align-items: center;
      justify-content: center;

      p {
        margin-left: 8px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
      }
    }
  }

  .menus-tabs {
    width: 100%;
    height: calc(100% - 250px);

    .menuDiv {
      position: relative;

      :deep(.el-menu-item) {
        justify-content: center;
      }
    }
  }
}

::v-deep(.menus-tabs) {
  .el-menu {
    background-color: transparent;
    border: none;

    span {
      font-size: 16px;
      color: #fff;
    }

    .is-active {
      background-color: transparent;
    }

    .el-menu-item:hover {
      background-color: #113468;
    }
  }
}

:deep(.el-menu-item > span) {
  font-size: 18px !important;
}

:deep(.el-menu-item > .el-icon > span) {
  font-size: 18px !important;
}
</style>