eta_mini_crm_front/src/layout/components/HeaderWrap.vue

<script setup>
import { useLayoutState } from '../hooks/index'
import { useRoute, useRouter } from 'vue-router'
import NoticeWrap from './NoticeWrap.vue'
import {apiSystemMessage} from '@/api/system'

const { menuClose, menuCloseChange } = useLayoutState()

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


const breadcrumbArr=computed(()=>{
  const arr=route.matched
  let temarr=arr.map(item=>{
    return item.meta
  })
  if(arr[1]&&arr[1].meta.from){
    temarr.splice(1,0,{title:arr[1].meta.from})
  }
  return temarr
})
function handleClickBreadcrumb(e){
  // router.push()
}


// 阅读消息
function handleReadNotice(){
  apiSystemMessage.msgRead().then(res=>{
    if(res.Ret===200){
      hasUnRead.value=false
    }
  })
}
const hasUnRead=ref(false)//是否有未读


</script>

<template>
  <div class="flex header-wrap">
    <img src="@/assets/imgs/logo.png" alt="" class="logo-img">
    <!-- 折叠按钮 -->
    <el-icon size="26px" v-if="menuClose" @click="menuCloseChange"
      ><i-ep-Expand
    /></el-icon>
    <el-icon size="26px" v-else @click="menuCloseChange"><i-ep-Fold /></el-icon>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="margin-left: 30px">
      <el-breadcrumb-item v-for="item in breadcrumbArr" :key="item.title" @click="handleClickBreadcrumb(item)">{{
        item.title
      }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content"></div>
    <!-- 通知 -->
    <el-popover placement="bottom" :width="500" trigger="click" @show="handleReadNotice" v-if="hasPermission('message:info')">
      <template #reference>
        <div :class="['system-notice-box',hasUnRead?'system-notice-box_red':'']">
          <svg-icon name="notification-filled" size="18px"></svg-icon>
        </div>
      </template>
      <NoticeWrap @change="e=>hasUnRead=e"/>
    </el-popover>
  </div>
</template>

<style lang="scss" scoped>
.header-wrap {
  position: fixed;
  left: 0px;
  top: 0;
  right: 0;
  height: 60px;
  z-index: 50;
  background-color: #091F6B;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  padding: 0 30px 0 0;
  align-items: center;
  color: #fff;
  .logo-img{
    width: 200px;
    height: 100%;
    margin-right: 30px;
  }
  :deep(.el-breadcrumb__item){
    .el-breadcrumb__inner{
      color: #fff;
    }
  }

  .content {
    flex: 1;
  }
  .system-notice-box{
    position: relative;
    &.system-notice-box_red::after{
      content: '';
      display: block;
      width: 6px;
      height: 6px;
      background-color: #f00;
      border-radius: 6px;
      position: absolute;
      top: -2px;
      right: -2px;
    }
  }
}
</style>