super-fusion-platform/src/views/teacherInfo/App.vue

<template>
  <a-config-provider :locale="locale">
    <div class="app-style" ref="app">
      <Menu @onLoad="menuOnLoad" @menuChange="menuChanged"/>
      <div class="content-style">
        <div v-if="selectedMenu && (selectedMenu.id === 'infoUpload' || selectedMenu.id === 'teacherInfoManagement')" class="no-form-tips">
          对不起，当前没有启用的类目，请{{selectedMenu.id === 'infoUpload'?"联系管理员":"先在系统设置中"}}进行类目设置
        </div>
        <component v-else :is="getCom" v-bind="getParams" style="width: 100%;background-color: white;height: 100%"/>
      </div>
      <div v-if="!is_loaded_data" class="spin-container-style">
        <a-spin>
          <a-icon slot="indicator" type="loading" style="font-size: 2rem" spin />
        </a-spin>
      </div>
      <modal-panel></modal-panel>
    </div>
  </a-config-provider>
</template>

<script>
import {Spin,Icon,ConfigProvider} from 'ant-design-vue'
import Menu from './menu/Menu'
import PageConfig from './pageConfig'
import ModalPanel from '../../components/common/modal/ModalPanel';
import OfficeMenuConfig from "../../utils/officeMenuConfig"
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
export default {
  name: 'App',
  data:function(){
    return{
      locale: zhCN,
      is_loaded_data:false,
      selectedMenu:null,
      contentUrl:"",
    }
  },
  components: {
    // FormDesign
    ASpin:Spin,
    AIcon:Icon,
    Menu,
    ModalPanel,
    AConfigProvider:ConfigProvider
  },
  methods:{
    menuOnLoad:function (ary) {
      this.is_loaded_data = true;
      this.menuChanged(ary)
    },
    menuChanged:function (ary) {
      this.selectedMenu = ary[0];
      if (this.selectedMenu.parentId === "infoUpload" || this.selectedMenu.parentId === "teacherInfoApprove" || this.selectedMenu.parentId === "teacherInfoManagement"){
        this.contentUrl = PageConfig[this.selectedMenu.parentId] &&  PageConfig[this.selectedMenu.parentId].url ? PageConfig[this.selectedMenu.parentId].url:null;
      }else{
        this.contentUrl = PageConfig[this.selectedMenu.id] &&  PageConfig[this.selectedMenu.id].url ? PageConfig[this.selectedMenu.id].url:null;
      }
    }
  },
  computed:{
    getParams:function(){
      if (this.selectedMenu !== null ){
        if (this.selectedMenu.parentId === "infoUpload" || this.selectedMenu.parentId === "teacherInfoApprove" || this.selectedMenu.parentId === "teacherInfoManagement"){
          return this.selectedMenu
        }else if(this.selectedMenu.id === "certificateManagement"){
          return {type:OfficeMenuConfig.menuIsExist("certificateManagement","certificateOrg")?1:2}
        }else if (this.selectedMenu.id === "personalInfo"){
          return {isAdmin:OfficeMenuConfig.menuIsExist(["teacherInfoSearch","personalInfo"],"orgInfo")}
        }else if(this.selectedMenu.id === "categorySummary"){
          return {isAdmin:OfficeMenuConfig.menuIsExist(["teacherInfoSearch","categorySummary"],"orgRange")}
        }else {
          return PageConfig[this.selectedMenu.id] && PageConfig[this.selectedMenu.id].params?PageConfig[this.selectedMenu.id].params:null;
        }
      }else{
        return null
      }
    },
    getCom:function () {
      if (this.selectedMenu !== null && this.contentUrl && this.contentUrl !== ""){
        return () => import(`@/${this.contentUrl}`)
      }else{
        return null
      }
    }
  }
}
</script>

<style scoped lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  .app-style{
    height: 100%;
    display: flex;
    width: 100%;
    position: relative;
    .space-style{
      display: inline-block;
      height: 100%;
      width: 8px;
      background-color: #f2f2f2;
    }
    .content-style{
      height: 100%;
      width: 80%;
      min-width: calc(100% - 272px);
      padding: 0 8px;
      background-color: #f2f2f2;
      .no-form-tips{
        width: 100%;
        height: 100%;
        display: flex;
        padding-top: 10rem;
        justify-items: center;
        justify-content: center;
        background-color: white;
        font-size: 1.5rem;
      }
    }
    .spin-container-style{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
      justify-items: center;
    }
  }
</style>