baigl #394
|
@ -89,8 +89,8 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<!-- 习题表格 -->
|
||||
<div class="middle" >
|
||||
<el-table :data="workResource.entpCourseWorkList" style="width: 100%; height: 100%;">
|
||||
<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" >
|
||||
<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'
|
||||
|
@ -252,6 +293,7 @@ import prevReadMsgDialog from '@/views/classTask/container/newTask/prevReadMsg-D
|
|||
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,11 +470,12 @@ const handleQueryParamFromEntpCourseWork = (queryType) => {
|
|||
* 1 - 按条件查询
|
||||
* 2 - 按关键词查询
|
||||
*/
|
||||
const handleQueryFromEntpCourseWork= (queryType) => {
|
||||
//queryForm.pageNum = this.paginationParams.pageNum;
|
||||
//queryForm.pageSize = this.paginationParams.pageSize;
|
||||
|
||||
const t = function(name, time) {
|
||||
return new Promise(resolve => {
|
||||
const queryForm = {
|
||||
// 分页参数
|
||||
currentPage: paginationParams.pageNum,
|
||||
pageSize: paginationParams.pageSize,
|
||||
// 课程相关参数
|
||||
eid: props.bookobj.levelSecondId,
|
||||
sectionName: props.bookobj.coursetitle,
|
||||
|
@ -417,10 +495,15 @@ const handleQueryFromEntpCourseWork= (queryType) => {
|
|||
keyword: entpCourseWorkQueryParams.keyWord && entpCourseWorkQueryParams.keyWord !== '' ? entpCourseWorkQueryParams.keyWord:'',
|
||||
|
||||
}
|
||||
const entpcourseworkres = listEntpcourseworkNew(queryForm);
|
||||
|
||||
resolve(entpcourseworkres);
|
||||
})
|
||||
}
|
||||
const handleQueryFromEntpCourseWork= async (queryType) => {
|
||||
|
||||
pageParams.value.loading = true;
|
||||
|
||||
// 分页参数
|
||||
// pageNum: paginationParams.pageNum,
|
||||
// pageSize: paginationParams.pageSize,
|
||||
|
||||
// 初中政治特殊处理( warn: 需确认是否修改 )
|
||||
// if (this.courseObj.edusubject=='政治' && this.courseObj.edustage=='初中') {
|
||||
|
@ -428,35 +511,45 @@ const handleQueryFromEntpCourseWork= (queryType) => {
|
|||
// queryForm.edusubject = '道德与法治';
|
||||
// }
|
||||
|
||||
listEntpcourseworkNew(queryForm).then(entpcourseworkres => {
|
||||
// if (queryType == 1 && this.entpCourseWorkQueryParams.worktype == '主观题') {
|
||||
// // 因菁优网题型因学科而不固定, 故非常规题重定义定为【主观题】
|
||||
// const allowedWorkTypes = ['单选题', '填空题', '多选题', '判断题', '复合题'];
|
||||
// workResource.entpCourseWorkList = entpcourseworkres.rows.filter(item => {
|
||||
// return !allowedWorkTypes.includes(item.worktype);
|
||||
// });
|
||||
// } else {
|
||||
// workResource.entpCourseWorkList = entpcourseworkres.rows;
|
||||
// }
|
||||
client(t('任务1', 1500)).then(res => {
|
||||
console.log("请求返回",res);
|
||||
if(paginationParams.pageNum == 1){
|
||||
workResource.entpCourseWorkList = [];
|
||||
workResource.entpCourseWorkTotal = 0;
|
||||
|
||||
if(entpcourseworkres.data&&entpcourseworkres.data.length>0){
|
||||
workResource.entpCourseWorkList = entpcourseworkres.data;
|
||||
workResource.entpCourseWorkTotal = entpcourseworkres.data.length;
|
||||
// 初始化下拉滚动条参数
|
||||
// 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;
|
||||
|
||||
workResource.entpCourseWorkList.forEach(item=> {
|
||||
data.forEach(item=> {
|
||||
if (item.worktype == '选择题') {
|
||||
item.worktype = '单选题'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 格式化试题信息
|
||||
processList(workResource.entpCourseWorkList);
|
||||
}else{
|
||||
workResource.entpCourseWorkList = [];
|
||||
workResource.entpCourseWorkTotal = 0
|
||||
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) => {
|
||||
console.log(props.propsformobj,'propsformobj')
|
||||
if(props.propsformobj.uniquekey){
|
||||
classWorkForm.uniquekey = props.propsformobj.uniquekey?cloneDeep(props.propsformobj.uniquekey):''; // 作业唯一标识 作业名称
|
||||
}
|
||||
})
|
||||
watch(() => props.bookobj.levelSecondId, (newVal) => {
|
||||
console.log(props.bookobj,'课程选择')
|
||||
// const refreshData = () => {
|
||||
// console.log("刷新数据")
|
||||
// // 初始化滚动加载参数
|
||||
// initPageParams();
|
||||
// // 习题资源
|
||||
// handleQueryFromEntpCourseWork(0);
|
||||
// // 框架梳理
|
||||
// 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,6 +1135,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>
|
||||
|
|
Loading…
Reference in New Issue