看图说话增加小题序号

src/views/exercise_questions/create/components/exercises/TalkPictureQuestion.vue

@@ -14,6 +14,9 @@
       <div class="content">
         <div v-for="(item, index) in data.option_list" :key="index" class="content-item">
           <template v-if="pic_list[item.picture_file_id]">
+            <span class="question-number" title="双击切换序号类型" @dblclick="changeOptionType(data)">
+              {{ computedQuestionNumber(index, data.option_number_show_mode) }}
+            </span>
             <div class="item-left">
               <el-image
                 style="width: 72px; height: 72px"
@@ -115,6 +118,7 @@ import QuestionMixin from '../common/QuestionMixin.js';
 import { talkPictrueData, getOption } from '@/views/exercise_questions/data/talkPicture';
 import { GetFileStoreInfo } from '@/api/app';
 import UploadDrag from '../common/UploadDrag.vue';
+import { changeOptionType } from '@/views/exercise_questions/data/common';
 
 export default {
   name: 'TalkPicture',
@@ -122,6 +126,7 @@ export default {
   mixins: [QuestionMixin],
   data() {
     return {
+      changeOptionType,
       data: JSON.parse(JSON.stringify(talkPictrueData)),
       pic_list: {},
       is_first: true,
@@ -261,5 +266,16 @@ export default {
       }
     }
   }
+
+  .question-number {
+    min-width: 40px;
+    height: 32px;
+    padding: 4px 0;
+    color: $text-color;
+    text-align: center;
+    cursor: default;
+    background-color: $fill-color;
+    border-radius: 2px;
+  }
 }
 </style>

src/views/exercise_questions/preview/TalkPictruePreview.vue

@@ -18,14 +18,22 @@
           :src="pic_list[item.picture_file_id]"
           fit="cover"
         />
-        <p class="pic-info rich-text" v-html="sanitizeHTML(item.picture_info)"></p>
-        <!-- 语音作答 -->
-        <div v-if="isEnable(data.property.is_enable_voice_answer) && answer.answer_list[index]" class="sound-box">
-          <SoundRecordPreview
-            :disabled="disabled"
-            :wav-blob.sync="answer.answer_list[index].audio_file_id"
-            type="small"
-          />
+        <div class="content-box" v-if="item.picture_info">
+          <span class="option-number">{{ computeOptionMethods[data.option_number_show_mode](index) }} </span>
+          <p class="pic-info rich-text" v-html="sanitizeHTML(item.picture_info)"></p>
+        </div>
+        <div class="content-box" style="align-items: center">
+          <span class="option-number" v-if="!item.picture_info"
+            >{{ computeOptionMethods[data.option_number_show_mode](index) }}
+          </span>
+          <!-- 语音作答 -->
+          <div v-if="isEnable(data.property.is_enable_voice_answer) && answer.answer_list[index]" class="sound-box">
+            <SoundRecordPreview
+              :disabled="disabled"
+              :wav-blob.sync="answer.answer_list[index].audio_file_id"
+              type="small"
+            />
+          </div>
         </div>
 
         <div v-if="isEnable(data.property.is_enable_reference_answer) && isShowRightAnswer" class="reference-box">
@@ -41,6 +49,7 @@
 import PreviewMixin from './components/PreviewMixin';
 import { GetFileStoreInfo } from '@/api/app';
 import SoundRecordPreview from './components/common/SoundRecordPreview.vue';
+import { computeOptionMethods } from '@/views/exercise_questions/data/common';
 
 export default {
   name: 'TalkPictruePreview',
@@ -50,6 +59,7 @@ export default {
   mixins: [PreviewMixin],
   data() {
     return {
+      computeOptionMethods,
       pic_list: {},
       active_index: 0,
     };
@@ -162,9 +172,19 @@ export default {
   .sound-box {
     width: max-content;
     padding: 4px;
-    margin-top: 8px;
     background: $content-color;
     border-radius: 40px;
   }
+
+  .content-box {
+    display: flex;
+    margin-top: 8px;
+
+    .option-number {
+      margin-right: 8px;
+      font-size: 16px;
+      line-height: 20px;
+    }
+  }
 }
 </style>