优化

84702473

2023-03-07 c4ae31671404ac52c0c9316a97de2bfa72fadbaa

 src/views/exam/paper/values.vue

@@ -14,12 +14,23 @@
                  {{$t('next')}}</el-button>
            </div>
            <div class="mullinediv" v-if="step1Start">
               <div v-for="question in questionItems" class="mullinediv-item" v-if="isNull(question.analyze)">
                  <el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
                  <div style="display: flex; justify-content: space-between;padding: 5px 10px;margin-top: -5px;">
                     <i class="el-icon-success" @click="likeMe(question.id)"></i>
                     <i class="el-icon-question" @click="iAmNotSure(question.id)"></i>
                     <i class="el-icon-error" @click="unLikeMe(question.id)"></i>
               <div v-for="(question,index1) in questionItems" class="mullinediv-item" v-if="isNull(question.analyze)">
                  <div style="display: flex; justify-content: flex-end;margin-right: -20px;">
                     <el-image
                           class="tools-button"
                           :src="require('@/assets/exam-paper/scale.png')" @click="previewImg('qImg'+question.id,question.id)"></el-image>
                  </div>
                  <el-image :ref="'qImg'+question.id" :src="question.imgUrl" lazy :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/nogood.png')" @click="unLikeMe(question.id)"></el-image>
                     <el-image
                              class="tools-button"
                              :src="require('@/assets/exam-paper/question.png')" @click="iAmNotSure(question.id)"></el-image>
                     <el-image
                           class="tools-button"
                           :src="require('@/assets/exam-paper/good.png')" @click="likeMe(question.id)"></el-image>
                  </div>
               </div>
            </div>
@@ -30,7 +41,7 @@
            <div>
               <div class="tag-group">
                  <span class="tag-group__title"
                     style="padding-right: 20px;">{{$t('values_cur_step')}}（{{step2SubStep}} /
                     style="padding-right: 20px;font-size: 26px;">{{$t('values_cur_step')}}（{{step2SubStep}} /
                     {{step2ScoreRanges.length}})</span>
                  <el-tag v-for="item in step2ScoreRanges" :key="item.itemOrder"
                     :type="getStep2StepTagType(item.step)" style="margin: 0 2px;font-size: 26px;" size="large"
@@ -59,14 +70,16 @@
                     / {{getStep2StepItem(step2SubStep).quantity}}</span> </el-divider>
               <div style="">
                  <div class="inlinediv">
                     <div v-for="question in questionItems" class="mullinediv-item"
                     <div v-for="(question,index2) in questionItems" class="mullinediv-item"
                        v-if="getStep2StepItem(step2SubStep).itemOrder == question.subjectId">
                        <el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
                        <div style="display: flex;justify-content: center;padding: 5px 10px;">
                           <!--/*background-color: #c8c3c3;*/-->
                           <i class="el-icon-delete"
                              @click="step2Delete(question.id,getStep2StepItem(step2SubStep).itemOrder)"></i>
                           <!-- <i class="el-icon-zoom-in"></i> -->
                        <el-image :ref="'q2SelectImg'+question.id" :src="question.imgUrl" lazy :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)"></el-image>
                           <el-image
                                 class="tools-button"
                                 :src="require('@/assets/exam-paper/scale.png')" @click="previewImg('q2SelectImg'+question.id)"></el-image>
                        </div>
                     </div>
                  </div>
@@ -74,19 +87,20 @@
                  <el-divider content-position="left">{{$t('values_select_tips')}}</el-divider>
                  <div style="height: auto;overflow: auto;">
                     <div class="mullinediv" style="" v-if="questionItems && questionItems.length>0">
                        <div v-for="question in questionItems" class="mullinediv-item"
                        <div v-for="(question,index3) in questionItems" class="mullinediv-item"
                           v-if="isNull(question.subjectId)">
                           <el-image :src="question.imgUrl" lazy :preview-src-list="[question.imgUrl]"></el-image>
                           <div style="display: flex; justify-content: center;padding: 5px 10px;margin-top: -5px;">
                              <el-checkbox
                                 @change="checked=>step2Add(checked,question.id,getStep2StepItem(step2SubStep).itemOrder)">
                                 {{$t('values_select')}}</el-checkbox>
                              <!-- <i class="el-icon-check"></i> -->
                              <!-- <i class="el-icon-zoom-in"></i> -->
                           <el-image :ref="'q2Img'+question.id" :src="question.imgUrl" lazy :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/yes.png')" @click="step2Add(question.id,getStep2StepItem(step2SubStep).itemOrder)"></el-image>
                              <el-image
                                    class="tools-button"
                                    :src="require('@/assets/exam-paper/scale.png')" @click="previewImg('q2Img'+question.id)"></el-image>
                           </div>
                        </div>
                     </div>
                     <div class="mullinediv" style="" v-if="sumUnSelectedNum()<=0">
                     <div class="mullinediv" style="" v-if="sumStep2UnSelectedNum()<=0">
                        {{$t('values_no_select')}}
                     </div>
                  </div>
