作业设计：课程选择太快增加防抖

src/renderer/src/views/classTask/container/newTask/taskTypeView.vue

@@ -89,8 +89,8 @@
                       </el-col>
                     </el-row>
                     <!-- 习题表格 -->
-                    <div class="middle" >
+                    <div class="infinite-list-wrapper" >
-                      <el-table :data="workResource.entpCourseWorkList" style="width: 100%; height: 100%;">
+                      <!-- <el-table :data="workResource.entpCourseWorkList" style="width: 100%; height: 100%;">
                         <el-table-column type="index" width="60" />
                         <el-table-column align="left" >
                           <template #header>
@@ -114,7 +114,42 @@
                             <el-button type="primary" @click="handleClassWorkQuizAdd('entpcourseworklist', scope.row.id)">添加</el-button>
                           </template>
                         </el-table-column>
-                      </el-table>
+                      </el-table> -->
+                      <ul 
+                        v-infinite-scroll="pageLoad" 
+                        class="infinite-list" 
+                        infinite-scroll-immediate="false" 
+                        infinite-scroll-distance='1'
+                        infinite-scroll-delay="1000"
+                        :infinite-scroll-disabled="pageDisabled"
+                      >
+                        <li v-for="(item,index) in workResource.entpCourseWorkList" :key="item" class="infinite-list-item">
+                          <div align="left" style="width: 100%;" >
+                            <!-- <template #header>
+                              <div style="display: flex">
+                                <div style="align-items: center;">题目内容</div>
+                              </div>
+                            </template> -->
+                            <div @click="showExamAnalyseDrawer(item)">
+                              <div>
+                                <span style="width: 20px;">{{ index +1 }}. </span>
+                                <span style="overflow: hidden; text-overflow: ellipsis" v-html="item.titleFormat"></span>
+                              </div>
+                              <div style="overflow: hidden; text-overflow: ellipsis; font-size: 0.9em; margin-top: 6px;" v-html="item.workdescFormat"></div>
+                              <el-col :span="24" style="display: flex">
+                                <div style="font-size: 1em; color: silver; padding-top: 5px">{{ item.entpname }} {{ item.editusername }}</div>
+                                <div style="margin-left: 30px; font-size: 1em; color: silver; padding-top: 5px">{{ item.worktag }}</div>
+                              </el-col>
+                            </div>
+                          </div>
+                          <div align="right" style="width: 72px;">
+                            <el-button type="primary" @click="handleClassWorkQuizAdd('entpcourseworklist', item.id)">添加</el-button>
+                          </div>
+
+                        </li>
+                      </ul>
+                      <p class="infinite-list-loading" v-if="pageParams.loading">加载中...</p>
+                      <p class="infinite-list-noMove" v-if="pageNoMore">无更多试题...</p>
                     </div>
                     <!-- 分页 这里不用-->
                     <!-- <div style="height: 55px;">
@@ -231,14 +266,14 @@
 </template>
 
 <script setup>
