TEAMModelOS/TEAMModelOS/ClientApp/src/components/evaluation/ExerciseList.vue

<template>
	<div class="ev-cp-list-container" style="width: 100%; margin: 0 auto">
		<!-- 筛选部分结束 -->
		<!-- 题目列表部分 -->
		<Loading :top="100" v-show="dataLoading" hideMask></Loading>
		<div v-if="exerciseList.length === 0" class="no-data-text">
			<img src="@/assets/icon/no_data_evaluation.png" width="120" />
			<span style="margin-top: 15px; color: #808080">暂无数据</span>
		</div>
		<div class="content-wrap" ref="mathJaxContainer" v-else>
			<div class="exercise-item" v-for="(item, index) of exerciseList" :key="index" @click="onQuestionToggle(index, item.id, $event)">
				<!-- 题干部分 -->
				<div class="item-question">
					<div>
						<div class="item-question-order">
							{{ pageSize * (pageNum - 1) + index + 1 }} :
						</div>
						<div class="item-question-text" v-html="item.question"></div>
					</div>
					<span class="item-btn-toggle">
						<Icon :type="collapseList.indexOf(index) > -1 ? 'ios-arrow-dropup' : 'ios-arrow-dropdown' " />
					</span>
				</div>
				<!-- 选项部分 -->
				<div v-for="(option, optionIndex) in item.option" :key="optionIndex" class="item-options">
					<div class="item-option-content">
						<div class="item-option-order">
							{{ String.fromCharCode(64 + parseInt(optionIndex + 1)) }} :
						</div>
						<div class="item-option-text" v-html="option.value"></div>
					</div>
				</div>
				<transition name="slide">
					<div v-show="collapseList.indexOf(exerciseList.indexOf(item)) > -1" class="toggle-area">
						<div v-if="item.type !== 'compose'">
							<!-- 答案展示部分 -->
							<div class="item-explain">
								<span class="explain-title">【答ㅤ案】</span>
								<div class="item-explain-details">
									<!-- 问答题答案 -->
									<div v-if="item.type === 'subjective' || item.type === 'complete'">
										<span v-for="(answer, index) in item.answer" :key="index" v-html="item.answer.length ? answer : '未设置答案'"></span>
									</div>
									<!-- 问答题答案 -->
									<div v-else-if="item.type === 'judge'">
										<span>{{ item.answer.length ? (item.answer[0] === 'A' ? '正确' : '错误') : '未设置答案' }}</span>
									</div>
									<!-- 其余题型答案 -->
									<div v-else>
										<span :class="[ item.type === 'complete' ? 'item-answer-item' : '' ]" v-for="(answer, index) in item.answer" :key="index">{{ answer }}</span>
									</div>
								</div>
							</div>
							<!-- 解析部分 -->
							<div class="item-explain">
								<span class="explain-title">【解ㅤ析】</span>
								<div class="item-explain-details">
									<span v-html="item.explain || '暂无解析'"></span>
								</div>
							</div>
							<!-- 知识点部分 -->
							<div class="item-explain">
								<span class="explain-title">【知识点】</span>
								<div class="item-explain-details">
									<span v-if="!item.points.length">暂未绑定知识点</span>
									<div v-else>
										<span v-for="(point, index) in item.points" class="item-point-tag" :key="index">
											{{ point }}
										</span>
									</div>
								</div>
							</div>
						</div>
						<!-- 如果是综合题 则加载子题渲染组件 -->
						<div v-else>
							<BaseChild :children="item.children"></BaseChild>
						</div>
					</div>
				</transition>
				
				<!-- 底部题目操作栏 -->
				<div class="item-tools">
					<span class="item-tools-info">题型：{{ exersicesType[item.type] }}</span>
					<span class="item-tools-info">难度：{{ exersicesDiff[item.level - 1] }}</span>
					<span class="item-tools-info">认知层次：{{ exersicesField[item.field - 1] }}</span>
					<span class="item-tools-info">使用次数：{{ item.usageCount || 0 }} 次</span>
					<Button type="info" :style="{backgroundColor:selectList.map(i => i.id).indexOf(item.id) > -1 ? '#bbbbbb' : '#2db7f5'}"
					 @click.stop="onSelectItem(item,index)">{{ selectList.map(i => i.id).indexOf(item.id) > -1 ? '移除' : '选题'}}</Button>
				</div>
			</div>
		</div>


		<!-- 底部分页区域 -->
		<Page :total="totalNum" show-sizer show-total :page-size="pageSize" :current="pageNum" @on-page-size-change="pageSizeChange"
		 @on-change="pageChange" :page-size-opts="[5, 10, 15, 20]" />
	</div>
