platformFront/src/components/common/HomePage.vue

<template>
  <el-container :class="getRole">
    <el-aside v-show="onshow">
      <div class="logo">
        <p v-if="userLoginDTO && userLoginDTO.type == '1'">
          <b>朗通后台管理系统</b>
        </p>
        <p v-if="userLoginDTO && userLoginDTO.type == '0'">
          <b>DiagbotCloud</b>
        </p>
        <p v-if="userLoginDTO && userLoginDTO.type == '0'">
          <b>后台管理系统</b>
        </p>
      </div>

      <lt-menu
        v-if="menuWrappers && menuWrappers.length"
        v-bind:role="getRole"
        v-bind:data="menuWrappers"
      ></lt-menu>
      <div class="version">
        <p>
          <span>版本信息：</span>
          <a href="javascript:void(0)" @click="showVersion">{{
            versionName
          }}</a>
          <i v-if="isNewV">
            <img src="../../images/new.png" alt />
          </i>
        </p>
      </div>
    </el-aside>
    <img
      src="../../images/icon-collect-right.png"
      v-show="!onshow"
      class="collect"
      @click="collect"
    />
    <img
      src="../../images/icon-collect-left.png"
      v-show="onshow"
      class="collect-left"
      @click="collect"
    />
    <el-container>
      <el-header class="clearfix">
        <div class="title fl">
          <h2>{{ organization && organization.name }}</h2>
        </div>
        <div class="userInfo fr">
          <span class="username" @click="goCenter">{{
            userLoginDTO && userLoginDTO.linkman
          }}</span>
          <lt-badge
            v-if="getRole == 'user'"
            class="green"
            :authStatus="authStatus"
            >{{ authStatusName }}</lt-badge
          >
          <el-button type="info" size="small" plain @click="logout"
            >退出</el-button
          >
        </div>
      </el-header>
      <el-main>
        <router-view v-if="ok" v-on:status-change="changeStatus"></router-view>
      </el-main>
    </el-container>
    <el-dialog
      title="版本信息"
      :visible.sync="versionVisible"
      width="50%"
      class="version-info"
    >
      <div v-html="versionInfo"></div>
    </el-dialog>
  </el-container>
</template>