@@ -95,6 +109,10 @@
      </el-container>
      <el-container class="app-item-contain step3" v-if="step === 'step3'">
         <el-main class="">
            <div style="display: flex;justify-content: flex-end;">
               <el-button style="margin-top: 12px;" @click="step3_commit" :disabled="submitDisable">
                  {{$t('commit')}}</el-button>
            </div>
            <div style="display:flex;">
               <div style="display: inline-block;min-width: 110px;text-align: right;">
                  <div class="mul-inlinediv-row mul-inlinediv-lineheight"
@@ -123,10 +141,7 @@
                  </div>
               </div>
            </div>
            <div style="display: flex;justify-content: center;">
               <el-button style="margin-top: 12px;" @click="step3_commit" :disabled="submitDisable">
                  {{$t('commit')}}</el-button>
            </div>
				
         </el-main>
      </el-container>
      <el-row class="do-exam-title footer">
@@ -542,6 +557,12 @@
            //console.log('step1_start...',this.questionItems)
         },
         step1_next() {
            let _this = this
            let c = this.sumStep1UnSelectedNum()
            if(c > 0){
               this.$message.error(_this.$t('values_nextStepTips_choices_all'))
               return
            }
            this.step = "step2"
            this.sortQuestions()
            this.caculateScoreRangeSelectedById(this.getStep2StepItem(this.step2SubStep).itemOrder)
@@ -554,7 +575,7 @@
         step2_next() {
            let _this = this
            let stepItem = this.getStep2StepItem(this.step2SubStep)
            if (stepItem.selected == stepItem.quantity || this.sumUnSelectedNum() == 0) {
            if (stepItem.selected == stepItem.quantity || this.sumStep2UnSelectedNum() == 0) {
               _this.answer.verifyStatus = 2
               _this.submitSubAnswer()

@@ -581,7 +602,7 @@
            this.resetQuestionItemsValueById(qid, "subjectId", null) //借用subjectId，存储
            this.caculateScoreRangeSelectedById(sid, -1)
         },
         step2Add(value, qid, sid) {
         step2Add(qid, sid) {
            //console.log("step2Add....",value,qid,sid)
            this.resetQuestionItemsValueById(qid, "subjectId", sid) //借用subjectId，存储
            this.caculateScoreRangeSelectedById(sid, 1)
@@ -612,10 +633,19 @@
               }
            }
         },
         sumUnSelectedNum() {
         sumStep2UnSelectedNum() {
            let count = 0
            for (let item of this.questionItems) {
               if (this.isNull(item['subjectId'])) {
                  count = count + 1
               }
            }
            return count
         },
         sumStep1UnSelectedNum() {
            let count = 0
            for (let item of this.questionItems) {
               if (this.isNull(item['analyze'])) {
                  count = count + 1
               }
            }
@@ -719,6 +749,11 @@
            }
            //console.log('resetQuestionItems...',id,key,value,this.questionItems)
         },
         /**
          * 计算步骤id的已选择数量
          * @param {Object} id
          * @param {Object} value
          */
         caculateScoreRangeSelectedById(id, value) {
            let sum = 0
            for (let item of this.questionItems) {
@@ -1421,6 +1456,9 @@
            return _this.form.titleItems[0].questionItems[_this.order].partOrder !== _this.form.titleItems[0]
               .questionItems[_this.order - 1].partOrder
         },
         previewImg(refName){
            this.$refs[refName][0].showViewer = true
         },
         ...mapMutations('user', ['setMemberTocken']),
         ...mapMutations('user', ['setLangType']),
         ...mapMutations('user', ['setLangFlag'])
@@ -1467,7 +1505,7 @@
      overflow-y: hidden;
      overflow-x: auto;
      white-space: nowrap;
      border: 1px solid gray;
      //border: 1px solid gray;
      padding: 10px 0;
      width: fit-content;
   }
@@ -1493,14 +1531,14 @@
      overflow-y: hidden;
      overflow-x: auto;
      white-space: nowrap;
      min-height: 180px;
      min-height: 360px;
      display: flex;
   }

   .inlinediv div {
      display: inline-table;
      vertical-align: top;
      width: 100px;
      //width: 360px;
      margin: auto 2px;
   }

@@ -1510,21 +1548,26 @@

   .mullinediv-item {
      display: flex;
      display:
         inline-block;
      width: 180px;
      display:inline-block;
      width: 360px;
      margin: 5px 4px;
      padding: 10px 30px;
      box-shadow: 1px 1px 1px grey, 0 0 5px grey, 0 0 10px grey;
		
      .tools-button {
         width: 20px; height: 20px;cursor: pointer;
      }
   }

   .mullinediv-item:hover {}

   img:hover {
      transform: scale(2);
      -ms-transform: scale(2);
      -webkit-transform: scale(2);
      -o-transform: scale(2);
      -moz-transform: scale(2);
      transition-duration: 0.5s;
      // transform: scale(2);
      // -ms-transform: scale(2);
      // -webkit-transform: scale(2);
      // -o-transform: scale(2);
      // -moz-transform: scale(2);
      // transition-duration: 0.5s;
   }

   .container {