<template>
|
<div v-loading.fullscreen.lock="!formDo">
|
<el-container class="app-item-contain" v-if="formDo">
|
<el-main style="padding-top: 3%;">
|
<el-form :model="form" ref="form" label-width="100%">
|
<el-row :key="index" v-for="(titleItem,index) in titleItems">
|
<div class="q-content">{{titleItem.description}}</div>
|
<el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0" style="border:2px solid #2b90ff;">
|
<div class="align-center"><span style="font-size: small; float: left">{{$t('examinee')}}{{memberName}}</span><span style="margin-top: 0px;padding-right: 11%">●{{form.name}}●</span></div>
|
<hr style="border : 1px dashed #b3d8ff;" />
|
<el-row style="margin-left:7px;margin-bottom:10px;">{{ questionItem.items.length != 4?note:note_1 }}</el-row>
|
<el-row style="margin-left:7px;margin-bottom:10px;">{{ questionItem.items.length != 4?guide:guide_1 }}</el-row>
|
<el-form-item :key="itemOrder" label-width="1px">
|
<QuestionEdit @callNextSubject="nextSubject" :qType="questionItem.questionType" :question="questionItem"
|
:answer="answer.answerItems[itemOrder-1]" :qLabel="itemOrder+'/'+itemSize"/>
|
</el-form-item>
|
<hr style="border : 0.5px dashed #b3d8ff;" />
|
<div style="color: red;font-size: smaller">{{$t('pleaseAnswerCarefully_exercise')}}</div>
|
|
<el-row class="do-align-center">
|
<el-button v-if="isSubmit" @click="doExam" type="success" round>{{$t('startDo_apifan')}}</el-button>
|
<el-button v-if="isStart && !isLast" @click="preSubject" type="warning" round>{{$t('lastQuestion')}}</el-button>
|
<el-button v-if="isStart && isLast" @click="nextSubject" type="primary" round>{{$t('nextQuestion')}}</el-button>
|
</el-row>
|
</el-card>
|
</el-row>
|
</el-form>
|
|
</el-main>
|
</el-container>
|
<el-row class="do-exam-title footer">
|
<el-col :span="24">
|
<!--<el-popover placement="top" title="题目列表" width="200" trigger="click" ref="popovertag">-->
|
<!--<el-tag type="success" slot="reference">题目</el-tag>-->
|
<!--<span :key="item.itemOrder" v-for="(item) in answer.answerItems">-->
|
<!--<el-tag :type="questionCompleted(item.completed)" class="do-exam-title-tag"-->
|
<!-->{{item.itemOrder}}</el-tag>-->
|
<!--</span>-->
|
<!--</el-popover>-->
|
<span class="do-exam-time">
|
<!--<label>{{$t('remainingTime')}}</label>-->
|
<!--<label>{{formatSecondsG(remainTime,$t('hour'),$t('min'),$t('second'))}}</label>-->
|
</span>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapGetters, mapMutations } from 'vuex'
|
import { formatSeconds, formatSecondsG, formatDate } from '@/utils'
|
import QuestionEdit from '../components/QuestionEdit'
|
import examPaperApi from '@/api/examPaper'
|
import examPaperAnswerApi from '@/api/examPaperAnswer'
|
import demographyApi from '@/api/demography'
|
|
export default {
|
name: 'exercise',
|
components: { QuestionEdit },
|
data () {
|
return {
|
// formDo: this.$route.query.formDo,
|
memberName: '',
|
form: {
|
name: ''
|
},
|
itemOrder: 1,
|
itemSize: 3,
|
note: this.$t('exercise_note'),
|
guide: this.$t('exercise_guide'),
|
note_1: this.$t('exercise_note_1'),
|
guide_1: this.$t('exercise_guide_1'),
|
answer: {
|
answerItems: []
|
},
|
titleItems: [],
|
questionItem: {},
|
isSubmit: false,
|
isStart: false,
|
isLast: false
|
}
|
},
|
created: function () {
|
this.getFormDo()
|
this.initQuestion()
|
},
|
mounted () {
|
},
|
beforeDestroy () {
|
},
|
watch: {
|
'formDo': function (newVal, oldVal) {
|
this.initQuestion()
|
}
|
},
|
methods: {
|
// 初始化题目
|
initQuestion () {
|
this.memberName = this.formDo.memberName
|
this.form.name = this.formDo.name
|
this.titleItems = [
|
{
|
questionItems: []
|
}
|
]
|
for (let i = 0; i < this.itemSize; i++) {
|
this.titleItems[0].questionItems.push(this.formDo.titleItems[0].questionItems[i])
|
}
|
this.questionItem = this.titleItems[0].questionItems[this.itemOrder - 1]
|
|
for (let i = 0; i < this.itemSize; i++) {
|
let data = {
|
content: '',
|
readOnly: false
|
}
|
this.answer.answerItems.push(data)
|
}
|
},
|
nextSubject () {
|
this.isStart = true
|
this.isLast = false
|
if (this.itemOrder === this.itemSize) {
|
this.isSubmit = true
|
this.$message({
|
message: this.$t('exercise_submit_tip'),
|
type: 'success'
|
})
|
return
|
}
|
this.itemOrder += 1
|
this.answer.answerItems[this.itemOrder - 1].readOnly = false
|
this.questionItem = this.titleItems[0].questionItems[this.itemOrder - 1]
|
if (this.itemOrder === this.itemSize && this.answer.answerItems[this.itemOrder - 1].content !== '') {
|
this.isSubmit = true
|
}
|
},
|
preSubject () {
|
this.isLast = true
|
this.isSubmit = false
|
this.itemOrder -= 1
|
this.answer.answerItems[this.itemOrder - 1].readOnly = false
|
this.questionItem = this.titleItems[0].questionItems[this.itemOrder - 1]
|
},
|
doExam () {
|
let _this = this
|
examPaperApi.updateTestMemberStatus(_this.memberToken).then(re => {
|
_this.$router.push({ path: '/exam/' + _this.doUrl, query: { formDo: _this.formDo } })
|
}).catch(re => {
|
_this.$message.error(re.message + ' 更新状态失败')
|
})
|
},
|
...mapMutations('user', ['getFormDo'])
|
},
|
computed: {
|
...mapState('exam', { doUrl: state => state.doUrl }),
|
...mapState('user', { memberToken: state => state.memberToken }),
|
...mapState('user', { formDo: state => state.formDo })
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.align-center {
|
text-align: center;
|
}
|
|
.exam-question-item {
|
padding: 10px;
|
font-size: large;
|
|
.el-form-item__label {
|
font-size: large !important;
|
}
|
}
|
|
.question-title-padding {
|
padding-left: 25px;
|
padding-right: 25px;
|
}
|
.footer {
|
position: absolute;
|
position: fixed;
|
z-index: 1000;
|
bottom: 0px;
|
}
|
</style>
|
