[作业设计] - 下拉刷新试题

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

@@ -89,7 +89,7 @@
                       </el-col>
                     </el-row>
                     <!-- 习题表格 -->
-                    <div class="middle" >
+                    <div class="infinite-list-wrapper" >
                       <!-- <el-table :data="workResource.entpCourseWorkList" style="width: 100%; height: 100%;">
                         <el-table-column type="index" width="60" />
                         <el-table-column align="left" >
@@ -115,10 +115,15 @@
                           </template>
                         </el-table-column>
                       </el-table> -->
-                      <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto" infinite-scroll-immediate="false" infinite-scroll-distance='10'>
+                      <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 style="width: 20px;">{{ index +1 }}</div>
                           <div align="left" style="width: 100%;" >
                             <!-- <template #header>
                               <div style="display: flex">
@@ -126,7 +131,10 @@
                               </div>
                             </template> -->
                             <div @click="showExamAnalyseDrawer(item)">
-                              <div style="overflow: hidden; text-overflow: ellipsis" v-html="item.titleFormat"></div>
+                              <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>
@@ -134,12 +142,14 @@
                               </el-col>
                             </div>
                           </div>
-                          <div align="left" width="60">
+                          <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;">
@@ -256,7 +266,7 @@
 </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'
@@ -390,6 +400,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,      // 是否是第一次加载
+})
+
 /***
  * 作业类型切换
  */
@@ -407,6 +428,8 @@ const changeFormType = (val) => {
 const handleQueryParamFromEntpCourseWork = (queryType) => {
   // 确保更改了搜索参数后从第一页开始查询
   // this.paginationParams = {pageNum: 1,pageSize: 10}; 分页这里展示弃用了
+  // 清空作业列表
+  initPageParams();
   handleQueryFromEntpCourseWork(queryType);
 };
 
@@ -418,9 +441,9 @@ const handleQueryParamFromEntpCourseWork = (queryType) => {
  * 1  -  按条件查询
  * 2  -  按关键词查询
  */
-const handleQueryFromEntpCourseWork= (queryType) => {
+const handleQueryFromEntpCourseWork= async (queryType) => {
-  
   
+  pageParams.value.loading = true;
   const queryForm = {
     // 分页参数
     currentPage: paginationParams.pageNum,
@@ -451,37 +474,29 @@ const handleQueryFromEntpCourseWork= (queryType) => {
   //   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;
-    // }
-    const data = entpcourseworkres.data;
-    if(data&&data.length>0){
-      // workResource.entpCourseWorkList = entpcourseworkres.data;
-      // workResource.entpCourseWorkTotal = entpcourseworkres.data.length;
 
-      data.forEach(item=> {
+    data.forEach(item=> {
-        if (item.worktype == '选择题') {
+      if (item.worktype == '选择题') {
-          item.worktype = '单选题'
+        item.worktype = '单选题'
-        }
+      }
-      })
+    })
 
+    // 格式化试题信息
+    processList(data);
+    workResource.entpCourseWorkList.push(...data);    
 
-      //格式化试题信息
+    // 初次加载时更新当前试题数量
-      processList(data);
+    if (pageParams.value.isFirst) {
-      workResource.entpCourseWorkList.push(...data);
+      pageParams.value.isFirst = false;
-    }else{
+      pageParams.value.originCount = workResource.entpCourseWorkList.length;
-      workResource.entpCourseWorkList = [];
-      workResource.entpCourseWorkTotal = 0
     }
-  })
+  }
-
+  pageParams.value.loading = false;
 }
 
 // 教学资源，从课标分析、教材分析里来
@@ -900,13 +915,28 @@ const showExamAnalyseDrawer = (row) => {
     proxy.$refs.examDetailsDrawerRef.acceptParams(activeParams);
   })
 }
-const load = () => {
+
-  // count.value += 2
+
-  console.log("加载中")
+const pageLoad = async() => {
-  // workResource.entpCourseWorkList
+  console.log("加载中...")
   paginationParams.pageNum ++ ,
-  paginationParams.pageSize = 5,
+  paginationParams.pageSize = 2,
-  handleQueryFromEntpCourseWork(0);
+  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;
 }
 
 
@@ -933,6 +963,8 @@ watch(() => props.propsformobj.uniquekey, (newVal) => {
 })
 watch(() => props.bookobj.levelSecondId, (newVal) => {
   console.log(props.bookobj,'课程选择')
+  // 初始化滚动加载参数
+  initPageParams();
   // 习题资源
   handleQueryFromEntpCourseWork(0);
   // 框架梳理
@@ -940,6 +972,7 @@ watch(() => props.bookobj.levelSecondId, (newVal) => {
   // 知识点
   getEntpCourseWorkPointList();
 })
+
 </script>
 
 <style lang="scss" scoped>
@@ -1027,24 +1060,47 @@ watch(() => props.bookobj.levelSecondId, (newVal) => {
     box-sizing: border-box;
     background-color: rgb(231, 231, 231)
   }
-  .infinite-list {
+  .infinite-list-wrapper{
-  height: 100%;
+    height: 100%;
-  padding: 0;
+    text-align: center;
-  margin: 0;
+    overflow: auto;
-  list-style: none;
+
-}
+    .infinite-list {
-.infinite-list .infinite-list-item {
+      padding: 0;
-  display: flex;
+      margin: 0;
-  align-items: center;
+      list-style: none;
-  //justify-content: center;
+
-  //height: 50px;
+      .infinite-list-item {
-  background: var(--el-color-primary-light-9);
+        display: flex;
-  margin: 10px;
+        align-items: center;
-  color: var(--el-color-primary);
+        //justify-content: center;
-}
+        //height: 50px;
-.infinite-list .infinite-list-item + .list-item {
+        //background: var(--el-color-primary-light-9);
-  margin-top: 10px;
+        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>
 <style src="@/assets/styles/JYStyle.css"></style>