<template>
|
<div>
|
<el-container class="app-item-contain">
|
<el-header class="align-center" v-if="guide">
|
<h1></h1>
|
</el-header>
|
<el-main style="padding-top: 3%;">
|
<div v-html="guideDescirption" v-if="guide" :style="ismobile?'padding-top: 2%;':'padding-top: 2%;margin: 0 auto;width:66%'"></div>
|
<el-row class="do-align-center" v-if="guide">
|
<el-button @click="startDo" type="primary" :disable="startDoDisable">{{$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">
|
<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-form-item :key="itemOrder" label-width="1px">
|
<QuestionEdit @callNextSubject="nextSubject" :qType="questionItem.questionType" :question="questionItem"
|
:answer="answer.answerItems[questionItem.itemOrder-1]" :qLabel="itemOrder+'/'+itemSize"/>
|
</el-form-item>
|
<hr style="border : 0.5px dashed #b3d8ff;" />
|
<div style="color: red;font-size: smaller">{{$t('pleaseAnswerCarefully')}}</div>
|
<el-row class="do-align-center" v-if="order < problemLength">
|
<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-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: 'personality',
|
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: true,
|
doTime: 0,
|
preDisable: false,
|
nextDisable: false,
|
partOrder: 0,
|
parts: [],
|
guideTitle: '',
|
guideDescirption: '',
|
isCallTain: '',
|
memberName: '',
|
itemSize: '', // 题目长度
|
startDoDisable: true,
|
ismobile: false
|
}
|
},
|
created: function () {
|
let _this = this
|
_this.ismobile = /ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(navigator.userAgent.toLowerCase())
|
// 多语言
|
_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.titleItemsLength = _this.form.titleItems.length
|
_this.titleItems.push(_this.form.titleItems[0])
|
_this.questionItem = _this.form.titleItems[0].questionItems[0]
|
_this.partOrder = _this.questionItem.partOrder
|
_this.itemOrder = _this.form.titleItems[0].questionItems[0].itemOrder
|
_this.timeReduce()
|
_this.initAnswer()
|
_this.formLoading = false
|
_this.memberName = _this.form.memberName
|
_this.itemSize = _this.form.titleItems[0].questionItems.length
|
} else {
|
_this.formLoading = true
|
// 防止刷新成了不同的语言
|
demographyApi.queryDemographyParamInfo(_this.memberToken).then(
|
re => {
|
if (re.response[0].langType !== null || re.response[0].langType.trim() !== '') {
|
_this.setLangType(re.response[0].langType)
|
}
|
// 加载题目
|
examPaperApi.select(_this.memberToken, _this.langType).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.itemSize = _this.form.titleItems[0].questionItems.length
|
_this.questionItem = _this.form.titleItems[0].questionItems[_this.order]
|
_this.partOrder = _this.questionItem.partOrder
|
_this.initAnswer()
|
_this.formLoading = false
|
_this.memberName = _this.form.memberName
|
examPaperApi.selectTokenId(_this.memberToken).then(re => {
|
_this.answered = re.response.examItemOrderAndContentList
|
_this.doTime = re.response.doTime
|
_this.timeReduce()
|
if (_this.answered !== null) {
|
_this.answered.forEach(it => {
|
_this.answer.answerItems[parseInt(it.itemOrder) - 1].content = it.content
|
_this.answer.answerItems[parseInt(it.itemOrder) - 1].completed = true
|
})
|
}
|
|
for (let i = 0; i < _this.answer.answerItems.length; i++) {
|
if (!_this.answer.answerItems[i].completed || _this.answer.answerItems[i].content === null || _this.answer.answerItems[i].content === '') {
|
_this.questionItem = _this.form.titleItems[0].questionItems[i]
|
_this.partOrder = _this.questionItem.partOrder
|
_this.itemOrder = _this.form.titleItems[0].questionItems[i].itemOrder
|
_this.order = i
|
_this.preDisable = true
|
break
|
}
|
|
if (_this.isForFinish(i)) {
|
_this.$router.push({ path: '/exam/finish', query: { name: '', content: _this.$t('finishMsg'), tokenId: _this.memberToken } })
|
}
|
}
|
// 如果上一题不是本段，则不能返回上一段
|
if (this.isDiffPartOrder()) {
|
_this.preDisable = false
|
}
|
|
if (this.isDiffPartOrder()) {
|
_this.showNextGuide(re.response.signalObject, false)
|
}
|
}).catch(e => {
|
// _this.$message.error('题目查询异常')
|
})
|
}).catch(e => {
|
_this.$message.info(_this.$t('noquestionMsg'))
|
})
|
}
|
).catch(e => {
|
})
|
}
|
|
},
|
mounted () {
|
},
|
beforeDestroy () {
|
window.clearInterval(this.timer)
|
},
|
watch: {
|
guideDescirption: function (newVal, oldVal) {
|
// 处理指导语，更换变量
|
if (newVal) {
|
if (this.form) {
|
let productType = this.form.productType
|
if (productType === 'API_Fan') {
|
newVal = newVal.replace('%%company%%', this.form.reportCompany)
|
this.guideDescirption = newVal
|
}
|
}
|
}
|
}
|
},
|
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: function () {
|
let _this = this
|
_this.answer.doTime += _this.doTime
|
this.timer = setInterval(function () {
|
if (_this.answer.doTime <= 0) {
|
_this.answer.doTime = 0
|
}
|
++_this.answer.doTime
|
}, 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]
|
_this.order = 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
|
this.answer.questionOrder = this.form.questionOrder
|
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({ title: question.title, permanentId: question.permanentId, questionId: question.id, content: null, contentArray: [], completed: false, itemOrder: question.itemOrder, lastContent: null, startTime: question.startTime, endTime: question.endTime, partOrder: question.partOrder, questionReport: {}, readOnly: false })
|
}
|
}
|
|
// 初始化开始时间，设置第一个时间
|
for (let i = 0; i < this.answer.answerItems.length; i++) {
|
if (this.answer.answerItems[i].startTime == null || this.answer.answerItems[i].startTime.trim() === '') {
|
this.answer.answerItems[i].startTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
break
|
}
|
}
|
},
|
isContentNotEmpty: function (num) {
|
let _this = this
|
return _this.answer.answerItems[num].content !== '' && _this.answer.answerItems[num].content !== null && _this.answer.answerItems[num].content.trim() !== ''
|
},
|
nextQuestion: function (nowPartOrder) {
|
let _this = this
|
let num = ++_this.order
|
_this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
|
// 跳到没有答的题目
|
while (_this.isContentNotEmpty(num) && num !== _this.answer.answerItems.length - 1) {
|
num = ++_this.order
|
this.getEmptySubjct(num)
|
}
|
_this.questionItem = _this.form.titleItems[0].questionItems[num]
|
_this.partOrder = _this.questionItem.partOrder
|
if (_this.partOrder !== nowPartOrder) {
|
_this.isShowGuide(true)
|
}
|
_this.preDisable = true
|
_this.nextDisable = false
|
_this.answer.answerItems[_this.order].startTime = _this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
|
// 如果是最后一个并且已经完成了，就提交
|
if (num === _this.answer.answerItems.length - 1 && _this.isForFinish(num)) {
|
this.submitForm()
|
}
|
},
|
nextQuestionOrder: function (nowPartOrder) {
|
if (this.order < this.problemLength) {
|
this.nextQuestion(nowPartOrder)
|
} else {
|
this.submitDisable = false
|
}
|
},
|
isNextShowGuide: function (nowPartOrder) {
|
let _this = this
|
// 本段的每一题都打完要指导语
|
let showGuideFlag = true
|
for (let i = 0; i < _this.answer.answerItems.length; i++) {
|
if (_this.form.titleItems[0].questionItems[i].partOrder === nowPartOrder && !_this.isContentNotEmpty(i)) {
|
showGuideFlag = false
|
}
|
}
|
return showGuideFlag
|
},
|
catThaiSubmit: function (answerSubmit) {
|
answerSubmit.isCallTain = 'CallThai'
|
},
|
getEmptySubjct: function (order) {
|
let _this = this
|
_this.itemOrder = _this.form.titleItems[0].questionItems[order].itemOrder
|
_this.questionItem = _this.form.titleItems[0].questionItems[order]
|
_this.partOrder = _this.questionItem.partOrder
|
_this.preDisable = false
|
_this.answer.answerItems[order].readOnly = false
|
// _this.answer.answerItems[order].content = ''
|
// _this.answer.answerItems[order].completed = false
|
_this.order = order
|
},
|
isNotEmpty (obj) {
|
return obj !== null && obj !== undefined && obj !== ''
|
},
|
isEmpty (obj) {
|
return !this.isNotEmpty(obj)
|
},
|
nextSubject: function () {
|
let _this = this
|
_this.isShowGuide(false)
|
let nowPartOrder = _this.partOrder
|
// 设置上一题的结束时间
|
this.answer.answerItems[_this.order].endTime = _this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
|
// 循环没有答的题目,这里同时决定了问答题打完可以进入下一题
|
for (let i = 0; i < _this.order; i++) {
|
if (!this.isContentNotEmpty(i)) {
|
// 返回之前没做的那道题
|
this.getEmptySubjct(i)
|
return
|
}
|
// 如果循环到最后一题就提交
|
if (_this.isForFinish(i)) {
|
_this.submitForm()
|
return
|
}
|
}
|
|
// 全部答完了就可以提交了,但是如果是最后一题就自己提交
|
for (let i = 0; i < _this.answer.answerItems.length; i++) {
|
if (!_this.isContentNotEmpty(i)) {
|
break
|
}
|
if (i === _this.answer.answerItems.length - 1 && _this.order !== _this.answer.answerItems.length - 1) {
|
_this.submitForm()
|
return
|
}
|
}
|
this.answer.answerItems[_this.order].readOnly = true
|
let answerSubmit = _this.getSubmitAnswerValue(nowPartOrder)
|
// 已经答到了最后一题了,不用自动跳到下一题
|
if (this.order + 1 > this.problemLength) {
|
this.submitDisable = false
|
return
|
}
|
// 如果是最后一题就上面提交了，不会走到这里
|
let loading = null
|
if (this.isNextShowGuide(nowPartOrder)) {
|
this.catThaiSubmit(answerSubmit)
|
loading = _this.$loading({
|
lock: false,
|
text: _this.$t('nextPartInfo'),
|
spinner: 'el-icon-loading'
|
})
|
}
|
examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
|
if (_this.isNotEmpty(loading)) {
|
loading.close()
|
}
|
if (re.code !== 1) {
|
_this.$message.error(re.message)
|
throw (re.message)
|
}
|
|
// 展示指导语
|
if (this.isNextShowGuide(nowPartOrder)) {
|
// 展示指导语
|
_this.showNextGuide(re.response.signalObject, true)
|
} else {
|
this.nextQuestionOrder(nowPartOrder)
|
}
|
}).catch(e => {
|
if (_this.isNotEmpty(loading)) {
|
loading.close()
|
}
|
_this.reloadPage(e)
|
})
|
},
|
getSubmitAnswerValue (nowPartOrder) {
|
let _this = this
|
let answerSubmit = JSON.parse(JSON.stringify(_this.answer))
|
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, answer: answerItem.content }
|
})
|
answerSubmit.langType = _this.langType
|
answerSubmit.isCallTain = _this.isCallTain
|
answerSubmit.partOrder = nowPartOrder
|
answerSubmit.itemOrder = _this.itemOrder
|
return answerSubmit
|
},
|
preSubject () {
|
let _this = this
|
_this.isShowGuide(false)
|
if (_this.order > 0) {
|
// 清空本题的选择
|
_this.answer.answerItems[_this.order].content = null
|
_this.answer.answerItems[_this.order].completed = false
|
_this.answer.answerItems[_this.order].questionReport = null
|
_this.answer.answerItems[_this.order].readOnly = false
|
|
// 设置回到上一题
|
let num = --_this.order
|
_this.itemOrder = _this.form.titleItems[0].questionItems[num].itemOrder
|
_this.questionItem = _this.form.titleItems[0].questionItems[num]
|
_this.partOrder = _this.questionItem.partOrder
|
_this.preDisable = false
|
_this.nextDisable = true
|
_this.answer.answerItems[_this.order].readOnly = false
|
}
|
},
|
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
|
// 有未完成的答题应该是 2答题中
|
// 之前是0未处理
|
_this.answer.finish = 2
|
}
|
}
|
if (unFinish) {
|
// 直接停留在没有打完的题目
|
for (let i = 0; i < _this.answer.answerItems.length; i++) {
|
if (!_this.isContentNotEmpty(i)) {
|
_this.questionItem = _this.form.titleItems[0].questionItems[i]
|
_this.partOrder = _this.questionItem.partOrder
|
_this.itemOrder = _this.form.titleItems[0].questionItems[i].itemOrder
|
_this.order = i
|
_this.preDisable = true
|
break
|
}
|
_this.formLoading = false
|
_this.submitDisable = false
|
}
|
} else {
|
_this.answer.verifyStatus = 1
|
_this.answer.finish = 1
|
if (this.form) {
|
let productType = this.form.productType
|
if (productType === 'API_Fan') {
|
_this.submitAnswer(_this.$t('finishPersonalityInfo_apifan'))
|
} else {
|
_this.submitAnswer(_this.$t('finishPersonalityInfo'))
|
}
|
} else {
|
_this.submitAnswer(_this.$t('finishPersonalityInfo'))
|
}
|
}
|
},
|
startDo: function () {
|
let _this = this
|
_this.guide = false
|
_this.isCallTain = ''
|
},
|
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(_this.partOrder)
|
_this.catThaiSubmit(answerSubmit)
|
let loading = _this.$loading({
|
lock: false,
|
text: _this.$t('uploadInfo'),
|
spinner: 'el-icon-loading'
|
})
|
examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => {
|
loading.close()
|
if (re.code === 1) {
|
// 特殊处理 LAQ测试包 MAQ+CAQ
|
if (_this.form.name.indexOf('LAQ') !== -1) {
|
console.log('答完题,看看要不要去CAQ1')
|
examPaperApi.select(_this.memberToken, _this.langType).then(re => {
|
_this.form = re.response
|
_this.$router.push({ path: '/guide/index', query: { formDo: _this.form } })
|
}).catch(e => {
|
_this.$message.error(_this.$t('noquestionMsg'))
|
})
|
} else {
|
_this.$router.push({ path: '/exam/finish', query: { name: _this.form.name, content: mess, tokenId: _this.memberToken } })
|
}
|
} else {
|
_this.$message.error(re.message + '/exam/finish')
|
}
|
_this.formLoading = false
|
}).catch(e => {
|
_this.reloadPage(e)
|
loading.close()
|
})
|
},
|
showNextGuide: function (signalObject, nextQuestion) {
|
let _this = this
|
_this.guideDescirption = signalObject.signalDescription
|
if (_this.guideDescirption !== null && _this.guideDescirption !== undefined && _this.guideDescirption !== '') {
|
_this.isShowGuide(true)
|
_this.preDisable = false
|
} else {
|
throw (signalObject.message)
|
}
|
if (Object.keys(_this.guideDescirption).length === 0) {
|
_this.isShowGuide(false)
|
_this.preDisable = false
|
}
|
_this.startDoDisable = false
|
if (!nextQuestion) {
|
return
|
}
|
_this.nextQuestionOrder()
|
},
|
isNull: function (obj) {
|
return obj === null || obj === undefined
|
},
|
isShowGuide (flag) {
|
let _this = this
|
_this.guide = flag
|
// _this.isCallTain = flag ? 'callTain' : ''
|
},
|
reloadPage (e) {
|
let _this = this
|
let mes = ''
|
if (e.message !== null && e.message !== undefined && e.message.indexOf('timeout') !== -1) {
|
mes = _this.$t('submitTimeout') + ',' + 'order:' + _this.order + ',' + e.message// 提交后台超时
|
} else {
|
mes = JSON.stringify(e) + ',' + 'order:' + _this.order + ',' + e.message
|
}
|
// 调试用
|
// _this.$router.push({ path: '/exam/exception', query: { name: _this.form.name, content: _this.$t('submitExceptionInfo') + '<br>' + mes } })
|
_this.$router.push({ path: '/exam/exception', query: { name: _this.form.name, content: _this.$t('submitExceptionInfo') } })
|
_this.formLoading = false
|
_this.submitDisable = false
|
},
|
isForFinish (i) {
|
return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this.answer.answerItems[i].content !== '')
|
},
|
isDiffPartOrder: function () {
|
let _this = this
|
return _this.form.titleItems[0].questionItems[_this.order].partOrder !== _this.form.titleItems[0].questionItems[_this.order - 1].partOrder
|
},
|
...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 }),
|
...mapState('exam', { doUrl: state => state.doUrl })
|
}
|
}
|
</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>
|
