理论考试填空题小空自适应及简答题修复

src/pages/match/theoryExam/index.vue

@@ -80,7 +80,7 @@
                   <span class="label">{{ j + 1 }} / {{ item.questionNum }}</span>
                   <span class="label">{{ item.questionTypeName }}</span>
                 </div>
-                <div class="stem html-parse" :id="'stem' + ques.id" v-html="getQuesStem(ques)"></div>
+                <div class="stem html-parse" :id="'stem' + ques.id" v-html="ques.stem"></div>
                 <p>（{{ ques.score }}分）</p>
                 <img class="tag" :src="require('@/assets/img/' + (ques.sign ? 'tag-active' : 'tag') + '.svg')" alt=""
                   @click="ques.sign = ques.sign ? 0 : 1">
@@ -191,6 +191,7 @@ export default {
       submiting: false,
       submited: false,
       warned: 0,
+      quesWrapWidth: 0,
     };
   },
   mounted () {
@@ -277,6 +278,7 @@ export default {
                 if (answerData) answerData = JSON.parse(answerData)
                 n.answered = n.fills && answerData && answerData.length === n.fills.filter(m => m).length ? 1 : 0
                 n.partAnswer = n.fills && answerData && answerData.length !== n.fills.filter(m => m).length ? 1 : 0
+                n.stem = this.getQuesStem(n)
               } else if (type === 'essay') { // 简答题
                 n.answer = type === 'essay' && curQues ? curQues.answerContent : ''
                 n.attachmentName = curQues ? curQues.attachmentName : ''
@@ -298,6 +300,7 @@ export default {
 
           // 给填空题的每个空监听input事件，用以显示已作答状态
           this.$nextTick(() => {
+            const w = document.querySelector('#quesWrap').clientWidth - 200
             paper.map(e => {
               e.examQuestions.map(n => {
                 if (e.questionType === 'fill_blank') {
@@ -308,11 +311,26 @@ export default {
                       for (const e of inputs) {
                         e.addEventListener('input', () => {
                           const answers = []
+                          let hasFillLen = 0
+                          let text = e.innerText
                           for (const e of inputs) {
-                            e.value && answers.push(e.value)
+                            const val = e.innerText
+                            if (val) hasFillLen++
+                            answers.push(val)
                           }
-                          n.answered = answers.length === inputs.length ? 1 : 0
-                          n.partAnswer = answers.length && answers.length !== inputs.length ? 1 : 0
+                          n.fills = answers
+                          n.answered = hasFillLen === inputs.length ? 1 : 0
+                          n.partAnswer = hasFillLen && hasFillLen !== inputs.length ? 1 : 0
+
+                          text = text.trim()
+
+                          // // 调整宽度
+                          e.style.width = Math.min(w, text.length * 14) + 'px'; // 每个字符大约占7像素
+
+                          // // 调整高度
+                          const lineHeight = 28; // 每行高度
+                          const lineCount = text.split('\n').length;
+                          e.style.height = Math.max(lineCount * lineHeight, 28) + 'px';
                         })
                       }
                     }
@@ -322,7 +340,6 @@ export default {
             })
             this.calcProgress()
           })
-          console.log("🚀 ~ getPaper ~ r:", r)
         }
       } catch (e) {
         this.loading = false
@@ -432,7 +449,7 @@ export default {
         let result = stem
 
         while ((match = regex.exec(stem)) !== null) {
-          const newInput = `<input type="text" class="fill-input" value="${fills && fills.length ? fills[index] : ''}">`
+          const newInput = `<span contenteditable placeholder="(${index + 1})" class="fill-input">${fills && fills.length ? fills[index] : ''}</span>`
           result = result.replace(match[0], newInput)
           index++
         }
@@ -461,7 +478,9 @@ export default {
     essayAnswerReady (editor, ques) {
       editor.ques = ques
       editor.addListener('contentChange', () => {
-        ques.answered = editor.hasContents() ? 1 : 0
+        const content = editor.getContent()
+        ques.answered = content ? 1 : 0
+        ques.answers = content
         this.calcProgress()
       })
       ques.answer && editor.setContent(ques.answer)
@@ -521,19 +540,9 @@ export default {
             if (type !== 'fill_blank' && type !== 'essay') { // 选择题
               answer = n.questionAnswerVersionsList.filter(m => m.answer).map(m => m.optionNumber)
             } else if (type === 'essay') { // 简答题
-              const editor = this.$refs['essayAnswer' + n.id]
-              // console.log("🚀 ~ submit ~ editor:", n.id, editor, this.$refs)
-              if (editor && editor.length) answerContent = editor[0].getUEContent()
+              if (n.answers) answerContent = n.answers
             } else { // 填空题
-              const stem = document.querySelector(`#stem` + n.id)
-              if (stem) {
-                const inputs = stem.querySelectorAll('.fill-input')
-                if (inputs) {
-                  for (const e of inputs) {
-                    e.value && answer.push(e.value)
-                  }
-                }
-              }
+              answer = n.fills || []
             }
             ques.push({
               answer,
@@ -852,19 +861,40 @@ export default {
     }
 
     .fill-input {
-      width: 200px;
+      position: relative;
+      display: inline;
+      min-width: 50px;
       height: 28px;
-      padding: 0 15px;
+      padding: 0 3px;
       margin: 0 10px;
       font-size: 13px;
       line-height: 28px;
-      color: #606266;
-      border: 1px solid #DCDEE0;
-      border-radius: 2px;
+      color: #0818eb;
+      border: 0;
+      border-bottom: 1px solid #DCDEE0;
+      outline: none;
+
+      &:empty {
+        display: inline-block;
+        width: 3em;
+
+        &:after {
+          content: attr(placeholder);
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          font-size: 14px;
+          color: #226fff;
+          transform: translate(-50%, -50%);
+        }
 
-      &:focus {
-        outline: none;
+        &:focus {
+          &:after {
+            opacity: 0;
+          }
+        }
       }
+
     }
 
     .opt {