</template>
<script>
	import blobTool from "@/utils/blobTool.js";

	export default {
		props:{
			propsList:{
				type:Array,
				default:() => {
					return []
				}
			},
			selQue: {
			    type: Array,
			    default: () => {
			        return []
			    }
			},
		},
		data() {
			return {
				dataLoading: true,
				exersicesType: {
					single: "单选题",
					multiple: "多选题",
					judge: "判断题",
					complete: "填空题",
					subjective: "问答题",
					compose: "综合题",
				},
				exersicesDiff: ["容易", "较易", "一般", "较难", "困难"],
				exersicesField:["知识", "理解", "应用", "分析", "综合", "评鉴"],
				diffColors: ["#32CF74", "#E8BE15", "#F19300", "#EB5E00", "#D30000"],
				totalNum: 0,
				isShowAnswer: true,
				importLoading: false,
				pageSize: 5,
				pageNum: 1,
				currentPage: 1,
				collapseList: [],
				selectList:[],
				originData: [],
				exerciseList:[]
			};
		},
		created() {
			console.log('接收到的',this.propsList)
			this.pageChange(1)
		},
		methods: {
			getBlobList(list){
				return new Promise(async (r,j) => {
					let blobList = await this.$evTools.getFullItem(list)
					r(blobList)
				})
			},
			
			onSelectItem(item,index){
				let arrIndex = this.selectList.map(i => i.id).indexOf(item.id)
				console.log(arrIndex)
				if(arrIndex > -1){
					this.selectList.splice(arrIndex,1)
					this.$Message.warning('取消成功！')
				}else{
					this.selectList.push(item)
					this.$Message.success('添加成功！')
				}
				this.$emit('on-question-change', this.selectList,0)
				console.log(this.selectList)
				console.log(item)
			},

			/**
			 * 全部展开与全部折叠
			 * @param isAllOpen
			 */
			onHandleToggle(isAllOpen) {
				if (isAllOpen) {
					this.collapseList = [];
				} else {
					this.collapseList = [...this.exerciseList.keys()];
				}
			},

			/**
			 * 题干展开与收缩
			 * @param index
			 * @param id
			 */
			onQuestionToggle(index, id, e) {
				let curClassName = e.target.className;
				if (
					curClassName === "item-tools" ||
					curClassName === "richText-video" ||
					curClassName === "richText-audio"
				)
					return;
				e.stopPropagation();
				let listIndex = this.collapseList.indexOf(index);
				if (listIndex > -1) {
					this.collapseList.splice(listIndex, 1);
				} else {
					this.collapseList.push(index);
					let exerciseItemDom = e.path.filter(
						(i) => i.className === "exercise-item"
					);
					if (exerciseItemDom.length) {
						this.$emit("pageScroll", exerciseItemDom[0].offsetTop);
					}
				}

				this.$emit("toggleChange", this.collapseList);
			},

			
			/**
			 * 删除筛选条件里面的False值与All值
			 * @param arr
			 */
			deleteFalse(arr) {
				let list = JSON.parse(JSON.stringify(arr));
				list.forEach((item, index) => {
					if (!item || item === "all") list.splice(index, 1);
				});
				return list;
			},

			/**
			 * 切换页码操作
			 * @param page
			 */
			async pageChange(page) {
				this.dataLoading = true
				this.pageNum = page;
				let start = this.pageSize * (page - 1);
				let end = this.pageSize * page;
				// 拿到当前页码需要展示的数据
				this.$emit("pageScroll", 0);
				let simpleList = this.originData.slice(start, end);
				try {
					// 执行试题换取完整JSON数据
					this.exerciseList = await this.getBlobList(simpleList);
					this.currentPage = page;
					// 公式渲染
					this.$nextTick(() => {
						window.MathJax.Hub.Queue([
							"Typeset",
							MathJax.Hub,
							this.$refs.mathJaxContainer,
						]);
					});
					setTimeout(() => {
						this.dataLoading = false
					},1000)
				} catch (e) {
					console.log(e);
					this.dataLoading = false
				}
			},

			/**
			 * 切换每页显示数量
			 * @param val
			 */
			pageSizeChange(val) {
				this.pageSize = val;
				this.pageChange(1);
			},

		},
		mounted() {
			// 公式渲染
			this.$nextTick(() => {
				window.MathJax.Hub.Queue([
					"Typeset",
					MathJax.Hub,
					this.$refs.mathJaxContainer,
				]);
			});
			
			// console.log('拿到已选',this.selQue)
			this.selectList = this.selQue
			
			// this.$EventBus.$off('onPaperItemChange')
			// this.$EventBus.$on('onPaperItemChange', data => {
			// 	console.log('EventBus',data)
			// 	this.selectList = data
			// })
		},
		computed: {
			curScope() {
				return this.filterOrigin === this.$store.state.userInfo.schoolCode ?
					"school" :
					"private";
			},
			hasSchool() {
				return this.$store.state.userInfo.hasSchool;
			},
		},
		watch:{
			propsList:{
				handler(n,o){
					if(n){
						console.log('监听到',n)
						this.originData = n
						this.totalNum = n.length
						this.pageChange(1)
					}
				}
			},
			selQue:{
				handler(n,o){
					if(n){
						console.log('监听到222',n)
					}
				}
			},
		}
	};
</script>
<style src="./ExerciseList.less" lang="less" scoped>
</style>

<style>
	.circle {
		border: solid 1px red;
		background-color: red;
		border-radius: 50%;
		width: 50px;
		height: 50px;
	}

	.slide-enter-active {
		transition: all 0.3s ease;
	}

	.slide-leave-active {
		transition: all 0.3s ease;
	}

	.slide-enter,
	.slide-leave-to {
		transform: translateY(10px);
		opacity: 0;
	}
</style>