<script>
import LtMenu from "../common/Menu.vue";
import LtBadge from "@base/LtBadge.vue";
import api from "@api/index.js";
import userApi from "@api/user.js";
import Console from "@components/user/Console.vue";
import newIcon from "../../images/new.png";
export default {
  name: "homepage",
  components: {
    "lt-badge": LtBadge,
    "lt-menu": LtMenu,
    console: Console,
  },
  data: function() {
    return {
      menuWrappers: null,
      organization: null,
      userLoginDTO: null,
      authStatus: null,
      authStatusName: "",
      ok: false, //是否已获取到菜单
      versionName: "",
      versionVisible: false,
      versionInfo: "",
      isNewV: false,
      version: null, //版本信息接口返回的数据
      onshow: true,
    };
  },
  computed: {
    getRole: function() {
      return this.userLoginDTO && this.userLoginDTO.type == "0"
        ? "user"
        : "admin";
    },
  },
  created() {
    //获取菜单
    this.getMenuList();
  },
  watch: {
    $route: function(to, from) {
      if (from.name == "login") {
        this.getMenuList();
      }
      if (to.path == "/") {
        // 退出时清空菜单
        this.menuWrappers = [];
        this.isNewV = false;
      }
    },
  },
  mounted() {
    // let elSide = document.querySelector(".el-aside"),
    //   tabWidth = document.querySelector(".collect-left");
    // tabWidth.style.left = elSide.offsetWidth - 36 + "px";
    // window.onresize = () => {
    //   return (() => {
    //     tabWidth.style.left = elSide.offsetWidth - 36 + "px";
    //   })();
    // };
  },
  methods: {
    collect() {
      let tabWidth = document.querySelector(".collect-left");
      this.onshow = !this.onshow;
      tabWidth.style.left = this.onshow ? 300 - 36 + "px" : 300 + "px";
    },
    getMenuList() {
      api
        .getAccessdMenu()
        .then((res) => {
          if (res.data.code == "0") {
            const data = res.data.data;
            this.ok = true;
            const hasConcole = data.menuWrappers.find((it) => {
              return it.code.indexOf("-KZT") > -1;
            });
            //this.hasConcole = hasConcole!=-1;
            this.menuWrappers = data.menuWrappers;
            this.organization = data.organization;
            this.userLoginDTO = data.userLoginDTO;
            localStorage.setItem(
              "userLoginDTO",
              JSON.stringify(data.userLoginDTO)
            );
            this.getRole == "user" && this.getAuthStatus();
            if (hasConcole) {
              const url =
                this.getRole == "user" ? "/user/YH-KZT" : "/admin/LT-KZT";
              this.$router.push({ path: url });
            }
            this.getVersionInfo();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    isNewVersion() {
      //判断是否为新版
    },
    getVersionInfo() {
      const getInfo =
        this.getRole == "user" ? api.getVersionOuter : api.getVersionInner;
      getInfo().then((res) => {
        if (res.data.code == "0") {
          const data = res.data.data;
          this.fillVersionInfo(data);
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    fillVersionInfo(data) {
      //进入时获取版本信息，如版本时间与localStorage中不一致或者一致但localStorage中未被点过，
      // 则要显示更新图标
      let htl = data.refreshTime
        ? "<h3>当前版本：" +
          data.name +
          "<span>" +
          data.refreshTime.substr(0, 10) +
          "</span></h3>"
        : "<h3>当前版本：" + data.name + "</h3>";
      let prags = data.detail || [];
      this.versionName = data.name;
      const versionTime = JSON.parse(
        localStorage.getItem("versionInfo-" + this.userLoginDTO.username)
      );
      if (
        !versionTime ||
        (data.refreshTime === versionTime.date && !versionTime.showed)
      ) {
        this.isNewV = true;
      } else {
        this.isNewV = false;
      }
      for (let i = 0; i < prags.length; i++) {
        htl +=
          "<p>" + prags[i].title + "</p><p>" + prags[i].description + "</p>";
      }
      this.versionInfo = htl;
      this.version = { date: data.refreshTime };
    },
    showVersion() {
      this.versionVisible = true;
      this.version.showed = true;
      this.isNewV = false;
      localStorage.setItem(
        "versionInfo-" + this.userLoginDTO.username,
        JSON.stringify(this.version)
      );
    },
    /*redirectPage(){
        const url = this.getRole=='user'?'/user':'/admin';
        this.$router.push({path:url});
      },*/
    changeStatus(text) {
      //账号信息中提交认证后修改状态
      this.authStatus = 2;
      this.authStatusName = text;
    },
    goCenter() {
      const url = this.getRole == "user" ? "" : "/admin/LT-GRZX";
      this.$router.push({ path: url });
    },
    getAuthStatus() {
      //获取用户认证状态
      userApi
        .getUserAuthStatus()
        .then((res) => {
          if (res.data.code == "0") {
            const data = res.data.data;
            // this.authStatus = data[0];
            this.authStatusName = data.authStatusName;
            this.authStatus = data.authStatus;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    logout() {
      //退出
      localStorage.removeItem("token");
      localStorage.removeItem("menuPath");
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style lang="less">
@import "../../less/common.less";
.collect {
  width: 36px;
  height: 32px;
  position: fixed;
  left: 0;
  top: 70%;
  z-index: 20;
}
.collect-left {
  width: 36px;
  height: 32px;
  position: fixed;
  left: 264px;
  top: 65%;
  z-index: 20;
}
.user .el-menu-item.is-active {
  color: @userBase;
}

.admin .el-menu-item.is-active {
  color: @adminBase;
}
.admin .username {
  cursor: pointer;
}
.version-info h3 {
  font-size: 14px;
  margin-bottom: 20px;
  span {
    float: right;
    font-weight: normal;
  }
}
</style>
<style lang="less" scoped>
@import "../../less/common.less";
.el-menu-vertical-demo.el-menu {
  height: calc(100% - 120px);
  overflow-y: auto;
}
.version {
  position: fixed;
  bottom: 0;
  width: 300px;
  min-width: 270px;
  font-size: 12px;
  /*text-indent: 50px;*/
  text-align: center;
  height: 54px;
  line-height: 54px;
  background: #fff;
  i {
    display: inline-block;
    width: 20px;
    height: 16px;
    img {
      vertical-align: text-top;
    }
  }
}
.user .version a {
  color: @userBase;
}
.admin .version a {
  color: @adminBase;
}
.user .logo {
  background: @userBase;

  p {
    font-size: 16px;
    line-height: normal;
  }
}
.admin .logo {
  background: @adminBase;

  p {
    font-size: 18px;
    line-height: 40px;
  }
}
.title {
  h2 {
    display: inline-block;
    line-height: 60px;
    font-size: 18px;
  }
}
.block {
  height: 40px;
  width: 100%;
  background: #fff;
  box-shadow: 0px 1px 2px #c9c9c9;
}
.el-main {
  padding: 0;
}
.el-button {
  margin-left: 15px;
}
</style>