考试点击实训参数调整
This commit is contained in:
fan
parent
4fbc4900e3
commit
9e4b499399
@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="examPanel" v-if="show">
|
<div v-if="show" class="examPanel">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div>满分: {{ composition.fullScore }}</div>
|
<div>满分: {{ composition.fullScore }}</div>
|
||||||
<div>考试时间: {{ composition.validDuration }}分钟</div>
|
<div>考试时间: {{ composition.validDuration }}分钟</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="legend-area">
|
<!-- <div class="legend-area">
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<div class="box finished"></div>
|
<div class="box finished"></div>
|
||||||
<div class="text">已作答</div>
|
<div class="text">已作答</div>
|
||||||
@ -14,130 +14,130 @@
|
|||||||
<div class="text">未作答</div>
|
<div class="text">未作答</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div>理论题</div>
|
<div>理论题</div>
|
||||||
<div class="questionList">
|
<div class="questionList">
|
||||||
<div
|
<div
|
||||||
class="item theory"
|
v-for="(question, index) in questionList[0]"
|
||||||
v-for="(question, index) in questionList[0]"
|
:key="index"
|
||||||
:key="index"
|
class="item theory"
|
||||||
@click="questionSelect(index, 1)"
|
:class="{
|
||||||
:class="{
|
current: currentQuestionIndex === index && currentQuestionType === 1,
|
||||||
current: currentQuestionIndex === index && currentQuestionType === 1,
|
submited: questionStateList[0][index],
|
||||||
submited: questionStateList[0][index],
|
}"
|
||||||
}"
|
@click="questionSelect(index, 1)"
|
||||||
>
|
>
|
||||||
{{ index + 1 }}
|
{{ index + 1 }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>实训题</div>
|
<div>实训题</div>
|
||||||
<div class="questionList">
|
<div class="questionList">
|
||||||
<div
|
<div
|
||||||
class="item training"
|
v-for="(question, index) in questionList[1]"
|
||||||
v-for="(question, index) in questionList[1]"
|
:key="index"
|
||||||
:key="index"
|
class="item training"
|
||||||
@click="questionSelect(index, 2)"
|
:class="{ current: currentQuestionIndex === index && currentQuestionType === 2 }"
|
||||||
:class="{ current: currentQuestionIndex === index && currentQuestionType === 2 }"
|
@click="questionSelect(index, 2)"
|
||||||
>
|
>
|
||||||
{{ index + 1 }}
|
{{ index + 1 }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<el-button @click="submitExam" size="small" type="primary">交卷</el-button>
|
<el-button size="small" type="primary" @click="submitExam">交卷</el-button>
|
||||||
</div>
|
</div>
|
||||||
<TheoryQuestion
|
<TheoryQuestion
|
||||||
ref="theoryQuestion"
|
ref="theoryQuestion"
|
||||||
:question-info="
|
:question-info="
|
||||||
questionList[0][currentQuestionIndex]
|
questionList[currentQuestionType][currentQuestionIndex]
|
||||||
? {
|
? {
|
||||||
...questionList[0][currentQuestionIndex],
|
...questionList[currentQuestionType][currentQuestionIndex],
|
||||||
index: currentQuestionIndex,
|
index: currentQuestionIndex,
|
||||||
total: questionList[0].length,
|
total: questionList[currentQuestionType].length,
|
||||||
}
|
}
|
||||||
: {}
|
: {}
|
||||||
"
|
"
|
||||||
@submit="recordSubmit"
|
@submit="recordSubmit"
|
||||||
@navigate="navigate"
|
@navigate="navigate"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TheoryQuestion from './theoryQuestion'
|
import TheoryQuestion from './theoryQuestion';
|
||||||
import { submitPaper } from '@/api/management/exam'
|
import { submitPaper } from '@/api/management/exam';
|
||||||
export default {
|
export default {
|
||||||
name: 'ExamPanel',
|
name: 'ExamPanel',
|
||||||
emits: ['select'],
|
emits: ['select'],
|
||||||
components: { TheoryQuestion },
|
components: { TheoryQuestion },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show: false,
|
show: false,
|
||||||
composition: {},
|
composition: {},
|
||||||
paper: {},
|
paper: {},
|
||||||
questionList: [[], []],
|
questionList: [[], []],
|
||||||
questionStateList: [[], []],
|
questionStateList: [[], []],
|
||||||
currentQuestionIndex: 0,
|
currentQuestionIndex: 0,
|
||||||
currentQuestionType: 0, //1-理论, 2-实训
|
currentQuestionType: 0 // 1-理论, 2-实训
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init(data) {
|
init(data) {
|
||||||
this.show = true
|
this.show = true;
|
||||||
this.currentQuestionIndex = -1
|
this.currentQuestionIndex = -1;
|
||||||
this.composition = data.composition
|
this.composition = data.composition;
|
||||||
this.paper = data.paper
|
this.paper = data.paper;
|
||||||
this.questionList = [
|
this.questionList = [
|
||||||
data.questionList.filter(e => e.type === 1),
|
data.questionList.filter(e => e.type === 1),
|
||||||
data.questionList.filter(e => e.type === 2),
|
data.questionList.filter(e => e.type === 2)
|
||||||
]
|
];
|
||||||
this.questionStateList = [
|
this.questionStateList = [
|
||||||
Array.from(this.questionList[0], () => false),
|
Array.from(this.questionList[0], () => false),
|
||||||
Array.from(this.questionList[1], () => false),
|
Array.from(this.questionList[1], () => false)
|
||||||
]
|
];
|
||||||
},
|
},
|
||||||
questionSelect(index, type) {
|
questionSelect(index, type) {
|
||||||
this.currentQuestionIndex = index
|
this.currentQuestionIndex = index;
|
||||||
this.currentQuestionType = type
|
this.currentQuestionType = type;
|
||||||
if (type === 1) {
|
if (type === 1) {
|
||||||
this.$refs.theoryQuestion.doShow()
|
this.$refs.theoryQuestion.doShow();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
recordSubmit(index) {
|
recordSubmit(index) {
|
||||||
this.$set(this.questionStateList[0], index, true)
|
this.$set(this.questionStateList[0], index, true);
|
||||||
},
|
},
|
||||||
navigate(direction) {
|
navigate(direction) {
|
||||||
if (direction === '+') {
|
if (direction === '+') {
|
||||||
this.currentQuestionIndex++
|
this.currentQuestionIndex++;
|
||||||
} else if (direction === '-') {
|
} else if (direction === '-') {
|
||||||
this.currentQuestionIndex--
|
this.currentQuestionIndex--;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
submitExam() {
|
submitExam() {
|
||||||
const execSubmit = () => {
|
const execSubmit = () => {
|
||||||
submitPaper(this.paper.id).then(resp => {
|
submitPaper(this.paper.id).then(resp => {
|
||||||
const { score, passScore, commonScore, trainingScore } = resp.data
|
const { score, passScore, commonScore, trainingScore } = resp.data;
|
||||||
const pass = score >= passScore
|
const pass = score >= passScore;
|
||||||
this.$alert(
|
this.$alert(
|
||||||
`${pass ? '恭喜您考试合格' : '考试不通过'}
|
`${pass ? '恭喜您考试合格' : '考试不通过'}
|
||||||
总分: ${score}
|
总分: ${score}
|
||||||
理论: ${commonScore}
|
理论: ${commonScore}
|
||||||
实训: ${trainingScore}`,
|
实训: ${trainingScore}`,
|
||||||
'考试结果'
|
'考试结果'
|
||||||
).then(() => {
|
).then(() => {
|
||||||
this.show = false
|
this.show = false;
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
const finished = this.questionStateList.every(list => list.every(item => item === true))
|
const finished = this.questionStateList.every(list => list.every(item => item === true));
|
||||||
if (!finished) {
|
if (!finished) {
|
||||||
this.$confirm('您还有题目未答完, 确认交卷吗?').then(() => {
|
this.$confirm('您还有题目未答完, 确认交卷吗?').then(() => {
|
||||||
execSubmit()
|
execSubmit();
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
execSubmit()
|
execSubmit();
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -1,130 +1,131 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<el-dialog
|
||||||
v-dialogDrag
|
v-dialogDrag
|
||||||
:title="`第 ${index + 1} 题`"
|
:title="`第 ${index + 1} 题`"
|
||||||
:visible.sync="show"
|
:visible.sync="show"
|
||||||
width="860px"
|
width="860px"
|
||||||
:close-on-click-modal="false"
|
:close-on-click-modal="false"
|
||||||
:before-close="doClose"
|
:before-close="doClose"
|
||||||
:append-to-body="true"
|
:append-to-body="true"
|
||||||
>
|
>
|
||||||
<div class="questionTitle">[{{ questionData.typeString }}] {{ questionData.title }}</div>
|
<div class="questionTitle">[{{ questionData.typeString }}] {{ questionData.title }}</div>
|
||||||
<div class="options">
|
<div class="options">
|
||||||
<component
|
<component
|
||||||
:is="type === 2 ? 'el-checkbox-group' : 'el-radio-group'"
|
:is="type === 2 ? 'el-checkbox-group' : 'el-radio-group'"
|
||||||
v-model="questionData.answer"
|
v-model="questionData.answer"
|
||||||
class="options-container"
|
class="options-container"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
class="option"
|
:is="type === 2 ? 'el-checkbox' : 'el-radio'"
|
||||||
:is="type === 2 ? 'el-checkbox' : 'el-radio'"
|
v-for="el in questionData.options"
|
||||||
v-for="el in questionData.options"
|
:key="el.value"
|
||||||
:key="el.value"
|
class="option"
|
||||||
:label="el.value"
|
:label="el.value"
|
||||||
>{{ el.label }}</component
|
>{{ el.label }}</component>
|
||||||
>
|
</component>
|
||||||
</component>
|
</div>
|
||||||
</div>
|
<div class="footer">
|
||||||
<div class="footer">
|
<el-button size="small" :disabled="index === 0" @click="navigate('-')">上一题</el-button>
|
||||||
<el-button size="small" :disabled="index === 0" @click="navigate('-')">上一题</el-button>
|
<el-button type="danger" size="small" @click="navigate()">关闭</el-button>
|
||||||
<el-button type="danger" size="small" @click="navigate()">关闭</el-button>
|
<el-button
|
||||||
<el-button size="small" :disabled="index >= questionInfo.total - 1" @click="navigate('+')"
|
size="small"
|
||||||
>下一题</el-button
|
:disabled="index >= questionInfo.total - 1"
|
||||||
>
|
@click="navigate('+')"
|
||||||
</div>
|
>下一题</el-button>
|
||||||
</el-dialog>
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const types = ['', '单选题', '多选题', '判断题']
|
const types = ['', '单选题', '多选题', '判断题'];
|
||||||
import { loadQuestion, submitAnswer } from '@/api/management/exam'
|
import { loadQuestion, submitAnswer } from '@/api/management/exam';
|
||||||
export default {
|
export default {
|
||||||
name: 'theoryQuestion',
|
name: 'TheoryQuestion',
|
||||||
emits: ['submit'],
|
emits: ['submit'],
|
||||||
props: {
|
props: {
|
||||||
questionInfo: {
|
questionInfo: {
|
||||||
type: Object,
|
type: Object,
|
||||||
require: true,
|
require: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show: false,
|
show: false,
|
||||||
type: 0,
|
type: 0,
|
||||||
questionData: {
|
questionData: {
|
||||||
title: '',
|
title: '',
|
||||||
typeString: '',
|
typeString: '',
|
||||||
options: [],
|
options: [],
|
||||||
answer: '',
|
answer: ''
|
||||||
},
|
}
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
index() {
|
index() {
|
||||||
return this.questionInfo.index
|
return this.questionInfo.index;
|
||||||
},
|
},
|
||||||
puId() {
|
puId() {
|
||||||
return this.questionInfo.puId
|
return this.questionInfo.puId;
|
||||||
},
|
},
|
||||||
questionId() {
|
questionId() {
|
||||||
return this.questionInfo.questionId
|
return this.questionInfo.questionId;
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
index() {
|
index() {
|
||||||
if (this.questionId && this.questionInfo.puId) {
|
if (this.questionId && this.questionInfo.puId) {
|
||||||
this.loadQuestion()
|
this.loadQuestion();
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
doShow() {
|
doShow() {
|
||||||
this.show = true
|
this.show = true;
|
||||||
},
|
},
|
||||||
loadQuestion() {
|
loadQuestion() {
|
||||||
loadQuestion({ /* 理论题 */ type: 1, questionId: this.questionId, puId: this.questionInfo.puId }).then(
|
loadQuestion({ /* 理论题 */ type: this.questionInfo.type, questionId: this.questionId, puId: this.questionInfo.puId }).then(
|
||||||
resp => {
|
resp => {
|
||||||
const data = resp.data.common
|
const data = resp.data.common;
|
||||||
this.questionData = {
|
this.questionData = {
|
||||||
title: data.question,
|
title: data.question,
|
||||||
typeString: types[data.type],
|
typeString: types[data.type],
|
||||||
options: data.optionList.map(opt => ({ label: opt.content, value: opt.id })),
|
options: data.optionList.map(opt => ({ label: opt.content, value: opt.id })),
|
||||||
answer: data.type === 2 ? [] : NaN,
|
answer: data.type === 2 ? [] : NaN
|
||||||
}
|
};
|
||||||
this.type = data.type
|
this.type = data.type;
|
||||||
if (resp.data.tmpAnswer) {
|
if (resp.data.tmpAnswer) {
|
||||||
const tmpAnswer = resp.data.tmpAnswer.split(',').map(s => Number(s))
|
const tmpAnswer = resp.data.tmpAnswer.split(',').map(s => Number(s));
|
||||||
this.questionData.answer = data.type === 2 ? tmpAnswer : tmpAnswer[0]
|
this.questionData.answer = data.type === 2 ? tmpAnswer : tmpAnswer[0];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
},
|
},
|
||||||
doClose() {
|
doClose() {
|
||||||
this.show = false
|
this.show = false;
|
||||||
},
|
},
|
||||||
submit() {
|
submit() {
|
||||||
const data = {
|
const data = {
|
||||||
puId: this.puId,
|
puId: this.puId,
|
||||||
pqId: this.questionId,
|
pqId: this.questionId,
|
||||||
type: 1,
|
type: 1,
|
||||||
subType: this.type,
|
subType: this.type,
|
||||||
answer: this.type === 2 ? this.questionData.answer : [this.questionData.answer],
|
answer: this.type === 2 ? this.questionData.answer : [this.questionData.answer]
|
||||||
}
|
};
|
||||||
submitAnswer(data).then(resp => {
|
submitAnswer(data).then(resp => {
|
||||||
// console.log(resp)
|
// console.log(resp)
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
navigate(direction) {
|
navigate(direction) {
|
||||||
const selected = this.type === 2 ? !!this.questionData.answer.length : !isNaN(this.questionData.answer)
|
const selected = this.type === 2 ? !!this.questionData.answer.length : !isNaN(this.questionData.answer);
|
||||||
if (selected) {
|
if (selected) {
|
||||||
this.submit()
|
this.submit();
|
||||||
this.$emit('submit', this.index, direction)
|
this.$emit('submit', this.index, direction);
|
||||||
}
|
}
|
||||||
this.$emit('navigate', direction)
|
this.$emit('navigate', direction);
|
||||||
if (!direction) this.doClose()
|
if (!direction) this.doClose();
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user