hotline-web/src/views/examTrain/exam/marking/components/Exam-Marking.vue

<template>
	<div class="exam-train-exam-marking-edit-container layout-padding">
		<div class="exam-train-exam-marking-edit-container-box pd20 h100">
			<splitpanes :horizontal="false">
				<pane min-size="16" max-size="25" size="16" class="left-container">
					<p class="border-title mb20">考试人员</p>
					<el-scrollbar ref="scrollBarRef" style="height: calc(100% - 55px)" always>
						<el-auto-resizer class="table">
							<template #default="{ height }">
								<el-skeleton :loading="state.userLoading" animated :rows="10">
									<template #default>
										<el-tree-v2
											:data="state.userList"
											highlight-current
											:expand-on-click-node="false"
											node-key="userId"
											:props="{ children: 'children', label: 'userName' }"
											@node-click="handleNodeClick"
											:current-node-key="state.userList[0]?.id"
											ref="treeRef"
											:item-size="36"
											empty-text="暂无数据"
											:height="height"
										>
											<template #default="{ node }">
												<span>{{ node.label }}</span>
											</template>
										</el-tree-v2>
									</template>
								</el-skeleton>
							</template>
						</el-auto-resizer>
					</el-scrollbar>
				</pane>
				<pane class="right-container">
					<p class="border-title mb20">阅卷试卷</p>
					<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
						<el-row v-loading="state.loading" class="h100 w100">
							<el-col>
								<div class="questionBox" v-if="state.questionDetail">
									<p class="questionTitle">题干：{{ state.questionDetail.title }}</p>
									<div class="questionAnswer">
										<div v-if="[0, 2].includes(state.questionDetail.questionType)">
											<el-radio-group style="display: block" v-model="state.selRadioValue">
												<el-form-item
													:label="item.label + '. '"
													v-for="item in state.questionDetail.practiceQuestionOptionsDtos"
													style="margin-bottom: 10px"
												>
													<el-radio :label="item.content" :value="item.questionOptionId" />
												</el-form-item>
											</el-radio-group>
										</div>
										<div v-else-if="state.questionDetail.questionType == 1">
											<el-checkbox-group v-model="state.selCheckboxValue">
												<el-form-item
													:label="item.label + '. '"
													v-for="item in state.questionDetail.practiceQuestionOptionsDtos"
													style="margin-bottom: 10px"
												>
													<el-checkbox :label="item.content" :value="item.questionOptionId" />
												</el-form-item>
											</el-checkbox-group>
										</div>
										<!-- <div v-else-if="state.questionDetail.questionType == 2"></div> -->
										<!-- <div v-else-if="state.questionDetail.questionType == 3">
												<el-form-item label="答：">
														<el-input type="textarea" v-model="state.answerValue" :rows="3" placeholder="请输入答案，如果有多个请依照顺序用英文 , 隔开" clearable></el-input>
												</el-form-item>
										</div>
										<div v-else-if="state.questionDetail.questionType == 4">
												<el-form-item label="答：">
														<el-input type="textarea" v-model="state.answerValue" :rows="3" placeholder="请输入答案" clearable></el-input>
												</el-form-item>
										</div> -->
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
					<div style="text-align: center">
						<el-button type="primary" @click="onSave(ruleFormRef)" :loading="state.loading">保存</el-button>
						<el-button class="default-button" @click="onCancel" :loading="state.loading">关闭 </el-button>
					</div>
				</pane>
			</splitpanes>
		</div>
	</div>
</template>

<script setup lang="ts" name="examTrainExamMarkingEdit">
import { onMounted, reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import mittBus from '@/utils/mitt';
import { useRoute, useRouter } from 'vue-router';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import { Local } from '@/utils/storage';
import other from '@/utils/other';
import { throttle, transformFile, guid } from '@/utils/tools';
import { addExamManage, editExamManage, getExamManageDetail, getTestPaperQuestionCount } from '@/api/examTrain/examManage';
import { getMarkingDetailByUser, getMarkingDetailUser } from '@/api/examTrain/marking';

// 定义变量内容
const state = reactive<any>({
	loading: false,
	userList: [], // 用户列表
	queryParams: {},
	userLoading: false,
	UserId: null, // 用户ID
});

const route = useRoute(); // 获取路由
const router = useRouter(); // 路由跳转
const ruleFormRef = ref<any>(); // 表单ref
// 点击人员查询试卷
const handleNodeClick = (data: any) => {
	state.UserId = data.userId;
	getExamManageDetailData();
};
// 获取用户列表
const routeParams = route.params;
const getUserList = async () => {
	state.userLoading = true;
	try {
		const { result } = await getMarkingDetailUser({ ExamId: route.params.examId });
		state.userList = result ?? [];
		state.userLoading = false;
		state.UserId = result[0]?.userId;
		await getExamManageDetailData();
	} catch (error) {
		console.error(error);
		state.userLoading = false;
	}
};
// 获取试卷内容
const getExamManageDetailData = async () => {
	state.loading = true;
	try {
		const { result } = await getMarkingDetailByUser({ ExamId: route.params.examId, UserId: state.UserId });
		console.log(result);
		state.loading = false;
	} catch (error) {
		console.error(error);
		state.loading = false;
	}
};
// 保存提交
const onSave = throttle(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
		state.loading = true;
		const submitObj = other.deepClone(state.ruleForm);
		if (submitObj.examType == 0) {
			submitObj.startTime = submitObj.rangeTime[0];
			submitObj.endTime = submitObj.rangeTime[1];
			Reflect.deleteProperty(submitObj, 'rangeTime');
		} else if (submitObj.examType == 1) {
			Reflect.deleteProperty(submitObj, 'rangeTime');
			Reflect.deleteProperty(submitObj, 'startTime');
			Reflect.deleteProperty(submitObj, 'endTime');
			Reflect.deleteProperty(submitObj, 'count');
			Reflect.deleteProperty(submitObj, 'timeSpan');
		}
		if (submitObj.mode == 1) {
			Reflect.deleteProperty(submitObj, 'questionSort');
		}
		console.log(submitObj);
		if (route.params.id) {
			editExamManage(submitObj)
				.then(handleSuccess)
				.catch(() => {
					state.loading = false;
				});
		} else {
			// 新增
			addExamManage(submitObj)
				.then(handleSuccess)
				.catch(() => {
					state.loading = false;
				});
		}
	});
}, 300);
// 取消
const onCancel = () => {
	state.loading = true;
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
	mittBus.emit('clearCache', 'examTrainExamMarking');
	router.push({
		path: '/examTrain/exam/marking',
	});
	state.loading = false;
};
const handleSuccess = () => {
	state.loading = false;
	ElMessage.success('操作成功');
	// 关闭当前 tagsView
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
	mittBus.emit('clearCache', 'examTrainExamMarking');
	router.push({
		path: '/examTrain/exam/marking',
	});
};
onMounted(() => {
	state.queryParams.ExamId = routeParams.examId;
	getUserList();
});
</script>
<style lang="scss" scoped>
.exam-train-exam-marking-edit-container {
	.exam-train-exam-marking-edit-container-box {
		background-color: var(--el-color-white);
		overflow: hidden;
	}
	.right-container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
}
:deep(.el-tree-node__content) {
	height: 40px;
}
</style>