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="user.user.avatar ?? avatarImg" 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="toMainOfficeCenter()">
        <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.visible && item.name != '个人档案'"
        >
          <el-menu-item @click="menuClick(item, index)" :index="String(index)">
            <Icon :icon="item.icon" />
            <span>{{ item.name }}</span>
            <span
              class="project_corner"
              v-if="['个人中心'].includes(item.name) && projectCorner > 0"
            >
              {{ projectCorner }}
            </span>
          </el-menu-item>
          <MenusActive :menuData="menuData" v-if="mouseenterIndex == index" />
        </div>
      </el-menu>
      <div class="ai-btn">
        <img class="ai-tip" :src="AITip" alt="" />
        <img :src="AIBtn" alt="" class="robot" @click="handleGoToAi" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Icon } from '@/components/Icon'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
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'
import subscribe from '@/utils/Subscribe'
import request from '@/config/axios'
import { useUserStoreWithOut } from '@/store/modules/user'
import AIBtn from '@/assets/imgs/ai/robot.png'
import AITip from '@/assets/imgs/ai/aiTip.png'

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

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

const userStore = useUserStoreWithOut()
const user = userStore.$state

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 })
})
//个人中心角标（项目产值待审核）
const projectCorner = ref<number>(0)
const getProjectCheckNum = async () => {
  const result: any = await request.get(
    {
      url: '/projectReport/check-num'
    },
    '/business'
  )
  projectCorner.value = result
}
getProjectCheckNum()
/***
 * 根据用户ID获取待办角标
 */
const attendCount = ref<number>(0)
const initAttendCount = async () => {
  const result = await getAttendCount({
    userId: userId
  })
  if (result) {
    attendCount.value = result
  }
}
initAttendCount()
subscribe.on('updateHandleCenterCorner', () => {
  //同步更新办件中心角标
  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 handleGoToAi = (): void => {
  push('/OaSystem/aiQA')
}

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 toMainOfficeCenter = () => {
  router.push({
    path: '/mainOfficeCenter'
  })
}
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;
      }
    }
  }

  .project_corner {
    background-color: #f00;
    position: absolute;
    right: 25px;
    top: 10px;
    font-size: 12px;
    color: #fff;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    font-size: 14px !important;
    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);
    position: relative;

    .ai-btn {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
      cursor: pointer;

      .ai-tip {
        width: 60px;
        height: 22px;
        position: absolute;
        bottom: 80px;
        right: -20px;
      }

      .robot{
        width: 85px;
        height: 102px;
      }
    }

    .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>