server/portal/src/views/Main.vue

<template>
  <!-- loading 效果 -->
  <div class="main" :class="{ 'main-hide-text': shrink }">
    <div>
      <div
        class="progress-indicator"
        :class="{ 'progress-bar-shown': globalLoadingShow }"
      ></div>
    </div>
    <div
      class="sidebar-menu-con"
      :style="{
        width: shrink ? '64px' : '200px',
        overflow: shrink ? 'visible' : 'auto',
      }"
    >
      <shrinkable-menu
        :shrink="shrink"
        :theme="menuTheme"
        :before-push="beforePush"
        :open-names="openedSubmenuArr"
        :menu-list="menuList"
        @on-change="handleSubmenuChange"
      >
        <div slot="top" class="logo-con">
          <img v-show="!shrink" src="@/assets/images/logo.png" key="max-logo" />
          <img
            v-show="shrink"
            src="@/assets/images/logo-min.png"
            key="min-logo"
          />
        </div>
      </shrinkable-menu>
    </div>
    <div
      class="main-header-con"
      :style="{ paddingLeft: shrink ? '64px' : '200px' }"
    >
      <div class="main-header">
        <div class="navicon-con">
          <div
            class="icon-list"
            :style="{
              transform: 'rotateZ(' + (this.shrink ? '-90' : '0') + 'deg)',
            }"
            @click="toggleClick"
          >
            <span class="icon-bar"></span>
          </div>
        </div>
        <div class="header-middle-con">
          <div class="main-breadcrumb">
            <breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav>
          </div>
        </div>
        <div class="header-avator-con">
          <div class="head-user-info">
            <ul>
              <li>
                <Button style="display: none" icon="ios-analytics"
                  ><a href="http://192.168.10.36:97/hot/#/home" target="_blank"
                    >考情动态</a
                  ></Button
                >
              </li>
              <li>
                <Button
                  style="display: none"
                  icon="ios-analytics"
                  @click="moniModalIsShow = true"
                  >考情监控</Button
                >
              </li>
              <li class="info-avatar">
                <img src="@/assets/images/header.jpg" />
              </li>
              <li>
                <span>{{ userName }}</span>
              </li>
              <li class="info-logout" @click="logout">
                <span>退出登录</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="single-page-con" :style="{ left: shrink ? '60px' : '200px' }">
      <div class="single-page">
        <keep-alive :include="cachePage">
          <router-view></router-view>
        </keep-alive>
      </div>
    </div>

    <transition name="ease">
      <div class="moni-modal" v-if="moniModalIsShow">
        <div class="moni-close" @click="moniModalIsShow = false">
          <Icon type="md-close"></Icon>
        </div>
        <center-list ref="CenterList"></center-list>
      </div>
    </transition>
  </div>
</template>
<script>
import shrinkableMenu from "./main-components/shrinkable-menu/shrinkable-menu.vue";
import breadcrumbNav from "./main-components/breadcrumb-nav.vue";
import CenterList from "./monitoring/CenterList.vue";
import util from "@/libs/util.js";
import { axios } from "@/libs/http";

export default {
  components: {
    shrinkableMenu,
    breadcrumbNav,
    CenterList,
  },
  data() {
    return {
      shrink: false,
      isFullScreen: false,
      openedSubmenuArr: ["examplan", "user"],
      moniModalIsShow: false,
    };
  },
  computed: {
    globalLoadingShow() {
      return this.$store.state.app.showLoading;
    },
    userName() {
      if (localStorage.school != "undefined") {
        return (
          JSON.parse(localStorage.school).name + "[" + localStorage.name + "]"
        );
      } else {
        return localStorage.name;
      }
    },
    menuList() {
      return this.$store.state.app.menuList;
    },
    pageTagsList() {
      return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
    },
    currentPath() {
      return this.$store.state.app.currentPath; // 当前面包屑数组
    },
    avatorPath() {
      return localStorage.avatorImgPath || "../images/header.jpg";
    },
    cachePage() {
      //return this.$store.state.app.cachePage;
      return ["exam_plan_add", "exam_plan_edit"];
    },
    lang() {
      return this.$store.state.app.lang;
    },
    menuTheme() {
      return this.$store.state.app.menuTheme;
    },
    mesCount() {
      return this.$store.state.app.messageCount;
    },
  },
  methods: {
    init() {
      let pathArr = util.setCurrentPath(this, this.$route.name);
      this.$store.commit("updateMenulist");
      if (pathArr.length >= 2) {
        this.$store.commit("addOpenSubmenu", pathArr[1].name);
      }
      let messageCount = 3;
      this.messageCount = messageCount.toString();
      this.checkTag(this.$route.name);
      this.$store.commit("setMessageCount", 3);
    },
    toggleClick() {
      this.shrink = !this.shrink;
    },
    logout() {
      // 退出登录
      this.$store.commit("clearOpenedSubmenu");
      this.$router.push({
        name: "login",
      });
      axios.post("/system/user/logout").then((response) => {});
    },
    handleClickUserDropdown(name) {
      if (name === "ownSpace") {
        util.openNewPage(this, "ownspace_index");
        this.$router.push({
          name: "ownspace_index",
        });
      }
    },
    checkTag(name) {
      let openpageHasTag = this.pageTagsList.some((item) => {
        if (item.name === name) {
          return true;
        }
      });
      if (!openpageHasTag) {
        //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
        util.openNewPage(
          this,
          name,
          this.$route.params || {},
          this.$route.query || {}
        );
      }
    },
    handleSubmenuChange(val) {
      // console.log(val)
    },
    beforePush(name) {
      // if (name === 'accesstest_index') {
      //     return false;
      // } else {
      //     return true;
      // }
      return true;
    },
    fullscreenChange(isFullScreen) {
      // console.log(isFullScreen);
    },
  },
  watch: {
    $route(to) {
      this.$store.commit("setCurrentPageName", to.name);
      let pathArr = util.setCurrentPath(this, to.name);
      if (pathArr.length > 2) {
        this.$store.commit("addOpenSubmenu", pathArr[1].name);
      }
      this.checkTag(to.name);
      localStorage.currentPageName = to.name;
    },
    lang() {
      util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
    },
  },
  mounted() {
    this.init();
  },
  created() {
    // 显示打开的页面的列表
    this.$store.commit("setOpenedList");
  },
};
</script>