Skip to content

C
center-qa
提交 3d7cd881 authored 作者: pengxiaohui's avatar pengxiaohui
浏览文件
操作

新增批阅试卷页面

上级 c97143ce
隐藏空白字符变更
内嵌 并排
正在显示 包含 607 行增加 和 2 行删除
src/modules/exam/api.js
浏览文件 @ 3d7cd881
......@@ -85,3 +85,15 @@ export function importStudent(data) {
withCredentials: true
})
}
/**
* 获取试卷详情
*/
export function getPaperDetails(params) {
return httpRequest.get('/api/exam/v1/exam/sheet-detail', { params })
}
/**
* 批改试卷
*/
export function submitPaper(data) {
return httpRequest.post('/api/exam/v1/exam/submit-sheet', data)
}
src/modules/exam/components/PaperQuestion.vue 0 → 100644
浏览文件 @ 3d7cd881
<template>
<el-card class="container">
<div slot="header" class="clearfix">
<span>{{options.question_item_title}}</span>
</div>
<div class="content">
<template v-for="item in options.question_list">
<div class="sub-content" v-if="item.group_id" :key="item.id">
<div class="title" v-html="item.common_content"></div>
<div class="sub-container">
<question-item v-for="subItem in item.list" :key="subItem.id" :question="{item: subItem, question_item_id, questionType}" :question_item_id="question_item_id" />
</div>
</div>
<question-item v-else :question="{item, question_item_id, questionType}" :question_item_id="question_item_id" :key="item.id" />
</template>
</div>
</el-card>
</template>
<script>
import QuestionItem from './QuestionItem.vue'
export default {
props: {
options: {
type: Object,
default() {
return {}
}
},
question_item_id: {
type: String
}
},
components: { QuestionItem },
data() {
return {}
},
computed: {
questionType() {
return this.options.question_item_type
},
// 选项类型
questionTypeText() {
const map = { 1: '单选题', 2: '多选题', 3: '问答题', 5: '案例题', 6: '判断题', 7: '实操题', 8: '情景题' }
return map[this.questionType]
}
},
created() {
// console.log(this.options)
}
}
</script>
<style lang="scss" scoped>
.container{
background:#fff;
border:1px solid #f3f3f3;
margin-bottom:20px;
border-radius:6px;
::v-deep .el-card__body{
padding:10px 20px;
}
.content{
// border:1px solid #f3f3f3;
padding:10px;
.title{
line-height:40px;
font-size:16px;
}
.sub-container{
border:1px solid #e3e3e3;
padding:15px 15px 0;
border-radius:4px;
}
.sub-content{
margin-bottom:20px;
}
.question-item:last-child{
border:none;
}
}
}
</style>
src/modules/exam/components/QuestionItem.vue 0 → 100644
浏览文件 @ 3d7cd881
<template>
<div class="question-item">
<div class="question-item-title" v-html="questionData.content"></div>
<template v-if="questionType === 1 || questionType === 6">
<el-radio-group v-model="questionData.answer[0]" :disabled="true" class="question-item-content" >
<div class="question-item-option" v-for="subItem in questionData.options" :key="subItem.id">
<el-radio :label="subItem.id">{{ subItem.option }}</el-radio>
</div>
</el-radio-group>
</template>
<template v-if="questionType === 2">
<el-checkbox-group v-model="questionData.answer" :disabled="true" class="question-item-content" >
<div class="question-item-option" v-for="subItem in questionData.options" :key="subItem.id">
<el-checkbox :label="subItem.id"> {{ subItem.option }} </el-checkbox>
</div>
</el-checkbox-group>
</template>
<template v-if="questionType === 3">
<div class="SAQ">{{questionData.answer || ''}}</div>
<div style="text-align:right;">
<el-button type="primary" size="mini" plain @click="showComment = !showComment">点击评分</el-button>
</div>
<div class="comment" v-show="showComment">
<div class="comment-top">
<p>本题{{questionData.score}}分</p>
<div class="get-score">
学生得分：<el-input-number v-model="questionData.get_score" controls-position="right" :min="0" :max="questionData.score" size="mini"></el-input-number>
</div>
</div>
<el-input type="textarea" placeholder="请输入评语" v-model="comment" rows="3"/>
<div style="text-align:center;padding-top:10px;">
<el-button type="primary" size="mini" @click="handleComment">提交点评</el-button>
</div>
</div>
</template>
<div class="question-item-score">得分：{{questionData.get_score}}分</div>
</div>
</template>
<script>
import { submitPaper } from '../api.js'
export default {
props: {
question: {
type: Object,
default() {
return {}
}
},
question_item_id: {
type: String
}
},
data() {
return {
questionData: {},
showComment: false,
comment: ''
}
},
computed: {
questionType() {
// 1单选，2多选，3简答，5案例题， 6判断， 7实操，8情景
const type = this.questionData.type || this.question.questionType || 1
return parseInt(type)
},
eid() {
return this.$route.query.eid
}
// // 选项类型
// questionTypeText() {
// const map = { 1: '单选题', 2: '多选题', 3: '问答题', 5: '案例题', 6: '判断题', 7: '实操题', 8: '情景题' }
// return map[this.questionType]
// }
},
created() {
this.questionData = JSON.parse(JSON.stringify(this.question.item))
console.log(this.question)
},
methods: {
handleComment() {
console.log(this.question_item_id)
console.log(this.questionData)
this.fetchComment()
},
fetchComment() {
const params = {
sheet_id: this.eid,
question_item_id: this.question_item_id,
question_id: this.questionData.id,
score: this.questionData.get_score,
comment: this.comment
}
submitPaper(params).then(res => {
if (res.code === 0) {
this.$message.success('提交点评成功')
} else {
this.$message.success('提交点评失败')
}
})
}
}
}
</script>
<style lang="scss" scoped>
.question-item{
font-size:14px;
color:#454545;
border-bottom:1px solid #f3f3f3;
margin-bottom:10px;
.question-item-content{
padding-left:10px;
.question-item-option{
padding-top:10px ;
}
}
.SAQ{
min-height:60px;
font-size:14px;
line-height:24px;
color:#888;
border:1px solid #eee;
background:#f3f3f3;
margin:10px 0;
border-radius:6px;
}
.comment{
border:1px solid rgba(192,28,64, .3);
border-radius:4px;
padding:10px;
margin-top:15px;
background:#f9f9f9;
.comment-top{
display: flex;
margin-bottom:10px;
p{
flex:1;
}
}
}
.question-item-score{
color:#777;
padding:10px 0;
}
}
</style>
src/modules/exam/index.js
浏览文件 @ 3d7cd881
......@@ -25,6 +25,11 @@ const routes = [
component: () => import('./views/Detail.vue'),
meta: { title: '考试详情' }
},
{
path: 'markingPaper',
component: () => import('./views/MarkingPaper.vue'),
meta: { title: '批阅试卷' }
},
{
path: 'createStudent',
component: () => import('./views/CreateStudent.vue'),
......
src/modules/exam/views/Detail.vue
浏览文件 @ 3d7cd881
......@@ -130,7 +130,13 @@ export default {
}
},
methods: {
handleDetail() {},
handleDetail(row) {
console.log(row)
this.$router.push({
path: 'markingPaper',
query: { eid: this.exam_id, sid: row.student_id }
})
},
// 获取选中项
handleSelectionChange(val) {
this.multipleSelection = val
......
src/modules/exam/views/MarkingPaper.vue 0 → 100644
浏览文件 @ 3d7cd881
<template>
<div>
<template v-for="item in questionList">
<paper-question :options="item" :question_item_id="item.question_item_id" :key="item.question_item_id" />
</template>
</div>
</template>
<script>
import { getPaperDetails } from '../api.js'
import PaperQuestion from '../components/PaperQuestion.vue'
export default {
// props: { id: { type: String } },
components: { PaperQuestion },
data() {
return {
questionData: {},
// questionData: {
// sheet_id: '6861980331549917184',
// student_id: '6861979726374764544',
// exam_id: '6861979663460204544',
// paper_id: '6859369609758244864',
// questions: {
// paper_id: '6859369609758244864',
// total_question_count: 14,
// total_score: 100,
// question_items: [
// {
// question_item_id: '6859397281477558272',
// question_item_title: '案例题1',
// question_item_type: '5',
// question_list: [
// {
// common_content: '<p>（示例）这个是案例题的公共题干111111</p>',
// group_id: '6852817215452872713',
// list: [
// {
// id: '6852817215452872719',
// content: '<p>这个是案例题的题干001111111111111</p>',
// options: '[]',
// answer: '[]',
// type: 3,
// question_order: '10',
// score: 22,
// q_order: 1
// },
// {
// id: '6852817215452872724',
// content: '<p>这个是案例题的题干002</p>',
// options:
// '[{"id":"6858588277927051264","option":"E(true)"},{"id":"6852817215452872723","option":"D选项"},{"id":"6852817215452872720","option":"A选项"},{"id":"6852817215452872721","option":"B选项"}]',
// answer: '["6852817215452872720","6858588277927051264"]',
// type: 2,
// question_order: '20',
// score: 18,
// q_order: 2
// }
// ]
// },
// {
// common_content: '历史案例题1',
// group_id: '6856826400016433179',
// list: [
// {
// id: '6856826400016433180',
// content: '（问答）扁鹊本名叫什么？',
// options: '[]',
// answer: null,
// type: 3,
// question_order: '1',
// score: 1,
// q_order: 3
// },
// {
// id: '6856826400016433185',
// content: '（单选）北京猿人属于（）？',
// options:
// '[{"id":"6856826400016433183","option":"尼格罗人种"},{"id":"6856826400016433184","option":"澳大利亚人种"},{"id":"6856826400016433182","option":"蒙古人种1"},{"id":"6856826400016433181","option":"欧罗巴人种"}]',
// answer: '["6856826400016433182"]',
// type: 1,
// question_order: '2',
// score: 1,
// q_order: 4
// },
// {
// id: '6856826400016433190',
// content: '（单选）佛教从（）从印度传入中国。',
// options:
// '[{"id":"6856826400016433187","option":"西汉末年到东汉初期"},{"id":"6856826400016433188","option":"东汉末期"},{"id":"6856826400016433186","option":"西汉初年"},{"id":"6856826400016433189","option":"隋朝初期"}]',
// answer: '["6856826400016433187"]',
// type: 1,
// question_order: '3',
// score: 1,
// q_order: 5
// },
// {
// id: '6856826400016433195',
// content: '(多选)帝国主义列强对中国进行经济侵略的方式是（）。',
// options:
// '[{"id":"6856826400016433194","option":"操纵中国的经济命脉1"},{"id":"6856826400016433192","option":"剥夺中国的关税自主权1"},{"id":"6856826400016433191","option":"控制中国的通商口岸1"},{"id":"6856826400016433193","option":"实行商品倾销和资本输出1"}]',
// answer: '["6856826400016433191","6856826400016433192","6856826400016433193","6856826400016433194"]',
// type: 2,
// question_order: '4',
// score: 1,
// q_order: 6
// },
// {
// id: '6856826400016433198',
// content: '（判断）秦汉时期，金是王朝礼法的象征。',
// options:
// '[{"id":"6856826400016433196","option":"错误"},{"id":"6856826400016433197","option":"正确"}]',
// answer: '["6856826400016433196"]',
// type: 6,
// question_order: '5',
// score: 1,
// q_order: 7
// }
// ]
// }
// ]
// },
// {
// question_item_id: '6859397358354956288',
// question_item_title: '案例题2',
// question_item_type: '5',
// question_list: [
// {
// common_content: '历史案例题1',
// group_id: '6856826400016433179',
// list: [
// {
// id: '6856826400016433180',
// content: '（问答）扁鹊本名叫什么？',
// options: '[]',
// answer: null,
// type: 3,
// question_order: '1',
// score: 19,
// q_order: 8
// },
// {
// id: '6856826400016433185',
// content: '（单选）北京猿人属于（）？',
// options:
// '[{"id":"6856826400016433181","option":"欧罗巴人种"},{"id":"6856826400016433182","option":"蒙古人种1"},{"id":"6856826400016433183","option":"尼格罗人种"},{"id":"6856826400016433184","option":"澳大利亚人种"}]',
// answer: '["6856826400016433182"]',
// type: 1,
// question_order: '2',
// score: 9,
// q_order: 9
// },
// {
// id: '6856826400016433190',
// content: '（单选）佛教从（）从印度传入中国。',
// options:
// '[{"id":"6856826400016433186","option":"西汉初年"},{"id":"6856826400016433187","option":"西汉末年到东汉初期"},{"id":"6856826400016433188","option":"东汉末期"},{"id":"6856826400016433189","option":"隋朝初期"}]',
// answer: '["6856826400016433187"]',
// type: 1,
// question_order: '3',
// score: 5,
// q_order: 10
// },
// {
// id: '6856826400016433195',
// content: '(多选)帝国主义列强对中国进行经济侵略的方式是（）。',
// options:
// '[{"id":"6856826400016433191","option":"控制中国的通商口岸1"},{"id":"6856826400016433192","option":"剥夺中国的关税自主权1"},{"id":"6856826400016433193","option":"实行商品倾销和资本输出1"},{"id":"6856826400016433194","option":"操纵中国的经济命脉1"}]',
// answer: '["6856826400016433191","6856826400016433192","6856826400016433193","6856826400016433194"]',
// type: 2,
// question_order: '4',
// score: 11,
// q_order: 11
// },
// {
// id: '6856826400016433198',
// content: '（判断）秦汉时期，金是王朝礼法的象征。',
// options:
// '[{"id":"6856826400016433196","option":"错误"},{"id":"6856826400016433197","option":"正确"}]',
// answer: '["6856826400016433196"]',
// type: 6,
// question_order: '5',
// score: 1,
// q_order: 12
// }
// ]
// }
// ]
// },
// {
// question_item_id: '6860831598460272640',
// question_item_title: '单选题',
// question_item_type: '1',
// question_list: [
// {
// id: '6860750544940564490',
// content: '（示例）这个是单选题的题干002 张传梁211014',
// options:
// '[{"id":"6860750544940564488","option":"C选项"},{"id":"6860750544940564489","option":"D选项"},{"id":"6860750544940564486","option":"A选项"},{"id":"6860750544940564487","option":"B选项11"}]',
// answer: '["6860750544940564487"]',
// score: 4,
// q_order: 13
// },
// {
// id: '6860750544940564485',
// content: '（示例）这个是单选题的题干001 张传梁211014',
// options:
// '[{"id":"6860750544940564484","option":"E选项"},{"id":"6860750544940564480","option":"A选项11"},{"id":"6860750544940564482","option":"C选项"},{"id":"6860750544940564483","option":"D选项"},{"id":"6860750544940564481","option":"B选项"}]',
// answer: '["6860750544940564480"]',
// score: 6,
// q_order: 14
// }
// ]
// }
// ]
// },
// answers: {
// '6859397281477558272': {
// '6852817215452872724': {
// answer: ['6858588277927051264'],
// sign: false
// },
// '6852817215452872719': {
// answer: ['sdf'],
// sign: false
// }
// }
// },
// status: 1,
// score: '21.00',
// score_item: {
// '6859397281477558272': {
// '6852817215452872719': {
// score: 21,
// checked_flag: true,
// comment: '111'
// },
// '6852817215452872724': {
// score: 0,
// checked_flag: true
// },
// '6856826400016433180': {
// score: 0,
// checked_flag: false
// },
// '6856826400016433185': {
// score: 0,
// checked_flag: true
// },
// '6856826400016433190': {
// score: 0,
// checked_flag: true
// },
// '6856826400016433195': {
// score: 0,
// checked_flag: true
// },
// '6856826400016433198': {
// score: 0,
// checked_flag: true
// }
// },
// '6859397358354956288': {
// '6856826400016433180': {
// score: 0,
// checked_flag: false
// },
// '6856826400016433185': {
// score: 0,
// checked_flag: true
// },
// '6856826400016433190': {
// score: 0,
// checked_flag: true
// },
// '6856826400016433195': {
// score: 0,
// checked_flag: true
// },
// '6856826400016433198': {
// score: 0,
// checked_flag: true
// }
// },
// '6860831598460272640': {
// '6860750544940564490': {
// score: 0,
// checked_flag: true
// },
// '6860750544940564485': {
// score: 0,
// checked_flag: true
// }
// }
// },
// commit_time: '2021-11-04 18:59:14',
// checker_id: '6592683672086773760',
// checked_time: '2021-11-04 19:00:22',
// created_time: '2021-11-04 19:00:00',
// updated_time: '2021-11-04 19:00:22',
// status_text: '已提交'
// },
questionList: []
}
},
computed: {
eid() {
return this.$route.query.eid
},
sid() {
return this.$route.query.sid
}
},
beforeMount() {
this.getDetail()
// this.assembleData()
},
methods: {
// 获取试卷详情
getDetail() {
getPaperDetails({ exam_id: this.eid, student_id: this.sid }).then(res => {
if (res.code === 0) {
console.log(res.data)
this.questionData = res.data.sheet
this.assembleData()
}
})
},
assembleData() {
this.questionList = this.questionData.questions.question_items
this.questionList.forEach(item => {
const score = this.questionData.score_item[item.question_item_id]
item.question_list.forEach(subItem => {
if (subItem.group_id) {
subItem.list.forEach(it => {
const obj = score[it.id]
it.get_score = 0
it.get_score = obj.score
if (it.answer) it.answer = JSON.parse(it.answer)
if (it.options) it.options = JSON.parse(it.options)
})
} else {
const obj = score[subItem.id]
subItem.get_score = 0
subItem.get_score = obj.score
if (subItem.answer) subItem.answer = JSON.parse(subItem.answer)
if (subItem.options) subItem.options = JSON.parse(subItem.options)
}
})
})
}
}
}
</script>
<style lang="scss" scoped></style>
vite.config.js
浏览文件 @ 3d7cd881
......@@ -29,7 +29,8 @@ export default defineConfig(({ mode }) => {
rewrite: path => path.replace(/^\/api\/qbs/, '')
},
'/api/exam': {
target: 'https://x-exam-admin-api.ezijing.com',
// target: 'https://x-exam-admin-api.ezijing.com',
target: 'http://localhost-exam-admin.ezijing.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/api\/exam/, '')
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论