examcloud-admin-web/src/modules/basic/view/index.vue

<template>
  <div>
    <div class="wrapper">
      <header class="main-header">
        <!-- Logo -->
        <a href="javascript:void(0)" class="logo">
          <span class="logo-mini"><b>基础</b></span>
          <span class="logo-lg"><b>基础信息</b></span>
        </a>

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
          <!-- Sidebar toggle button -->
          <a
            href="javascript:void(0)"
            class="sidebar-toggle"
            data-toggle="offcanvas"
            role="button"
          >
            <span class="sr-only">Toggle navigation</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- User Account: style can be found in dropdown.less -->
              <li class="dropdown user user-menu">
                <a
                  href="javascript:void(0)"
                  class="dropdown-toggle"
                  data-toggle="dropdown"
                >
                  <span class="hidden-xs">
                    <i class="fa fa-user"></i> {{ user.displayName }}
                  </span>
                </a>
              </li>

              <li class="user user-menu">
                <a href="javascript:void(0)" @click="backIndex">
                  <i class="fa fa-home"></i> <span>主页面</span>
                </a>
              </li>

              <li class="user user-menu">
                <a href="javascript:void(0)" @click="logout">
                  <i class="fa fa-sign-out"></i> <span>退出</span>
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu">
            <li class="header"></li>
            <li class="treeview active">
              <a href="javascript:void(0)">
                <i class="fa fa-database"></i> <span>基础信息管理</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
            </li>
          </ul>
        </section>
        <!-- /.sidebar -->
      </aside>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content">
          <div class="row"><router-view></router-view></div>
        </section>
        <!-- Main content -->
      </div>
      <!-- /.row -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { CORE_API } from "@/constants/constants.js";

export default {
  data() {
    return {
      menuList: []
    };
  },
  components: {},
  computed: {
    ...mapState({ user: state => state.user })
  },
  methods: {
    logout() {
      this.$http
        .post(CORE_API + "/auth/logout")
        .then(() => {
          window.location.href = sessionStorage.getItem("loginUrl");
        })
        .catch(response => {
          if (response.status == 500) {
            this.$notify({
              showClose: true,
              message: response.data.desc,
              type: "error"
            });
          }
          window.location.href = sessionStorage.getItem("loginUrl");
        });
    },
    backIndex() {
      window.location.href = sessionStorage.getItem("indexUrl");
    }
  },
  created() {
    var url = CORE_API + "/rolePrivilege/getUserPrivileges";
    this.$http
      .post(
        url,
        {
          groupCode: "BASIC_MENUS",
          full: false
        },
        { emulateJSON: true }
      )
      .then(response => {
        this.menuList = response.data;
      })
      .catch(response => {
        if (response.status == 500) {
          this.$notify({
            showClose: true,
            message: response.data.desc,
            type: "error"
          });
        }
      });
  }
};
</script>

<style scoped>
span.logo-lg {
  font-family: "Micrsoft YaHei";
  font-size: 30px;
}
</style>