更新

src/views/partner/file/file.vue

@@ -103,14 +103,17 @@
 
     <el-dialog title="文件预览" :visible.sync="isShowFile" width="70%" append-to-body>
       <div class="preview-container">
+        <audio v-if="isAudioType" class="preview-iframe" controls>
+          <source :src="imageUrl + selectFile.filePath"/>
+        </audio>
         <!-- 左侧预览区域 -->
         <iframe
           :src="fileUrl"
           frameborder="0"
-          class="preview-iframe" v-if="!isImage && selectFile.fileType != 'txt'"
+          class="preview-iframe" v-if="!isImage && selectFile.fileType != 'txt' && !isAudioType"
         >
         </iframe>
-        <image-preview class="preview-iframe" :src="imageUrl + selectFile.filePath"  v-if="isImage"></image-preview>
+        <image-preview class="preview-iframe" :src="imageUrl + selectFile.filePath" v-if="isImage"></image-preview>
         <iframe
           :src="imageUrl + selectFile.filePath"
           frameborder="0"
@@ -120,7 +123,6 @@
         </iframe>
 
 
-
         <!-- 右侧文件列表 -->
         <div class="file-list">
           <el-table
@@ -278,8 +280,8 @@ export default {
       inspectionFileList: [],
       // 弹出层标题
       title: "",
-      selectFile:{
-        isImage:false
+      selectFile: {
+        isImage: false
       },
       drawer: false,
       // 是否显示弹出层
@@ -329,9 +331,19 @@ export default {
       fileId: '',
       drawerData: {},
       fileUrl: '',
-      isImage : false
+      isImage: false
     };
   },
+  computed: {
+    isAudioType() {
+      const audioExtensions = ['mp3', 'wav', 'ogg', 'aac', 'm4a', 'flac'];
+      const fileExtension = this.selectFile.fileType;
+      return audioExtensions.includes(fileExtension);
+
+      // 或者如果已有 fileType 字段（根据 MIME type 判断）：
+      // return this.fileType.startsWith('audio/');
+    }
+  },
   created() {
     this.getList();
     this.listByPermission()
@@ -382,8 +394,8 @@ export default {
         })
       }
     },
-    getRowClassName({ row }) {
-      console.log('返回的class',row.id === this.selectFile.id ? 'highlight-row' : '')
+    getRowClassName({row}) {
+      console.log('返回的class', row.id === this.selectFile.id ? 'highlight-row' : '')
       // 如果当前行是选中的文件，添加高亮样式
       return row.id === this.selectFile.id ? 'highlight-row' : '';
     },