zhuhao
/
AIx_Smarttalk_WS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
白了个白 2024-11-11 10:13:41 +08:00
parent f53d7f104c
commit a0bfb5be70
1 changed files with 156 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
src/renderer/src/views/classTask/container/newTask/taskTypeView.vue
View File

@ -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,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 => {
// if (queryType == 1 && this.entpCourseWorkQueryParams.worktype == '主观题') {
// // 因菁优网题型因学科而不固定, 故非常规题重定义定为【主观题】
// const allowedWorkTypes = ['单选题', '填空题', '多选题', '判断题', '复合题'];
// workResource.entpCourseWorkList = entpcourseworkres.rows.filter(item => {
// return !allowedWorkTypes.includes(item.worktype);
// });
// } else {
// workResource.entpCourseWorkList = entpcourseworkres.rows;
// }
const entpcourseworkres = await listEntpcourseworkNew(queryForm);
const data = entpcourseworkres.data;
if(data && data.length>0){
// workResource.entpCourseWorkList = entpcourseworkres.data;
// workResource.entpCourseWorkTotal = entpcourseworkres.data.length;
if(entpcourseworkres.data&&entpcourseworkres.data.length>0){
workResource.entpCourseWorkList = entpcourseworkres.data;
workResource.entpCourseWorkTotal = entpcourseworkres.data.length;
data.forEach(item=> {
if (item.worktype == '选择题') {
item.worktype = '单选题'
}
})
workResource.entpCourseWorkList.forEach(item=> {
if (item.worktype == '选择题') {
item.worktype = '单选题'
}
})
// 格式化试题信息
processList(data);
workResource.entpCourseWorkList.push(...data);
//格式化试题信息
processList(workResource.entpCourseWorkList);
}else{
workResource.entpCourseWorkList = [];
workResource.entpCourseWorkTotal = 0
// 初次加载时更新当前试题数量
if (pageParams.value.isFirst) {
pageParams.value.isFirst = false;
pageParams.value.originCount = workResource.entpCourseWorkList.length;
}
})
}
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) => {
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 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>
@ -996,7 +1067,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>