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,48 @@
                             <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 v-if="workResource.entpCourseWorkList.length == 0 && !pageParams.loading">
+                        <el-empty
+                          description="未找到相关试题"
+                          style="width: 100%; height: 200px; margin-top: 20px;"
+                        ></el-empty>
+                      </div>
                     </div>
                     <!-- 分页 这里不用-->
                     <!-- <div style="height: 55px;">
@@ -231,7 +272,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'
@@ -251,7 +292,8 @@ 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 {throttle,debounce } from '@/utils/comm'  
 import { useToolState } from '@/store/modules/tool'
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore().user
@@ -365,6 +407,17 @@ const boardLoading = ref(false);
 //常规作业----------
 const fileLoading = ref(false); // 常规作业loading
 
+// 下拉滚动参数
+
+const BASE_LIMIT_COUT = 50;   // 总加载额外试题数
+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,9 +435,33 @@ const changeFormType = (val) => {
 const handleQueryParamFromEntpCourseWork = (queryType) => {
   // 确保更改了搜索参数后从第一页开始查询
   // this.paginationParams = {pageNum: 1,pageSize: 10}; 分页这里展示弃用了
+  // 清空作业列表
+  initPageParams();
   handleQueryFromEntpCourseWork(queryType);
 };
 
+let obj = {};
+
+function Apis(key) {
+   obj[key] = [];
+   return function(task) {
+     return new Promise((resolve, reject) => {
+         obj[key].push(task);
+         Promise.all([...obj[key]]).then(res => {
+           const i = obj[key].findIndex(item => {
+             return item == task;
+           });
+           resolve(obj[key][i]);
+           //arr.splice(i, 1);
+         })
+     })
+   }
+ }
+ 
+ 
+ const client = new Apis('/paht');
+
+
 /**
  * @desc: 1、习题训练 -  新查询试题
  * @return: {*}
@@ -393,70 +470,86 @@ const handleQueryParamFromEntpCourseWork = (queryType) => {
  * 1  -  按条件查询
  * 2  -  按关键词查询
  */
-const handleQueryFromEntpCourseWork= (queryType) => {
+ const t = function(name, time) {
-  //queryForm.pageNum = this.paginationParams.pageNum;
+   return new Promise(resolve => {
-  //queryForm.pageSize = this.paginationParams.pageSize;
+    const queryForm = {
+      // 分页参数
+      currentPage: paginationParams.pageNum,
+      pageSize: paginationParams.pageSize,
+      // 课程相关参数
+      eid: props.bookobj.levelSecondId,
+      sectionName: props.bookobj.coursetitle,
+      edusubject: userStore.edusubject,
+      edustage: userStore.edustage,
+      //
+      // 题类
+      worktype: entpCourseWorkQueryParams.worktype.label,
+      workTypeId: entpCourseWorkQueryParams.worktype.value,
+      // 题源
+      workgroup: entpCourseWorkQueryParams.workgroup,
+      // 年份
+      yearStr: entpCourseWorkQueryParams.yearStr !== '-1' ? entpCourseWorkQueryParams.yearStr:'',
+      // 知识点
+      thirdId: entpCourseWorkQueryParams.point.length > 0 ? entpCourseWorkQueryParams.point[0]:'',
+      // 关键字
+      keyword: entpCourseWorkQueryParams.keyWord && entpCourseWorkQueryParams.keyWord !== '' ? entpCourseWorkQueryParams.keyWord:'',
 
-  const queryForm = {
+    }
-    // 课程相关参数
+    const entpcourseworkres = listEntpcourseworkNew(queryForm);
-    eid: props.bookobj.levelSecondId,
-    sectionName: props.bookobj.coursetitle,
-    edusubject: userStore.edusubject,
-    edustage: userStore.edustage,
-    //
-    // 题类
-    worktype: entpCourseWorkQueryParams.worktype.label,
-    workTypeId: entpCourseWorkQueryParams.worktype.value,
-    // 题源
-    workgroup: entpCourseWorkQueryParams.workgroup,
-    // 年份
-    yearStr: entpCourseWorkQueryParams.yearStr !== '-1' ? entpCourseWorkQueryParams.yearStr:'',
-    // 知识点
-    thirdId: entpCourseWorkQueryParams.point.length > 0 ? entpCourseWorkQueryParams.point[0]:'',
-    // 关键字
-    keyword: entpCourseWorkQueryParams.keyWord && entpCourseWorkQueryParams.keyWord !== '' ? entpCourseWorkQueryParams.keyWord:'',
 
+    resolve(entpcourseworkres);
+   })
   }
-
+const handleQueryFromEntpCourseWork= async (queryType) => {
-  // 分页参数
+  
-  // pageNum: paginationParams.pageNum,
+  pageParams.value.loading = true;
-  // pageSize: paginationParams.pageSize,
+  
 
   // 初中政治特殊处理( warn: 需确认是否修改 )
   // if (this.courseObj.edusubject=='政治' && this.courseObj.edustage=='初中') {
   //   // [初中+政治]需改为[初中+道德与法治]
   //   queryForm.edusubject = '道德与法治';
   // }
-
+  
-  listEntpcourseworkNew(queryForm).then(entpcourseworkres => {
+  client(t('任务1', 1500)).then(res => {
-    // if (queryType == 1 && this.entpCourseWorkQueryParams.worktype == '主观题') {
+    console.log("请求返回",res);
-    //   // 因菁优网题型因学科而不固定, 故非常规题重定义定为【主观题】
+    if(paginationParams.pageNum == 1){
-    //   const allowedWorkTypes = ['单选题', '填空题', '多选题', '判断题', '复合题'];
-    //   workResource.entpCourseWorkList = entpcourseworkres.rows.filter(item => {
-    //     return !allowedWorkTypes.includes(item.worktype);
-    //   });
-    // } else {
-    //   workResource.entpCourseWorkList = entpcourseworkres.rows;
-    // }
-
-    if(entpcourseworkres.data&&entpcourseworkres.data.length>0){
-      workResource.entpCourseWorkList = entpcourseworkres.data;
-      workResource.entpCourseWorkTotal = entpcourseworkres.data.length;
-
-      workResource.entpCourseWorkList.forEach(item=> {
-        if (item.worktype == '选择题') {
-          item.worktype = '单选题'
-        }
-      })
-
-
-      //格式化试题信息
-      processList(workResource.entpCourseWorkList);
-    }else{
       workResource.entpCourseWorkList = [];
-      workResource.entpCourseWorkTotal = 0
+      workResource.entpCourseWorkTotal = 0;
+
+       // 初始化下拉滚动条参数
+      // pageParams.value.loading = false;
+      // pageParams.value.isFirst = true;
+      // pageParams.value.originCount = 0;
     }
-  })
+    const data = res.data || [];
+    if(data && data.length>0){
+    // workResource.entpCourseWorkList = entpcourseworkres.data;
+    // workResource.entpCourseWorkTotal = entpcourseworkres.data.length;
+
+    data.forEach(item=> {
+      if (item.worktype == '选择题') {
+        item.worktype = '单选题'
+      }
+    })
+
+    // 格式化试题信息
+    processList(data);
+    workResource.entpCourseWorkList.push(...data);    
+
+    // 初次加载时更新当前试题数量
+    if (pageParams.value.isFirst) {
+      pageParams.value.isFirst = false;
+      pageParams.value.originCount = workResource.entpCourseWorkList.length;
+    }
+  }
+  pageParams.value.loading = false;
+  });
+
+  //const entpcourseworkres = await listEntpcourseworkNew(queryForm);
+
+  // const data = entpcourseworkres.data;
+  
 }
 
 // 教学资源，从课标分析、教材分析里来
@@ -877,6 +970,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() => {
   // 获取当前学科下的试题题型
@@ -893,21 +1008,46 @@ onMounted(async() => {
 
 })
 
-watch(() => props.propsformobj.uniquekey, (newVal) => {
+// const refreshData = () => {
-  console.log(props.propsformobj,'propsformobj')
+//   console.log("刷新数据")
-  if(props.propsformobj.uniquekey){
+//   // 初始化滚动加载参数
-    classWorkForm.uniquekey = props.propsformobj.uniquekey?cloneDeep(props.propsformobj.uniquekey):''; // 作业唯一标识 作业名称
+//   initPageParams();
-  }
+//   // 习题资源
-})
+//   handleQueryFromEntpCourseWork(0);
-watch(() => props.bookobj.levelSecondId, (newVal) => {
+//   // 框架梳理
-  console.log(props.bookobj,'课程选择')
+//   getQueryFromEvaluationclue();
+//   // 知识点
+//   getEntpCourseWorkPointList();
+// }
+// // 结合防抖和节流
+// const debounceQueryData = debounce(throttle(refreshData, 1000), 1000);
+
+
+
+// 防抖
+const debounceQueryData = debounce(() => {
+  console.log("防抖 加载数据中...")
+  // 初始化滚动加载参数
+  initPageParams();
   // 习题资源
   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>
@@ -995,7 +1135,47 @@ 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>
 <style src="@/assets/styles/JYStyle.css"></style>