spa/src/components/Header.vue

<template>
  <a-layout-header :style="{ backgroundColor: navTheme === 'light' ? primaryColor : '#fff' }">
    <div>
      <a-icon
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="$emit('update:collapsed', !collapsed)"
        :style="{ verticalAlign: 'top', ...color }"
      />
      <h1
        :style="{
          display: 'inline-block',
          ...color,
        }"
      >
        XXX后台管理系统
      </h1>
    </div>
    <a-space size="small" style="margin-right: 36px">
      <a href="https://www.baidu.com/" target="_blank" class="header-link"
        ><a-icon type="question-circle" :style="color"
      /></a>
      <a-popover trigger="click" class="header-link" placement="bottomRight">
        <div slot="content">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" tab="通知(0)">
              <a-button type="dashed" block @click="goToNoticePage('notice')">
                Content of Tab Pane 1
              </a-button>
            </a-tab-pane>
            <a-tab-pane key="2" tab="系统消息(0)" force-render>
              <a-button type="dashed" block @click="goToNoticePage('message')">
                Content of Tab Pane 2
              </a-button>
            </a-tab-pane>
          </a-tabs>
        </div>
        <a-icon type="bell" :style="color" />
      </a-popover>
      <a-dropdown>
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          <a-avatar
            class="avatar"
            style="margin-right: 12px"
            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
          />
          <span :style="color">欢迎您，{{ 'xxx' }}</span>
        </a>
        <a-menu slot="overlay">
          <a-menu-item key="0">
            <router-link :to="{ name: 'account-center' }">
              <a-icon type="user" style="margin-right: 8px" />
              <span>个人中心</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="1">
            <!-- <router-link :to="{ name: 'account-settings-notification' }"> -->
            <router-link :to="{ name: 'account-settings-Index' }">
              <a-icon type="setting" style="margin-right: 8px" />
              <span>账户设置</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="3" @click="systemSetting">
            <a-icon type="tool" />
            <span>系统设置</span>
          </a-menu-item>
          <a-menu-item key="4" @click="updatePassword">
            <a-icon type="setting" />
            <span>密码修改</span>
          </a-menu-item>
          <a-menu-item key="5" @click="updateCurrentDepart">
            <a-icon type="cluster" />
            <span>切换部门</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <a href="javascript:;" class="header-link" @click="handleLogout">
        <a-icon type="logout" :style="color" />
        <span :style="color">&nbsp;退出登录</span>
      </a>
      <user-password ref="userPassword"></user-password>
      <setting-drawer :visible.sync="visible" />
    </a-space>
  </a-layout-header>
</template>

<script>
import UserPassword from '@/components/UserPassword'
import SettingDrawer from '@/components/SettingDrawer'
import { mapState } from 'vuex'
export default {
  name: 'Header',
  props: {
    collapsed: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  components: {
    UserPassword,
    SettingDrawer,
  },
  data() {
    return {
      visible: false,
    }
  },
  computed: {
    ...mapState({
      navTheme: state => state.app.navTheme,
      primaryColor: state => state.app.primaryColor,
    }),
    color() {
      return {
        color: this.navTheme === 'light' ? '#fff' : '#000',
      }
    },
  },
  methods: {
    goToNoticePage(type) {
      // if (
      //   this.$route.name === "isps-userAnnouncement" &&
      //   this.$route.query.type === type
      // ) {
      //   return;
      // } else {
      this.$router.push({
        name: 'isps-userAnnouncement',
        query: { type },
      })
      // }
    },
    systemSetting() {
      this.visible = true
    },
    updatePassword() {
      this.$refs.userPassword.show()
    },
    updateCurrentDepart() {
      this.$message.warning('您尚未设置部门信息!')
    },
    handleLogout() {
      let that = this
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗 ?',
        onOk() {
          that.$store.dispatch('user/logout')
        },
        onCancel() {},
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/common';
.trigger {
  font-size: 18px;
  line-height: @header-height;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.ant-dropdown-link {
  height: 100%;
  display: inline-block;
  padding: 0 12px;
  color: #2c3e50;
  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
.header-link {
  line-height: 3;
  .ant-dropdown-link();
}
</style>