平台模块加载优化

src/views/superFusionPlatform/login/Login.vue

@@ -48,9 +48,11 @@
             document.onkeydown = function (e) {
                 let key = window.event.keyCode;
                 if(key == 13){
+                    if(StaticParams.trim(_this.account) !== "" || StaticParams.trim(_this.password) !== ""){
                         _this.loginAccount();
                     }
                 }
+            }
         },
         components:{
             // ACheckbox:Checkbox,

src/views/superFusionPlatform/mainPlatform/MainPlatform.vue

@@ -4,7 +4,7 @@
         <template v-else>
             <top-bar :total_notice="totalNotice" :total_todo="todo_count" :unread_mail="mailCount" :crmData="crmData" :moduleAndLayoutData="moduleLayout"
                      ref="topBarRef" @accessSubsystem="onAccessSubsystem" @returnToMain="onReturnToMain"/>
-            <div class="content-style" ref="contentRef" :style="{display:showMainContent === true?'block':'none'}">
+            <div id="moduleContent" class="content-style" ref="contentRef" :style="{display:showMainContent === true?'block':'none'}">
                 <div class="deal-and-notice-style">
                     <Message class="content-child-style" style="width:calc(100% * 460 / 1680);background-color: #4baafe"/>
                     <Deal class="content-child-style" style="width:calc(100% * 642 / 1680);background-color: white" :countData="todoCount" @btnClick="onDealBtnClick"/>
@@ -604,7 +604,7 @@
         .content-style{
             height: calc(100% - 100px);
             padding: 14px 28px;
-            overflow-y: auto;
+            overflow-y: scroll;
             background-color: #F8F9FB;
             .deal-and-notice-style{
                 width: 100%;

src/views/superFusionPlatform/mainPlatform/moduleAndLayout/ModuleBase.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="module-style">
+    <div class="module-style" ref="moduleRef">
         <div class="module-title-style">
             <span>{{getModuleName()}}</span>
             <div class="icon-container-style">
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-    import {moduleData} from './moduleAndLaySettingConfig'
+    import {moduleData} from './moduleAndLaySettingConfig';
     export default {
         name: "ModuleBase",
         props: {
@@ -26,7 +26,7 @@
                     return {
                         module_type_id: '',
                         module_id: '',
-                        size:''
+                        size: '',
                     }
                 }
             }
@@ -36,43 +36,89 @@
                 type_id: this.moduleData.module_type_id,
                 id: this.moduleData.module_id,
                 module_size: this.moduleData.size,
-                url: this.initModuleUrl()
+                //url: this.initModuleUrl(),
+                url: "",
             }
         },
+        mounted(){
+            //初次加载：第一次加载时，模块在屏幕内就加载
+            this.initLoadModule();
+            //延时加载：随着屏幕向下滚动，模块出现在屏幕中再加载
+            let moduleContent = document.getElementById("moduleContent");
+            moduleContent.addEventListener("scroll", () => {
+                let scrollTop = moduleContent.scrollTop;
+                //可见区域底部高度 = 滚动条高度 + 视窗高度
+                let visibleBottom = scrollTop + document.documentElement.clientHeight - 100;
+                //模块距离顶部高度
+                let moduleTop = this.$refs.moduleRef ? this.$refs.moduleRef.offsetTop : 0;
+                //如果模块距离顶部高度 小于 可见区域底部高度 就视为可见
+                if (moduleTop + 100 < visibleBottom) {
+                    //开始加载
+                    this.url = this.getModuleUrl();
+                }
+            })
+        },
         computed: {
             getCom: function () {
                 return () => import(`@/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/${this.url}`)
             },
         },
         methods: {
+            initLoadModule: function () {
+                let moduleTop = this.$refs.moduleRef ? this.$refs.moduleRef.offsetTop : 0;
+                let initVisibleBottom = document.documentElement.clientHeight;
+                if (moduleTop < initVisibleBottom) {
+                    //开始加载
+                    this.url = this.getModuleUrl();
+                }
+            },
             accessSubsystem: function () {
                 debugger;
-                let type = (moduleData.filter((type)=>{return type.module_type_id === this.type_id})[0]);
-                let module = type.module_list.filter((module)=>{return module.module_id === this.id})[0];
+                let type = (moduleData.filter((type) => {
+                    return type.module_type_id === this.type_id
+                })[0]);
+                let module = type.module_list.filter((module) => {
+                    return module.module_id === this.id
+                })[0];
                 this.$emit('accessSubsystem', module);
             },
             hideModule: function () {
                 this.$emit('hideModule')
             },
             initModuleUrl: function () {
-                let type = (moduleData.filter((type)=>{return type.module_type_id === this.moduleData.module_type_id})[0])
+                let type = (moduleData.filter((type) => {
+                    return type.module_type_id === this.moduleData.module_type_id
+                })[0])
                 if (this.moduleData.size === 'small') {
-                   return type.module_list.filter((module)=>{return module.module_id === this.moduleData.module_id})[0].module_url_small
+                    return type.module_list.filter((module) => {
+                        return module.module_id === this.moduleData.module_id
+                    })[0].module_url_small
                 } else {
-                    return type.module_list.filter((module)=>{return module.module_id === this.moduleData.module_id})[0].module_url_large
+                    return type.module_list.filter((module) => {
+                        return module.module_id === this.moduleData.module_id
+                    })[0].module_url_large
                 }
             },
             getModuleUrl: function () {
-                let type = (moduleData.filter((type)=>{return type.module_type_id === this.type_id})[0])
+                let type = (moduleData.filter((type) => {
+                    return type.module_type_id === this.type_id
+                })[0])
                 if (this.module_size === 'small') {
-                    return type.module_list.filter((module)=>{return module.module_id === this.id})[0].module_url_small
+                    return type.module_list.filter((module) => {
+                        return module.module_id === this.id
+                    })[0].module_url_small
                 } else {
-                    return type.module_list.filter((module)=>{return module.module_id === this.id})[0].module_url_large
+                    return type.module_list.filter((module) => {
+                        return module.module_id === this.id
+                    })[0].module_url_large
                 }
             },
             getModuleName: function () {
-                return (moduleData.filter((type)=>{return type.module_type_id === this.type_id})[0]).
-                module_list.filter((module)=>{return module.module_id === this.id})[0].module_name
+                return (moduleData.filter((type) => {
+                    return type.module_type_id === this.type_id
+                })[0]).module_list.filter((module) => {
+                    return module.module_id === this.id
+                })[0].module_name
             },
         },
         watch: {
@@ -80,7 +126,9 @@
                 this.type_id = newData.module_type_id
                 this.id = newData.module_id
                 this.module_size = newData.size
-                this.url = this.getModuleUrl()
+                this.showIndex = newData.showIndex
+                //this.url = this.getModuleUrl()
+                this.initLoadModule();
             }
         }
     }

