From de761e39a25368312999fa7a0be13a7f9cff9e34 Mon Sep 17 00:00:00 2001 From: linzhijie <1003392067@qq.com> Date: 星期四, 13 四月 2023 17:39:30 +0800 Subject: [PATCH] 新增CIAQ模板 --- src/views/exam/paper/career_interests.vue | 547 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/router.js | 36 ++- 2 files changed, 571 insertions(+), 12 deletions(-) diff --git a/src/router.js b/src/router.js index 7d65a90..7e01cfd 100644 --- a/src/router.js +++ b/src/router.js @@ -119,18 +119,30 @@ } ] }, - { - path: '/exam', - component: Layout, - children: [ - { - path: 'values', - component: () => import('@/views/exam/paper/values'), - name: 'ExamPaperValues', - meta: { title: 'values' } - } - ] - } + { + path: '/exam', + component: Layout, + children: [ + { + path: 'values', + component: () => import('@/views/exam/paper/values'), + name: 'ExamPaperValues', + meta: { title: 'values' } + } + ] + }, + { + path: '/exam', + component: Layout, + children: [ + { + path: 'career_interests', + component: () => import('@/views/exam/paper/career_interests'), + name: 'ExamPaperCareerInterests', + meta: { title: 'career_interests' } + } + ] + } ] }) diff --git a/src/views/exam/paper/career_interests.vue b/src/views/exam/paper/career_interests.vue new file mode 100644 index 0000000..56970ce --- /dev/null +++ b/src/views/exam/paper/career_interests.vue @@ -0,0 +1,547 @@ +<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) + }, + 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 + } + examPaperAnswerApi.answerSubmit(answerSubmit, _this.memberToken).then(re => { + 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 => { + _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) { + 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 + _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) { + _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> -- Gitblit v1.9.1