refactor(接口场景): 查看报告

frontend/src/views/api-test/components/caseAndScenarioReportDrawer.vue

@@ -28,7 +28,8 @@
         </template>
       </a-dropdown>
     </template>
-    <CaseReportCom :detail-info="reportStepDetail" />
+    <CaseReportCom v-if="!props.isScenario" :detail-info="reportStepDetail" />
+    <ScenarioCom v-else :detail-info="reportStepDetail" />
   </MsDrawer>
 </template>
 
@@ -39,8 +40,9 @@
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   import CaseReportCom from '@/views/api-test/report/component/caseReportCom.vue';
+  import ScenarioCom from '@/views/api-test/report/component/scenarioCom.vue';
 
-  import { getShareInfo, getShareTime, reportCaseDetail } from '@/api/modules/api-test/report';
+  import { getShareInfo, getShareTime, reportCaseDetail, reportScenarioDetail } from '@/api/modules/api-test/report';
   import { useI18n } from '@/hooks/useI18n';
   import { useAppStore } from '@/store';
 
@@ -49,6 +51,7 @@
 
   const props = defineProps<{
     reportId: string;
+    isScenario?: boolean;
   }>();
 
   const appStore = useAppStore();
@@ -100,9 +103,13 @@
   const reportStepDetail = ref<ReportDetail>({
     ...initReportStepDetail,
   });
-  async function getReportCaseDetail() {
+  async function getReportDetail() {
     try {
-      reportStepDetail.value = await reportCaseDetail(props.reportId);
+      if (props.isScenario) {
+        reportStepDetail.value = await reportScenarioDetail(props.reportId);
+      } else {
+        reportStepDetail.value = await reportCaseDetail(props.reportId);
+      }
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
@@ -114,7 +121,7 @@
     async (val) => {
       if (val) {
         reportStepDetail.value = { ...initReportStepDetail };
-        await getReportCaseDetail();
+        await getReportDetail();
       }
     }
   );
@@ -130,7 +137,9 @@
       const shareId = res.shareUrl;
 
       const { origin } = window.location;
-      shareLink.value = `${origin}/#/${RouteEnum.SHARE}/${RouteEnum.SHARE_REPORT_CASE}${shareId}`;
+      shareLink.value = `${origin}/#/${RouteEnum.SHARE}/${
+        props.isScenario ? RouteEnum.SHARE_REPORT_SCENARIO : RouteEnum.SHARE_REPORT_CASE
+      }${shareId}`;
       if (navigator.clipboard) {
         navigator.clipboard.writeText(shareLink.value).then(
           () => {
@@ -172,6 +181,7 @@
         shareTime.value = value + (translations[type] || translations.D);
       }
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
     }
   }

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

@@ -343,7 +343,7 @@
     @finished="loadCaseListAndResetSelector"
   />
   <!-- 执行结果抽屉 -->
-  <caseReportDrawer v-model:visible="showExecuteResult" :report-id="activeReportId" />
+  <caseAndScenarioReportDrawer v-model:visible="showExecuteResult" :report-id="activeReportId" />
 </template>
 
 <script setup lang="ts">
@@ -361,10 +361,10 @@
   import caseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import type { CaseLevel } from '@/components/business/ms-case-associate/types';
   import caseDetailDrawer from './caseDetailDrawer.vue';
-  import caseReportDrawer from './caseReportDrawer.vue';
   import createAndEditCaseDrawer from './createAndEditCaseDrawer.vue';
   import apiStatus from '@/views/api-test/components/apiStatus.vue';
   import BatchRunModal from '@/views/api-test/components/batchRunModal.vue';
+  import caseAndScenarioReportDrawer from '@/views/api-test/components/caseAndScenarioReportDrawer.vue';
   import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
 
   import {

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

@@ -91,14 +91,7 @@
       </template>
     </ms-base-table>
   </div>
-  <CaseReportDrawer
-    v-model:visible="showResponse"
-    :report-id="activeReportId"
-    :active-report-index="activeReportIndex"
-    :table-data="propsRes.data"
-    :page-change="propsEvent.pageChange"
-    :pagination="propsRes.msPagination!"
-  />
+  <caseAndScenarioReportDrawer v-model:visible="showResponse" :report-id="activeReportId" />
 </template>
 
 <script setup lang="ts">
@@ -108,7 +101,7 @@
   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 CaseReportDrawer from '@/views/api-test/management/components/management/case/caseReportDrawer.vue';
+  import caseAndScenarioReportDrawer from '@/views/api-test/components/caseAndScenarioReportDrawer.vue';
   import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
 
   import { getApiCaseExecuteHistory } from '@/api/modules/api-test/management';

frontend/src/views/api-test/scenario/components/step/index.vue

@@ -119,6 +119,12 @@
       <a-radio value="all">{{ t('apiScenario.allStep') }}</a-radio>
     </a-radio-group>
   </a-modal>
+  <!-- 场景报告抽屉 -->
+  <caseAndScenarioReportDrawer
+    v-model:visible="showScenarioReportVisible"
+    is-scenario
+    :report-id="scenario.reportId as string ?? ''"
+  />
 </template>
 
 <script setup lang="ts">
@@ -130,10 +136,10 @@
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import stepTree from './stepTree.vue';
+  import caseAndScenarioReportDrawer from '@/views/api-test/components/caseAndScenarioReportDrawer.vue';
 
   import { getScenarioDetail } from '@/api/modules/api-test/scenario';
   import { useI18n } from '@/hooks/useI18n';
-  import useOpenNewPage from '@/hooks/useOpenNewPage';
   import { deleteNodes, filterTree, getGenerateId, mapTree, traverseTree } from '@/utils';
   import { countNodes } from '@/utils/tree';
 
@@ -149,7 +155,6 @@
   }>();
 
   const { t } = useI18n();
-  const { openNewPage } = useOpenNewPage();
 
   const scenario = defineModel<Scenario>('scenario', {
     required: true,
@@ -269,11 +274,9 @@
     }
   }
 
+  const showScenarioReportVisible = ref(false);
   function checkReport() {
-    openNewPage(ApiTestRouteEnum.API_TEST_REPORT, {
-      type: 'API_SCENARIO',
-      reportId: scenario.value.reportId,
-    });
+    showScenarioReportVisible.value = true;
   }
 
   /**

frontend/src/views/project-management/taskCenter/component/apiCase.vue

@@ -76,14 +76,7 @@
     :page-change="propsEvent.pageChange"
     :pagination="propsRes.msPagination!"
   />
-  <CaseReportDrawer
-    v-model:visible="showCaseDetailDrawer"
-    :report-id="activeDetailId"
-    :active-report-index="activeReportIndex"
-    :table-data="propsRes.data"
-    :page-change="propsEvent.pageChange"
-    :pagination="propsRes.msPagination!"
-  />
+  <caseAndScenarioReportDrawer v-model:visible="showCaseDetailDrawer" :report-id="activeDetailId" />
 </template>
 
 <script setup lang="ts">
@@ -96,7 +89,7 @@
   import type { BatchActionParams, BatchActionQueryParams, MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import ExecutionStatus from './executionStatus.vue';
-  import CaseReportDrawer from '@/views/api-test/management/components/management/case/caseReportDrawer.vue';
+  import caseAndScenarioReportDrawer from '@/views/api-test/components/caseAndScenarioReportDrawer.vue';
   import ReportDetailDrawer from '@/views/api-test/report/component/reportDetailDrawer.vue';
 
   import {