<template>
|
<div>
|
<el-container class="app-item-contain">
|
<el-header class="align-center" v-if="guide">
|
<h1 v-html="titleItems[0].name+ ' 指导语' "></h1>
|
</el-header>
|
<el-header class="align-center" style="height: 80px; padding: 2%" v-else>
|
<h1>{{form.name}}</h1>
|
<div>
|
<span class="question-title-padding">试卷总分：{{form.score}}</span>
|
<span class="question-title-padding">考试时间：{{form.suggestTime}}分钟</span>
|
</div>
|
</el-header>
|
<el-main>
|
<div v-html="titleItems[0].guide" v-if="guide"></div>
|
<el-row class="do-align-center" v-if="guide">
|
<el-button @click="startDo" type="primary">开始</el-button>
|
</el-row >
|
<el-form :model="form" ref="form" v-loading="formLoading" label-width="100%" v-else>
|
<el-row :key="index" v-for="(titleItem,index) in titleItems">
|
<h3>第1段:{{titleItem.name}}</h3>
|
<div class="q-content">{{titleItem.description}}</div>
|
<el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0">
|
<el-form-item :key="itemOrder" :label="itemOrder+'.'" class="exam-question-item" label-width="50px">
|
<QuestionEdit :qType="questionItem.questionType" :question="questionItem"
|
:answer="answer.answerItems[questionItem.itemOrder-1]"/>
|
</el-form-item>
|
</el-card>
|
</el-row>
|
<el-row class="do-align-center" v-if="order < problemLength">
|
<el-button @click="preSubject" type="warning" round>上一题</el-button>
|
<el-button @click="nextSubject" type="primary" round>下一题</el-button>
|
</el-row>
|
<el-row class="do-align-center" v-else>
|
<el-button @click="preSubject" type="warning" round>上一题</el-button>
|
<el-button @click="submitForm" type="primary" :disabled="submitDisable" round>提交</el-button>
|
</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"
|
@click="goAnchor('#question-'+item.itemOrder)">{{item.itemOrder}}</el-tag>
|
</span>
|
</el-popover>
|
<span class="do-exam-time">
|
<label>剩余时间：</label>
|
<label>{{formatSeconds(remainTime)}}</label>
|
</span>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapGetters } from 'vuex'
|
import { formatSeconds } from '@/utils'
|
import QuestionEdit from '../components/QuestionEdit'
|
import examPaperApi from '@/api/examPaper'
|
import examPaperAnswerApi from '@/api/examPaperAnswer'
|
|
export default {
|
components: { QuestionEdit },
|
data () {
|
return {
|
form: {},
|
formLoading: false,
|
answer: {
|
questionId: null,
|
doTime: 0,
|
answerItems: [],
|
verifyStatus: 2
|
},
|
timer: null,
|
problemLength: 0,
|
titleItemsLength: 0,
|
remainTime: 0,
|
titleItemName: '', // 考试第二标题
|
itemOrder: '', // 题目的序号
|
questionItem: {}, // 题目
|
titleItems: [],
|
order: 0,
|
guide: false,
|
answered: [],
|
submitDisable: false,
|
doTime: 0
|
}
|
},
|
created () {
|
let _this = this
|
_this.form = this.$route.query.formDo
|
if (_this.form !== {} && _this.form !== undefined) {
|
_this.formLoading = true
|
_this.remainTime = _this.form.suggestTime * 60
|
_this.problemLength = _this.form.titleItems[0].questionItems.length - 1
|
_this.titleItemsLength = _this.form.titleItems.length
|
_this.titleItems.push(_this.form.titleItems[0])
|
_this.timeReduce()
|
_this.initAnswer()
|
_this.formLoading = false
|
} else {
|
_this.formLoading = true
|
examPaperApi.select(_this.memberToken).then(re => {
|
_this.form = re.response
|
_this.remainTime = re.response.suggestTime * 60
|
_this.problemLength = _this.form.titleItems[0].questionItems.length - 1
|
_this.titleItemsLength = _this.form.titleItems.length
|
_this.titleItems.push(_this.form.titleItems[0])
|
_this.itemOrder = _this.form.titleItems[0].questionItems[_this.order].itemOrder
|
_this.questionItem = _this.form.titleItems[0].questionItems[_this.order]
|
_this.initAnswer()
|
_this.formLoading = false
|
examPaperApi.selectTokenId(_this.memberToken).then(re => {
|
_this.answered = re.response.examItemOrderAndContentList
|
_this.doTime = re.response.doTime
|
_this.timeReduce()
|
_this.answered.forEach(it => {
|
_this.answer.answerItems[parseInt(it.itemOrder) - 1].content = it.content
|
_this.answer.answerItems[parseInt(it.itemOrder) - 1].completed = true
|
})
|
}).catch(e => {
|
// _this.$message.error('题目查询异常')
|
})
|
}).catch(e => {
|
_this.$message.info('无测试题目')
|
})
|
}
|
},
|
mounted () {
|
},
|
beforeDestroy () {
|
window.clearInterval(this.timer)
|
},
|
methods: {
|
formatSeconds (theTime) {
|
return formatSeconds(theTime)
|
},
|
timeReduce () {
|
let _this = this
|
_this.answer.doTime += _this.doTime
|
_this.remainTime -= _this.doTime
|
this.timer = setInterval(function () {
|
if (_this.remainTime <= 0) {
|
_this.remainTime = 0
|
++_this.answer.doTime
|
} else {
|
++_this.answer.doTime
|
--_this.remainTime
|
}
|
}, 1000)
|
},
|
questionCompleted (completed) {
|
return this.enumFormat(this.doCompletedTag, completed)
|
},
|
goAnchor (selector) {
|
let _this = this
|
let num = parseInt(selector.substr(10)) -1
|
this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
|
this.questionItem = _this.form.titleItems[0].questionItems[num]
|
setTimeout(function () {
|
_this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
|
}, 200)
|
_this.$refs['popovertag'].doClose()
|
},
|
initAnswer () {
|
this.answer.id = this.form.id
|
let titleItemArray = this.form.titleItems
|
for (let tIndex in titleItemArray) {
|
let questionArray = titleItemArray[tIndex].questionItems
|
for (let qIndex in questionArray) {
|
let question = questionArray[qIndex]
|
this.answer.answerItems.push({ questionId: question.id, content: null, contentArray: [], completed: false, itemOrder: question.itemOrder, lastContent: null })
|
}
|
}
|
},
|
nextSubject: function () {
|
let _this = this
|
_this.guide = false
|
if (_this.order < _this.problemLength) {
|
let num = ++_this.order
|
this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
|
this.questionItem = _this.form.titleItems[0].questionItems[num]
|
}
|
examPaperAnswerApi.answerSubmit(this.answer, _this.memberToken).then(re => {
|
if (re.code === 1) {
|
} else {
|
_this.$message.error(re.message)
|
}
|
}).catch(e => {
|
_this.$message.error('提交问卷后台错误')
|
})
|
},
|
preSubject () {
|
let _this = this
|
_this.guide = false
|
if (_this.order > 0) {
|
let num = --_this.order
|
this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
|
this.questionItem = _this.form.titleItems[0].questionItems[num]
|
}
|
},
|
submitForm () {
|
let _this = this
|
_this.submitDisable = true
|
window.clearInterval(_this.timer)
|
_this.formLoading = true
|
let unFinish = false
|
for (let i = 0; i < _this.answer.answerItems.length; i++) {
|
if (_this.answer.answerItems[i].content === null) {
|
unFinish = true
|
}
|
}
|
if (unFinish) {
|
_this.$confirm('你有未答完的题目，是否提交保存?', {
|
title: '提示',
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
showClose: false
|
}).then(async () => {
|
_this.answer.verifyStatus = 2
|
_this.submitAnswer('数据已经成功的上传至服务器，并已经保存好。谢谢。')
|
}).catch(async () => {
|
_this.formLoading = false
|
_this.submitDisable = false
|
})
|
} else {
|
_this.answer.verifyStatus = 1
|
_this.submitAnswer('您已经完成了工作行为问卷，数据已经成功的上传至服务器，并已经保存好。谢谢。')
|
}
|
},
|
startDo: function () {
|
let _this = this
|
_this.guide = false
|
},
|
submitAnswer: function (mess) {
|
let _this = this
|
examPaperAnswerApi.answerSubmit(this.answer, _this.memberToken).then(re => {
|
if (re.code === 1) {
|
_this.$router.push({ path: '/exam/finish', query: { name: _this.form.name, content: mess } })
|
} else {
|
_this.$message.error(re.message)
|
}
|
_this.formLoading = false
|
}).catch(e => {
|
_this.formLoading = false
|
})
|
}
|
},
|
computed: {
|
...mapGetters('enumItem', ['enumFormat']),
|
...mapState('enumItem', { doCompletedTag: state => state.exam.question.answer.doCompletedTag }),
|
...mapState('user', { memberToken: state => state.memberToken })
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.align-center {
|
text-align: center;
|
}
|
|
.exam-question-item {
|
padding: 10px;
|
|
.el-form-item__label {
|
font-size: 15px !important;
|
}
|
}
|
|
.question-title-padding {
|
padding-left: 25px;
|
padding-right: 25px;
|
}
|
.footer {
|
position: absolute;
|
position: fixed;
|
z-index: 1000;
|
bottom: 0px;
|
}
|
</style>
|
