manage_invoice_ui/src/views/Home.vue

<template>
  <div class="home">
    <el-container class="container">
      <el-header class="header" style="height: 60px;">
        <div>
          <div class="logo">
<!--            <img src="../assets/image/logo.jpg">-->
            <h3>全国收费公路通行费电子发票后台管理系统</h3>
          </div>

          <div class="message">
            <div class="theUser"><span class="el-icon-user-solid"></span>{{name}}</div>
            <!-- <div class="theUser"><span class="el-icon-s-custom" style="font-size: 18px;"></span></div> -->
            <div class="theUser" @click="Logout"><span class="el-icon-s-unfold"></span>退出登录</div>
          </div>
        </div>
      </el-header>

      <el-main class="main" style="">
        <div style="height:100%;">
          <div class="leftNav">
            <template>
              <template v-if="roleId == 1">
                <el-menu
                  :default-active="$route.path"
                  unique-opened
                  router
                  background-color="#22a2d4"
                  active-text-color="#ffd04b"
                  style="height: 100%">
                    <el-menu-item index="/main" >
                      <i class="el-icon-s-tools"></i>
                      <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu
                    v-for="item in menus"
                    :key="item.id"
                    :index="item.id + ''">
                    <template slot="title">
                      <i class="el-icon-s-tools" style="font-size: 14px color: #fff;"></i>
                      <span>{{ item.authName }}</span>
                    </template>
                    <el-menu-item
                      v-for="item1 in item.children"
                      :key="item1.id"
                      :index="'/' + item1.path">
                      <i class="el-icon-search" style="font-size: 14px color: #fff;"></i>
                      {{ item1.authName }}
                    </el-menu-item>
                  </el-submenu>
                </el-menu>
              </template>

              <template v-if="roleId == 2">
                <el-menu
                  :default-active="$route.path"
                  unique-opened
                  router
                  background-color="#22a2d4"
                  active-text-color="#ffd04b"
                  style="height: 100%">
                  <el-menu-item index="/main">
                    <i class="el-icon-s-tools"></i>
                    <span slot="title">首页</span>
                  </el-menu-item>
                  <el-menu-item index="/personal" >
                    <i class="el-icon-s-tools"></i>
                    <span slot="title">个人中心</span>
                  </el-menu-item>
                  <!-- <el-menu-item index="/consumption">
                    <i class="el-icon-s-tools"></i>
                    <span slot="title">消费统计</span>
                  </el-menu-item> -->
                  <el-submenu
                    v-for="item in menu"
                    :key="item.id"
                    :index="item.id + ''">
                    <template slot="title">
                      <i class="el-icon-s-tools" style="font-size: 14px color: #fff;"></i>
                      <span>{{ item.authName }}</span>
                    </template>
                    <el-menu-item
                      v-for="item1 in item.children"
                      :key="item1.id"
                      :index="'/' + item1.path">
                      <i class="el-icon-search" style="font-size: 14px color: #fff;"></i>
                      {{ item1.authName }}
                    </el-menu-item>
                  </el-submenu>
                </el-menu>
              </template>

              <template v-if="roleId == 3">
                <el-menu
                  :default-active="$route.path"
                  unique-opened
                  router
                  background-color="#22a2d4"
                  active-text-color="#ffd04b"
                  style="height: 100%">
                  <el-menu-item index="/main" >
                    <i class="el-icon-s-tools"></i>
                    <span slot="title">首页</span>
                  </el-menu-item>
                  <el-menu-item index="/personal" >
                    <i class="el-icon-s-tools"></i>
                    <span slot="title">个人中心</span>
                  </el-menu-item>
                  <el-submenu
                    v-for="item in menuList"
                    :key="item.id"
                    :index="item.id + ''">
                    <template slot="title">
                      <i class="el-icon-s-tools" style="font-size: 14px color: #fff;"></i>
                      <span>{{ item.authName }}</span>
                    </template>
                    <el-menu-item
                      v-for="item1 in item.children"
                      :key="item1.id"
                      :index="'/' + item1.path">
                      <i class="el-icon-search" style="font-size: 14px color: #fff;"></i>
                      {{ item1.authName }}
                    </el-menu-item>
                  </el-submenu>
                </el-menu>
              </template>
            </template>

          </div>
          <div class="rightNav">
            <router-view></router-view>
          </div>
        </div>


      </el-main>
    </el-container>

  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [

        {
          id:2,
          authName:"用户管理",
          children:[
            {
              id:1,
              path:"user",
              authName:"用户列表"
            },
          ]
        },
        {
          id: 3,
          authName:"客户管理",
          children:[
            {
              id:1,
              path:"customer",
              authName:"客户管理"
            },{
              id:2,
              path:"customerRecharge",
              authName:"充值记录"
            },{
              id:3,
              path:"custRecTime",
              authName:"备案预警查询"
            },{
              id:4,
              path:"custRecMoney",
              authName:"余额预警查询"
            }
          ]
         },
         {
          id: 4,
          authName:"无车管理",
          children:[
            {
              id:8,
              path:"nocarRec",
              authName:"车辆备案"
            },{
              id:2,
              path:"billway",
              authName:"运单查询"
            },{
              id:3,
              path:"billwayException",
              authName:"异常运单"
            },{
              id:4,
              path:"nocarInvoice",
              authName:"发票查询"
            },{
              id:5,
              path:"hcInvoice",
              authName:"红冲发票查询"
            }
          ]
         },{
          id: 5,
          authName:"自有车管理",
          children:[
            {
              id:1,
              path:"selfcarRec",
              authName:"ETC备案"
            },{
              id:2,
              path:"selfCarTrade",
              authName:"交易查询"
            },{
              id:3,
              path:"selfCarTradeException",
              authName:"异常交易查询"
            },{
              id:4,
              path:"selfInvoice",
              authName:"发票查询"
            }
          ]
         },{
          id: 6,
          authName:"计费管理",
          children:[
            {
              id:1,
              path:"SelfCalculateInfo",
              authName:"自有车计费查询"
            },
            {
              id:2,
              path:"noCarCalculateInfo",
              authName:"无车计费查询"
            }
          ]
         },{
          id: 7,
          authName:"参数管理",
          children:[
            {
              id:1,
              path:"paramMagager",
              authName:"参数管理"
            }
          ]
         }
      ],
      roleId: '',
      userName: '',
      name: ''
    };
  },
  components: {

  },
  beforeCreate() {
    // 判断是否登录，token
    var token = sessionStorage.getItem('token');
    if (!token) {
      // 提示
      this.$message.warning('请先登录');
      // 没有token，跳转到登录页面
      this.$router.push('/login');
    }
  },
  created() {
    this.roleId = sessionStorage.getItem('roleId');
    this.name = sessionStorage.getItem('name');
  },
  mounted () {

  },
  methods: {
    // 退出登录
    Logout() {
      // 提示退出成功
      this.$message.success('退出成功');
      // 1 清除token
      sessionStorage.clear();
      // 2 跳转到登录页面
      this.$router.push('/login');
    },

  }
};
</script>

