feat(测试跟踪): 测试用例附件预览

backend/src/main/java/io/metersphere/track/controller/TestCaseController.java

@@ -167,7 +167,7 @@ public class TestCaseController {
     }
 
     @PostMapping("/file/download")
-    public ResponseEntity<byte[]> downloadJmx(@RequestBody FileOperationRequest fileOperationRequest) {
+    public ResponseEntity<byte[]> download(@RequestBody FileOperationRequest fileOperationRequest) {
         byte[] bytes = fileService.loadFileAsBytes(fileOperationRequest.getId());
         return ResponseEntity.ok()
                 .contentType(MediaType.parseMediaType("application/octet-stream"))
@@ -175,4 +175,13 @@ public class TestCaseController {
                 .body(bytes);
     }
 
+    @GetMapping("/file/preview/{fileId}")
+    public ResponseEntity<byte[]> preview(@PathVariable String fileId) {
+        byte[] bytes = fileService.loadFileAsBytes(fileId);
+        return ResponseEntity.ok()
+                .contentType(MediaType.parseMediaType("application/octet-stream"))
+                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileId + "\"")
+                .body(bytes);
+    }
+
 }

backend/src/main/java/io/metersphere/xpack

@@ -1 +1 @@
-Subproject commit cf6b06526324326a563d933e07118fac014a63b4
+Subproject commit ee74568be0beba46da19616f5832e83f9164c688

frontend/package.json

@@ -35,7 +35,8 @@
     "jspdf": "^2.1.1",
     "yan-progress": "^1.0.3",
     "nprogress": "^0.2.0",
-    "el-table-infinite-scroll": "^1.0.10"
+    "el-table-infinite-scroll": "^1.0.10",
+    "vue-pdf": "^4.2.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",

frontend/src/business/components/track/case/components/TestCaseEdit.vue

@@ -252,6 +252,10 @@
               <el-table-column
                 :label="$t('commons.operating')">
                 <template v-slot:default="scope">
+                  <el-button @click="preview(scope.row)" :disabled="!scope.row.id || readOnly" type="primary"
+                             v-if="isPreview(scope.row)"
+                             icon="el-icon-view"
+                             size="mini" circle/>
                   <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id || readOnly" type="primary"
                              icon="el-icon-download"
                              size="mini" circle/>
@@ -277,6 +281,7 @@
 
     </el-dialog>
 
+    <test-case-file ref="testCaseFile"/>
   </div>
 
 
@@ -289,10 +294,11 @@ import MsDialogFooter from '../../../common/components/MsDialogFooter'
 import {listenGoBack, removeGoBackListener} from "../../../../../common/js/utils";
 import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
 import {Message} from "element-ui";
+import TestCaseFile from "@/business/components/track/case/components/TestCaseFile";
 
 export default {
   name: "TestCaseEdit",
-  components: {MsDialogFooter},
+  components: {MsDialogFooter, TestCaseFile},
   data() {
     return {
       result: {},
@@ -718,7 +724,13 @@ export default {
       /// todo: 是否需要对文件内容和大小做限制
       return file.size > 0;
     },
-
+    preview(row) {
+      this.$refs.testCaseFile.open(row);
+    },
+    isPreview(row) {
+      const fileType = row.type;
+      return fileType === 'JPG' || fileType === 'JPEG' || fileType === 'PDF' || fileType === 'PNG';
+    }
   }
 }
 </script>

frontend/src/business/components/track/case/components/TestCaseFile.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-dialog :visible.sync="dialogVisible" width="80%" :destroy-on-close="true" :before-close="close">
+    <div>
+      <img :src="'/test/case/file/preview/' + file.id" alt="图片显示异常" style="width: 100%;height: 100%;"
+           v-if="file.type === 'JPG' || file.type === 'JPEG' || file.type === 'PNG'">
+      <div v-if="file.type === 'PDF'">
+        <test-case-pdf :file-id="file.id"/>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+import TestCasePdf from "@/business/components/track/case/components/TestCasePdf";
+
+export default {
+  name: "TestCaseFiles",
+  components: {TestCasePdf},
+  props: {},
+  data() {
+    return {
+      file: {
+        id: '',
+        type: ''
+      },
+      dialogVisible: false,
+    }
+  },
+  methods: {
+    open(file) {
+      this.file = file;
+      this.dialogVisible = true;
+    },
+    close() {
+      this.file = {
+        id: '',
+        type: ''
+      };
+      this.dialogVisible = false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/track/case/components/TestCasePdf.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-loading="loading">
+    <pdf ref="pdf" v-for="i in numPages" :key="i" :src="loadingTask" :page="i"/>
+  </div>
+</template>
+
+<script>
+import pdf from "vue-pdf";
+export default {
+  name: "TestCasePdf",
+  components: {pdf},
+  props: {
+    fileId: String
+  },
+  data() {
+    return {
+      loading: false,
+      numPages: null,
+      loadingTask: null,
+    }
+  },
+  mounted() {
+    this.loading = true;
+    this.loadingTask = pdf.createLoadingTask("/test/case/file/preview/" + this.fileId);
+    this.loadingTask.promise.then(pdf => {
+      this.numPages = pdf.numPages
+      this.loading = false;
+    }).catch(() => {
+      this.loading = false;
+      this.$error("pdf 加载失败");
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>