PCS-FrontEnd/src/views/layout/index.vue

<template>
  <div id="admin">
    <header class="header">
      <div class="header-left">
        <div class="logo-bar">
          <img src="@/assets/logo-3.png" class="logo">
        </div>
      </div>
      <div class="header-right">
        <user-bar />
      </div>
    </header>
    <section class="wrapper">
      <el-container>
        <el-aside width="210px" style="overflow:hidden" class="patent-articles-menu">
          <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->
          <el-menu class="theme-dark" :default-active="activeMenu" @select="handleSelect">

            <!-- <el-menu-item index="admin">
                  <i class="el-icon-coordinate"></i>
                  <span slot="title">其他系统管理员管理</span>
            </el-menu-item> -->
            <el-menu-item index="client" v-if="$permission('/admin/client')">
              <i class="el-icon-film"></i>
              <span slot="title">租户管理</span>
            </el-menu-item>
            <!-- <el-menu-item index="apply">
              <i class="el-icon-present"></i>
              <span slot="title">应用管理</span>
            </el-menu-item> -->

            <!-- <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>应用功能管理</span>
              </template>
              <el-menu-item index="apply">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span>应用管理</span>
                </template>
              </el-menu-item>
              
             <el-menu-item index="function">
               <template slot="title">
                 <i class="el-icon-camera"></i>
                 <span>功能管理</span>
               </template>
             </el-menu-item>
            </el-submenu> -->
            <el-menu-item index="apply" v-if="$permission('/admin/apply')">
              <i class="el-icon-setting"></i>
              <span slot="title">应用功能管理</span>
            </el-menu-item>

            <el-menu-item index="department" v-if="$permission('/admin/department')">
              <i class="el-icon-copy-document"></i>
              <span slot="title">部门管理</span>
            </el-menu-item>
            <el-menu-item index="position" v-if="$permission('/admin/position')">
              <i class="el-icon-present"></i>
              <span slot="title">职位管理</span>
            </el-menu-item>
            <el-menu-item index="user" v-if="$permission('/admin/user')">
              <i class="el-icon-user"></i>
              <span slot="title">人员管理</span>
            </el-menu-item>
            <el-menu-item index="group" v-if="$permission('/admin/group')">
              <i class="el-icon-menu"></i>
              <span slot="title">用户组管理</span>
            </el-menu-item>
            <el-menu-item index="role" v-if="$permission('/admin/role')">
              <i class="el-icon-eleme"></i>
              <span slot="title">角色管理</span>
            </el-menu-item>
             <el-menu-item index="dataPermission" >
              <i class="el-icon-eleme"></i>
              <span slot="title">数据权限管理</span>
            </el-menu-item>

          </el-menu>
        </el-aside>
        <el-container>
          <el-header></el-header>
          <el-main class="admin-main-box">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </section>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserBar from "./components/UserBar";
import { webSocket } from "./mixins";
export default {
  components: {
    UserBar,
  },
    mixins: [webSocket],
  data() {
    return {
      isCollapse: true,
      activeMenu: this.$route.meta.active
    }
  },
  watch: {
    $route(to) {
      this.activeMenu = to.meta.active
    }
  },
  computed: {
     ...mapGetters(['webSocket'])
  },
  created(){
    this.getPermissionList()
  },
  mounted() {
    this.$store.commit('SET_PREFIX', '/admin')
    this.getUserinfo()
    this.getSelect()
  },
  methods: {
  changePermission(){
      this.webSocket.onmessage = (e) => {
            console.log(JSON.parse(e.data) )
            if(JSON.parse(e.data).code=='903' ){
              this.getPermissionList()
            }
          }
  },
  getPermissionList(){
   this.$api.getPermissionList().then(response=>{
        // localStorage.permission =JSON.stringify(JSON.parse(response.data).data) 
        this.$store.commit('SET_ADMIN_PERMISSION', response.data)
      // console.log(response.data)
      })
    },
    getSelect() {
      this.$api.getDict().then(response => {
        this.$store.commit('SET_ADMIN_DICTIONARIES', response.data)
      localStorage.TENANT_TYPE = JSON.stringify(response.data.TENANT_TYPE)
    })
  },
    handleSelect(index, path) {
      this.$router.push({
        path: '/admin/' + index
      })
    },
    getUserinfo() {
      this.$api.getUserInfo().then(response => {
        console.log(response)
        localStorage.tenant = response.data.tenantId
        this.$store.commit('SET_ADMIN_USERINFO', response.data)
      })
    },
  }
}
</script>

<style lang="scss">
#admin {
  width: 100%;
  height: 100%;

  .header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
    border-bottom: 1px solid #d8dce5;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .logo-bar {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;

      .logo {
        margin-right: 10px;
        width: 135px;
        height: 35px;
      }
    }
  }

  .header-left {
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .wrapper {
    width: 100%;
    height: calc(100% - 71px);

    .el-menu-item.is-active {
      background: #ecf5ff !important;
      color: #409EFF !important;
    }

    .admin-main-box {
      background: #fff !important;
      padding: 10px !important;
    }
  }
}
</style>