read_opc/chuanyi_client2/src/views/index.vue

<template>
  <el-container>
    <el-aside>
      <left-menu @changeNavType="changeNavType"></left-menu>
    </el-aside>
    <el-container>
      <el-main>
        <split-pane v-if="mainViewType == 0 && roleCodeList.indexOf(__self.clientRole) > -1"
                    :min-percent='minPercent'
                    :default-percent='defaultPercent'
                    split="vertical">
          <template slot="paneL">
            <header-main :refreshReportTemplateData="refreshReportTemplateDataFlag"
                         :style="leftMenuStyle" @changeTabType="changeTabType"></header-main>
            <div @click="expandEvent" style="position: absolute; top: 25px; right: 0; z-index: 2; cursor: pointer;">
              <i :class="expandIcon" style="color: #FFFFFF;"></i>
            </div>
          </template>
          <template slot="paneR">
            <header-personal></header-personal>
            <router-view ref="childView" @refreshReportTemplateData="refreshReportTemplateData" :key="refreshKey"></router-view>
          </template>
        </split-pane>
        <template v-else>
          <header-personal></header-personal>
          <router-view></router-view>
        </template>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import LeftMenu from '@/components/LeftMenu/index'
import HeaderMain from '@/components/HeaderMain/index'
import HeaderPersonal from '@/components/HeaderPersonal/index'
import {mapGetters} from "vuex";
import {goPage, gotoPage} from "@/utils/cqcy";

export default {
  components: {
    LeftMenu,
    HeaderMain,
    HeaderPersonal
  },
  data() {
    return {
      roleCodeList: [],
      defaultPercent: 15,
      minPercent: 15,
      mainViewType: 0,
      refreshReportTemplateDataFlag: null,
      refreshKey: null,
      leftMenuStyle: '',
      expandIcon: 'el-icon-d-arrow-left'
    }
  },
  inject: ['__self'],
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  mounted() {
    this.roleCodeList = []
    this.roles.forEach((role) => {
      this.roleCodeList.push(role.roleCode)
    })
  },
  created() {
    this.disableEvent()
  },
  methods: {
    disableEvent() {
      this.$nextTick(() => {
        // 禁用右键
        document.oncontextmenu = new Function("event.returnValue=false")
        // 禁用选择
        document.onselectstart = new Function("event.returnValue=false")
        document.body.onmouseup = (e) => {
          if (window.location.href.indexOf('reportTemplate') > -1) {
            console.log('my_report page...')
          }
        }
      })
    },
    expandEvent() {
      if (this.defaultPercent === 1) {
        this.leftMenuStyle = 'display: block;'
        this.defaultPercent = this.minPercent
        this.expandIcon = 'el-icon-d-arrow-left'
      } else {
        this.leftMenuStyle = 'display: none;'
        this.defaultPercent = 1
        this.expandIcon = 'el-icon-d-arrow-right'
      }
      this.refreshKey = new Date().getTime()
      localStorage.setItem('EXPAND_REPORT_FLAG', 'true')
    },
    /** 修改右侧布局视图 */
    changeNavType(type) {
      this.mainViewType = type
      if (type == 1) {
        gotoPage(this, '/runConfig')
      } else if (type == 2) {
        gotoPage(this, '/myReport')
      } else if (type == 3) {
        gotoPage(this, '/dataModel')
      } else if (type == 4) {
        gotoPage(this, '/userGroup')
      } else if (type == 5) {
        gotoPage(this, '/printConfig')
      }else {
        gotoPage(this, '/index')
        this.changeTabType()
      }
    },
    /** Tab 改变事件 */
    changeTabType(tab) {
      if (this.$refs.childView && this.$refs.childView.hideMainView) this.$refs.childView.hideMainView(tab == null)
    },
    refreshReportTemplateData(val) {
      this.refreshReportTemplateDataFlag = val
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.el-container {
  height: 100%;
}

.el-main {
  padding: 0 !important;
  overflow: hidden !important;
}

.el-aside {
  width: 80px !important;
  padding: 0;
  background-color: #2c3e50;
  margin-bottom: 0;
}

.splitter-paneL {
  background-color: #2c3e50;
  padding-right: 0 !important;
}

.splitter-paneR {
  padding-left: 0 !important;
}

.splitter-pane-resizer {
  opacity: unset !important;
  background: #2c3e50 !important;
}

.cqcy-content {
  margin: 20px;
  overflow: auto;
  height: calc(100% - 110px);
}
</style>