bug fix

src/modules/oe/views/examDetail.vue

@@ -379,26 +379,55 @@
           </div>
         </el-form>
       </el-dialog>
-      <el-dialog
-        title="下载图片"
-        :visible.sync="downloadImageDialogVisible"
-        @closed="closeDownloadImageDialog"
-      >
-        <div style="max-width:350px;">
-          <div
-            class="block"
-            v-for="cof in currentOfflineFiles"
-            :key="'cof_' + cof.id"
-          >
-            <span class="demonstration">{{ cof.offlineFileName }}</span>
-            <el-image
-              @click="window.open(cof.offlineFileUrl)"
-              style="width: 100px; height: 100px"
-              :src="cof.offlineFileUrl"
-              fit="fill"
-            ></el-image>
+      <el-dialog title="图片作答" :visible.sync="downloadImageDialogVisible">
+        <el-form>
+          <el-form-item label="作答结果">
+            <div style="width:580px;padding-left:80px;">
+              <el-upload
+                :class="{ disabled: true }"
+                action
+                :limit="6"
+                :file-list="imageAnswerFileList"
+                multiple
+                list-type="picture-card"
+                :disabled="true"
+              >
+                <i slot="default" class="el-icon-plus"></i>
+                <div slot="file" slot-scope="{ file }">
+                  <img
+                    class="el-upload-list__item-thumbnail"
+                    :src="file.url"
+                    :alt="file.name"
+                  />
+                  <span class="el-upload-list__item-actions">
+                    <span
+                      class="el-upload-list__item-preview"
+                      @click="handlePictureCardPreview(file)"
+                    >
+                      <i class="el-icon-zoom-in"></i>
+                    </span>
+                    <span
+                      class="el-upload-list__item-delete"
+                      @click="handleDownload(file)"
+                    >
+                      <i class="el-icon-download"></i>
+                    </span>
+                  </span>
+                </div>
+              </el-upload>
+            </div>
+          </el-form-item>
+          <div class="dialog-footer">
+            <el-button
+              type="primary"
+              @click="downloadImageDialogVisible = false"
+              >确 定</el-button
+            >
           </div>
-        </div>
+        </el-form>
+      </el-dialog>
+      <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
+        <img width="100%" :src="dialogImageUrl" alt="" />
       </el-dialog>
     </el-main>
   </el-container>
