update: 话术管理

src/views/ai/manage.vue

@@ -27,30 +27,30 @@
       </svg>
       <div class="no-data-text">还未创建话术，请联系运营经理创建话术</div>
     </div>
-    <el-dialog :visible.sync="tempDetail.show" @closed="onClosed" width="760px" title="查看话术">
+    <el-dialog :visible.sync="tempDetail.show" @closed="onClosed" custom-class="temp-detail" width="760px" title="查看话术">
       <div v-if="!Array.isArray(tempDetail.tempData) || tempDetail.tempData.length == 0" class="no-temp-data">
         <svg class="no-temp-icon" aria-hidden="true">
           <use xlink:href="#icon-zanwuhuashu"></use>
         </svg>
         暂无话术内容
       </div>
-      <template v-else>
+      <div class="temp-detail-list" v-else>
         <div class="temp-detail-item" v-for="el in tempDetail.tempData" :key="el.decisionId">
           <div class="temp-detail-content">
             <div class="temp-detail-title">{{ el.decisionNodeType | formatNodeType }}</div>
-            <div v-if="!Array.isArray(el.list) || el.list.length == 0" class="no-temp-data">暂无录音</div>
+            <div v-if="!Array.isArray(el.decisionItemRecordDTOList) || el.decisionItemRecordDTOList.length == 0" class="no-temp-data">暂无录音</div>
             <template v-else>
-              <div v-for="item in el.list" :key="item.id" class="sound-record">
+              <div v-for="item in el.decisionItemRecordDTOList" :key="item.id" class="sound-record">
                 <div class="temp-detail-desc">{{ item.knowledge }}</div>
                 <template v-if="item.realKnowledgeOssUrl">
-                  <el-button type="text" @click="onPlay">播放</el-button>
-                  <audio id="player" :src="item.realKnowledgeOssUrl"></audio>
+                  <el-button type="text" @click="onPlay(item, `player-${el.decisionId}-${item.id}`)" :loading="item.playing">{{ item.playing ? '播放中...' : '播放' }}</el-button>
+                  <audio :id="`player-${el.decisionId}-${item.id}`" :src="item.ttsKnowledgeOssUrl"></audio>
                 </template>
               </div>
             </template>
           </div>
         </div>
-      </template>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -136,8 +136,21 @@ export default {
       this.tempDetail.aiTemplateId = '';
       this.tempDetail.tempData = [];
     },
-    onPlay() {
-      document.getElementById('player').play();
+    onPlay(data, playerId) {
+      const handleError = () => {
+        this.$message.error('资源错误');
+        handleEnded(this);
+      };
+      const handleEnded = () => {
+        this.$set(data, 'playing', false);
+        player.removeEventListener('error', handleError);
+        player.removeEventListener('ended', handleEnded);
+      };
+      this.$set(data, 'playing', true);
+      const player = document.getElementById(playerId);
+      player.addEventListener('error', handleError);
+      player.addEventListener('ended', handleEnded);
+      player.play().catch(handleError);
     }
   }
 };
@@ -284,3 +297,16 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.temp-detail {
+  .el-dialog__body {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  .temp-detail-list {
+    padding: 0 20px;
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+}
+</style>