文章-生词校对字幕

src/views/book/courseware/create/components/question/article/NewWord.vue

@@ -7,6 +7,7 @@
       :inline="true"
       :placeholder="'输入标题'"
       toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+      class="title-box"
     />
     <div class="option-list">
       <div class="table-node">
@@ -190,7 +191,13 @@
       </div>
     </div>
     <el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一个</el-button>
-    <SelectUpload label="生词音频" type="audio" width="500px" @uploadSuccess="uploadAudioSuccess" />
+    <SelectUpload
+      label="生词音频"
+      type="audio"
+      width="500px"
+      @uploadSuccess="uploadAudioSuccess"
+      :style="{ marginBottom: data.audio_data.url.length === 0 ? '5px' : '' }"
+    />
     <div v-if="data.audio_data.url.length > 0" class="upload-file">
       <div class="file-name">
         <span>
@@ -200,7 +207,7 @@
       </div>
       <SvgIcon icon-class="delete-black" size="12" @click="removeFile('audio')" />
     </div>
-    <SelectUpload label="lrc 文件" :limit="1" type="lrc" width="500px" @uploadSuccess="uploadLrcSuccess" />
+    <SelectUpload label="音频字幕(lrc)文件" :limit="1" type="lrc" width="500px" @uploadSuccess="uploadLrcSuccess" />
     <div v-if="data.lrc_data.url.length > 0" class="upload-file">
       <div class="file-name">
         <span>
@@ -224,6 +231,7 @@
     </div>
     <div class="adult-book-input-item">
       <span class="adult-book-lable"></span>
+      <el-button size="small" type="primary" @click="openCheckSubtitles">校对字幕</el-button>
       <el-button type="primary" size="small" class="distribution" @click="parseLrcFile"> 分配时间 </el-button>
     </div>
     <el-form :model="data.property" label-width="72px" label-position="left">
@@ -248,7 +256,7 @@
 
       <el-form-item label="拼音位置">
         <el-radio-group v-model="data.property.pinyin_position">
-          <el-radio v-for="{ value, label } in pinyinPositionList" :key="value" :label="value">
+          <el-radio v-for="{ value, label } in pinyinPositionLists" :key="value" :label="value">
             {{ label }}
           </el-radio>
         </el-radio-group>
@@ -257,6 +265,12 @@
     <!-- <div class="btn-box" style="text-align: right">
       <el-button @click="sureNewWords">保存</el-button>
     </div> -->
+    <CheckSubtitles
+      :visible.sync="visible"
+      :audio-id="data.audio_data.file_id"
+      :option-list="subtitleList"
+      @saveSubtitles="saveSubtitles"
+    />
   </div>
 </template>
 
@@ -265,14 +279,16 @@ import SoundRecord from '@/views/book/courseware/create/components/question/fill
 import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';
 import SelectUpload from '@/views/book/courseware/create/components/common/SelectUpload.vue';
 import UploadPicture from '../new_word/components/UploadPicture.vue';
-
+import { getWordTime, prepareTranscribe, fileToBase64Text } from '@/api/article';
 import { GetStaticResources } from '@/api/app';
 import RichText from '@/components/RichText.vue';
+import CheckSubtitles from '@/views/book/courseware/create/components/question/voice_matrix/CheckSubtitles.vue';
 import {
   audioGenerationMethodList,
   pinyinPositionList,
   inforList,
   switchOption,
+  pinyinPositionLists,
 } from '@/views/book/courseware/data/article';
 
 export default {
@@ -283,6 +299,7 @@ export default {
     UploadAudio,
     RichText,
     UploadPicture,
+    CheckSubtitles,
   },
   props: ['dataNewWord'],
   data() {
@@ -291,9 +308,12 @@ export default {
       isWordTime: false,
       loading: false,
       pinyinPositionList,
+      pinyinPositionLists,
       audioGenerationMethodList,
       inforList,
       switchOption,
+      visible: false,
+      subtitleList: [],
     };
   },
   methods: {
@@ -320,9 +340,9 @@ export default {
      */
     parseLrcFile() {
       if (this.data.lrc_data.file_id.length === 0) {
-        return this.$message.warning('请先上传lrc文件');
+        return this.$message.warning('请先上传音频字幕(lrc)文件');
       }
-      const loading = this.$loading({ text: '解析lrc文件中' });
+      const loading = this.$loading({ text: '解析音频字幕(lrc)文件中' });
       GetStaticResources('tool-ParseLRCFile', {
         content_type: 'FILE',
         file_id: this.data.lrc_data.file_id,
@@ -556,6 +576,41 @@ export default {
     sureNewWords() {
       this.$emit('sureNewWords', this.data);
     },
+    /**
+     * 打开校对字幕
+     */
+    openCheckSubtitles() {
+      if (this.data.audio_data.url.length === 0) {
+        return this.$message.warning('请先上传音频文件');
+      }
+      this.subtitleList = [];
+      this.data.new_word_list.forEach((item, index) => {
+        let obj = {
+          content: item.new_word,
+          lrc_data: {
+            begin_time: this.data.lrc_arr[index] ? this.data.lrc_arr[index].bg : 0,
+            end_time: this.data.lrc_arr[index] ? this.data.lrc_arr[index].ed : 0,
+          },
+        };
+        this.subtitleList.push(obj);
+      });
+      this.visible = true;
+    },
+    /**
+     * 保存字幕
+     * @param {Array} dataList
+     */
+    saveSubtitles(dataList) {
+      let lrc_list_res = [];
+      dataList.forEach((item) => {
+        let obj = {
+          bg: item.lrc_data.begin_time,
+          ed: item.lrc_data.end_time,
+        };
+        lrc_list_res.push(obj);
+      });
+      this.data.lrc_arr = lrc_list_res;
+    },
   },
 };
 </script>
@@ -628,6 +683,18 @@ export default {
 :deep .upload-wrapper {
   margin-top: 0;
 }
+
+.title-box {
+  padding: 5px;
+  margin: 5px 0;
+  background-color: #f2f3f5;
+  border: 1px solid #f2f3f5;
+  border-radius: 4px;
+
+  :deep p {
+    margin: 0;
+  }
+}
 </style>
 <style lang="scss">
 .tox .tox-editor-header {

src/views/book/courseware/create/components/question/article/Notes.vue

@@ -7,6 +7,7 @@
       :inline="true"
       :placeholder="'输入标题'"
       toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+      class="title-box"
     />
     <el-table :data="data.option" border style="width: 100%">
       <el-table-column fixed prop="number" label="序号" width="70">
@@ -93,11 +94,22 @@ export default {
       return {
         number: '',
         con: '',
+        pinyin: '',
         interpret: '', // 翻译
         note: '', // 注释
         img_list: [],
+        file_list: [''], // 图片
       };
     },
+    uploadPic(file_id, index) {
+      this.data.option[index].file_list[0] = file_id;
+      this.data.file_id_list.push(file_id);
+      this.refreshKey = Math.random();
+    },
+    deletePic(file_id, index) {
+      this.data.option[index].file_list[0] = '';
+      this.data.file_id_list = this.data.file_id_list.filter((item) => item !== file_id);
+    },
   },
 };
 </script>
@@ -130,6 +142,18 @@ export default {
     cursor: pointer;
   }
 }
+
+.title-box {
+  padding: 5px;
+  margin: 5px 0;
+  background-color: #f2f3f5;
+  border: 1px solid #f2f3f5;
+  border-radius: 4px;
+
+  :deep p {
+    margin: 0;
+  }
+}
 </style>
 <style lang="scss">
 .tox .tox-editor-header {