<style>
.home {
  height: 100%;
  width: 100%;
  font-size: 1px;
}
.home .container {
  height: 100%;
  background: -webkit-linear-gradient(top, #289dfa , #fff);
  background: -o-linear-gradient(bottom, #289dfa , #fff);
  background: -moz-linear-gradient(bottom, #289dfa, #fff);
  background: linear-gradient(to bottom, #289dfa , #fff);
}
.home .header {
  height: 130px;
}
.home .header > div {
  overflow: hidden;
}
.home .header .logo {
  float: left;
  margin-top: 15px;
  margin-left: 20px;
}
.home .header img {
  height: 40px;
  width: 40px;
}
.home .header h3 {
  display: inline-block;
  font-size: 30px;
  color: #fff;
  margin-left: 10px;
}
.home .header .message {
  float: right;
  margin-top: 20px;
  margin-right: 35px;
  background-color: #d3e7f9;
  overflow: hidden;
}
.home .header .message .theUser {
  float: left;
  height: 40px;
  line-height: 40px;
  width: 100px;
  font-size: 16px;
  text-align: center;
  cursor:pointer;
}
.home .main {
  margin: 5px;
  height:100%;
  overflow: hidden;
  background-color: #fff;
}
.home .el-menu {
  border: 0;
}
.home .el-submenu__title i{
  color: #fff;
  font-size: 16px;
}
.home .el-menu-item  {
  color: #fff;
  font-size: 16px;
}
.home .el-menu-item i{
  color: #fff;
  font-size: 16px;
}
.home .el-menu  span {
  font-size: 16px;
}
.home .main .leftNav {
  width: 18%;
  float: left;
  overflow-y: scroll;
  height: 100%;
}
.home .main .rightNav {
  margin-left: 2%;
  width: 80%;
  float: left;
}
.el-message  {
  font-size: 35px !important;
}
.el-submenu__title {
  color: #fff !important;
}
</style>