[测评系统]--前端(用户答题页面)
84702473
2023-03-13 0733a5e2d4a3785722b62aa2ef6b610b65dd83f9
src/views/exam/paper/values.vue
@@ -18,7 +18,7 @@
            <div class="mullinediv" v-if="step1Start">
               <div v-for="(question,index1) in questionItems" class="mullinediv-item"
                  v-if="isNull(question.content)">
                  <div style="display: flex; justify-content: flex-end;margin-right: -20px;">
                  <div style="display: flex; justify-content: flex-end;margin-right: -20px;margin-top: -10px;">
                     <el-image class="tools-button" :src="require('@/assets/exam-paper/scale.png')"
                        @click="previewImg('qImg'+question.id,question.id)"></el-image>
                  </div>
@@ -74,8 +74,7 @@
                  <div class="inlinediv">
                     <div v-for="(question,index2) in questionItems" class="mullinediv-item"
                        v-if="getStep2StepItem(step2SubStep).itemOrder == question.subjectId">
                        <el-image :ref="'q2SelectImg'+question.id" :src="question.imgUrl" lazy
                           :preview-src-list="[question.imgUrl]"></el-image>
                        <el-image :ref="'q2SelectImg'+question.id" :src="question.imgUrl" :preview-src-list="[question.imgUrl]"></el-image>
                        <div style="display: flex; justify-content: space-between;">
                           <el-image class="tools-button" :src="require('@/assets/exam-paper/no.png')"
                              @click="step2Delete(question.id,getStep2StepItem(step2SubStep).itemOrder)">
@@ -116,11 +115,12 @@
                  <div style="padding: 0 10px;">{{$t('values_pic_tmpArea')}}</div>
                  <draggable animation="300" class="pic-tmparea-div"
                     style="background-color: #f5f7fa;border: 1px solid gray;padding: 10px;width: 50%;"
                     :list="step3EWEIArea[0]" group="article" @start="step3TmpAreaStart"
                     @end="step3MoveFromTmpAreaEnd">
                     :list="step3EWEIArea[0]" :options="{group:{name:'EWEIArea',pull:'clone'}}"
                     @start="ev=>step3TmpAreaStart(ev,0)"
                     @end="step3TmpAreaMoveEnd">
                     <div v-for="q in step3EWEIArea[0]" :key="q.id" class="mullinediv-item2"
                        :qId="q.id">
                        <el-image :src="q.imgUrl" lazy :preview-src-list="[q.imgUrl]" fit="fill"></el-image>
                        :questionID="q.id" :questionIMGURL="q.imgUrl">
                        <el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" fit="fill"></el-image>
                     </div>
                  </draggable>
                  <el-button type="primary" round style="height: fit-content;margin: 0 10px;"
@@ -141,19 +141,21 @@
                  <div class="mul-inlinediv" v-for="item in step2ScoreRanges">
                     <div class="mul-inlinediv-row">
                        <draggable animation="300" :class="item.itemOrder"
                        <draggable animation="300" classa="pic-eweiarea-div" :class="'pic-eweiarea-div-'+item.itemOrder"
                           :list="step3EWEIArea[item.itemOrder]"
                           :options="{group:{name:'article'}}" filter=".undraggable"
                           @end="step3MoveToTmpAreaEnd" :scoreRangeId="item.itemOrder">
                           :options="{group:{name:'EWEIArea',pull:'clone'}}" filter=".undraggable"
                           @end="ev=>step3EWEIAreaMoveEnd(ev,item.itemOrder)" :scoreRangeId="item.itemOrder">
                           <div v-for="q in step3EWEIArea[item.itemOrder]" :key="q.id"
                              class="mul-inlinediv-item" :qId="q.id">
                              <el-image :src="q.imgUrl" lazy :preview-src-list="[q.imgUrl]" v-if="q.imgUrl">
                              class="mul-inlinediv-item" :questionID="q.id" :questionIMGURL="q.imgUrl">
                              <el-image :src="q.imgUrl" :preview-src-list="[q.imgUrl]" v-if="q.imgUrl">
                              </el-image>
                           </div>
                           <div v-if="item.quantity >= step3EWEIArea[item.itemOrder].length">
                           <div class="mul-inlinediv-item"
                              v-for="c in (item.quantity - step3EWEIArea[item.itemOrder].length)">
                              <el-image :src="require('@/assets/exam-paper/none.png')" class="undraggable">
                              </el-image>
                           </div>
                           </div>
                        </draggable>
                     </div>
