spfm-market-front/src/pages/main/index.vue

<template>
  <div class="page">
    <el-header>
      <p-header :username="getUserName" @collapse="collapsed"></p-header>
    </el-header>
    <el-container style="height: 100%">
      <el-aside>
        <p-menu :data="getMenus"></p-menu>
      </el-aside>
      <el-container style="background-color: #E8E8E8">
        <el-main style="height: 100%">
          <div class="tab">
            <p-tabs :list="getTabList"></p-tabs>
          </div>
          <div class="views" :style="vieWidth">
            <transition name="el-fade-in">
              <keep-alive>
                <router-view v-if="$route.meta.keepAlive" />
              </keep-alive>
            </transition>
            <transition name="el-fade-in">
              <router-view v-if="!$route.meta.keepAlive" />
            </transition>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
export default {
  data() {
    return {
      vieWidth: {
        width: "calc(100vw - 210px)",
      },
    };
  },
  mounted() {
    if (this.getMenus == undefined || this.$isEmptyJSON(this.getMenus)) {
      let token = window.sessionStorage.agileauthtoken;
      if (token != "undefined") {
        if (!window.sessionStorage.menus) {
          this.$notify.error({
            title: "提示",
            message: "登录超时",
          });
          this.$router.push("/login");
          return;
        }
        let menuList = JSON.parse(sessionStorage.menus);
        this.$store.commit("setMenus", menuList);
        this.$store.commit(
          "setUserInfo",
          JSON.parse(this.$cookie.get("userInfo"))
        );
      } else {
        this.$notify.error({
          title: "提示",
          message: "登录超时",
        });
        this.$router.push("/login");
        return;
      }
    }
    if (this.getMenus instanceof Array && this.getMenus.length == 0) {
      this.$notify.error({
        message: "当前用户无权限，请联系超管分配权限",
      });
      this.$router.push("/login");
      return;
    }
  },
  computed: {
    getTabList() {
      return this.$store.state.tabList;
    },
    getUserName() {
      let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      return userInfo.loginName;
      // if (this.$store.state.userInfo || userInfo) {
      //   return this.$store.state.userInfo
      //     ? this.$store.state.userInfo.loginName
      //     : userInfo.loginName;
      // } else {
      //   return "";
      // }
    },
    getMenus() {
      return this.$store.state.menus;
    },
    getCacheList() {
      return this.$store.state.pages;
    },
    collapse() {
      return this.$store.state.collapse;
    },
  },
  methods: {
    collapsed() {
      if (this.collapse) {
        this.vieWidth.width = "calc(100vw - 74px)";
      } else {
        this.vieWidth.width = "calc(100vw - 210px)";
      }
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.el-aside {
  width: auto !important;
}

.views {
  height: calc(100% - 97px);
  div{
    border-radius: 5px;
  }
}

.el-main {
  padding: 0px !important;
}
// ::v-deep .font-ui {
//   display: inline-block;
//   font-weight: bold;
//   color: #8eb7e4;
//   text-shadow: 0 0 1px currentColor, -1px -1px 1px #000, 0 -1px 1px #000,
//     1px -1px 1px #000, 1px 0 1px #000, 1px 1px 1px #000, 0 1px 1px #000,
//     -1px 1px 1px #000, -1px 0 1px #000;
//   -webkit-filter: url(#diff1);
//   filter: url(#diff1); /*background:#def;padding:0 .2em*/
//   font-size: 20px;
// }
</style>