平台模块加载优化

src/views/superFusionPlatform/login/Login.vue

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

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,83 +16,131 @@
 </template>
 
 <script>
-    import {moduleData} from './moduleAndLaySettingConfig'
+    import {moduleData} from './moduleAndLaySettingConfig';
     export default {
         name: "ModuleBase",
-        props:{
-            moduleData:{
-                type:Object,
-                default:function () {
-                    return{
-                        module_type_id:'',
-                        module_id:'',
-                        size:''
+        props: {
+            moduleData: {
+                type: Object,
+                default: function () {
+                    return {
+                        module_type_id: '',
+                        module_id: '',
+                        size: '',
                     }
                 }
             }
         },
-        data:function(){
-            return{
-                type_id:this.moduleData.module_type_id,
-                id:this.moduleData.module_id,
-                module_size:this.moduleData.size,
-                url: this.initModuleUrl()
+        data: function () {
+            return {
+                type_id: this.moduleData.module_type_id,
+                id: this.moduleData.module_id,
+                module_size: this.moduleData.size,
+                //url: this.initModuleUrl(),
+                url: "",
             }
         },
-        computed:{
-            getCom: function (){
+        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:{
-            accessSubsystem:function(){
+        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];
-                this.$emit('accessSubsystem',module);
+                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(){
+            hideModule: function () {
                 this.$emit('hideModule')
             },
-            initModuleUrl:function(){
-                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
-                }else{
-                    return type.module_list.filter((module)=>{return module.module_id === this.moduleData.module_id})[0].module_url_large
+            initModuleUrl: function () {
+                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
+                } else {
+                    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])
-                if (this.module_size === '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
+            getModuleUrl: function () {
+                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
+                } else {
+                    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
+            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
             },
         },
-        watch:{
-            moduleData:function (newData) {
+        watch: {
+            moduleData: function (newData) {
                 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();
             }
         }
     }
 </script>
 
 <style scoped lang="scss">
-    .module-style{
+    .module-style {
         /*float: left;*/
         min-height: 10rem;
         background-color: white;
         margin-bottom: 14px;
-        .module-title-style{
+        .module-title-style {
             display: flex;
             width: 100%;
             height: 40px;
@@ -101,24 +149,24 @@
             align-items: center;
             justify-content: space-between;
             font-size: 16px;
-            color:white;
+            color: white;
             /*justify-items: space-around;*/
-            background:linear-gradient(to bottom right,var(--modTitleTwo),var(--modTitleOne));
-            background:-moz-linear-gradient(to bottom right,var(--modTitleTwo),var(--modTitleOne));
-            background:-webkit-linear-gradient(bottom right,var(--modTitleTwo),var(--modTitleOne));
-            .icon-style{
+            background: linear-gradient(to bottom right, var(--modTitleTwo), var(--modTitleOne));
+            background: -moz-linear-gradient(to bottom right, var(--modTitleTwo), var(--modTitleOne));
+            background: -webkit-linear-gradient(bottom right, var(--modTitleTwo), var(--modTitleOne));
+            .icon-style {
                 font-size: 18px;
                 margin-right: 20px;
                 cursor: pointer;
-                &:nth-last-of-type(1){
+                &:nth-last-of-type(1) {
                     margin-right: 0;
                 }
             }
         }
-        .no-module-tip-style{
+        .no-module-tip-style {
             display: flex;
             width: 100%;
-            height:120px;
+            height: 120px;
             align-items: center;
             align-content: center;
             justify-items: center;

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;
                 }
             }
         },