xiaoshi_system/src/views/layout/index.vue

<template>
  <div id="work-platform">
    <el-container>
      <el-header> 
         <div class="header">
          <div class="header-left">
            <div class="logo-bar" @click="handleClick">
              <img src="@/assets/logo-3.png" class="logo">
            </div>
            <div v-if="showProjectName" class="projectName">
              <p><span>专题库名称：</span>{{ projectName }}</p>
            </div>
          </div>
          <div class="header-right">
            <user-bar/>
          </div>
        </div>
      </el-header>
      <el-main class="main">
        <section class="wrapper" >
          <!-- <keep-alive>
            <router-view id="view" v-if="$route.meta.keepAlive"></router-view>
          </keep-alive> -->
          <router-view id="view" v-if="!$route.meta.keepAlive"></router-view>
          <contextMenu></contextMenu>
        </section>
      </el-main>
    </el-container>
    <help></help>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserBar from "./components/UserBar";
import { webSocket } from "./mixins";
import { guide } from "./components/guide";
import contextMenu from "./components/contextMenu.vue";

import help from "./components/help.vue";
export default {
  components: {
    UserBar,
    contextMenu,
    help
  },
  mixins: [webSocket,guide],
  data() {
    return {
      showProjectName:false,
      projectName:'',
      id: this.$route.query.id,
      key: this.$route.query.key,
      button: [],
      show: false,
      btnLoading: false,
    }
  },
  watch: {
    $route() {
      this.button = this.$route.meta.button || []
      this.showProjectName = this.$route.meta.showProjectName
      this.openGuide(this.$route.meta.sign)
    },
    showProjectName(val){
      this.projectName = this.$s.getSession('projectName')
    }
  },
  computed: {
    ...mapGetters(['projectId', 'userinfo','webSocket']),
  },
  created(){
    this.getPermissionList()
  },
  async mounted() {
    this.$store.commit('SET_PREFIX', '/')
    
    this.getRouter()
    await this.getPermissions() 
    if (this.id) {
      this.$store.commit('SET_PROJECT_ID', parseInt(this.id))
    }
    if (this.key) {
      this.$store.commit('SET_PATENT_KEY', this.key)
      await this.$store.dispatch('getCustomField', this.projectId)
      await this.$store.dispatch('getSystemField', this.projectId)
    }
    this.openGuide(this.$route.meta.sign)
  },
  methods: {
    
    //获取专题库权限
    async getPermissions() {
      const response = await this.$api.getPermissions()
      this.$store.commit('SET_PERMISSIONS', response.data)
    },
    

    //获取路由信息
    getRouter(){
      this.button = this.$route.meta.button || []
      this.showProjectName = this.$route.meta.showProjectName
    },
    //点击图标
    handleClick(){
      this.$router.push({
        path: '/home'
      })
    },
    //修改权限
  changePermission(){
    this.webSocket.onmessage = (e) => {
      if(JSON.parse(e.data).code=='903' ){
        this.getPermissionList()
      }
    }
  },
  //获取权限
  getPermissionList(){
    var code = "6a8d3f4d1d5f11eda41c00163e2f0200;5051395c24e311eda41c00163e2f0200;a97c468b924111ed905500163e2f0200"
    this.$api.getPermissionList({code:code}).then(response=>{
        this.$store.commit('SET_ADMIN_PERMISSION', response.data)
      }).catch(error=>{
        this.$store.commit('SET_ADMIN_PERMISSION', [])
      })
    },
    
  
  },

  
}
</script>
<style lang="scss">
  .tenant .el-input__inner{
    height: 32px;
    line-height: 32px;
  }
  .role .el-icon-close{
		display: none;
	}
</style>
<style lang="scss" scoped>
#work-platform {
  width: 100%;
  min-width: 1024px;
  height: 100%;

  .header {
    width: 100%;
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
    color: #fff;
    display: flex;
    justify-content: space-between;
    border-bottom: 10px solid #e6e6e6;
    .logo-bar {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      cursor: pointer;
      .logo {
        margin-right: 10px;
        // width: 140px;
        height: 40px;
      }
    }
  }
.projectName{
  margin-left:30px;
  color:black
}
  .header-left {
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .header-right {
    display: flex;
    align-items: center;
  }
.main{
  padding:0 !important;
  padding-top:0px !important;
  overflow:auto !important;
  background:white !important;
}
  .wrapper {
    width: 100%;
    height: 100%;
    background: white;
    #view {
      height: 100%
    }
  }
}
</style>