feat(接口管理): 新增用例详情的执行历史获取结果组件（等待调试）

frontend/src/api/modules/api-test/management.ts

@@ -30,6 +30,8 @@ import {
   DeleteRecycleCaseUrl,
   ExecuteCaseUrl,
   GetCaseDetailUrl,
+  GetCaseReportByIdUrl,
+  GetCaseReportDetailUrl,
   GetChangeHistoryUrl,
   GetDefinitionDetailUrl,
   GetDefinitionScheduleUrl,
@@ -72,7 +74,7 @@ import {
   UploadTempFileUrl,
 } from '@/api/requrls/api-test/management';
 
-import { ExecuteRequestParams } from '@/models/apiTest/common';
+import { ApiCaseReportDetail, ExecuteRequestParams } from '@/models/apiTest/common';
 import {
   AddApiCaseParams,
   ApiCaseBatchEditParams,
@@ -478,3 +480,11 @@ export function getPoolOption(projectId: string) {
 export function getPoolId(projectId: string) {
   return MSR.get<string>({ url: GetPoolId + projectId });
 }
+
+export function getReportById(id: string) {
+  return MSR.get<Record<string, any>>({ url: GetCaseReportByIdUrl + id });
+}
+
+export function getCaseReportDetail(reportId: string, stepId: string) {
+  return MSR.get<ApiCaseReportDetail>({ url: `${GetCaseReportDetailUrl + reportId}/${stepId}` });
+}

frontend/src/api/requrls/api-test/management.ts

@@ -74,6 +74,8 @@ export const GetExecuteHistoryUrl = '/api/case/execute/page'; // 获取用的执
 export const GetDependencyUrl = '/api/case/get-reference'; // 获取用例的依赖关系
 export const GetChangeHistoryUrl = '/api/case/operation-history/page'; // 获取用例的依赖关系
 export const ToggleFollowCaseUrl = '/api/case/follow'; // 接口定义-关注/取消关注
+export const GetCaseReportByIdUrl = '/api/report/case/get/'; // 接口用例报告获取
+export const GetCaseReportDetailUrl = '/api/report/case/get/detail/'; // 接口用例报告获取
 
 /**
  * 接口用例回收站

frontend/src/models/apiTest/common.ts

@@ -399,6 +399,7 @@ export interface ResponseResult {
   vars: string;
   assertions: any;
 }
+
 export interface RequestResult {
   body: string;
   headers: string;
@@ -428,3 +429,18 @@ export interface ResponseDefinition {
   body: ResponseDefinitionBody;
   [key: string]: any; // 用于前端渲染时填充的自定义信息，后台无此字段
 }
+
+// 接口用例执行历史报告对象
+export type ApiCaseReportDetail = {
+  id: string | number;
+  reportId: string | number;
+  stepId: string | number;
+  status: string;
+  fakeCode: string;
+  requestName: string;
+  requestTime: number;
+  code: string;
+  responseSize: number;
+  scriptIdentifier: string;
+  content: RequestResult;
+};

frontend/src/views/api-test/management/components/management/case/caseDetail.vue

@@ -53,7 +53,7 @@
         <tab-case-dependency :source-id="caseDetail.id" />
       </a-tab-pane>
       <a-tab-pane key="executeHistory" :title="t('apiTestManagement.executeHistory')" class="px-[18px] py-[16px]">
-        <tab-case-execute-history :source-id="caseDetail.id" module-type="API_REPORT" />
+        <tab-case-execute-history :source-id="caseDetail.id" module-type="API_REPORT" :protocol="props.protocol" />
       </a-tab-pane>
       <!-- <a-tab-pane key="dependencies" :title="t('apiTestManagement.dependencies')" class="px-[18px] py-[16px]">
         </a-tab-pane> -->

frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseChangeHistory.vue

@@ -88,7 +88,7 @@
     {
       title: 'apiTestManagement.changeOrder',
       dataIndex: 'id',
-      width: 200,
+      width: 100,
     },
     {
       title: 'apiTestManagement.type',

frontend/src/views/api-test/management/components/management/case/tabContent/tabCaseExecuteHistory.vue

@@ -67,11 +67,23 @@
         <execute-status :status="record.status" />
       </template>
       <template #operation="{ record }">
-        <MsButton class="!mr-0" @click="showResult(record)"
+        <a-tooltip :disabled="record.deleted" :content="t('case.detail.report.delete')" position="top">
-          >{{ t('apiScenario.executeHistory.execution.operation') }}
+          <MsButton :disabled="!record.deleted" class="!mr-0" @click="showResult(record)"
-        </MsButton>
+            >{{ t('apiScenario.executeHistory.execution.operation') }}
+          </MsButton>
+        </a-tooltip>
       </template>
     </ms-base-table>
+    <a-modal v-model:visible="showResponse" class="ms-modal-form ms-modal-small" title-align="start">
+      <response
+        v-show="showResponse"
+        :is-expanded="true"
+        :is-http-protocol="props.protocol === 'HTTP'"
+        :is-priority-local-exec="false"
+        :active-tab="ResponseComposition.BODY"
+        :request-task-result="responseContent"
+      ></response>
+    </a-modal>
   </div>
 </template>
 
@@ -82,23 +94,31 @@
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
+  import response from '@/views/api-test/components/requestComposition/response/index.vue';
   import ExecuteStatus from '@/views/api-test/scenario/components/executeStatus.vue';
 
-  import { getApiCaseExecuteHistory } from '@/api/modules/api-test/management';
+  import { getApiCaseExecuteHistory, getCaseReportDetail, getReportById } from '@/api/modules/api-test/management';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
 
+  import { ApiCaseReportDetail, RequestTaskResult } from '@/models/apiTest/common';
   import { ApiCaseExecuteHistoryItem } from '@/models/apiTest/management';
-  import { ExecuteStatusFilters } from '@/enums/apiEnum';
+  import { ExecuteStatusFilters, ResponseComposition } from '@/enums/apiEnum';
   import { TriggerModeLabel } from '@/enums/reportEnum';
 
   const triggerModeListFilters = ref<string[]>(Object.keys(TriggerModeLabel));
   const triggerModeFilterVisible = ref(false);
   const statusFilterVisible = ref(false);
   const statusFilters = ref(Object.keys(ExecuteStatusFilters));
+
+  const showResponse = ref(false);
+
+  const responseContent = ref<RequestTaskResult>();
+
   const props = defineProps<{
     sourceId: string | number;
     moduleType: string;
+    protocol: string;
   }>();
 
   const appStore = useAppStore();
@@ -135,7 +155,7 @@
         sortDirections: ['ascend', 'descend'],
         sorter: true,
       },
-      width: 100,
+      width: 150,
     },
     {
       title: 'apiTestManagement.taskOperator',
@@ -194,7 +214,36 @@
       loadExecuteList();
     }
   }
-  function showResult(record: ApiCaseExecuteHistoryItem) {}
+
+  function loadedReportDetail(detail: ApiCaseReportDetail) {
+    if (detail.id) {
+      responseContent.value?.requestResults.push(detail.content);
+      showResponse.value = true;
+    }
+  }
+
+  async function loadedReport(detail: Record<string, any>) {
+    if (detail.id) {
+      if (detail.children && detail.children.length > 0) {
+        const { stepId } = detail.children[0].stepId;
+        try {
+          const caseReportDetail = getCaseReportDetail(detail.id, stepId);
+          loadedReportDetail(await caseReportDetail);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+  }
+
+  function showResult(record: ApiCaseExecuteHistoryItem) {
+    try {
+      const result = getReportById(record.id);
+      loadedReport(result);
+    } catch (error) {
+      console.error(error);
+    }
+  }
 
   onBeforeMount(() => {
     loadExecuteList();

frontend/src/views/api-test/management/locale/en-US.ts

@@ -206,4 +206,5 @@ export default {
   'case.detail.execute.history.list': 'Execution history list',
   'case.detail.dependency.list': 'Reference relationship list',
   'case.detail.resource.api': 'API',
+  'case.detail.report.delete': 'Report cleared',
 };

frontend/src/views/api-test/management/locale/zh-CN.ts

@@ -198,4 +198,5 @@ export default {
   'case.detail.execute.history.list': '执行历史列表',
   'case.detail.dependency.list': '引用关系列表',
   'case.detail.resource.api': '接口测试',
+  'case.detail.report.delete': '报告已清理',
 };