学识审核滚动条处理

src/views/education/classManageMent/classHoursReview/component/StudyTables.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="studyRecordTable">
-    <div class="studyStyle">
+    <div class="studyStyle" :class="{ 'isFixed': headerFixed }" :style="{'left':left}">
       <div class="a_style">
         <i></i>
         <span>视频审核进度</span>
@@ -39,9 +39,9 @@
         <div class="flex_style_study">
           <div class="num_style" style="color: #0047d0">
             {{
-              ["不可审核", "未通过", "通过审核", "待审核", "审核中"][
+                ["不可审核", "未通过", "通过审核", "待审核", "审核中"][
                 periodStatus + 1
-              ]
+                ]
             }}
           </div>
           <div style="clear: both"></div>
@@ -49,32 +49,15 @@
       </div>
       <div class="s_sd">
         <template v-if="periodStatus === 2">
-          <el-checkbox
-            :disabled="!allIds.length"
-            :indeterminate="isIndeterminate"
-            v-model="checkAll"
-            @change="handleCheckAllChange"
-            >待审全选</el-checkbox
-          >
-          <el-button
-            style="margin-left: 10px"
-            size="mini"
-            type="success"
-            @click="getChangeStatus(1)"
-            >勾选通过</el-button
-          >
-          <el-button size="mini" type="danger" @click="getChangeStatus(2)"
-            >勾选作弊</el-button
-          >
+          <el-checkbox :disabled="!allIds.length" :indeterminate="isIndeterminate" v-model="checkAll"
+            @change="handleCheckAllChange">待审全选</el-checkbox>
+          <el-button style="margin-left: 10px" size="mini" type="success" @click="getChangeStatus(1)">勾选通过</el-button>
+          <el-button size="mini" type="danger" @click="getChangeStatus(2)">勾选作弊</el-button>
         </template>
 
         <template v-if="periodStatus === 3">
-          <el-button style="margin-left: 10px" size="mini" @click="checkBack"
-            >勾选数据，打回待审核状态</el-button
-          >
-          <el-button size="mini" type="warning" @click="approvedOK = true"
-            >确认审核通过结果</el-button
-          >
+          <el-button style="margin-left: 10px" size="mini" @click="checkBack">勾选数据，打回待审核状态</el-button>
+          <el-button size="mini" type="warning" @click="approvedOK = true">确认审核通过结果</el-button>
         </template>
         <!-- <el-button
           v-if="periodStatus === 1"
@@ -85,53 +68,29 @@
         > -->
       </div>
     </div>
-    <div class="tablesBoxs">
-      <el-checkbox-group
-        v-model="checkList"
-        @change="handleCheckedCitiesChange"
-      >
-        <component
-          :is="keys[key]"
-          v-for="key in Object.keys(tablesData)"
-          :key="key"
-          :tabledata="tablesData[key]"
-          :label="key == 5 ? '卷' : '章'"
-        ></component>
-      </el-checkbox-group>
-    </div>
-    <Cheat-dialog
-      :disabledBtn="disabledBtn"
-      :vidBoxHours.sync="vidBoxHours"
-      @close="loadingClose"
-      @submit="
-        (reason) => {
-          submitOK(2, reason);
-        }
-      "
-    ></Cheat-dialog>
-    <Base-dialog
-      title="操作提示："
-      :disabledBtn="disabledBtn"
-      :isShow.sync="through"
-      @close="loadingClose"
-      @submit="
-        () => {
-          submitOK(1);
-        }
-      "
-    >
+
+    <el-checkbox-group v-model="checkList" @change="handleCheckedCitiesChange">
+      <component :is="keys[key]" v-for="key in Object.keys(tablesData)" :key="key" :tabledata="tablesData[key]"
+        :label="key == 5 ? '卷' : '章'"></component>
+    </el-checkbox-group>
+
+    <Cheat-dialog :disabledBtn="disabledBtn" :vidBoxHours.sync="vidBoxHours" @close="loadingClose" @submit="
+      (reason) => {
+        submitOK(2, reason);
+      }
+    "></Cheat-dialog>
+    <Base-dialog title="操作提示：" :disabledBtn="disabledBtn" :isShow.sync="through" @close="loadingClose" @submit="
+      () => {
+        submitOK(1);
+      }
+    ">
       <div>
         确定所勾选的内容，审核结果为【通过】？<br />
         确认后，初审不可再修改，请检查清楚再操作！
       </div>
     </Base-dialog>
