yxk-electronic-archives/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <logo v-if="showLogo" :collapse="isCollapse" />

    <div class="right-menu">
      <!-- 主题切换 -->
      <div class="themeBox" style="font-size:12px; margin-right:20px; cursor: pointer;">
        <span @click="changetheme('dark')">深色主题</span>
        <span @click="changetheme('light')">浅色主题</span>
      </div>
      <div style="font-size: 18px; color: #1C1C1C; margin-right: 30px; cursor: pointer;" class="iconfont icon-jieyueche-ding" />
      <!-- 消息中心 -->
      <el-dropdown ref="messageDrop" class="message-center right-menu-item hover-effect" trigger="click">
        <div class="message-icon">
          <span class="iconfont icon-xiaoxi" />
          <i v-if="msgList.length > 0" class="message-num">{{ msgList.length }}</i>
        </div>
        <el-dropdown-menu slot="dropdown" class="message-dropdown" style="width: 420px;">
          <div style="display: flex; justify-content: flex-end; padding: 0 20px; height: 40px; line-height: 40px; color: #339CFF; font-size: 14px; border-bottom: 1px solid #339CFF;">
            <span style="cursor: pointer;" @click="handleAllRead">全部标记为已读</span>
            <!-- 消息中心router -->
            <span style="color:#fff; margin-left: 10px; cursor: pointer;" @click="toAllMessage">去查看</span>
          </div>
          <div style="max-height: 450px; overflow: hidden; overflow-y: scroll;">
            <el-dropdown-item v-if="msgList.length===0" class="message-list-item">
              <div style="text-align:center">暂无最新消息</div>
            </el-dropdown-item>
            <el-dropdown-item v-for="(item,index) in msgList" :key="index" class="message-list-item">
              <router-link :to="{ path: '/user/center', query: { activeIndex: 1 }}">
                <p>{{ item.noticeContent }}</p>
                <span>{{ item.create_time | parseTime }}</span>
                <i class="el-icon-arrow-right" />
              </router-link>
            </el-dropdown-item>
          </div>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <div class="user-img-cover">
            <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar" :onerror="defaultImg">
          </div>
          <div class="user-name">{{ user.username }}</div>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link :to="{ path: '/user/center', query: { activeIndex: 0 }}">
            <el-dropdown-item>
              个人中心
            </el-dropdown-item>
          </router-link>
          <router-link :to="{ path: '/user/center', query: { activeIndex: 1 }}">
            <el-dropdown-item>
              我的消息
            </el-dropdown-item>
          </router-link>
          <span style="display:block;" @click="open">
            <el-dropdown-item>
              退出登录
            </el-dropdown-item>
          </span>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Logo from '@/layout/components/Sidebar/Logo'
// import Breadcrumb from '@/components/Breadcrumb'
// import Hamburger from '@/components/Hamburger'
// import Doc from '@/components/Doc'
// import Screenfull from '@/components/Screenfull'
// import SizeSelect from '@/components/SizeSelect'
// import Search from '@/components/HeaderSearch'
import Avatar from '@/assets/images/avatar.png'
import { getUserNotice, isread } from '@/api/system/logs'

export default {
  inject: ['reload'],
  components: {
    // Breadcrumb,
    // Hamburger,
    // Screenfull,
    // SizeSelect,
    // Search,
    // Doc,
    Logo
  },
  data() {
    return {
      Avatar: Avatar,
      defaultImg: 'this.src="' + require('@/assets/images/avatar.png') + '"',
      msgList: [],
      themeValue: localStorage.getItem('themeValue') ? localStorage.getItem('themeValue') : 'dark'
    }
  },

  computed: {
    ...mapGetters([
      'sidebar',
      'device',
      'user',
      'baseApi'
    ]),
    show: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  created() {
    this.getMsgList()
    if (!localStorage.getItem('themeValue')) {
      this.changetheme('dark')
    }
  },
  methods: {
    // 获取未读消息
    async getMsgList() {
      const params = {
        page: 0,
        size: 10,
        sort: 'createTime,desc'
      }
      const list = []
      const allList = await this.getAllNoRead(params, list)
      allList.forEach(item => {
        item.pushUserName = item.noticeUsers[0].pushUserName
        item.isRead = item.noticeUsers[0].isRead
      })
      const arr = allList.filter(item => { return !item.isRead })
      if (arr.length > 20) {
        this.msgList = arr.slice(0, 20)
      } else {
        this.msgList = arr
      }
    },
    // 全部已读
    async handleAllRead() {
      const params = {
        page: 0,
        size: 10,
        sort: 'createTime,desc'
      }
      const list = []
      const ids = []
      const allList = await this.getAllNoRead(params, list)
      allList.forEach(item => {
        item.noticeUsers.forEach(i => {
          ids.push(i.id)
        })
      })
      isread(ids).then(res => {
        if (res) {
          this.msgList = []
          if (this.$route.path.includes('user/center') || this.$route.path.includes('system/notifyManage')) {
            this.reload()
          }
        }
      })
    },
    // 递归获取所有消息列表
    async getAllNoRead(params, list) {
      const allList = await getUserNotice(params).then(res => {
        list = list.concat(res.content)
        if ((list.length) < res.totalElements) {
          params.page++
          return this.getAllNoRead(params, list)
        } else {
          return list
        }
      })
      return allList
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    toAllMessage() {
      this.$router.push({ path: '/user/center', query: { activeIndex: 1 }})
      this.$refs.messageDrop.hide()
    },
    open() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
      })
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()
      })
    },
    handleClose(done) {
      done()
    },
    changetheme(theme) {
      window.document.documentElement.setAttribute('data-theme', theme)
      localStorage.setItem('themeValue', theme)
    }

  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.navbar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: $headerHeight;
  overflow: hidden;
  position: relative;
  @include shadow-set;
  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    display: flex;
    line-height: 64px;
    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;
      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }
    .message-center{
      margin-right: 40px;
      .message-icon{
        position: relative;
        .icon-xiaoxi{
          font-size: 20px;
          @include icon_color;
        }
        .message-num{
          position: absolute;
          top: 0;
          right: -8px;
          display: block;
          width: 20px;
          height: 20px;
          font-size: 14px;
          text-align: center;
          line-height: 20px;
          border-radius: 50%;
          background-color: #F91832;
          color: #fff;
        }
      }
    }

    .avatar-container {
      margin-right: 40px;
      .avatar-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        @include icon_color;
        .user-img-cover{
          width: 24px;
          height: 24px;
        }
        .user-avatar {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          // border: 1px solid red;
          cursor: pointer;
        }
        .user-name{
          margin: 0 37px 0 8px;
          flex: 1;
          font-size: 14px;
        }
        .el-icon-caret-bottom {
          cursor: pointer;
          font-size: 14px;
        }
      }
    }
  }
}
</style>