yudao-dev/src/layout/components/NavbarRight.vue

<template>
  <div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'">
      <div class="home-icon" v-if='blackTitle'>
        <svg-icon icon-class="home" style="font-size: 24px; cursor: pointer;" @click="toHome"/>
      </div>
      <div class="time-msg">
        <div class="line1">{{timeZone}}&nbsp;&nbsp;&nbsp;&nbsp;{{topTime}}</div>
        <div class="line2">{{topDate}}</div>
      </div>
      <div class="base-msg">
        <div class="avatar">
          <el-dropdown>
            <img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><svg-icon icon-class="helpbtn"/>帮助文档</el-dropdown-item>
              <el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn"/>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="use-msg">
          <div class="line1">{{nickname}}</div>
          <div class="line2">{{dept}}</div>
        </div>
      </div>
    </div>
</template>
<script>
import moment from 'moment'
import { getUserSimple } from "@/api/system/user.js";
import {getPath} from "@/utils/ruoyi";
export default {
  name: 'navRight',
  data() {
    return {
      topDate: '',
      topTime: '',
      timeZone: '',
      timer: '',
      dept:' ',
      nickname: this.$store.getters.nickname
    }
  },
  props: {
    blackTitle: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  created() {
    this.getUserMsg()
    this.getTime()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getTime() {
      let _this = this
      this.timer = setInterval(function () {
        _this.topDate = moment().format('YYYY/MM/DD')
        let temp = moment().format('A-hh:mm').split('-')
        _this.timeZone = temp[0]
        _this.topTime = temp[1]
      }, 1000)
    },
    getUserMsg() {
      let id = this.$store.getters.userId
      getUserSimple(id).then(res => {
        this.dept = res.data.deptName ? res.data.dept.deptName : '---'
      })
    },
    async logout() {
      this.$modal.confirm('确定注销并退出系统吗？', '提示').then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = getPath('/');
        })
      }).catch(() => {})
    },
    toHome() {
      this.$router.push({ path: "/" })
    }
  }
}
</script>
<style lang='scss' scoped>
.right-msg {
  float: right;
  height: 100%;
  font-size: 14px;
  .time-msg {
    display: inline-block;
    margin-right: 30px;
  }
  .home-icon {
    display: inline-block;
    margin-right: 30px;
    vertical-align: top;
    padding-top: 7px;
  }
  .base-msg {
    display: inline-block;
    .avatar {
      display: inline-block;
      margin-right: 10px;
    }
    .use-msg {
      display: inline-block;
    }
  }
  .line1 {
    height: 19px;
  }
  .line2 {
    height: 19px;
    opacity: 0.65;
  }
}
</style>