修改问题41

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

@@ -24,19 +24,28 @@
             <el-input
               v-model="item.pinyin"
               :placeholder="'拼音间用空格隔开，如: ni3 hao3'"
+              style="min-width: 240px"
               @blur="handleSplitPy(item)"
               @change="changePinyin(item)"
-              style="min-width: 240px"
             />
-            <UploadAudio
+            <div
               v-if="data.other.audio_generation_method === 'upload'"
-              :key="item.audio_file_id || i"
-              :file-id="item.audio_file_id"
-              :item-index="i"
-              :show-upload="!item.audio_file_id"
-              @upload="uploads"
-              @deleteFile="deleteFiles"
-            />
+              :class="[{ 'upload-audio-play': item.audio_file_id }]"
+            >
+              <div v-if="item.audio_file_id" class="upload-play">
+                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+                <SvgIcon icon-class="delete" @click="deleteAudio(i)" />
+              </div>
+              <UploadAudio
+                v-else
+                :key="item.audio_file_id || i"
+                :file-id="item.audio_file_id"
+                :item-index="i"
+                :show-upload="!item.audio_file_id"
+                @upload="uploads"
+                @deleteFile="deleteFiles"
+              />
+            </div>
             <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
               <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
               <span
@@ -218,6 +227,14 @@ export default {
       this.data.option_list[itemIndex].audio_file_id = '';
       this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
     },