-import { onMounted, ref, nextTick, watch, reactive, getCurrentInstance } from 'vue'
+import { onMounted, ref, nextTick, watch, reactive, getCurrentInstance, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { cloneDeep } from 'lodash'
 import { useRouter } from 'vue-router'
 
 import {listEntpcoursework, listEntpcourseworkNew, getEntpcoursework} from '@/api/education/entpCourseWork'
 import { addClassworkReturnId } from '@/api/teaching/classwork'
-import { updateClasswork, listEvaluationclue,readFile, listClassworkeval,delClassworkeval,addClassworkeval,updateClassworkeval } from '@/api/classTask'
+import { updateClasswork, listEvaluationclue, listClassworkeval,delClassworkeval,addClassworkeval,updateClassworkeval } from '@/api/classTask'
 import { listEvaluation } from '@/api/subject'
 import { listEntpcoursefile } from '@/api/education/entpcoursefile'
 import { listKnowledgePoint } from "@/api/knowledge/knowledgePoint";
@@ -250,8 +285,9 @@ import FileUpload from "@/components/FileUpload/index.vue";
 import whiteboard from '@/components/whiteboard/whiteboard.vue'
 import prevReadMsgDialog from '@/views/classTask/container/newTask/prevReadMsg-Dialog.vue'
 import examDetailsDrawer from '@/components/exam-question/examDetailsDrawer.vue'
-
 import { JYApiListCT, JYApiListOriginYear, JYApiListSO} from "@/utils/examQuestion/jyeoo"
+
+import {debounce } from '@/utils/comm'  
 import { useToolState } from '@/store/modules/tool'
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore().user
@@ -365,6 +401,17 @@ const boardLoading = ref(false);
 //常规作业----------
 const fileLoading = ref(false); // 常规作业loading
 
+// 下拉滚动参数
+
+const BASE_LIMIT_COUT = 10;   // 总加载额外试题数
+const pageNoMore = computed( () => workResource.entpCourseWorkList.length >= pageParams.value.originCount+BASE_LIMIT_COUT );
+const pageDisabled  = computed(() => pageParams.value.loading || pageNoMore.value);
+const pageParams = ref({
+  loading: false,     // 是否正在加载中
+  originCount: 0,     // 初始条目数量
+  isFirst: true,      // 是否是第一次加载
+})
+
 /***
  * 作业类型切换
  */
@@ -382,6 +429,8 @@ const changeFormType = (val) => {
 const handleQueryParamFromEntpCourseWork = (queryType) => {
   // 确保更改了搜索参数后从第一页开始查询
   // this.paginationParams = {pageNum: 1,pageSize: 10}; 分页这里展示弃用了
+  // 清空作业列表
+  initPageParams();
   handleQueryFromEntpCourseWork(queryType);
 };
 
@@ -393,8 +442,9 @@ const handleQueryParamFromEntpCourseWork = (queryType) => {
  * 1  -  按条件查询
  * 2  -  按关键词查询
  */
-const handleQueryFromEntpCourseWork= (queryType) => {
+const handleQueryFromEntpCourseWork= async (queryType) => {
   
+  pageParams.value.loading = true;
   const queryForm = {
     // 分页参数
     currentPage: paginationParams.pageNum,
@@ -419,45 +469,35 @@ const handleQueryFromEntpCourseWork= (queryType) => {
 
   }
 
-  // 分页参数
-  // pageNum: paginationParams.pageNum,
-  // pageSize: paginationParams.pageSize,
-
   // 初中政治特殊处理( warn: 需确认是否修改 )
   // if (this.courseObj.edusubject=='政治' && this.courseObj.edustage=='初中') {
   //   // [初中+政治]需改为[初中+道德与法治]
   //   queryForm.edusubject = '道德与法治';
   // }
 
-  listEntpcourseworkNew(queryForm).then(entpcourseworkres => {
+  const entpcourseworkres = await listEntpcourseworkNew(queryForm);
-    // if (queryType == 1 && this.entpCourseWorkQueryParams.worktype == '主观题') {
+  const data = entpcourseworkres.data;
-    //   // 因菁优网题型因学科而不固定, 故非常规题重定义定为【主观题】
+  if(data && data.length>0){
-    //   const allowedWorkTypes = ['单选题', '填空题', '多选题', '判断题', '复合题'];
+    // workResource.entpCourseWorkList = entpcourseworkres.data;
-    //   workResource.entpCourseWorkList = entpcourseworkres.rows.filter(item => {
+    // workResource.entpCourseWorkTotal = entpcourseworkres.data.length;
-    //     return !allowedWorkTypes.includes(item.worktype);
-    //   });
-    // } else {
-    //   workResource.entpCourseWorkList = entpcourseworkres.rows;
-    // }
 
-    if(entpcourseworkres.data&&entpcourseworkres.data.length>0){
+    data.forEach(item=> {
-      workResource.entpCourseWorkList = entpcourseworkres.data;
-      workResource.entpCourseWorkTotal = entpcourseworkres.data.length;
-
-      workResource.entpCourseWorkList.forEach(item=> {
       if (item.worktype == '选择题') {
         item.worktype = '单选题'
       }
     })
 
+    // 格式化试题信息
+    processList(data);
+    workResource.entpCourseWorkList.push(...data);    
 
-      //格式化试题信息
+    // 初次加载时更新当前试题数量
-      processList(workResource.entpCourseWorkList);
+    if (pageParams.value.isFirst) {
-    }else{
+      pageParams.value.isFirst = false;
-      workResource.entpCourseWorkList = [];
+      pageParams.value.originCount = workResource.entpCourseWorkList.length;
-      workResource.entpCourseWorkTotal = 0
     }
-  })
+  }
+  pageParams.value.loading = false;
 }
 
 // 教学资源，从课标分析、教材分析里来
@@ -878,6 +918,28 @@ const showExamAnalyseDrawer = (row) => {
 }
 
 
+const pageLoad = async() => {
+  console.log("加载中...")
+  paginationParams.pageNum ++ ,
+  paginationParams.pageSize = 2,
+  await handleQueryFromEntpCourseWork(0);
+}
+
+const initPageParams = () => {
+  // 初始化作业习题列表
+  workResource.entpCourseWorkList = [];
+  workResource.entpCourseWorkTotal = 0
+
+  // 初始化下拉滚动条参数
+  pageParams.value.loading = false;
+  pageParams.value.isFirst = true;
+  pageParams.value.originCount = 0;
+
+  // 初始化分页参数
+  paginationParams.pageNum = 1;
+  paginationParams.pageSize = 10;
+}
+
 
 onMounted(async() => {
   // 获取当前学科下的试题题型
@@ -894,21 +956,30 @@ onMounted(async() => {
 
 })
 
-watch(() => props.propsformobj.uniquekey, (newVal) => {
+const debounceQueryData = debounce(() => {
-  console.log(props.propsformobj,'propsformobj')
+  console.log("防抖 加载数据中...")
-  if(props.propsformobj.uniquekey){
+  // 初始化滚动加载参数
-    classWorkForm.uniquekey = props.propsformobj.uniquekey?cloneDeep(props.propsformobj.uniquekey):''; // 作业唯一标识 作业名称
+  initPageParams();
-  }
-})
-watch(() => props.bookobj.levelSecondId, (newVal) => {
-  console.log(props.bookobj,'课程选择')
   // 习题资源
   handleQueryFromEntpCourseWork(0);
   // 框架梳理
   getQueryFromEvaluationclue();
   // 知识点
   getEntpCourseWorkPointList();
+}, 1000);
+
+
+watch(() => props.propsformobj.uniquekey, (newVal) => {
+  console.log(props.propsformobj,'propsformobj')
+  if(props.propsformobj.uniquekey){
+    classWorkForm.uniquekey = props.propsformobj.uniquekey?cloneDeep(props.propsformobj.uniquekey):''; // 作业唯一标识 作业名称
+  }
 })
+watch(() => props.bookobj.levelSecondId, (newVal, oldVal) => {
+  console.log(props.bookobj,'课程选择')
+  debounceQueryData();
+})
+
 </script>
 
 <style lang="scss" scoped>
@@ -996,6 +1067,46 @@ watch(() => props.bookobj.levelSecondId, (newVal) => {
     box-sizing: border-box;
     background-color: rgb(231, 231, 231)
   }
+  .infinite-list-wrapper{
+    height: 100%;
+    text-align: center;
+    overflow: auto;
+
+    .infinite-list {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      .infinite-list-item {
+        display: flex;
+        align-items: center;
+        //justify-content: center;
+        //height: 50px;
+        //background: var(--el-color-primary-light-9);
+        padding: 10px;
+        border-top: 1px solid #eee;
+        //color: var(--el-color-primary);
+      }
+      .infinite-list-item:hover {
+        background-color: #F3F5F8;
+      }
+
+      .infinite-list-item + .list-item {
+        margin-top: 10px;
+      }
+    }
+
+    .infinite-list-loading{
+      padding: 10px 0;
+      border-top: 1px solid #eee;
+      color: red;
+    }
+    .infinite-list-noMove{
+      padding: 10px 0;
+      border-top: 1px solid #eee;
+      color: #999;
+    }
+  }
   
 }
 </style>