听说训练增加音频生成方式 去掉预览content

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

@@ -22,10 +22,14 @@
             <span class="question-number" title="双击切换序号类型" @dblclick="changeOptionType(data)">
               {{ computedQuestionNumber(i, data.option_number_show_mode) }}
             </span>
-            <div class="option-content">
-              <RichText v-model="item.content" placeholder="输入内容" :inline="true" />
-            </div>
+            <el-input
+              v-if="data.other.audio_generation_method === 'auto'"
+              v-model="item.content"
+              placeholder="拼音间用空格隔开"
+              @change="item.audio_file_id = ''"
+            />
             <UploadAudio
+              v-if="data.other.audio_generation_method === 'upload'"
               :key="item.audio_file_id || i"
               :file-id="item.audio_file_id"
               :item-index="i"
@@ -33,6 +37,16 @@
               @upload="uploads"
               @deleteFile="deleteFiles"
             />
+            <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
+                v-loading="loading_list[i] ? loading_list[i].loading : false"
+                class="auto-btn"
+                @click="handleMatically(item, i)"
+                >{{ item.audio_file_id ? '已生成' : '自动生成' }}</span
+              >
+            </div>
+            <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
             <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
           </li>
         </ul>
@@ -87,6 +101,16 @@
             :step="data.property.score_type === scoreTypeList[0].value ? 1 : 0.1"
           />
         </el-form-item>
+        <el-form-item label="音频">
+          <el-radio
+            v-for="{ value, label } in audioGenerationMethodList"
+            :key="value"
+            v-model="data.other.audio_generation_method"
+            :label="value"
+          >
+            {{ label }}
+          </el-radio>
+        </el-form-item>
       </el-form>
     </template>
   </QuestionBase>
@@ -95,23 +119,53 @@
 <script>
 import UploadAudio from '../common/UploadAudio.vue';
 import QuestionMixin from '../common/QuestionMixin.js';
+import SoundRecord from '../common/SoundRecord.vue';
 
 import { selectTypeList, changeOptionType } from '@/views/exercise_questions/data/common';
-import { repeatData, getOption } from '@/views/exercise_questions/data/repeat';
+import { repeatData, getOption, audioGenerationMethodList } from '@/views/exercise_questions/data/repeat';
+import { GetStaticResources } from '@/api/app';
 
 export default {
   name: 'RepeatQuestion',
   components: {
     UploadAudio,
+    SoundRecord,
   },
   mixins: [QuestionMixin],
   data() {
     return {
       selectTypeList,
+      audioGenerationMethodList,
       changeOptionType,
       data: JSON.parse(JSON.stringify(repeatData)),
+      loading_list: [
+        {
+          loading: false,
+        },
+        {
+          loading: false,
+        },
+        {
+          loading: false,
+        },
+      ],
     };
   },
+  watch: {
+    'data.option_list.length': {
+      handler(val) {
+        this.loading_list = [];
+        for (let i = 0; i < val; i++) {
+          let obj = {
+            loading: false,
+          };
+          this.loading_list.push(obj);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   methods: {
     /**
      * 智能识别
@@ -149,9 +203,31 @@ export default {
         .then(() => {
           this.data.option_list.splice(i, 1);
           this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
+          this.loading_list.splice(i, 1);
         })
         .catch(() => {});
     },
+    // 自动生成音频
+    handleMatically(item, i) {
+      if (item.content.trim()) {
+        this.loading_list[i].loading = true;
+        let MethodName = 'tool-PinyinToVoiceFile';
+        let data = {
+          pinyin: item.content.trim().split(' ').join(','),
+        };
+        GetStaticResources(MethodName, data)
+          .then((res) => {
+            this.loading_list[i].loading = false;
+            if (res.status === 1) {
+              item.audio_file_id = res.file_id;
+              this.data.file_id_list.push(res.file_id);
+            }
+          })
+          .catch(() => {
+            this.loading_list[i].loading = false;
+          });
+      }
+    },
   },
 };
 </script>
@@ -168,5 +244,47 @@ export default {
     text-overflow: ellipsis;
     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;
+
+    .audio-wrapper {
+      margin-right: 12px;
+
+      :deep .audio-play {
+        width: 16px;
+        height: 16px;
+        color: #000;
+        background-color: initial;
+      }
+
+      :deep .audio-play.not-url {
+        color: #a1a1a1;
+      }
+
+      :deep .voice-play {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .auto-btn {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: #1d2129;
+      cursor: pointer;
+    }
+  }
+
+  .delete {
+    flex-shrink: 0;
+  }
 }
 </style>

src/views/exercise_questions/data/repeat.js

@@ -4,6 +4,21 @@ import { getRandomNumber } from '@/utils/index';
 export function getOption(content = '') {
   return { content, mark: getRandomNumber(), audio_file_id: '' };
 }
+// 音频生成方式类型
+export const audioGenerationMethodList = [
+  {
+    value: 'upload',
+    label: '上传',
+  },
+  {
+    value: 'auto',
+    label: '自动生成',
+  },
+  {
+    value: 'record',
+    label: '录音',
+  },
+];
 
 // 听后训练数据模板
 export const repeatData = {
@@ -28,5 +43,6 @@ export const repeatData = {
   // 其他属性
   other: {
     question_number_type: questionNumberTypeList[0].value, // 题号类型
+    audio_generation_method: audioGenerationMethodList[0].value, // 音频生成方式
   },
 };

src/views/exercise_questions/preview/RepeatPreview.vue

@@ -9,12 +9,10 @@
     <div class="option-list">
       <li v-for="(item, i) in answer.answer_list" :key="i" :class="['option-item']">
         <span>{{ computeOptionMethods[data.option_number_show_mode](i) }} </span>
-        <AudioPlay v-if="data.option_list[i].audio_file_id" :file-id="data.option_list[i].audio_file_id" />
-        <div
-          v-if="sanitizeHTML(data.option_list[i].content)"
-          class="option-content"
-          v-html="sanitizeHTML(data.option_list[i].content)"
-        ></div>
+        <AudioPlay
+          v-if="data.option_list[i] && data.option_list[i].audio_file_id"
+          :file-id="data.option_list[i].audio_file_id"
+        />
         <div class="sound-box">
           <SoundRecordPreview :wav-blob.sync="item.audio_file_id" :disabled="disabled" :type="'small'" />
         </div>
@@ -56,6 +54,7 @@ export default {
     // 初始化数据
     handleData() {
       if (!this.isJudgingRightWrong) {
+        this.answer.answer_list = [];
         this.data.option_list.forEach((item) => {
           let obj = {
             mark: item.mark,