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>
        </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-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';

  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,           //是否已获取到菜单
      }
    },
    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=[];
            }
        }
    },
    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;
            this.getRole=='user' && this.getAuthStatus();
            if(hasConcole){
              const url = this.getRole=='user'?'/user/YH-KZT':'/admin/LT-KZT';
              this.$router.push({path:url});
            }
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      /*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;
    }
</style>
<style lang="less" scoped>
    @import '../../less/common.less';
    .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>