src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/Test.vue

@@ -1,13 +0,0 @@
-<template>
-    <div>111</div>
-</template>
-
-<script>
-    export default {
-        name: "Test"
-    }
-</script>
-
-<style scoped>
-
-</style>

src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/classEvaluation/classEvaluationLarge.vue

@@ -1,13 +1,14 @@
 <template>
     <div class="class-evaluation-large-div">
-        <TabComp :tabArr="tabArr" showName="title" @tabChange="tabChange"></TabComp>
-        <TotalEvaluation v-if="tabIndex == 0"/>
-        <ClassEvaluation v-if="tabIndex == 1"/>
-        <ScoreRecord v-if="tabIndex == 2"/>
-        <SummaryEva v-if="tabIndex == 3"/>
+        <TabComp :tabArr="tabArr" showName="title" @tabChange="tabChange" cbName="type"></TabComp>
+        <TotalEvaluation v-if="pageType == 'whole'"/>
+        <ClassEvaluation v-if="pageType == 'class'"/>
+        <ScoreRecord v-if="pageType == 'record'"/>
+        <SummaryEva v-if="pageType == 'summary'"/>
     </div>
 </template>
 <script>
+    import OfficeMenuConfig from '../../../../../../../../src/utils/officeMenuConfig';
     import TabComp from '../common/tabComp.vue';
     import TotalEvaluation from './totalEva.vue';
     import ClassEvaluation from './classEva.vue';
@@ -18,18 +19,43 @@
             return {
                 showLoading:true,
                 tabIndex:0,
-                tabArr: [
-                    {title: "整体评价"},
-                    {title: "班级评价"},
-                    {title: "打分记录"},
-                    {title: "汇总评价"},
-                ],
+                pageType:"",
+                wholeAdmin:OfficeMenuConfig.menuIsExist(["dailyEvaluation", "evaluationResultSearch", "wholeEvaluationResult"]),
+                classAdmin:OfficeMenuConfig.menuIsExist(["dailyEvaluation", "evaluationResultSearch", "classEvaluationResult"]),
+                recordAdmin:OfficeMenuConfig.menuIsExist(["dailyEvaluation", "evaluationResultSearch", "ratingScoringRecord"]),
+                summaryAdmin:OfficeMenuConfig.menuIsExist(["dailyEvaluation", "evaluationResultSum"]),
+                tabArr: [],
+            }
+        },
+        created(){
+            if(this.wholeAdmin){
+                this.tabArr.push(
+                    {title: "整体评价",type:"whole"}
+                )
+            }
+            if(this.classAdmin){
+                this.tabArr.push(
+                    {title: "班级评价",type:"class"}
+                )
+            }
+            if(this.recordAdmin){
+                this.tabArr.push(
+                    {title: "打分记录",type:"record"}
+                )
+            }
+            if(this.summaryAdmin){
+                this.tabArr.push(
+                    {title: "汇总评价",type:"summary"}
+                )
+            }
+            if(this.tabArr.length > 0){
+                this.pageType = this.tabArr[0].type;
             }
         },
         methods:{
             tabChange:function (param) {
-                if (this.tabIndex != param.index) {
-                    this.tabIndex = param.index;
+                if (this.pageType != param.cbName) {
+                    this.pageType = param.cbName;
                 }
             }
         },