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

<template>
  <div class="header">
    <div class="header-left">
      <img src="@/assets/imgs/OA/zdww.png" alt="" />
      <p
        >{{ titleName }}
        <!-- <span v-if="menuUlShow">|</span> {{ headerTitleName }} -->
      </p>
    </div>
    <!-- <div class="header-right">
      <ul class="menuUl" v-if="menuUlShow">
        <li v-for="(item, index) in reactiveData.routes" :key="index" v-show="item.alwaysShow">
          <router-link :to="'/oaSystem/' + pathBossName + '/' + item.path">
            <span>{{ item.name }}</span>
          </router-link>
        </li>
      </ul>
      <div class="header-user">
        <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
          <div class="flex items-center">
            <ElAvatar
              :src="avatar"
              alt=""
              class="w-[calc(var(--logo-height)-25px)] rounded-[50%]"
            />
            <span class="pl-[5px] c-white ml-5px text-14px <lg:hidden">
              {{ userName }}
            </span>
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem>
                <Icon icon="ep:tools" />
                <div @click="toProfile">{{ t('common.profile') }}</div>
              </ElDropdownItem>
              <ElDropdownItem divided @click="loginOut">
                <Icon icon="ep:switch-button" />
                <div>{{ t('common.loginOut') }}</div>
              </ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import { useDesign } from '@/hooks/web/useDesign'
import avatarImg from '@/assets/imgs/avatar.gif'
import { useUserStore } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useAppStore } from '@/store/modules/app'
defineOptions({ name: 'Header' })
const { t } = useI18n()

const { wsCache } = useCache()

const { push, replace } = useRouter()

const userStore = useUserStore()
const appStore = useAppStore()
const tagsViewStore = useTagsViewStore()

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('user-info')

const user = wsCache.get(CACHE_KEY.USER)

const avatar = user.user.avatar ? user.user.avatar : avatarImg

const userName = user.user.nickname ? user.user.nickname : 'Admin'
const titleName = ref(appStore.title)
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 toProfile = async () => {
  push('/user/profile')
}

const reactiveData: any = reactive({
  routes: []
})
const menuUlShow = ref(false) // 菜单列表是否显示，是首页就不显示
const headerTitleName: any = ref('') // 标题名称
const router = useRouter()

const pathBossName = ref('')
const initMenus = async () => {
  const uid = router.currentRoute.value
  let locals: any = localStorage.getItem('roleRouters')
  let roleRouters = JSON.parse(JSON.parse(locals).v)[0].children

  if (uid.path == '/oaSystem/home' || uid.path.indexOf('projectDetail') != -1) {
    menuUlShow.value = false
    reactiveData.routes = roleRouters
  } else {
    menuUlShow.value = true

    let childName = uid.name
    let childArr = roleRouters.slice(1, roleRouters.length)
    await childFun(childName, childArr)
  }
}

const childFun = async (name: any, arr: any) => {
  reactiveData.routes = []
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].children != null && arr[i].children) {
      for (let j = 0; j < arr[i].children.length; j++) {
        if (arr[i].children[j].path == name) {
          pathBossName.value = arr[i].path
          headerTitleName.value = arr[i].name
          reactiveData.routes = arr[i].children
        }
      }
    } else {
      if (arr[i].path == name) {
        headerTitleName.value = arr[i].name
      }
    }
  }
}
watch(() => {
  initMenus()
})
/** 初始化 **/
onMounted(() => {
  initMenus()
})
</script>
<style lang="scss" scoped>
.header {
  width: calc(100%);
  height: 112px;
  // background: #183868;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  .header-left {
    display: flex;
    align-items: center;
    img {
      width: 48px;
      height: 48px;
      margin-right: 15px;
    }
    p {
      font-size: 34px;
      color: #333f56;
      font-family: AlibabaPuHuiTiB;
    }
  }
  .header-right {
    display: flex;
    align-items: center;
    height: 100%;
    .menuUl {
      display: flex;
      align-items: center;
      height: 100%;
      margin: 0;
      border-right: 1px solid #45638e;
      li {
        width: 136px;
        list-style: none;
        height: 100%;
        a {
          width: 100%;
          height: 100%;
          display: block;
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          span {
            color: #fff;
            font-size: 16px;
          }
        }
        .router-link-active {
          background-color: #4e6e9e;
        }
      }
    }

    .header-user {
      margin-left: 25px;
    }
  }
}

.custom-hover {
  background-color: transparent;
}
</style>