From 292be7150cd5d9a36aeba83d08a4c8ec36568e0e Mon Sep 17 00:00:00 2001
From: song-tianyang <tianyang.song@fit2cloud.com>
Date: Fri, 15 Dec 2023 16:00:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=80=A7=E8=83=BD=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E3=80=90=E6=80=A7=E8=83=BD=E6=B5=8B=E8=AF=95=E3=80=91=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=98=BE=E7=A4=BA=E6=8E=A5=E5=8F=A3=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=B1=BB=E5=9E=8B=E4=B8=BA=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--story=1013762 --user=宋天阳 【性能测试】支持显示接口返回数据类型为图片
https://www.tapd.cn/55049933/s/1444326
---
 .../samples/compnent/ResponseResult.vue       | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/performance-test/frontend/src/business/report/components/samples/compnent/ResponseResult.vue b/performance-test/frontend/src/business/report/components/samples/compnent/ResponseResult.vue
index 0ecc6780be..f8a8253e6a 100644
--- a/performance-test/frontend/src/business/report/components/samples/compnent/ResponseResult.vue
+++ b/performance-test/frontend/src/business/report/components/samples/compnent/ResponseResult.vue
@@ -7,11 +7,11 @@
         class="pane"
       >
         <ms-sql-result-table
-          v-if="isSqlType && activeName === 'body'"
+          v-if="isSqlType && activeName === 'body'&& !responseResult.contentType"
           :body="responseResult.body"
         />
         <ms-code-edit
-          v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'"
+          v-if="!isSqlType && isMsCodeEditShow && activeName === 'body'&& !isPicture"
           :mode="mode"
           :read-only="true"
           :modes="modes"
@@ -19,6 +19,11 @@
           height="250px"
           ref="codeEdit"
         />
+        <el-row v-if="isPicture && activeName === 'body'">
+          <el-col :span="24">
+            <el-image :src="srcUrl" fit="contain" style="width: 100%;height: 100%;"></el-image>
+          </el-col>
+        </el-row>
       </el-tab-pane>
 
       <el-tab-pane
@@ -137,12 +142,15 @@ export default {
       mode: "text",
       isMsCodeEditShow: true,
       reqMessages: "",
+      contentType: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/webp', 'image/svg+xml', 'image/apng', 'image/avif'],
+      srcUrl: '',
     };
   },
   watch: {
     response() {
       this.setBodyType();
       this.setReqMessage();
+      this.showPicture();
     },
     activeName: {
       handler() {
@@ -161,6 +169,13 @@ export default {
     sqlModeChange(mode) {
       this.mode = mode;
     },
+    showPicture() {
+      if (this.responseResult.contentType && this.contentType.includes(this.responseResult.contentType)) {
+        this.modes.push('picture')
+        this.srcUrl = 'data:' + this.responseResult.contentType + ';base64,' + this.responseResult.imageUrl;
+      }
+    },
+
     setBodyType() {
       if (
         this.response &&
@@ -185,6 +200,13 @@ export default {
         this.isMsCodeEditShow = true;
       });
     },
+    isPicture() {
+      return (
+        this.responseResult.contentType &&
+        this.contentType.includes(this.responseResult.contentType) &&
+        this.mode === 'picture'
+      );
+    },
     setReqMessage() {
       if (this.response) {
         if (!this.response.url) {
@@ -234,6 +256,7 @@ export default {
   mounted() {
     this.setBodyType();
     this.setReqMessage();
+    this.showPicture();
   },
   computed: {
     isSqlType() {