Skip to content

X
x-learn
提交 3d5f5297 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update：开发详情

上级 9905ddff
隐藏空白字符变更
内嵌 并排
正在显示 包含 399 行增加 和 45 行删除
src/components/data/ExamInfo.vue 0 → 100644
浏览文件 @ 3d5f5297
<template>
<div class="info-box">
<div class="li" v-for="(item, index) in data" :key="index">
<div class="th">{{ item.title }}</div>
<div class="td">{{ item.value }}</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: { type: Array, default: () => [] }
}
}
</script>
<style lang="scss" scoped>
.info-box{
display: flex;
margin-bottom: 20px;
.li{
flex: 1;
.th{
text-align: center;
color: #909399;
font-size: 16px;
font-weight: bold;
}
.td{
text-align: center;
line-height: 30px;
}
}
}
</style>
src/components/data/QuestionList.vue 0 → 100644
浏览文件 @ 3d5f5297
<template>
<div>
<div class="exam-detail" v-for="(data, index) in examData" :key="index">
<div class="title-type">{{ questionTypeText[data.question_type] }}</div>
<template v-for="pItem in data.list">
<question-list-item
v-for="item in pItem"
:data="item"
:question="data"
:key="item.id"
></question-list-item>
</template>
</div>
</div>
</template>
<script>
import QuestionListItem from './QuestionListItem.vue'
export default {
components: { QuestionListItem },
props: {
examData: { type: Array, default: () => [] }
},
data() {
return {
questionTypeText: { 1: '单选题', 2: '多选题', 3: '问答题', 5: '案例题', 6: '判断题', 7: '实操题', 8: '情景题' }
}
},
computed: {
},
mounted() {
console.log(this.examData, 'examData')
}
}
</script>
<style lang="scss" scoped>
.exam-detail{
.title-type{
font-size: 16px;
color: #c01540;
}
}
</style>
src/components/data/QuestionListItem.vue 0 → 100644
浏览文件 @ 3d5f5297
<template>
<div class="question-list-item">
<div class="question-list-public__title" v-html="data.common_content" v-if="data.common_content"></div>
<div class="question-list-item-hd">
<div class="question-list-item-hd__title" v-html="data.question_content"></div>
<div class="question-list-item-hd__score">本题分数：{{ data.score }}</div>
</div>
<div class="question-list-item-bd">
<!-- 单选 -->
<template v-if="[1, 6].includes(questionType)">
<el-radio-group v-model="data.userAnswerData.answer[0]" :disabled="disabled" @change="handleChange">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-radio :label="item.id">
<div class="question-option-item__text" v-html="item.abc_option"></div>
</el-radio>
</div>
</el-radio-group>
</template>
<!-- 多选 -->
<template v-if="questionType === 2">
<el-checkbox-group v-model="data.userAnswerData.answer" :disabled="disabled" @change="handleChange">
<div class="question-option-item" v-for="item in currentOptions" :key="item.id">
<el-checkbox :label="item.id">
<div class="question-option-item__text" v-html="item.abc_option"></div>
</el-checkbox>
</div>
</el-checkbox-group>
</template>
</div>
<!-- 简答题 -->
<template v-if="questionType === 3">
<el-input
type="textarea"
v-model="data.userAnswerData.answer[0]"
placeholder="请输入答案内容"
:autosize="{ minRows: 4, maxRows: 6 }"
:disabled="disabled"
@blur="handleChange"
:maxlength="100"
:show-word-limit="true"
></el-input>
</template>
<div class="question-list-item-score">得分：{{ data.userScoreData.score }}</div>
<!-- <div class="question-list-item-ft" v-if="hasResult">
<h3 class="question-list-item-ft__title">答案解析</h3>
<template v-if="questionType !== 3">
<div class="answer-item">
<div class="answer-item-label">正确答案：</div>
<div class="answer-item-content">{{ correctAnswerText }}</div>
</div>
<div class="answer-item">
<div class="answer-item-label">您的答案：</div>
<div class="answer-item-content">{{ submitAnswerText }}</div>
</div>
</template>
<template v-else>
<div class="answer-item" v-if="data.comment">
<div class="answer-item-label">老师点评：</div>
<div class="answer-item-content">{{ data.comment }}</div>
</div>
</template>
</div> -->
<div class="answer-item" v-if="hasResult && data.question_analysis">
<div class="answer-item-label">解析：</div>
<div class="answer-item-content" v-html="data.question_analysis"></div>
</div>
</div>
</template>
<script>
export default {
props: {
data: { type: Object, default: () => ({}) }, // 小题
question: { type: Object, default: () => ({}) }, // 大题
disabled: { type: Boolean, default: true },
hasResult: { type: Boolean, default: false }
},
data() {
return {}
},
computed: {
questionType() {
// (1:单选题,2:多选题,3:问答题,5:案例题,6:判断题,7:实操题,8:情景题)
const questionType = parseInt(this.question.question_type)
const { answer_count: answerCount = 0 } = this.data
if ([5, 7, 8].includes(questionType)) {
if (answerCount >= 2) {
return 2
}
return answerCount || 3
} else {
return questionType
}
},
// 26个英文字母
A_Z() {
const result = []
for (let i = 0; i < 26; i++) {
result.push(String.fromCharCode(65 + i))
}
return result
},
// 处理后的options数据
currentOptions() {
if (!this.data.question_options) {
return []
}
return this.data.question_options.map((item, index) => {
// 英文字母 + 名称
item.abc = this.A_Z[index]
item.abc_option = `${this.A_Z[index]}. ${item.option}`
// 提交时的选中状态
item.checked = this.data.userAnswerData.answer.includes(item.id)
// 处理正确的选中状态
const hasChecked = Object.prototype.hasOwnProperty.call(item, 'isRight')
const rightAnswer = this.data.question_answer || []
if (!hasChecked && rightAnswer) {
item.isRight = Array.isArray(rightAnswer) ? rightAnswer.includes(item.id) : rightAnswer === item.id
}
return item
})
},
// 正确答案显示的英文字母
correctAnswerText() {
const result = this.currentOptions.reduce((result, item) => {
item.isRight && result.push(item.abc)
return result
}, [])
return result.join('、')
},
// // 提交答案显示的英文字母
submitAnswerText() {
const result = this.currentOptions.reduce((result, item) => {
item.checked && result.push(item.abc)
return result
}, [])
return result.join('、')
}
},
methods: {
handleChange() {
this.$emit('change', this.data)
}
},
mounted() {
console.log(this.data, '===123')
}
}
</script>
<style lang="scss" scoped>
.question-list-public__title{
font-size: 20px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.question-list-item {
margin-bottom: 20px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
margin-top: 20px;
}
.question-list-item-hd {
display: flex;
}
.question-list-item-hd__num {
font-size: 32px;
font-weight: bold;
color: #222;
line-height: 45px;
margin-top: 5px;
}
.question-list-item-hd__title {
margin-left: 5px;
padding-top: 10px;
font-size: 16px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.question-list-item-hd__score{
margin-left: auto;
padding-top: 10px;
font-size: 16px;
// font-weight: bold;
color: #222;
line-height: 25px;
white-space:nowrap;
padding-left: 30px;
}
.question-option-item {
margin-top: 20px;
::v-deep .el-radio,
::v-deep .el-checkbox {
display: flex;
align-items: center;
}
}
.question-option-item__text {
display: inline-block;
font-size: 18px;
color: #222;
}
::v-deep .el-radio__inner,
::v-deep .el-checkbox__inner {
width: 18px;
height: 18px;
}
::v-deep .el-checkbox__inner::after {
width: 4px;
height: 9px;
left: 6px;
}
.question-list-item-ft {
margin-top: 20px;
}
.question-list-item-ft__title {
font-size: 18px;
font-weight: bold;
color: #222;
line-height: 25px;
}
.answer-item {
margin-top: 10px;
margin-left: 28px;
display: flex;
font-size: 18px;
color: #222;
line-height: 25px;
}
.answer-item-label {
white-space: nowrap;
}
.answer-item-content {
flex: 1;
overflow: hidden;
}
.question-list-item-score{
margin-left: auto;
padding-top: 10px;
font-size: 16px;
color: #222;
line-height: 25px;
white-space: nowrap;
}
</style>
src/modules/teacher/data/exam/api.js
浏览文件 @ 3d5f5297
...@@ -5,3 +5,9 @@ import httpRequest from '@/utils/axios' ...@@ -5,3 +5,9 @@ import httpRequest from '@/utils/axios'
export function getExamReivewList(params) { export function getExamReivewList(params) {
return httpRequest.get('/api/zy/v3-teacher/examination/examination-list', { params }) return httpRequest.get('/api/zy/v3-teacher/examination/examination-list', { params })
} }
/**
* 老师批阅
*/
export function getReviewDetails(params) {
return httpRequest.get('/api/zy/v3-teacher/examination/sheet-details', { params })
}
src/modules/teacher/data/exam/index.js
浏览文件 @ 3d5f5297
...@@ -7,7 +7,6 @@ const routes = [ ...@@ -7,7 +7,6 @@ const routes = [
{ path: '/PersonalList', component: () => import('./components/PersonalList.vue') }, { path: '/PersonalList', component: () => import('./components/PersonalList.vue') },
{ path: '/teacher/data/exam/classDetail', component: () => import('./views/ClassDetail.vue') }, { path: '/teacher/data/exam/classDetail', component: () => import('./views/ClassDetail.vue') },
{ path: '/examData', component: () => import('./components/ExamData.vue') } { path: '/examData', component: () => import('./components/ExamData.vue') }
] ]
} }
] ]
......
src/modules/teacher/data/exam/views/ClassDetail.vue
浏览文件 @ 3d5f5297
<template> <template>
<app-container title="试卷详情"> <app-container title="试卷详情">
<app-list v-bind="tableOptions" ref="list"></app-list> <template v-for="(item, index) in infoData">
<app-list v-bind="tableOptions2" ref="list2" style="margin-top:-20px"></app-list> <exam-info :data="item" :key="index" />
</template>
<question-list class="exam" :examData="examData" v-if="examData.length"></question-list>
</app-container> </app-container>
</template> </template>
<script> <script>
import * as api from '../api.js'
import ExamInfo from '@/components/data/ExamInfo.vue'
import QuestionList from '@/components/data/QuestionList.vue'
export default { export default {
computed: { components: { ExamInfo, QuestionList },
// 列表配置 data() {
tableOptions() { return {
return { data: {},
remote: { examData: [],
}, infoData: [
columns: [ [
{ label: '考生姓名', prop: 'name', align: 'center' }, { title: '考生姓名', value: '王大坝' },
{ label: '学号', prop: 'num', align: 'center' }, { title: '学号', value: 'test001' },
{ label: '分数', prop: 'sore', align: 'center' } { title: '分数', value: '100' }
], ],
data: [ [
{ { title: '提交日期', value: '2021-11-30 10:43:00' },
name: '王大宝', { title: '批改日期', value: '2021-11-30 10:43:00' },
num: 'test123', { title: '状态', value: '已批阅' }
sore: '1233' ]
} ]
], }
'cell-style': { padding: 0 }, },
'header-cell-style': { padding: '3px 0', 'font-size': '16px' } computed: {},
} mounted() {
this.getTopic()
},
methods: {
getTopic() {
api.getReviewDetails({ sheet_id: '6856557207467589632' }).then(response => {
this.data = JSON.parse(response.data).sheet
this.setExamData()
})
}, },
tableOptions2() { setExamData() {
return { // { list: ..., }
remote: { // {}.list[0][0] && userScoreData, userAnswerData
}, this.examData = this.data.questions.question_items.reduce((prev, cur) => {
columns: [ const qParentId = cur.question_item_id
{ label: '提交日期', prop: 'name', align: 'center' }, const list = cur.question_list.map(item => {
{ label: '批改日期', prop: 'num', align: 'center' }, return item.map(cItem => {
{ label: '状态', prop: 'sore', align: 'center' } const userScoreData = this.data.score_items[qParentId][cItem.id]
], let userAnswerData = {}
data: [ if (this.data.answers[qParentId]) {
{ userAnswerData = this.data.answers[qParentId][cItem.id] || {}
name: '王大宝', }
num: 'test123', return { ...cItem, userScoreData, userAnswerData }
sore: '1233' })
} })
], prev.push({ ...cur, list })
'cell-style': { padding: 0, color: '#333' }, return prev
'header-cell-style': { padding: '3px 0', 'font-size': '16px' } }, [])
} console.log(this.examData, '123')
} }
} }
} }
...@@ -55,17 +68,24 @@ export default { ...@@ -55,17 +68,24 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
.el-table__row>td{ .el-table__row > td {
border: none; border: none;
} }
.el-table th.is-leaf{ .el-table th.is-leaf {
border: none; border: none;
} }
.el-table::before { .el-table::before {
height: 0px; height: 0px;
} }
.table-list{ .table-list {
height: auto; height: auto;
} }
.el-table--border {
border: none;
}
}
.exam {
border-top: 1px solid #ccc;
padding-top: 10px;
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论