语音矩阵添加 生成音频

src/components/Adult/inputModules/VoiceMatrix.vue

@@ -3,14 +3,35 @@
     <div class="voice-matrix-upload">
       <upload
         :change-fill-id="changeMp3"
-        :datafile-list="fileCon.mp3_list"
+        :datafile-list="curQue.mp3_list"
         :fille-number="1"
         upload-type="mp3"
       />
 
+      <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].source === 'tts'">
+        <div class="create_mp3_list">
+          <span>引擎音频：</span>
+          <span class="mp3_file_name">{{ curQue.mp3_list[0].name }}</span>
+          <img
+            src="../../../assets/adult/del-close.png"
+            class="mp3_del"
+            @click="delMp3"
+          >
+        </div>
+      </template>
+      <template v-else>
+        <el-button
+          :loading="createdMp3loading"
+          size="small"
+          type="primary"
+          :style="{'margin': '12px 0'}"
+          @click="createdMp3"
+        >生成音频</el-button>
+      </template>
+
       <upload
         :change-fill-id="changeLrc"
-        :datafile-list="fileCon.lrc_list"
+        :datafile-list="curQue.lrc_list"
         :fille-number="1"
         upload-type="lrc"
       />
@@ -133,8 +154,14 @@
                 />
 
                 <template v-else-if="column.type === 'PinyinEnglish'">
-                  <span class="pinyin-english-label">拼音</span><el-input v-model="column.pinyin_english_data.pinyin" size="small" />
-                  <span class="pinyin-english-label">英文</span><el-input v-model="column.pinyin_english_data.english" size="small" />
+                  <span class="pinyin-english-label">拼音</span><el-input
+                    v-model="column.pinyin_english_data.pinyin"
+                    size="small"
+                  />
+                  <span class="pinyin-english-label">英文</span><el-input
+                    v-model="column.pinyin_english_data.english"
+                    size="small"
+                  />
                 </template>
               </div>
             </div>
@@ -148,7 +175,10 @@
 <script>
 import Upload from "@/components/Adult/common/Upload.vue";
 import SentenceSegwordChs from "@/components/Adult/inputModules/SentenceSegwordChs/index.vue";
-import { getContentFile } from "@/api/ajax";
+import {
+  getContentFile,
+  textCreadMp3
+} from "@/api/ajax";
 
 export default {
   components: {
@@ -158,14 +188,11 @@ export default {
   props: ["curQue", "changeCurQue"],
   data() {
     return {
-      fileCon: {
-        mp3_list: [],
-        lrc_list: []
-      },
       isShowMatrix: false,
       match_type: "pinyin",
       rowNumber: 1,
       columnNumber: 1,
+      createdMp3loading: false,
       typeList: [
         {
           type: "text",
@@ -180,8 +207,8 @@ export default {
           name: "句子分词"
         },
         {
-          type: 'PinyinEnglish',
-          name: '拼音 + 英文'
+          type: "PinyinEnglish",
+          name: "拼音 + 英文"
         }
       ],
       matchTypeList: [
@@ -211,10 +238,6 @@ export default {
     if (!this.curQue) {
       this.changeCurQue(JSON.parse(JSON.stringify(this.data_structure)));
     } else {
-      this.fileCon = {
-        mp3_list: JSON.parse(JSON.stringify(this.curQue.mp3_list)),
-        lrc_list: JSON.parse(JSON.stringify(this.curQue.lrc_list))
-      };
       this.isShowMatrix = true;
     }
   },
@@ -257,8 +280,8 @@ export default {
               wordsList: []
             },
             pinyin_english_data: {
-              pinyin: '',
-              english: ''
+              pinyin: "",
+              english: ""
             }
           };
         }
@@ -347,6 +370,46 @@ export default {
       });
     },
 
+    // 根据文章生成MP3
+    createdMp3() {
+      if (this.curQue.mp3_list.length > 0) {
+        return this.$message.warning("已有音频，请勿重复生成");
+      }
+      let article = '';
+      this.curQue.voiceMatrix.matrix.forEach(item => {
+        item.forEach(({ type, text, sentence_data: { sentence }}) => {
+          if (type === 'text' && text.length > 0) {
+            article += '\n' + text;
+            return;
+          }
+          if (type === 'SentenceSegwordChs') {
+            article += '\n' + sentence;
+          }
+        });
+      });
+      if (article.length <= 0) {
+        return this.$message.warning("请先输入内容，再生成音频");
+      }
+      this.createdMp3loading = true;
+      textCreadMp3({
+        text: article
+      }).then(({ data }) => {
+        data.fileInfo.id = "[FID##" + data.fileInfo.file_id + "##FID]";
+        data.fileInfo.name = data.fileInfo.file_name;
+        data.fileInfo.temporary_url = data.fileInfo.file_url;
+        data.fileInfo.url = "[FID##" + data.fileInfo.file_id + "##FID]";
+        let fileList = [data.fileInfo];
+        this.$set(this.curQue, "mp3_list", fileList);
+        this.createdMp3loading = false;
+        this.$message.success("生成成功");
+      });
+    },
+
+    // 删除生成的mp3
+    delMp3() {
+      this.curQue.mp3_list.splice(0, 1);
+    },
+
     changeMp3(fileList) {
       const articleImgList = JSON.parse(JSON.stringify(fileList));
       const articleImgRes = [];
@@ -406,6 +469,25 @@ export default {
     .upload + .upload {
       margin-top: 12px;
     }
+
+    .create_mp3_list {
+      display: flex;
+      margin: 12px 0;
+      justify-content: flex-start;
+      align-items: center;
+
+      > span {
+        font-size: 16px;
+        font-weight: bold;
+        margin-right: 10px;
+      }
+
+      > img {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+      }
+    }
   }
 
   .distribution {

src/components/Adult/preview/VoiceMatrix.vue

@@ -22,6 +22,7 @@
         :mp3="mp3Url"
         :get-cur-time="getCurTime"
         :stop-audio="stopAudio"
+        :mp3-source="mp3Source"
         @handleChangeStopAudio="handleChangeStopAudio"
         @playChange="playChange"
       />
@@ -325,6 +326,11 @@ export default {
         ? mp3_list.temporary_url
         : mp3_list.url;
     },
+    mp3Source() {
+      let mp3_list = this.curQue.mp3_list[0];
+      if (mp3_list === undefined) return "";
+      return "source" in mp3_list ? mp3_list.source : "";
+    },
     hasSelectedCell() {
       let { type, index } = this.selectedLine;
       let { row, column } = this.selectCell;