baoan-common/src/components/admin-frame/Header.vue

<template>
  <div id="Header">
    <el-row>
      <el-col :span="24" class="main header">
        <el-col :span="24" class="one">
          <el-col :span="8" class="left">
            <span @click="collapseChage">
              <i v-if="!collapse" class="el-icon-s-fold"></i>
              <i v-else class="el-icon-s-unfold"></i>
            </span>
            <span
              >{{ siteInfo.zhTitle }}-{{
                type == 'baoanpolice' ? '公安端' : type == 'baoancompany' ? '企业端' : type == 'baoanexam' ? '考试端' : type == 'baoansociety' ? '协会端' : ''
              }}</span
            >
          </el-col>
          <el-col :span="16" class="right">
            <el-button type="primary" size="mini" @click="headerBtn('统计')" v-if="type == 'baoanpolice'">统计</el-button>
            <el-button type="primary" size="mini" @click="headerBtn('统计2')" v-if="type == 'baoanpolice'">统计-模板2</el-button>
            <el-button type="primary" size="mini" @click="headerBtn('统计3')" v-if="type == 'baoanpolice'">统计-模板3</el-button>
            <el-button type="primary" size="mini" @click="headerBtn('统计4')" v-if="type == 'baoanpolice'">统计-模板4</el-button>
            <el-button type="primary" size="mini" @click="headerBtn('修改密码')">修改密码</el-button>
            <el-button size="mini" class="name"><i class="el-icon-user-solid"></i>{{ user.name || user.company || '游客' }}</el-button>
            <el-button type="danger" size="mini" @click="logout">退出登录</el-button>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const { siteInfo } = require('../../layout/deploy/site');
import { mapState, mapMutations } from 'vuex';
import bus from './bus';

export default {
  name: 'Header',
  props: {},
  components: {},
  data: function() {
    return { collapse: false, siteInfo: siteInfo, type: '' };
  },
  created() {
    this.initTitle();
  },
  methods: {
    ...mapMutations(['deleteUser']),
    // 侧边栏折叠
    collapseChage() {
      this.collapse = !this.collapse;
      bus.$emit('collapse', this.collapse);
    },
    // 退出登录
    logout() {
      this.deleteUser();
      this.$router.push('/login');
    },
    initTitle() {
      // 不同用户类别，显示不同的名称
      const { options } = this.$router;
      if (!options) {
        console.warn('获取菜单:解析base错误');
        return;
      }
      const { base } = options;
      this.$set(this, `type`, base);
    },
    headerBtn(type) {
      this.$emit('headerBtn', type);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  mounted() {
    if (document.body.clientWidth < 1500) {
      this.collapseChage();
    }
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    height: 60px;
    border-bottom: 1px solid #f1f1f1;
    padding: 0 10px;
    .left {
      line-height: 60px;
      span {
        display: inline-block;
        margin: 0 10px;
        font-size: 22px;
        color: #ffffff;
        font-weight: bold;
        font-family: cursive;
      }
    }
    .right {
      text-align: right;
      padding: 15px 0;
      .name {
        background-color: transparent;
        border: none;
        color: #fff;
      }
    }
  }
}
</style>