<template>
|
<div>
|
<el-container class="app-item-contain">
|
<el-header class="align-center" v-if="guide">
|
<h1 v-html="titleItems[0].name+ +' '+ $t('guide') "></h1>
|
</el-header>
|
<el-header class="align-center" style="height: 90px; padding: 2%" v-else>
|
<h1>{{form.name}}</h1>
|
<div>
|
<span class="question-title-padding" v-if="form.suggestTime !== null && form.suggestTime != '' && form.suggestTime > 0">{{$t('recommendedTime')}}{{form.suggestTime}}{{$t('minute')}}</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">{{$t('start')}}</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 v-bind:class="{langKaiStyle : isLangKaiStyle}" v-if="langType === 'Chinese'">第{{order+1}}题/总{{totalTitleNum}}题: {{titleItem.name}}</h3>
|
<h3 v-bind:class="{langKaiStyle : isLangKaiStyle}" v-else>{{order+1}}/{{totalTitleNum}}: {{titleItem.name}}</h3>
|
<div class="q-content" v-html="titleItem.description"></div>
|
<el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0">
|
<el-form-item :key="questionItem.itemOrder" class="exam-question-item" label-width="0%"
|
v-for="questionItem in titleItem.questionItems" :id="'question-'+ questionItem.itemOrder">
|
<QuestionJobEdit @callNextSubject="callNext" :qType="questionItem.questionType" :question="questionItem"
|
:answer="answer.answerItems[questionItem.itemOrder-1]" :isReadOnly="autoNext"/>
|
</el-form-item>
|
</el-card>
|
</el-row>
|
<el-row class="do-align-center" v-if="order < form.titleItems.length - 1">
|
<el-button @click="preSubject" type="warning" v-if ="preDisable" round>{{$t('lastQuestion')}}</el-button>
|
<el-button @click="nextSubject" type="primary" v-if ="nextDisable" round>{{$t('nextQuestion')}}</el-button>
|
</el-row>
|
<el-row class="do-align-center" v-else>
|
<el-button @click="preSubject" type="warning" v-if ="preDisable" round>{{$t('lastQuestion')}}</el-button>
|
<el-button @click="submitForm" type="primary" :disabled="submitDisable" round>{{$t('submission')}}</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="题目列表" trigger="click" ref="popovertag">-->
|
<!--<el-tag type="success" slot="reference">题目</el-tag>-->
|
<!--<span :key="item.itemOrder" v-for="(item) in answer.titleItems">-->
|
<!--<el-tag :type="questionCompleted(item.completed)" class="do-exam-title-tag"-->
|
<!--@click="goAnchor(item.itemOrder)">{{item.itemOrder + 1}}</el-tag>-->
|
<!--</span>-->
|
<!--</el-popover>-->
|
<span class="do-exam-time">
|
<label v-if="form.suggestTime !== null && form.suggestTime != '' && form.suggestTime > 0">{{$t('remainingTime')}}</label>
|
<label v-if="form.suggestTime !== null && form.suggestTime != '' && form.suggestTime > 0">{{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 QuestionJobEdit from '../components/QuestionJobEdit'
|
import examPaperApi from '@/api/examPaper'
|
import examPaperAnswerApi from '@/api/examPaperAnswer'
|
|
export default {
|
name: 'job',
|
components: { QuestionJobEdit },
|
data () {
|
return {
|
form: {},
|
formLoading: false,
|
answer: {
|
questionId: null,
|
doTime: 0,
|
titleItems: null,
|
answerItems: [],
|
verifyStatus: 2,
|
finish: 0,
|
questionOrder: []
|
},
|
timer: null,
|
problemLength: 0,
|
remainTime: 0,
|
titleItemName: '', // 考试第二标题
|
itemOrder: '', // 题目的序号
|
questionItem: {}, // 题目
|
titleItems: [],
|
order: 0,
|
guide: false,
|
answered: [],
|
submitDisable: false,
|
doTime: 0,
|
preDisable: false,
|
nextDisable: false,
|
autoNext: true,
|
isCallTain: false, // 是否要调用泰国团队接口
|
isLangKaiStyle: false,
|
totalTitleNum: 0
|
}
|
},
|
created () {
|
let _this = this
|
// 多语言
|
_this.setLangFlag(false)
|
_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.titleItems.push(_this.form.titleItems[0])
|
_this.timeReduce()
|
_this.initAnswer()
|
_this.formLoading = false
|
// 总题目
|
_this.totalTitleNum = _this.form.titleItems.length
|
} else {
|
_this.formLoading = true
|
examPaperApi.select(_this.memberToken, _this.langType).then(re => {
|
_this.form = re.response
|
// 总题目
|
_this.totalTitleNum = _this.form.titleItems.length
|
_this.remainTime = re.response.suggestTime * 60
|
_this.problemLength = _this.form.titleItems[0].questionItems.length - 1
|
_this.titleItems.push(_this.form.titleItems[0])
|
_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
|
})
|
// 回到未答的题目
|
let notContinue = false
|
for (let i = 0; i < _this.answer.answerItems.length; i++) {
|
// 判断是否勾选
|
if (!_this.answer.answerItems[i].completed) {
|
// 定位到未勾选的地方
|
for (let j = 0; j < _this.form.titleItems.length; j++) {
|
_this.form.titleItems[j].questionItems.forEach(it => {
|
if (it.itemOrder === _this.answer.answerItems[i].itemOrder) {
|
_this.goHere(j)
|
notContinue = true
|
}
|
})
|
}
|
}
|
if (notContinue) {
|
_this.preDisable = true
|
_this.autoNext = true
|
break
|
}
|
}
|
}).catch(e => {
|
})
|
}).catch(e => {
|
_this.$message.info(_this.$t('noquestionMsg'))
|
})
|
}
|
|
// 中文的样式不一样
|
if (_this.langType === 'Chinese') {
|
_this.isLangKaiStyle = true
|
}
|
},
|
mounted () {
|
},
|
beforeDestroy () {
|
window.clearInterval(this.timer)
|
},
|
methods: {
|
formatSeconds (theTime) {
|
return formatSeconds(theTime)
|
},
|
formatSecondsG (theTime, hour, min, second) {
|
return formatSecondsG(theTime, hour, min, second)
|
},
|
formatDate (time, formatsrc) {
|
return formatDate(time, formatsrc)
|
},
|
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 = selector
|
_this.goHere(num)
|
_this.$refs['popovertag'].doClose()
|
},
|
initAnswer () {
|
this.answer.id = this.form.id
|
this.answer.questionOrder = this.form.questionOrder
|
let titleItemArray = this.form.titleItems
|
this.answer.titleItems = this.form.titleItems
|
for (let tIndex in titleItemArray) {
|
let questionArray = titleItemArray[tIndex].questionItems
|
// titleItem 是一段一段的题目
|
for (let qIndex in questionArray) {
|
let question = questionArray[qIndex]
|
this.answer.answerItems.push({ questionId: question.id, content: null, contentArray: [], permanentId: question.permanentId, completed: false, itemOrder: question.itemOrder, lastContent: null, questionReport: {}, readOnly: false })
|
}
|
}
|
// 设置第一题的开始时间
|
for (let i = 0; i < this.form.titleItems.length; i++) {
|
if (this.form.titleItems[i].startTime == null || this.form.titleItems[i].startTime.trim() === '') {
|
this.form.titleItems[i].startTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
break
|
}
|
}
|
},
|
nextSubject: function () {
|
let _this = this
|
// 设置上一题结束时间
|
_this.form.titleItems[_this.order].endTime = _this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
_this.isShowGuide(false)
|
if (_this.order < _this.form.titleItems.length - 1) {
|
_this.titleItems = []
|
let num = ++_this.order
|
_this.titleItems.push(_this.form.titleItems[num])
|
// 设置下一题的开始时间
|
_this.form.titleItems[_this.order].startTime = _this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
} else {
|
return
|
}
|
let answerSubmit = _this.getSubmitAnswerValue()
|
examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
|
if (re.code === 1) {
|
} else {
|
_this.$message.error(re.message + 'answerSubmit')
|
}
|
}).catch(e => {
|
_this.$message.error(_this.$t('submitErro'))
|
})
|
_this.preDisable = true
|
_this.autoNext = true
|
_this.nextDisable = false
|
},
|
preSubject () {
|
let _this = this
|
_this.isShowGuide(false)
|
if (_this.order > 0) {
|
_this.titleItems = []
|
let num = --_this.order
|
_this.titleItems.push(_this.form.titleItems[num])
|
_this.titleItems.forEach(it => {
|
it.questionItems.forEach(i => {
|
_this.answer.answerItems[parseInt(i.itemOrder) - 1].lastContent = _this.answer.answerItems[parseInt(i.itemOrder) - 1].content
|
_this.answer.answerItems[parseInt(i.itemOrder) - 1].readOnly = false
|
})
|
})
|
_this.preDisable = false
|
_this.autoNext = false
|
_this.nextDisable = true
|
}
|
},
|
setReadOnly: function (readOnly) {
|
this.titleItems.forEach(it => {
|
it.questionItems.forEach(i => {
|
this.answer.answerItems[parseInt(i.itemOrder) - 1].readOnly = readOnly
|
})
|
})
|
},
|
// 如果是答完题目了，自动跳到下一题
|
callNext () {
|
let _this = this
|
if (!_this.autoNext) {
|
_this.setReadOnly(false)
|
return
|
}
|
let jumpNextFlag = true
|
for (let i = 0; i < _this.titleItems.length; i++) {
|
_this.titleItems[i].questionItems.forEach(questionItme => {
|
if (!_this.answer.answerItems[questionItme.itemOrder - 1].completed) {
|
jumpNextFlag = false
|
}
|
})
|
}
|
if (jumpNextFlag) {
|
_this.nextSubject()
|
}
|
},
|
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
|
_this.answer.finish = 0
|
}
|
}
|
if (unFinish) {
|
_this.$confirm(_this.$t('unfinish'), {
|
title: this.$t('prompt'),
|
confirmButtonText: _this.$t('determine'),
|
cancelButtonText: _this.$t('cancel'),
|
showClose: false
|
}).then(async () => {
|
_this.answer.verifyStatus = 2
|
_this.submitAnswer(_this.$t('unfinishSubmit'))
|
}).catch(async () => {
|
_this.formLoading = false
|
_this.submitDisable = false
|
})
|
} else {
|
_this.answer.verifyStatus = 1
|
_this.answer.finish = 1
|
_this.submitAnswer(_this.$t('finishSubmit'))
|
}
|
},
|
startDo: function () {
|
let _this = this
|
_this.isShowGuide(false)
|
},
|
goHere: function (num) {
|
let _this = this
|
_this.titleItems = []
|
_this.titleItems.push(_this.form.titleItems[num])
|
_this.order = num
|
},
|
submitAnswer: function (mess) {
|
let _this = this
|
this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
let answerSubmit = _this.getSubmitAnswerValue()
|
examPaperAnswerApi.answerSubmit(answerSubmit, _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 + '/exam/finish')
|
}
|
_this.formLoading = false
|
}).catch(e => {
|
_this.formLoading = false
|
_this.$router.push({ path: '/exam/exception', query: { name: _this.form.name, content: _this.$t('submitExceptionInfo') } })
|
})
|
},
|
getSubmitAnswerValue () {
|
let _this = this
|
let answerSubmit = JSON.parse(JSON.stringify(this.answer))
|
let tagNum = 0
|
answerSubmit.titleItems.forEach(titleItem => {
|
// titleItem.name = ''
|
titleItem.questionItems.forEach(questionItem => {
|
questionItem.title = ''
|
questionItem.content = answerSubmit.answerItems[tagNum++].content
|
})
|
|
// 这个是一个个小题
|
answerSubmit.answerItems.forEach(answerItem => {
|
// 题目报表，如果没有结束时间，开始时间也不需要
|
if (answerItem.endTime == null || answerItem.endTime === '') {
|
answerItem.startTime = ''
|
}
|
answerItem.questionReport = { questionOrder: answerItem.questionId, questionTitle: answerItem.title, permanentId: answerItem.permanentId, startTime: answerItem.startTime, endTime: answerItem.endTime, langType: _this.langType, partOrder: answerItem.partOrder }
|
})
|
// 题目报表，如果没有结束时间，开始时间也不需要
|
if (titleItem.endTime == null) {
|
titleItem.startTime = ''
|
}
|
titleItem.questionReport = { questionOrder: titleItem.questionOrder, questionTitle: titleItem.name, permanentId: titleItem.permanentId, startTime: titleItem.startTime, endTime: titleItem.endTime, langType: _this.langType, questionItems: titleItem.questionItems }
|
})
|
answerSubmit.langType = _this.langType
|
return answerSubmit
|
},
|
isShowGuide (flag) {
|
let _this = this
|
_this.guide = flag
|
_this.isCallTain = flag
|
},
|
...mapMutations('user', ['setLangType']),
|
...mapMutations('user', ['setLangFlag'])
|
},
|
computed: {
|
...mapGetters('enumItem', ['enumFormat']),
|
...mapState('enumItem', { doCompletedTag: state => state.exam.question.answer.doCompletedTag }),
|
...mapState('user', { memberToken: state => state.memberToken }),
|
...mapState('user', { langType: state => state.langType }),
|
...mapState('user', { langFlag: state => state.langFlag })
|
}
|
}
|
</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;
|
}
|
|
.langKaiStyle {
|
font-size:xx-large;
|
font-family: 楷体;
|
}
|
</style>
|