+    /**
+     * 删除音频 id
+     * @param {number} i 选项下标
+     */
+    deleteAudio(i) {
+      this.data.file_id_list.splice(this.data.file_id_list.indexOf(this.data.option_list[i].audio_file_id), 1);
+      this.data.option_list[i].audio_file_id = '';
+    },
     // 删除小题
     deleteOption(i, file_id) {
       this.$confirm('是否删除？', '提示', {
@@ -399,15 +416,8 @@ export default {
       white-space: nowrap;
     }
 
-    .auto-matically {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      width: 233px;
-      padding: 5px 12px;
-      background-color: $fill-color;
-      border-radius: 2px;
-
+    .auto-matically,
+    .upload-audio-play {
       .audio-wrapper {
         margin-right: 12px;
 
@@ -427,6 +437,34 @@ export default {
           height: 16px;
         }
       }
+    }
+
+    .upload-audio-play {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background-color: $fill-color;
+      border-radius: 2px;
+
+      .upload-play {
+        display: flex;
+        column-gap: 8px;
+        align-items: center;
+
+        .svg-icon {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .auto-matically {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      width: 233px;
+      padding: 5px 12px;
+      background-color: $fill-color;
+      border-radius: 2px;
 
       .auto-btn {
         font-size: 14px;

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

@@ -35,15 +35,24 @@
               style="width: 200px"
             />
 
-            <UploadAudio
+            <div
               v-if="data.other.audio_generation_method === 'upload'"
-              :key="item.audio_file_id || i"
-              :file-id="item.audio_file_id"
-              :item-index="i"
-              :show-upload="!item.audio_file_id"
-              @upload="uploads"
-              @deleteFile="deleteFiles"
-            />
+              :class="[{ 'upload-audio-play': item.audio_file_id }]"
+            >
+              <div v-if="item.audio_file_id" class="upload-play">
+                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+                <SvgIcon icon-class="delete" @click="deleteAudio(i)" />
+              </div>
+              <UploadAudio
+                v-else
+                :key="item.audio_file_id || i"
+                :file-id="item.audio_file_id"
+                :item-index="i"
+                :show-upload="!item.audio_file_id"
+                @upload="uploads"
+                @deleteFile="deleteFiles"
+              />
+            </div>
             <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
               <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
               <span
@@ -218,6 +227,14 @@ export default {
       this.data.option_list[itemIndex].audio_file_id = '';
       this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
     },
+    /**
+     * 删除音频 id
+     * @param {number} i 选项下标
+     */
+    deleteAudio(i) {
+      this.data.file_id_list.splice(this.data.file_id_list.indexOf(this.data.option_list[i].audio_file_id), 1);
+      this.data.option_list[i].audio_file_id = '';
+    },
     // 删除小题
     deleteOption(i, file_id) {
       this.$confirm('是否删除？', '提示', {
@@ -386,14 +403,8 @@ export default {
       white-space: nowrap;
     }
 
-    .auto-matically {
-      display: flex;
-      align-items: center;
-      width: 233px;
-      padding: 5px 12px;
-      background-color: $fill-color;
-      border-radius: 2px;
-
+    .auto-matically,
+    .upload-audio-play {
       .audio-wrapper {
         margin-right: 12px;
 
@@ -413,6 +424,33 @@ export default {
           height: 16px;
         }
       }
+    }
+
+    .upload-audio-play {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background-color: $fill-color;
+      border-radius: 2px;
+
+      .upload-play {
+        display: flex;
+        column-gap: 8px;
+        align-items: center;
+
+        .svg-icon {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .auto-matically {
+      display: flex;
+      align-items: center;
+      width: 233px;
+      padding: 5px 12px;
+      background-color: $fill-color;
+      border-radius: 2px;
 
       .auto-btn {
         font-size: 14px;

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

@@ -28,15 +28,24 @@
                 @handleRichTextBlur="handleRichTextBlur"
               />
             </div>
-            <UploadAudio
+            <div
               v-if="data.other.audio_generation_method === 'upload'"
-              :key="item.audio_file_id || i"
-              :file-id="item.audio_file_id"
-              :item-index="i"
-              :show-upload="!item.audio_file_id"
-              @upload="uploads"
-              @deleteFile="deleteFiles"
-            />
+              :class="[{ 'upload-audio-play': item.audio_file_id }]"
+            >
+              <div v-if="item.audio_file_id" class="upload-play">
+                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+                <SvgIcon icon-class="delete" @click="deleteAudio(i)" />
+              </div>
+              <UploadAudio
+                v-else
+                :key="item.audio_file_id || i"
+                :file-id="item.audio_file_id"
+                :item-index="i"
+                :show-upload="!item.audio_file_id"
+                @upload="uploads"
+                @deleteFile="deleteFiles"
+              />
+            </div>
             <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
               <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
               <span
@@ -192,6 +201,14 @@ export default {
       this.data.option_list[itemIndex].audio_file_id = '';
       this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
     },
+    /**
+     * 删除音频 id
+     * @param {number} i 选项下标
+     */
+    deleteAudio(i) {
+      this.data.file_id_list.splice(this.data.file_id_list.indexOf(this.data.option_list[i].audio_file_id), 1);
+      this.data.option_list[i].audio_file_id = '';
+    },
     // 删除小题
     deleteOption(i, file_id) {
       this.$confirm('是否删除？', '提示', {
@@ -310,15 +327,8 @@ export default {
     white-space: nowrap;
   }
 
-  .auto-matically {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    width: 233px;
-    padding: 5px 12px;
-    background-color: $fill-color;
-    border-radius: 2px;
-
+  .auto-matically,
+  .upload-audio-play {
     .audio-wrapper {
       margin-right: 12px;
 
@@ -338,6 +348,34 @@ export default {
         height: 16px;
       }
     }
+  }
+
+  .upload-audio-play {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: $fill-color;
+    border-radius: 2px;
+
+    .upload-play {
+      display: flex;
+      column-gap: 8px;
+      align-items: center;
+
+      .svg-icon {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .auto-matically {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: 233px;
+    padding: 5px 12px;
+    background-color: $fill-color;
+    border-radius: 2px;
 
     .auto-btn {
       font-size: 14px;

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

@@ -39,15 +39,24 @@
                   :placeholder="'拼音间用空格隔开，如: ni3 hao3'"
                   @change="changePinyin(item)"
                 />
-                <UploadAudio
+                <div
                   v-if="data.other.audio_generation_method === 'upload'"
-                  :key="item.audio_file_id || i"
-                  :file-id="item.audio_file_id"
-                  :item-index="i"
-                  :show-upload="!item.audio_file_id"
-                  @upload="uploads"
-                  @deleteFile="deleteFiles"
-                />
+                  :class="[{ 'upload-audio-play': item.audio_file_id }]"
+                >
+                  <div v-if="item.audio_file_id" class="upload-play">
+                    <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+                    <SvgIcon icon-class="delete" @click="deleteAudio(i)" />
+                  </div>
+                  <UploadAudio
+                    v-else
+                    :key="item.audio_file_id || i"
+                    :file-id="item.audio_file_id"
+                    :item-index="i"
+                    :show-upload="!item.audio_file_id"
+                    @upload="uploads"
+                    @deleteFile="deleteFiles"
+                  />
+                </div>
                 <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
                   <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
                   <span
@@ -247,6 +256,14 @@ export default {
       this.data.option_list[itemIndex].audio_file_id = '';
       this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
     },
+    /**
+     * 删除音频 id
+     * @param {number} i 选项下标
+     */
+    deleteAudio(i) {
+      this.data.file_id_list.splice(this.data.file_id_list.indexOf(this.data.option_list[i].audio_file_id), 1);
+      this.data.option_list[i].audio_file_id = '';
+    },
     // 删除小题
     deleteOption(i, file_id, pic_id) {
       this.$confirm('是否删除该条内容？', '提示', {
@@ -520,15 +537,8 @@ export default {
       white-space: nowrap;
     }
 
-    .auto-matically {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      width: 233px;
-      padding: 5px 12px;
-      background-color: $fill-color;
-      border-radius: 2px;
-
+    .auto-matically,
+    .upload-audio-play {
       .audio-wrapper {
         margin-right: 12px;
 
@@ -548,6 +558,34 @@ export default {
           height: 16px;
         }
       }
+    }
+
+    .upload-audio-play {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background-color: $fill-color;
+      border-radius: 2px;
+
+      .upload-play {
+        display: flex;
+        column-gap: 8px;
+        align-items: center;
+
+        .svg-icon {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .auto-matically {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      width: 233px;
+      padding: 5px 12px;
+      background-color: $fill-color;
+      border-radius: 2px;
 
       .auto-btn {
         font-size: 14px;

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

@@ -25,15 +25,24 @@
               @blur="handleSplitPy(item)"
               @change="changePinyin(item)"
             />
-            <UploadAudio
+            <div
               v-if="data.other.audio_generation_method === 'upload'"
-              :key="item.audio_file_id || i"
-              :file-id="item.audio_file_id"
-              :item-index="i"
-              :show-upload="!item.audio_file_id"
-              @upload="uploads"
-              @deleteFile="deleteFiles"
-            />
+              :class="[{ 'upload-audio-play': item.audio_file_id }]"
+            >
+              <div v-if="item.audio_file_id" class="upload-play">
+                <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
+                <SvgIcon icon-class="delete" @click="deleteAudio(i)" />
+              </div>
+              <UploadAudio
+                v-else
+                :key="item.audio_file_id || i"
+                :file-id="item.audio_file_id"
+                :item-index="i"
+                :show-upload="!item.audio_file_id"
+                @upload="uploads"
+                @deleteFile="deleteFiles"
+              />
+            </div>
             <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
               <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="gray" />
               <span
@@ -185,6 +194,14 @@ export default {
       this.data.option_list[itemIndex].audio_file_id = '';
       this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
     },
+    /**
+     * 删除音频 id
+     * @param {number} i 选项下标
+     */
+    deleteAudio(i) {
+      this.data.file_id_list.splice(this.data.file_id_list.indexOf(this.data.option_list[i].audio_file_id), 1);
+      this.data.option_list[i].audio_file_id = '';
+    },
     // 删除小题
     deleteOption(i, file_id) {
       this.$confirm('是否删除？', '提示', {
@@ -328,15 +345,8 @@ export default {
       white-space: nowrap;
     }
 
-    .auto-matically {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      width: 233px;
-      padding: 5px 12px;
-      background-color: $fill-color;
-      border-radius: 2px;
-
+    .auto-matically,
+    .upload-audio-play {
       .audio-wrapper {
         margin-right: 12px;
 
@@ -356,6 +366,34 @@ export default {
           height: 16px;
         }
       }
+    }
+
+    .upload-audio-play {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      background-color: $fill-color;
+      border-radius: 2px;
+
+      .upload-play {
+        display: flex;
+        column-gap: 8px;
+        align-items: center;
+
+        .svg-icon {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .auto-matically {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      width: 233px;
+      padding: 5px 12px;
+      background-color: $fill-color;
+      border-radius: 2px;
 
       .auto-btn {
         font-size: 14px;

src/views/exercise_questions/data/chinese.js

@@ -35,7 +35,7 @@ export const audioGenerationMethodList = [
   },
 ];
 
-// 汉字题数据模板
+// 书写题数据模板
 export const chineseData = {
   type: 'chinese', // 题型
   stem: '', // 题干