-    <Base-dialog
-      title="操作提示："
-      :disabledBtn="disabledBtn"
-      :isShow.sync="popback"
-      @close="loadingClose"
-      @submit="uploadForm"
-    >
+    <Base-dialog title="操作提示：" :disabledBtn="disabledBtn" :isShow.sync="popback" @close="loadingClose"
+      @submit="uploadForm">
       <div>
         <div style="color: red">
           <h4 style="margin: 0px">当前勾选了{{ checkList.length }}条数据：</h4>
@@ -147,13 +106,8 @@
         </div>
       </div>
     </Base-dialog>
-    <Base-dialog
-      title="操作提示："
-      :disabledBtn="disabledBtn"
-      :isShow.sync="approvedOK"
-      @close="loadingClose"
-      @submit="approvedOKFunc"
-    >
+    <Base-dialog title="操作提示：" :disabledBtn="disabledBtn" :isShow.sync="approvedOK" @close="loadingClose"
+      @submit="approvedOKFunc">
       <div>
         <div style="color: red">
           <h4 style="margin: 0px">确认审核通过结果后：</h4>
@@ -180,6 +134,8 @@ import ChapterTable from "./ChapterTable.vue";
 import LessonTable from "./LessonTable.vue";
 import CheatDialog from "./CheatDialog.vue";
 import { rollBackPeriod } from "@/api/education/classManageMent";
+import { debounce } from '@/utils'
+import { mapGetters } from "vuex";
 export default {
   props: {
     tablesData: {
@@ -202,7 +158,7 @@ export default {
     },
     getUserInfo: {
       type: Function,
-      default: () => {},
+      default: () => { },
     },
   },
   provide() {
@@ -252,9 +208,18 @@ export default {
         },
       ],
       allType3List: [],
+      offsetTop: 0,
+      offsetHeight: 0,
+      headerFixed: false
     };
   },
   methods: {
+    handleScroll() {
+      // 得到页面滚动的距离
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+      // 判断页面滚动的距离是否大于吸顶元素的位置
+      this.headerFixed = scrollTop > (this.offsetTop + this.offsetHeight);
+    },
     submitAllSlect(reason) {
       this.submitOK(2, reason);
     },
@@ -466,27 +431,40 @@ export default {
     periodStatus() {
       return this.userData.periodStatus;
     },
+    ...mapGetters(["sidebar"]),
+    left() {
+      return this.sidebar.opened ? '206px' : '60px'
+    }
   },
+  mounted() {
+    this.$nextTick(function () {
+      let header = document.getElementsByClassName("studyStyle")[0];
+      this.offsetTop = header.offsetTop;
+      this.offsetHeight = header.offsetHeight;
+    });
+    window.addEventListener('scroll', debounce(this.handleScroll, 50));
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .studyRecordTable {
   .studyStyle {
-    top: 100px;
-    margin: 16px 0px 0px;
+    margin: 16px 0;
     display: flex;
     align-items: center;
-    & > .a_style {
+
+    &>.a_style {
       display: flex;
       align-items: center;
-      margin: 0px 16px 16px 0px;
+      margin-right: 16px;
       padding: 11px 16px;
       box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
       border-radius: 4px;
       height: 40px;
       width: 440px;
       user-select: none;
+
       i {
         width: 2px;
         height: 18px;
@@ -494,26 +472,30 @@ export default {
         background-color: #0047d0;
         margin-right: 8px;
       }
+
       span {
         color: #666;
         font-weight: bold;
       }
+
       .flex_style_study {
         flex: 1;
       }
+
       .num_style {
         float: right;
         font-size: 14px;
         margin-left: 14px;
       }
     }
+
     .s_sd {
       flex: 1;
       justify-content: flex-end;
       display: flex;
       align-items: center;
       flex-shrink: 0;
-      margin: 0px 16px 16px 0px;
+
       .dis_colu {
         height: 55px;
         margin-right: 14px;
@@ -524,9 +506,16 @@ export default {
       }
     }
   }
-  .tablesBoxs {
-    height: calc(100% - 56px);
-    overflow: auto;
+
+  .isFixed {
+    position: fixed;
+    top: 84px;
+    right: 0;
+    z-index: 10;
+    background: #fff;
+    padding: 0 20px;
+    margin: 0;
   }
+
 }
 </style>

src/views/education/classManageMent/classHoursReview/studyTimes.vue

@@ -346,7 +346,6 @@ export default {
 }
 
 #studyTimes {
-  height: calc(100vh - 190px);
   display: flex;
   flex-direction: column;
 }