goldenPig/src/views/MainLayout.vue

<template>
  <el-container>
    <el-header style="height: 50px">
      <header-element></header-element>
    </el-header>
    <el-container>
      <el-aside width="250px">
        <side-menu @setRouterName="setRouterName"></side-menu>
      </el-aside>
      <el-main>
        <div class="box_header">
          <div class="line" :style="{ backgroundColor:  color}"></div>
          <span style="padding-left: 8px">{{routerName}}</span>
          <div class="button-right">
            <el-button size="mini" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          </div>
        </div>
        <div class="operant" id="operant">
          <!--  没有绑定不让其进去  -->
          <template v-if="hasPerm(routerSite + ':look')">
            <router-view></router-view>
          </template>
          <template v-else>
            <el-empty :image-size="200" description="暂无权限查看，请联系管理员"></el-empty>
          </template>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import HeaderElement from "../components/HeaderElement";
import SideMenu from "../components/SideMenu";
import { findOne } from '../utils/api';
import { mapActions, mapState } from 'vuex';
export default {
  name: "MainLayout",
  components: {
    HeaderElement,
    SideMenu
  },
  data() {
    return {
      menuList: [],
      routerName: '',
      routerSite: '',
    }
  },
  computed: {
    ...mapState(['color'])
  },
  methods: {
    ...mapActions(['setModeAsync', 'setColorAsync', 'GetButtons', 'GetFarm', 'setUserNameAsync', 'setUserTypeAsync']),
    init() {
      let params = {
        id: localStorage.getItem('gold_UserId'),
      }
      findOne(params).then(res => {
        if(res.code === 10000) {
          console.log(res);
          this.setModeAsync(res.data.mode);
          this.setColorAsync(res.data.color);
          this.setUserNameAsync(res.data.userName)
          this.setUserTypeAsync(res.data.type)
        }
      })
    },
    setRouterName(data) {
      this.routerName = data.name;
      this.routerSite = data.router;
    },
    refresh() {
      location.reload();
    }
  },
  mounted() {
    this.routerName = this.$route.meta.title;
    this.routerSite = this.$route.meta.permission;
    console.log(this.routerSite)
    this.GetButtons();
    this.GetFarm();
    this.init();
  }
}
</script>

<style scoped>
 /deep/.el-header{
   padding: 0;
   margin: 0;
 }
 /deep/.el-main {
   padding: 0;
   margin: 0;
 }
 .box_header {
   box-sizing: border-box;
   width: 100%;
   height: 50px;
   line-height: 50px;
   border-bottom: 1px solid #ddd;
   background-color: #F3F3F3;
   padding: 0 20px;
 }
 .line {
   width: 5px;
   height: 18px;
   float: left;
   margin-top: 16px;
 }
 .button-right {
   float: right;
 }
 .operant {
   width: 100%;
   height: calc(100vh - 120px);
   overflow-y: auto;
   background-color: #F9F9F9;
 }
 .operant::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
 .operant::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
   -webkit-border-radius: 6px;
   border-radius: 6px;
 }
 .operant::-webkit-scrollbar-thumb {
   -webkit-border-radius: 6px;
   border-radius: 6px;
   background: rgba(153,153,153,0.4);
   -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
 }
</style>