From 7f4105bc2f1d4f8562e1cb9776ce49f8be0c98d2 Mon Sep 17 00:00:00 2001 From: yj <2077506045@qq.com> Date: 星期二, 03 十二月 2024 13:46:37 +0800 Subject: [PATCH] 更新CAQ优化,适配低分辨率设备 --- src/views/exam/paper/exercise.vue | 166 ++++++++++++++++++++++++------------------------------- 1 files changed, 72 insertions(+), 94 deletions(-) diff --git a/src/views/exam/paper/exercise.vue b/src/views/exam/paper/exercise.vue index 8c70b0b..cb533f3 100644 --- a/src/views/exam/paper/exercise.vue +++ b/src/views/exam/paper/exercise.vue @@ -1,29 +1,26 @@ <template> - <div> - <el-container class="app-item-contain"> -00 <el-main style="padding-top: 3%;"> + <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.note }}</el-row> - <el-row style="margin-left:7px;margin-bottom:10px;">{{ questionItem.guide }}</el-row> + <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[questionItem.itemOrder-1]" :qLabel="itemOrder+'/'+itemSize"/> + :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" v-if="itemOrder > 1"> - <el-button @click="doExam" type="success" round>{{$t('startDo_apifan')}}</el-button> - <el-button @click="preSubject" type="warning" round>{{$t('lastQuestion')}}</el-button> - </el-row> - <el-row class="do-align-center" v-if="itemOrder <= 1"> - <el-button @click="doExam" type="success" round>{{$t('startDo_apifan')}}</el-button> - <el-button @click="nextSubject" type="primary" round>{{$t('nextQuestion')}}</el-button> + <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> @@ -62,121 +59,102 @@ components: { QuestionEdit }, data () { return { - memberName: this.$route.query.formDo.memberName, + // formDo: this.$route.query.formDo, + memberName: '', form: { - name: this.$route.query.formDo.name + name: '' }, itemOrder: 1, - itemSize: 2, - description: '', - guide: '', - questionItem: { - title: '鎴戝杽浜庝富鍔ㄥ拰闄岀敓浜轰氦璋堛��', - items: [ - { content: '闈炲父涓嶅悓鎰�', prefix: '1', score: 0 }, - { content: '涓嶅悓鎰�', prefix: '2', score: 0 }, - { content: '涓嶇‘瀹�', prefix: '3', score: 0 }, - { content: '鍚屾剰', prefix: '4', score: 0 }, - { content: '闈炲父鍚屾剰', prefix: '5', score: 0 } - ], - questionType: 1, - note: '浠ヤ笅涓哄伐浣滆涓�/棰樼洰椋庢牸鐨勪緥瀛�', - guide: '璇蜂粩缁嗛槄璇讳笅闈㈢殑闄堣堪锛屽垽鏂偍鍦ㄥ澶х▼搴︿笂鍚屾剰姣忎竴闄堣堪瀵规偍鐨勬弿杩帮紝鐒跺悗鐐瑰嚮鐩稿簲鐨勯�夐」銆�' - }, + 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: { - questionId: null, - doTime: 0, - answerItems: [], - verifyStatus: 2 + answerItems: [] }, - titleItems: [ - { - questionItems: [ - { - title: '鎴戝杽浜庝富鍔ㄥ拰闄岀敓浜轰氦璋堛��', - items: [ - { content: '闈炲父涓嶅悓鎰�', prefix: '1', score: 0 }, - { content: '涓嶅悓鎰�', prefix: '2', score: 0 }, - { content: '涓嶇‘瀹�', prefix: '3', score: 0 }, - { content: '鍚屾剰', prefix: '4', score: 0 }, - { content: '闈炲父鍚屾剰', prefix: '5', score: 0 } - ], - questionType: 1 - }, - { - title: '浣跨敤澶嶅嵃鏈恒��', - items: [ - { content: '浠庢潵娌℃湁', prefix: '1', score: 0 }, - { content: '1-2娆�', prefix: '2', score: 0 }, - { content: '濂藉嚑娆�', prefix: '3', score: 0 }, - { content: '缁忓父', prefix: '4', score: 0 } - ], - questionType: 1 - } - ] - } - ], - isSubmit: false + 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 () { - if (this.itemOrder === 2) { + 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.questionItem = { - title: '浣跨敤澶嶅嵃鏈恒��', - items: [ - { content: '浠庢潵娌℃湁', prefix: '1', score: 0 }, - { content: '1-2娆�', prefix: '2', score: 0 }, - { content: '濂藉嚑娆�', prefix: '3', score: 0 }, - { content: '缁忓父', prefix: '4', score: 0 } - ], - questionType: 1, - note: '浠ヤ笅涓哄熀鏈妧鑳借繃寰�缁忛獙棰樼洰鐨勪緥瀛�', - guide: '鎮ㄥ湪杩囧幓涓�骞翠腑浣跨敤杩囪繖浜涘熀鏈妧鑳界殑棰戝害锛屽苟鐐瑰嚮鐩稿簲鐨勯�夐」銆�' - + 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 } - this.itemOrder = 2 }, preSubject () { + this.isLast = true this.isSubmit = false - this.questionItem = { - title: '鎴戝杽浜庝富鍔ㄥ拰闄岀敓浜轰氦璋堛��', - items: [ - { content: '闈炲父涓嶅悓鎰�', prefix: '1', score: 0 }, - { content: '涓嶅悓鎰�', prefix: '2', score: 0 }, - { content: '涓嶇‘瀹�', prefix: '3', score: 0 }, - { content: '鍚屾剰', prefix: '4', score: 0 }, - { content: '闈炲父鍚屾剰', prefix: '5', score: 0 } - ], - questionType: 1, - note: '浠ヤ笅涓哄伐浣滆涓�/棰樼洰椋庢牸鐨勪緥瀛�', - guide: '璇蜂粩缁嗛槄璇讳笅闈㈢殑闄堣堪锛屽垽鏂偍鍦ㄥ澶х▼搴︿笂鍚屾剰姣忎竴闄堣堪瀵规偍鐨勬弿杩帮紝鐒跺悗鐐瑰嚮鐩稿簲鐨勯�夐」銆�' - } - this.itemOrder = 1 + 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.$route.query.formDo } }) + _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', { memberToken: state => state.memberToken }), + ...mapState('user', { formDo: state => state.formDo }) } } </script> -- Gitblit v1.9.1