电子交卷附件可上传MP3

src/assets/styles/pages.scss

@@ -109,6 +109,29 @@
       }
     }
   }
+  .audio-item {
+    margin-bottom: 5px;
+    audio {
+      display: inline-block;
+      vertical-align: middle;
+      height: 32px;
+    }
+    .audio-delete {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 10px;
+      height: 32px;
+      line-height: 32px;
+      width: 32px;
+      border-radius: 50%;
+      text-align: center;
+      background-color: $--color-background;
+      cursor: pointer;
+      &:hover {
+        color: $--color-danger;
+      }
+    }
+  }
   .image-add {
     font-size: 40px;
     line-height: 1;

src/components/UploadButton.vue

@@ -47,9 +47,6 @@ export default {
     btnContent: {
       type: String,
     },
-    accept: {
-      type: String,
-    },
     format: {
       type: Array,
       default() {
@@ -86,6 +83,11 @@ export default {
       uploadDataDict: {},
     };
   },
+  computed: {
+    accept() {
+      return this.format.map((item) => `.${item}`).join();
+    },
+  },
   methods: {
     checkFileFormat(fileType) {
       const _file_format = fileType.split(".").pop().toLocaleLowerCase();

src/components/UploadFileView.vue

@@ -11,6 +11,7 @@
       :headers="headers"
       :max-size="maxSize"
       :format="format"
+      :accept="accept"
       :data="uploadDataDict"
       :on-change="handleFileChange"
       :before-upload="handleBeforeUpload"
@@ -94,6 +95,11 @@ export default {
       res: {},
     };
   },
+  computed: {
+    accept() {
+      return this.format.map((item) => `.${item}`).join();
+    },
+  },
   methods: {
     startUpload() {
       this.loading = true;

src/modules/admin/views/AuthSet.vue

@@ -34,7 +34,6 @@
             btn-type="primary"
             :upload-url="uploadUrl"
             :format="['lic']"
-            accept=".lic"
             style="margin: 0"
             @valid-error="validError"
             @upload-success="uploadSuccess"

src/modules/exam/components/ApplyContent.vue

@@ -290,23 +290,23 @@
         </el-form-item>
       </el-form>
 
-      <h4 class="mb-2">附件<span v-if="IS_APPLY">（最多4张）</span>：</h4>
+      <h4 class="mb-2">附件<span v-if="IS_APPLY">（最多4个）</span>：</h4>
       <div class="image-list">
         <div
           class="image-item"
-          v-for="(img, index) in paperConfirmAttachments"
-          :key="index"
+          v-for="(item, index) in imageAttachments"
+          :key="`image${index}`"
         >
           <img
-            :src="img.url"
-            :alt="img.filename"
+            :src="item.url"
+            :alt="item.filename"
             title="点击查看大图"
             @click="toPreview(index)"
           />
           <div v-if="IS_APPLY" class="image-delete">
             <i
               class="el-icon-delete-solid"
-              @click="deletePaperConfirmAttachment(index)"
+              @click="deletePaperConfirmAttachment(item)"
             ></i>
           </div>
         </div>
@@ -318,6 +318,20 @@
         >
           <i class="el-icon-plus"></i>
         </div>
+        <br />
+        <div
+          class="audio-item"
+          v-for="(item, index) in audioAttachments"
+          :key="`audio${index}`"
+        >
+          <audio :src="item.url" :alt="item.filename" controls></audio>
+          <div class="audio-delete">
+            <i
+              class="el-icon-delete-solid"
+              @click="deletePaperConfirmAttachment(item)"
+            ></i>
+          </div>
+        </div>
       </div>
       <div
         v-if="!IS_APPLY && !paperConfirmAttachments.length"
@@ -745,7 +759,12 @@ export default {
       curTab: "upload",
       user: {},
       curTaskApply: { ...initTaskApply },
-      paperConfirmAttachmentId: { attachmentId: "", filename: "", url: "" },
+      paperConfirmAttachmentId: {
+        attachmentId: "",
+        filename: "",
+        url: "",
+        fileType: "",
+      },
       paperAttachments: [],
       paperConfirmAttachments: [],
       curAttachment: {},
@@ -862,6 +881,16 @@ export default {
     exposedMode() {
       return !!this.curTaskApply.exposedPaperType;
     },
+    imageAttachments() {
+      return this.paperConfirmAttachments.filter(
+        (item) => item.fileType === "image"
+      );
+    },
+    audioAttachments() {
+      return this.paperConfirmAttachments.filter(
+        (item) => item.fileType === "audio"
+      );
+    },
   },
   mounted() {
     this.user = this.$ls.get("user", {});
@@ -1132,7 +1161,10 @@ export default {
         this.paperConfirmAttachments.push(attachment);
       }
     },
-    deletePaperConfirmAttachment(index) {
+    deletePaperConfirmAttachment(data) {
+      const index = this.paperConfirmAttachments.findIndex(
+        (item) => item.url === data.url
+      );
       this.paperConfirmAttachments.splice(index, 1);
     },
     toViewCard(attachment) {
@@ -1528,11 +1560,11 @@ export default {
       this.$refs.SimpleImagePreview.open();
     },
     selectImage(index) {
-      this.curImage = this.paperConfirmAttachments[index];
+      this.curImage = this.imageAttachments[index];
     },
     toPrevImage() {
       if (this.curImageIndex === 0) {
-        this.curImageIndex = this.paperConfirmAttachments.length - 1;
+        this.curImageIndex = this.imageAttachments.length - 1;
       } else {
         this.curImageIndex--;
       }
@@ -1540,7 +1572,7 @@ export default {
       this.selectImage(this.curImageIndex);
     },
     toNextImage() {
-      if (this.curImageIndex === this.paperConfirmAttachments.length - 1) {
+      if (this.curImageIndex === this.imageAttachments.length - 1) {
         this.curImageIndex = 0;
       } else {
         this.curImageIndex++;

src/modules/exam/components/UploadPaperDialog.vue

@@ -76,7 +76,7 @@ export default {
         },
         paperConfirm: {
           title: "附件",
-          format: ["jpg", "png"],
+          format: ["jpg", "png", "mp3"],
           uploadData: { type: "FILE" },
           uploadUrl: "/api/admin/common/file/upload",
         },
@@ -123,6 +123,7 @@ export default {
           filename: data.filename,
           url: data.url,
           pages: data.pages,
+          fileType: data.filename.endsWith(".mp3") ? "audio" : "image",
         };
       }
       this.attachment = Object.assign(this.attachment, infos);

src/modules/exam/components/createExamAndPrintTask/InfoExamTask.vue

@@ -292,34 +292,48 @@
           </el-form-item>
         </el-form>
 
-        <h4 class="mb-2">附件<span>（最多4张）</span>：</h4>
+        <h4 class="mb-2">附件<span>（最多4个）</span>：</h4>
         <div class="image-list">
           <div
             class="image-item"
-            v-for="(img, index) in paperConfirmAttachments"
-            :key="index"
+            v-for="(item, index) in imageAttachments"
+            :key="`image${index}`"
           >
             <img
-              :src="img.url"
-              :alt="img.filename"
+              :src="item.url"
+              :alt="item.filename"
               title="点击查看大图"
               @click="toPreview(index)"
             />
             <div class="image-delete">
               <i
                 class="el-icon-delete-solid"
-                @click="deletePaperConfirmAttachment(index)"
+                @click="deletePaperConfirmAttachment(item)"
               ></i>
             </div>
           </div>
           <div
             v-if="paperConfirmAttachments.length < 4"
             class="image-item image-add"
-            title="上传入库审核表"
+            title="上传附件"
             @click="toUploadPaperConfirm"
           >
             <i class="el-icon-plus"></i>
           </div>
+          <br />
+          <div
+            class="audio-item"
+            v-for="(item, index) in audioAttachments"
+            :key="`audio${index}`"
+          >
+            <audio :src="item.url" :alt="item.filename" controls></audio>
+            <div class="audio-delete">
+              <i
+                class="el-icon-delete-solid"
+                @click="deletePaperConfirmAttachment(item)"
+              ></i>
+            </div>
+          </div>
         </div>
 
         <h4 class="mb-2">附件说明：</h4>
@@ -461,7 +475,12 @@ export default {
       cardBuildPresetData: {},
       // exam-task-detail
       examTaskDetail: { makeMethod: "" },
-      paperConfirmAttachmentId: { attachmentId: "", filename: "", url: "" },
+      paperConfirmAttachmentId: {
+        attachmentId: "",
+        filename: "",
+        url: "",
+        fileType: "",
+      },
       paperAttachments: [],
       paperConfirmAttachments: [],
       curAttachment: {},
@@ -494,6 +513,16 @@ export default {
     IS_TIKU_TAB() {
       return this.curTab === "tiku";
     },
+    imageAttachments() {
+      return this.paperConfirmAttachments.filter(
+        (item) => item.fileType === "image"
+      );
+    },
+    audioAttachments() {
+      return this.paperConfirmAttachments.filter(
+        (item) => item.fileType === "audio"
+      );
+    },
   },
   watch: {
     "examTask.examId": function (val, oldval) {
@@ -906,7 +935,10 @@ export default {
         this.paperConfirmAttachments.push(attachment);
       }
     },
-    deletePaperConfirmAttachment(index) {
+    deletePaperConfirmAttachment(data) {
+      const index = this.paperConfirmAttachments.findIndex(
+        (item) => item.url === data.url
+      );
       this.paperConfirmAttachments.splice(index, 1);
     },
     // cardConfirm(data) {
@@ -930,11 +962,11 @@ export default {
       this.$refs.SimpleImagePreview.open();
     },
     selectImage(index) {
-      this.curImage = this.paperConfirmAttachments[index];
+      this.curImage = this.imageAttachments[index];
     },
     toPrevImage() {
       if (this.curImageIndex === 0) {
-        this.curImageIndex = this.paperConfirmAttachments.length - 1;
+        this.curImageIndex = this.imageAttachments.length - 1;
       } else {
         this.curImageIndex--;
       }
@@ -942,7 +974,7 @@ export default {
       this.selectImage(this.curImageIndex);
     },
     toNextImage() {
-      if (this.curImageIndex === this.paperConfirmAttachments.length - 1) {
+      if (this.curImageIndex === this.imageAttachments.length - 1) {
         this.curImageIndex = 0;
       } else {
         this.curImageIndex++;

src/modules/exam/components/createExamAndPrintTask/InfoPrintTask.vue

@@ -131,7 +131,6 @@
             btn-type="success"
             :upload-url="uploadUrl"
             :format="['xls', 'xlsx']"
-            accept=".xls,.xlsx"
             @valid-error="validError"
             @upload-success="uploadSuccess"
           >