@@ -692,27 +694,65 @@
            }
            console.log('buildStep3EWEIArea', this.step3EWEIArea)
         },
         step3TmpAreaStart(ev) {
            //console.log('step3TmpAreaStart', ev)
         addStep3EWEIArea(index,question){
            //console.log('addStep3EWEIArea',index,question)
            this.step3EWEIArea[index].push(question)
            this.$set(this.step3EWEIArea, index, this.step3EWEIArea[index])
         },
         step3MoveFromTmpAreaEnd(ev) {
            //console.log('step3MoveFromTmpAreaEnd s', ev, ev.to)
            // let options,qId
            // qId = ev.item.attributes.qId.value
            // for(let p of ev.to){
            //    if(this.isNotEmpty(p['options'])) {
            //       options = p['options']
            //       break
            //    }
            // }
            // let scoreRangeId = options.scoreRangeId
         delStep3EWEIArea(index,question){
            //console.log('delStep3EWEIArea s',index,question,this.step3EWEIArea[index])
            for(let i=0;i<this.step3EWEIArea[index].length;i++){
               if(question.id == this.step3EWEIArea[index][i].id){
                  this.step3EWEIArea[index].splice(i,1)
               }
            }
            this.$set(this.step3EWEIArea, index, this.step3EWEIArea[index])
            //console.log('delStep3EWEIArea e',this.step3EWEIArea[index])
         },
         hasStep3EWEIAreaOverflow(index,question){
            //console.log('hasStep3EWEIAreaOverflow e',this.step3EWEIArea[index])
            if(this.step3EWEIArea[index].length>this.step2ScoreRanges[index-1].quantity){
               return true
            }
            return false
         },
         step3MoveToTmpAreaEnd(ev) {
            //console.log('step3MoveToTmpAreaEnd')
            //let qId = ev.item.attributes.qId.value
            //console.log('step3MoveToTmpAreaEnd end', this.step3EWEIArea)
         step3TmpAreaStart(ev,i) {
            console.log('step3TmpAreaStart', ev,i)
         },
         step3TmpAreaMoveAdd(ev) {
            console.log('step3TmpAreaMoveAdd', ev)
            return false
         },
         step3TmpAreaMoveEnd(ev) {
            console.log('step3TmpAreaMoveEnd s', ev)
            console.log('step3TmpAreaMoveEnd from,to', ev.from.className,ev.to.className)
            let to = ev.to.className.replace("pic-eweiarea-div-","")
            let qId = ev.item.attributes.questionID.value
            let qImg = ev.item.attributes.questionIMGURL.value
            if("pic-tmparea-div"===ev.to.className){
               //this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
            } else {
               let of = this.hasStep3EWEIAreaOverflow(to,{'id':qId,'imgUrl':qImg})
               if(of){
                  this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
               } else {
                  this.delStep3EWEIArea(0,{'id':qId,'imgUrl':qImg})
               }
            }
         },
         step3EWEIAreaMoveEnd(ev,fid) {
            console.log('step3EWEIAreaMoveEnd',ev)
            console.log('step3EWEIAreaMoveEnd from,to,id', ev.from.className,ev.to.className,fid)
            let to = ev.to.className.replace("pic-eweiarea-div-","")
            let qId = ev.item.attributes.questionID.value
            let qImg = ev.item.attributes.questionIMGURL.value
            if("pic-tmparea-div"===ev.to.className){
               this.delStep3EWEIArea(fid,{'id':qId,'imgUrl':qImg})
            } else {
               if(fid != to) this.delStep3EWEIArea(to,{'id':qId,'imgUrl':qImg})
            }
         },
         sumStep2UnSelectedNum() {
@@ -1013,24 +1053,7 @@
               ++_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
@@ -1154,8 +1177,8 @@
                  answerItem.startTime = ''
               }
               answerItem.completed = true
               answerItem.content = this.getContentByQuestionId(answerItem
                  .questionId) //this.getLikeTypeByScoreRangeItemOrder(answerItem.subjectId)
               answerItem.content = this.getContentByQuestionId(answerItem.questionId)
                  //this.getLikeTypeByScoreRangeItemOrder(answerItem.subjectId)
               answerItem.questionReport = {
                  questionOrder: answerItem.questionId,
                  questionTitle: answerItem.title,
@@ -1173,7 +1196,7 @@
            answerSubmit.partOrder = nowPartOrder
            answerSubmit.itemOrder = _this.itemOrder
            //add scoreRanges
            if (_this.step2SubStep >= _this.step2ScoreRanges.length) {
            if (_this.step2SubStep >= _this.step2ScoreRanges.length || true) {//传递全部
               answerSubmit['scoreRanges'] = _this.form.titleItems[0].scoreRanges
            } else {
               let item = _this.getStep2StepItem(_this.step2SubStep)
@@ -1204,29 +1227,28 @@
            }
            return answerSubmit
         },
         /*
         * 过程中的提交
         */
         submitSubAnswer: function() {
            console.log('submitSubAnswer...')
            let _this = this
            this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
            //this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
            // 提交部分
            let answerSubmit = _this.getSubmitAnswerValue(_this.partOrder)
            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) {
                  //console.log('answerSubmit...', re)
               }
               _this.formLoading = false
            }).catch(e => {
               _this.reloadPage(e)
               loading.close()
            })
         },
         /**
          * 最后环节的提交
          * @param {Object} mess
          */
         submitAnswer: function(mess) {
            let _this = this
            this.answer.answerItems[_this.order].endTime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
@@ -1293,8 +1315,6 @@
            } 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: {
@@ -1307,8 +1327,7 @@
         },
         isForFinish(i) {
            return false
            return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this
               .answer.answerItems[i].content !== '')
            //return i === this.answer.answerItems.length - 1 && (this.answer.answerItems[i].content !== null && this.answer.answerItems[i].content !== '')
         },
         isDiffPartOrder: function() {
            let _this = this
@@ -1323,7 +1342,6 @@
         ...mapMutations('user', ['setLangFlag'])
      },
      computed: {
         ...mapGetters('enumItem', ['enumFormat']),
         ...mapState('enumItem', {
            doCompletedTag: state => state.exam.question.answer.doCompletedTag
         }),
@@ -1438,8 +1456,8 @@
      display: flex;
      display: inline-block;
      width: 360px;
      margin: 5px 4px;
      padding: 10px 30px;
      margin: 5px 20px 20px 5px;
    padding: 30px 30px 10px 30px;
      box-shadow: 1px 1px 1px grey, 0 0 5px grey, 0 0 10px grey;
      .tools-button {