udpate

src/common/show_file/index.vue

@@ -17,6 +17,14 @@
       </div>
     </template>
 
+    <div v-else-if="fileType === 'mp3'" class="audio-file">
+      <audio :src="fileUrl" controls></audio>
+    </div>
+
+    <div v-else-if="fileType === 'mp4'" class="video-file">
+      <video :src="fileUrl" controls></video>
+    </div>
+
     <template v-else>
       <iframe
         :src="'https://view.officeapps.live.com/op/view.aspx?src=' + `${fileUrl}`"
@@ -35,6 +43,7 @@
 <script>
 import pdf from 'vue-pdf';
 import { GetFileStoreInfo } from '@/api/app';
+import { getFileType } from '@/utils/filter';
 
 export default {
   components: { pdf },
@@ -58,21 +67,29 @@ export default {
   },
   computed: {
     fileType() {
-      return this.fileName.slice(this.fileName.lastIndexOf('.') + 1, this.fileName.length);
+      return getFileType(this.fileName);
     }
   },
   watch: {
-    fileId() {
-      this.getFileStoreInfo();
+    fileId(newVal) {
+      if (newVal.length > 0) {
+        this.getFileStoreInfo();
+      }
     }
   },
   methods: {
     getFileStoreInfo() {
       GetFileStoreInfo({ file_id: this.fileId }).then(({ file_url_https }) => {
         this.fileUrl = file_url_https;
+
         if (this.fileType === 'pdf') {
           this.getNumPages(file_url_https);
         }
+
+        if (this.fileType === 'txt') {
+          this.dialogVisibleShowFile = false;
+          window.open(file_url_https, '_blank');
+        }
       });
     },
 
@@ -95,6 +112,7 @@ export default {
 
     dialogShowFileClose() {
       this.dialogVisibleShowFile = false;
+      this.$emit('dialogShowFileClose');
     },
 
     isImage(type) {
@@ -118,5 +136,13 @@ export default {
     display: flex;
     justify-content: center;
   }
+
+  .audio-file {
+    @extend .image-parent;
+  }
+
+  .video-file {
+    @extend .image-parent;
+  }
 }
 </style>

src/utils/filter.js

@@ -0,0 +1,7 @@
+/**
+ * 得到文件类型
+ * @param {String} fileName
+ */
+export function getFileType(fileName) {
+  return fileName.slice(fileName.lastIndexOf('.') + 1, fileName.length);
+}

src/utils/validate.js

@@ -30,5 +30,7 @@ export function twoDecimal(value) {
  */
 export function isAllowFileType(fileName) {
   let suffix = fileName.slice(fileName.lastIndexOf('.') + 1, fileName.length);
-  return ['mp3', 'mp4', 'doc', 'docx', 'pdf', 'ppt', 'xls', 'jpg', 'gif', 'png'].includes(suffix);
+  return ['mp3', 'mp4', 'doc', 'docx', 'pdf', 'ppt', 'xls', 'jpg', 'gif', 'png', 'txt'].includes(
+    suffix
+  );
 }

src/views/task_details/student/index.vue

@@ -150,7 +150,12 @@
       @dialogClose="dialogClose"
     />
 
-    <show-file ref="file" :file-name="showCurFileName" :file-id="showCurFileId" />
+    <show-file
+      ref="file"
+      :file-name="showCurFileName"
+      :file-id="showCurFileId"
+      @dialogShowFileClose="dialogShowFileClose"
+    />
   </div>
 </template>
 
@@ -293,6 +298,11 @@ export default {
       this.$refs.file.showDialog();
     },
 
+    dialogShowFileClose() {
+      this.showCurFileName = '';
+      this.showCurFileId = '';
+    },
+
     fillTaskExecuteInfo_Student() {
       let homework_file_id_list = [];
       this.file_list.forEach(item => {

src/views/task_details/teacher/index.vue

@@ -104,7 +104,12 @@
       @dialogClose="dialogClose"
     />
 
-    <show-file ref="file" :file-name="showCurFileName" :file-id="showCurFileId" />
+    <show-file
+      ref="file"
+      :file-name="showCurFileName"
+      :file-id="showCurFileId"
+      @dialogShowFileClose="dialogShowFileClose"
+    />
   </div>
 </template>
 
@@ -257,6 +262,11 @@ export default {
       this.$refs.file.showDialog();
     },
 
+    dialogShowFileClose() {
+      this.showCurFileName = '';
+      this.showCurFileId = '';
+    },
+
     buttonName() {
       let list = this.student_list;
       if (list.length <= 0) return '';