ChuangHeng_new/src/views/main.vue

<template>
  <div
    v-loading.fullscreen.lock="loading"
    :element-loading-text="$t('loading')"
    class="aui-wrapper"
  >
    <template v-if="!loading">
      <main-sidebar />
      <div
        class="aui-content__wrapper"
        :style="{
          'margin-left': '240px',
          width: 'calc(100% - 240px)',
          'overflow-y':'auto'
        }"
      >
        <main-content v-if="!$store.state.contentIsNeedRefresh" />
      </div>
    </template>
  </div>
</template>

<script>
import MainNavbar from "./main-navbar";
import MainSidebar from "./main-sidebar";
import MainContent from "./main-content";

import debounce from "lodash/debounce";
export default {
  provide() {
    return {
      num: "",
      // 刷新
      refresh() {
        this.$store.state.contentIsNeedRefresh = true;
        this.$nextTick(() => {
          this.$store.state.contentIsNeedRefresh = false;
        });
      },
    };
  },
  data() {
    return {
      loading: true,
    };
  },
  components: {
    MainNavbar,
    MainSidebar,
    MainContent,
  },
  watch: {
    $route: "routeHandle",
    "$store.state.currentMenuIndex": "changeMenuIndex",
  },
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("tags")) {
      this.$store.state.stateTagsList= JSON.parse(sessionStorage.getItem("tags"))
      //replaceState，替换store的根状态
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("tags", JSON.stringify(this.$store.state.stateTagsList));
    });
    //工作台和态势感知不显示左边菜单栏
    this.windowResizeHandle();
    this.routeHandle(this.$route);
    Promise.all([this.getUserInfo(), this.getPermissions()]).then(() => {
      this.loading = false;
    });
  },
  mounted() {
    let currentMenuIndex = localStorage.getItem("currentMenuIndex");
    this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
  },
  methods: {
    changeMenuIndex(newval, oldval) {
      this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
      localStorage.setItem("currentMenuIndex", newval);
      this.$store.state.erjismenu =
      this.$store.state.sidebarMenuList[newval].children;
    },
    //工作台和态势感知不显示左边菜单栏
    changeyijiInd(v) {
      this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
      localStorage.setItem("currentMenuIndex", v);
      this.$store.state.currentMenuIndex = v;
      this.$store.state.erjismenu =
        this.$store.state.sidebarMenuList[v].children;
      //默认跳转第一个自己路由
      let eledom = this.$store.state.sidebarMenuList[v].children[0];
      let url = "";
      var route = "";
      if (eledom.url == "") {
        //这是个三级菜单
        url = eledom.children[0].url;
        route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
          (item) => item.meta.menuId === eledom.children[0].id
        )[0];
        localStorage.setItem("currentMenuId", route.meta.menuId);
      } else {
        url = eledom.url;
        route = window.SITE_CONFIG["dynamicMenuRoutes"].filter(
          (item) => item.meta.menuId === eledom.id
        )[0];
        localStorage.setItem("currentMenuId", route.meta.menuId);
      }
      if (url) {
        let urls = "/" + url.split("/")[0] + "-" + url.split("/")[1];
        this.$nextTick(() => {
          this.$router.push({ path: urls });
         if(url!='workbench/index'&&url!='situational/index'){
           this.$store.commit("mutationSelectTags", route);
         }
        });
      }
    },
    // 窗口改变大小
    windowResizeHandle() {
      this.$store.state.sidebarFold =
        document.documentElement["clientWidth"] <= 992 || false;
      window.addEventListener(
        "resize",
        debounce(() => {
          this.$store.state.sidebarFold =
            document.documentElement["clientWidth"] <= 992 || false;
        }, 150)
      );
    },
    // 路由, 监听
    routeHandle(route) {
      if (!route.meta.isTab) {
        return false;
      }
      var tab = this.$store.state.contentTabs.filter(
        (item) => item.name === route.name
      )[0];
      if (!tab) {
        tab = {
          ...window.SITE_CONFIG["contentTabDefault"],
          ...route.meta,
          name: route.name,
          params: { ...route.params },
          query: { ...route.query },
        };
        this.$store.state.contentTabs =
          this.$store.state.contentTabs.concat(tab);
      }
      this.$store.state.sidebarMenuActiveName = tab.menuId;
      this.$store.state.contentTabsActiveName = tab.name;
    },
    // 获取当前管理员信息
    getUserInfo() {
      return this.$http
        .get("/sys/user/info")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$store.state.user.id = res.data.id;
          this.$store.state.user.name = res.data.username;
          this.$store.state.user.realName = res.data.realName;
          this.$store.state.user.qualificationType = res.data.qualificationType;
          this.$store.state.user.superAdmin = res.data.superAdmin;
          this.$store.state.user.roleCodes = res.data.roleCodes;
          this.$store.state.user.enterpriseId=res.data.enterpriseId;
        })
        .catch(() => {});
    },
    // 获取权限
    getPermissions() {
      return this.$http
        .get("/sys/menu/permissions")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          window.SITE_CONFIG["permissions"] = res.data;
        })
        .catch(() => {});
    },
  },
};
</script>