@@ -420,7 +449,10 @@ export default {
       showAllCondition: false,
       startExamDatetimeRange: [],
       downloadImageDialogVisible: false,
-      currentOfflineFiles: [],
+      imageAnswerFileList: [],
+      dialogImageUrl: "",
+      dialogVisible: false,
+      // uploadDisabled: true,
       form: {
         examRecordDataId: null,
         hasStranger: null,
@@ -473,6 +505,14 @@ export default {
     ...mapState({ user: state => state.user })
   },
   methods: {
+    handleDownload(file) {
+      window.open(file.url);
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
     getDisciplineTypeList(name) {
       if (!name) {
         name = "";
@@ -590,15 +630,19 @@ export default {
     },
     downloadOfflineFile(files) {
       if (files && files.length > 0) {
+        if (files[0].fileType != "image") {
+          window.open(files[0].offlineFileUrl);
+          return;
+        }
+
+        this.imageAnswerFileList = [];
         for (let f of files) {
-          if (f.fileType != "image") {
-            window.open(files[0].offlineFileUrl);
-          } else {
-            this.currentOfflineFiles = files;
-            this.downloadImageDialogVisible = true;
-            break;
-          }
+          this.imageAnswerFileList.push({
+            url: f.offlineFileUrl,
+            name: f.offlineFileName
+          });
         }
+        this.downloadImageDialogVisible = true;
       }
     },
     redoAudit(examRecordDataId, isPass) {
@@ -734,5 +778,10 @@ export default {
 .el-date-editor.el-input__inner {
   width: auto !important;
 }
+.upload-demo {
+}
+.disabled .el-upload--picture-card {
+  display: none;
+}
 </style>
 <style scoped src="../style/common.css"></style>

src/modules/oe/views/examScheduling.vue

@@ -274,10 +274,10 @@
                 style="width:580px;padding-left:80px;"
               >
                 <el-upload
-                  class="upload-demo"
+                  :class="{ disabled: uploadDisabled }"
                   ref="upload"
                   action
-                  :limit="6"
+                  :limit="fileLimit"
                   :http-request="customUpload"
                   :before-upload="beforeFileUpload"
                   :on-success="handleSuccess"
@@ -356,7 +356,7 @@
             <el-form-item label="作答结果">
               <div style="width:580px;padding-left:80px;">
                 <el-upload
-                  class="upload-demo"
+                  :class="{ disabled: true }"
                   action
                   :limit="6"
                   :file-list="imageAnswerFileList"
@@ -423,13 +423,12 @@ export default {
       total: 0,
       tableLoading: false,
       showAllCondition: false,
-      currentOfflineFiles: [],
       fileType: "zip",
       accept: "application/zip",
       fileList: [],
-      offlineFiles: [],
       downloadImageDialogVisible: false,
       imageAnswerFileList: [],
+      fileLimit: 6,
       form: {
         examRecordDataId: null,
         hasStranger: null,
@@ -473,7 +472,12 @@ export default {
   computed: {
     ...mapState({ user: state => state.user }),
     batchSubmitUploadDisabled() {
-      return this.fileList.length != this.md5Size;
+      return this.fileList.length == 0 || this.fileList.length != this.md5Size;
+    },
+    //计算是否显示图片上传框
+    uploadDisabled() {
+      debugger;
+      return this.fileList.length >= this.fileLimit;
     }
   },
   methods: {
@@ -482,6 +486,7 @@ export default {
       this.removeImgs();
     },
     handleChange(file, fileList) {
+      debugger;
       this.fileList = fileList;
       this.calcSummary(this.fileList);
     },
@@ -510,6 +515,7 @@ export default {
       this.fileList.splice(index, 1);
       this.calcSummary(this.fileList);
     },
+
     calcSummary(fileList) {
       this.summaryList = [];
       this.md5Size = 0;
@@ -530,6 +536,7 @@ export default {
       console.log(file);
     },
     removeImgs() {
+      this.fileList = [];
       this.$refs.upload.clearFiles();
     },
     resetForm() {
@@ -838,21 +845,6 @@ export default {
           this.offlineAnswerFile = file;
         });
 
-      // function blobToArray(blob) {
-      //   return new Promise((resolve) => {
-      //     var reader = new FileReader();
-      //     reader.addEventListener("loadend", function() {
-      //       // reader.result contains the contents of blob as a typed array
-      //       resolve(reader.result);
-      //     });
-      //     reader.readAsArrayBuffer(blob);
-      //   });
-      // }
-      // const buffer = blobToArray(file);
-      // const fileMd5 = MD5(buffer);
-      // console.log(fileMd5);
-      // this.summary = fileMd5;
-
       this.uploadData = {
         examRecordDataId: this.currentOfflineExamRecordDataId,
         summary: this.summary
@@ -865,16 +857,6 @@ export default {
       });
       return promise; //通过返回一个promis对象解决
     },
-    blobToArray(blob) {
-      return new Promise(resolve => {
-        var reader = new FileReader();
-        reader.addEventListener("loadend", function() {
-          // reader.result contains the contents of blob as a typed array
-          resolve(reader.result);
-        });
-        reader.readAsArrayBuffer(blob);
-      });
-    },
     submitUpload() {
       debugger;
       this.uploadAnswerDialogLoading = true;
@@ -886,11 +868,6 @@ export default {
       param.append("examRecordDataId", this.currentOfflineExamRecordDataId);
       param.append("fileType", this.fileType);
 
-      // const buffer = this.blobToArray(this.offlineAnswerFile);
-      // const fileMd5 = MD5(buffer);
-      // console.log(fileMd5);
-      // this.summary = fileMd5;
-      // param.append("summary", this.summary);
       this.$http
         .post("/api/ecs_oe_admin/offlineExam/submitPaper", param, config)
         .then(() => {
@@ -1014,8 +991,7 @@ export default {
       this.$message.success("上传成功");
     },
     customUpload(file) {
-      debugger;
-      this.offlineFiles.push(file.file);
+      console.log(file);
       return false;
     }
   },
@@ -1026,5 +1002,8 @@ export default {
 .offline_file {
   color: blue;
 }
+.disabled .el-upload--picture-card {
+  display: none !important;
+}
 </style>
 <style scoped src="../style/common.css"></style>