From 83fedebb8ae4d452871bd311bd9a7918582dcd8a Mon Sep 17 00:00:00 2001
From: guoyuqi <xiaomeinvG@126.com>
Date: Tue, 19 Mar 2024 21:12:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=8E=A5=E5=8F=A3=E7=AE=A1=E7=90=86):?=
 =?UTF-8?q?=20=E8=B0=83=E6=95=B4=E6=89=A7=E8=A1=8C=E7=BB=93=E6=9E=9C?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/modules/api-test/management.ts    |  2 +-
 frontend/src/assets/style/arco-reset.less     | 16 ++++++++++
 .../requestComposition/response/index.vue     |  6 +++-
 .../case/tabContent/tabCaseExecuteHistory.vue | 30 ++++++++++++++-----
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/frontend/src/api/modules/api-test/management.ts b/frontend/src/api/modules/api-test/management.ts
index ea53ddea2a..ee52ba8e60 100644
--- a/frontend/src/api/modules/api-test/management.ts
+++ b/frontend/src/api/modules/api-test/management.ts
@@ -492,5 +492,5 @@ export function getReportById(id: string) {
 }
 
 export function getCaseReportDetail(reportId: string, stepId: string) {
-  return MSR.get<ApiCaseReportDetail>({ url: `${GetCaseReportDetailUrl + reportId}/${stepId}` });
+  return MSR.get<ApiCaseReportDetail[]>({ url: `${GetCaseReportDetailUrl + reportId}/${stepId}` });
 }
diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index 941d243194..5f0ee80a7d 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/frontend/src/assets/style/arco-reset.less
@@ -137,6 +137,22 @@
     width: 960px;
   }
 }
+
+.ms-modal-response {
+  .arco-modal {
+    width: 800px;
+    height: 467px;
+  }
+}
+
+.ms-modal-response-body{
+  .arco-modal .arco-modal-body{
+    color: var(--color-text-2);
+  }
+}
+
+
+
 .ms-modal-small {
   .arco-modal {
     width: 480px;
diff --git a/frontend/src/views/api-test/components/requestComposition/response/index.vue b/frontend/src/views/api-test/components/requestComposition/response/index.vue
index dfe26dfabc..5d073ca24c 100644
--- a/frontend/src/views/api-test/components/requestComposition/response/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/index.vue
@@ -115,7 +115,10 @@
         </a-popover> -->
       </div>
     </div>
-    <a-spin :loading="props.loading" class="h-[calc(100%-35px)] w-full px-[18px] pb-[18px]">
+    <a-spin
+      :loading="props.loading"
+      :class="[isResponseModel ? 'h-[326px] w-full' : 'h-[calc(100%-35px)] w-full px-[18px] pb-[18px]']"
+    >
       <edit
         v-if="props.isEdit && activeResponseType === 'content' && innerResponseDefinition"
         v-model:response-definition="innerResponseDefinition"
@@ -164,6 +167,7 @@
       isEdit?: boolean; // 是否可编辑
       uploadTempFileApi?: (...args) => Promise<any>; // 上传临时文件接口
       isDefinition?: boolean;
+      isResponseModel?: boolean;
     }>(),
     {
       activeLayout: 'vertical',
diff --git a/frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue b/frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue
index aefae9cd77..3e19f6fab7 100644
--- a/frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue
+++ b/frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue
@@ -74,20 +74,30 @@
         </a-tooltip>
       </template>
     </ms-base-table>
-    <a-modal v-model:visible="showResponse" class="ms-modal-form ms-modal-small" title-align="start">
+    <a-modal
+      v-model:visible="showResponse"
+      class="ms-modal-form ms-modal-response ms-modal-response-body"
+      title-align="start"
+      :footer="false"
+    >
+      <template #title> {{ t('caseManagement.featureCase.tableColumnExecutionResult') }} </template>
       <response
         v-show="showResponse"
+        :hide-layout-switch="true"
         :is-expanded="true"
         :is-http-protocol="props.protocol === 'HTTP'"
         :is-priority-local-exec="false"
         :active-tab="ResponseComposition.BODY"
         :request-task-result="responseContent"
+        :is-definition="true"
+        :is-response-model="true"
       ></response>
     </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
+  import { cloneDeep } from 'lodash-es';
   import dayjs from 'dayjs';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
@@ -101,11 +111,13 @@
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
 
-  import { ApiCaseReportDetail, RequestTaskResult } from '@/models/apiTest/common';
+  import { ApiCaseReportDetail, RequestResult, RequestTaskResult } from '@/models/apiTest/common';
   import { ApiCaseExecuteHistoryItem } from '@/models/apiTest/management';
   import { ExecuteStatusFilters, ResponseComposition } from '@/enums/apiEnum';
   import { TriggerModeLabel } from '@/enums/reportEnum';
 
+  import { defaultResponse } from '@/views/api-test/components/config';
+
   const triggerModeListFilters = ref<string[]>(Object.keys(TriggerModeLabel));
   const triggerModeFilterVisible = ref(false);
   const statusFilterVisible = ref(false);
@@ -216,10 +228,11 @@
     }
   }
 
-  function loadedReportDetail(detail: ApiCaseReportDetail) {
-    if (detail.id) {
-      responseContent.value?.requestResults.push(detail.content);
-      showResponse.value = true;
+  function loadedReportDetail(detail: ApiCaseReportDetail[]) {
+    responseContent.value = cloneDeep(defaultResponse);
+    const apiCaseReportDetailElement = detail[0];
+    if (apiCaseReportDetailElement.id) {
+      responseContent.value.requestResults[0] = apiCaseReportDetailElement.content;
     }
   }
 
@@ -227,8 +240,8 @@
     if (detail.id) {
       if (detail.children && detail.children.length > 0) {
         try {
-          const caseReportDetail = getCaseReportDetail(detail.id, detail.children[0].stepId);
-          loadedReportDetail(await caseReportDetail);
+          const caseReportDetail = await getCaseReportDetail(detail.id, detail.children[0].stepId);
+          loadedReportDetail(caseReportDetail);
         } catch (e) {
           console.error(e);
         }
@@ -238,6 +251,7 @@
 
   async function showResult(record: ApiCaseExecuteHistoryItem) {
     try {
+      showResponse.value = true;
       const result = await getReportById(record.id);
       await loadedReport(result);
     } catch (error) {