platformFront/src/components/common/HomePage.vue

<template>
    <el-container :class="getRole">
        <el-aside>
            <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>
        <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,       //版本信息接口返回的数据
      }
    },
    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;
            }
        }
    },
    methods: {
      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 = '<h3>当前版本：'+data.name+'<span>'+data.refreshTime.substr(0,10)+'</span></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');
        this.$router.push({path:'/'});
      }
    }
  }
</script>

<style lang="less">

    @import '../../less/common.less';

    .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: @aside-width;
        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>