feat(报告): 接口 case 报告导出 pdf

frontend/src/enums/routeEnum.ts

@@ -116,7 +116,7 @@ export enum FullPageEnum {
   FULL_PAGE = 'fullPage',
   FULL_PAGE_TEST_PLAN_EXPORT_PDF = 'fullPageTestPlanExportPDF',
   FULL_PAGE_SCENARIO_EXPORT_PDF = 'fullPageScenarioExportPDF',
-  FULL_PAGE_CASE_EXPORT_PDF = 'fullPageCaseExportPDF',
+  FULL_PAGE_API_CASE_EXPORT_PDF = 'fullPageApiCaseExportPDF',
 }
 
 export const RouteEnum = {

frontend/src/router/routes/modules/fullPage.ts

@@ -17,7 +17,12 @@ const FullPage: AppRouteRecordRaw = {
     {
       path: 'scenarioExportPDF',
       name: FullPageEnum.FULL_PAGE_SCENARIO_EXPORT_PDF,
-      component: () => import('@/views/api-test/report/exportPDF.vue'),
+      component: () => import('@/views/api-test/report/exportScenarioPDF.vue'),
+    },
+    {
+      path: 'apiCaseExportPDF',
+      name: FullPageEnum.FULL_PAGE_API_CASE_EXPORT_PDF,
+      component: () => import('@/views/api-test/report/exportCasePDF.vue'),
     },
   ],
 };

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

@@ -205,7 +205,7 @@
 
   function exportHandler() {
     openNewPage(
-      props.isScenario ? FullPageEnum.FULL_PAGE_SCENARIO_EXPORT_PDF : FullPageEnum.FULL_PAGE_CASE_EXPORT_PDF,
+      props.isScenario ? FullPageEnum.FULL_PAGE_SCENARIO_EXPORT_PDF : FullPageEnum.FULL_PAGE_API_CASE_EXPORT_PDF,
       {
         id: props.reportId,
       }

frontend/src/views/api-test/report/component/caseReportCom.vue

@@ -157,13 +157,19 @@
     <!-- 报告步骤分析结束 -->
     <!-- 报告明细开始 -->
     <div class="report-info">
-      <reportInfoHeader v-model:keyword="cascaderKeywords" v-model:active-tab="activeTab" show-type="CASE" />
+      <reportInfoHeader
+        v-model:keyword="cascaderKeywords"
+        v-model:active-tab="activeTab"
+        show-type="CASE"
+        :is-export="props.isExport"
+      />
       <TiledList
         :key-words="cascaderKeywords"
         show-type="CASE"
         :active-type="activeTab"
         :report-detail="detail || []"
         :get-report-step-detail="props.getReportStepDetail"
+        :is-export="props.isExport"
       />
     </div>
     <!-- 报告明细结束 -->
@@ -191,6 +197,7 @@
   const props = defineProps<{
     detailInfo?: ReportDetail;
     getReportStepDetail?: (...args: any) => Promise<any>; // 获取步骤的详情内容接口
+    isExport?: boolean;
   }>();
 
   const detail = ref<ReportDetail>({

frontend/src/views/api-test/report/component/caseReportDrawer.vue

@@ -16,7 +16,7 @@
     @loaded="loadedReport"
   >
     <template #titleRight="{ loading }">
-      <div class="rightButtons flex items-center">
+      <div class="ms-drawer-right-operation-button flex items-center">
         <a-dropdown position="br" @select="shareHandler">
           <MsButton
             v-permission="['PROJECT_API_REPORT:READ+SHARE']"
@@ -37,17 +37,16 @@
             </a-doption>
           </template>
         </a-dropdown>
-        <!-- <MsButton
+        <MsButton
+          v-permission="['PROJECT_API_REPORT:READ+SHARE']"
           type="icon"
           status="secondary"
           class="mr-4 !rounded-[var(--border-radius-small)]"
-          :disabled="loading"
-          :loading="exportLoading"
           @click="exportHandler"
         >
-          <MsIcon type="icon-icon_move_outlined" class="mr-2 font-[16px]" />
+          <MsIcon type="icon-icon_bottom-align_outlined" class="mr-2 font-[16px]" />
           {{ t('common.export') }}
-        </MsButton> -->
+        </MsButton>
       </div>
     </template>
     <template #default="{ loading }">
@@ -71,14 +70,16 @@
 
   import { getShareInfo, reportCaseDetail } from '@/api/modules/api-test/report';
   import { useI18n } from '@/hooks/useI18n';
+  import useOpenNewPage from '@/hooks/useOpenNewPage';
   import { useAppStore } from '@/store';
 
   import type { ReportDetail } from '@/models/apiTest/report';
-  import { RouteEnum } from '@/enums/routeEnum';
+  import { FullPageEnum, RouteEnum } from '@/enums/routeEnum';
 
   const appStore = useAppStore();
   const { copy, isSupported } = useClipboard({ legacy: true });
   const { t } = useI18n();
+  const { openNewPage } = useOpenNewPage();
 
   const props = defineProps<{
     visible: boolean;
@@ -192,6 +193,12 @@
       }
     }
   );
+
+  function exportHandler() {
+    openNewPage(FullPageEnum.FULL_PAGE_API_CASE_EXPORT_PDF, {
+      id: props.reportId,
+    });
+  }
 </script>
 
 <style scoped lang="less">

frontend/src/views/api-test/report/exportCasePDF.vue

@@ -0,0 +1,72 @@
+<template>
+  <a-spin :loading="loading" :tip="t('report.detail.exportingPdf')" class="report-detail-container">
+    <div id="report-detail" class="report-detail">
+      <div class="mb-[16px] rounded-[var(--border-radius-small)] bg-white p-[16px]">{{ reportStepDetail?.name }}</div>
+      <CaseReportCom :detail-info="reportStepDetail" is-export />
+    </div>
+  </a-spin>
+</template>
+
+<script setup lang="ts">
+  import { useRoute } from 'vue-router';
+  import { Message } from '@arco-design/web-vue';
+
+  import CaseReportCom from './component/caseReportCom.vue';
+
+  import { reportCaseDetail } from '@/api/modules/api-test/report';
+  import { useI18n } from '@/hooks/useI18n';
+  import exportPDF from '@/utils/exportPdf';
+
+  import { ReportDetail } from '@/models/apiTest/report';
+
+  const route = useRoute();
+  const { t } = useI18n();
+
+  const loading = ref(false);
+  const reportStepDetail = ref<ReportDetail>();
+
+  async function initReportDetail() {
+    try {
+      loading.value = true;
+      reportStepDetail.value = await reportCaseDetail(route.query.id as string);
+      setTimeout(() => {
+        nextTick(async () => {
+          await exportPDF(reportStepDetail.value?.name || '', 'report-detail');
+          loading.value = false;
+          Message.success(t('report.detail.exportPdfSuccess'));
+        });
+      }, 500);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  onBeforeMount(() => {
+    if (route.query.id) {
+      initReportDetail();
+    }
+  });
+</script>
+
+<style lang="less">
+  .arco-spin-mask-icon {
+    @apply !fixed;
+  }
+</style>
+
+<style lang="less" scoped>
+  .report-detail-container {
+    @apply flex justify-center;
+    .report-detail {
+      @apply overflow-x-auto;
+
+      padding: 16px;
+      width: 1190px;
+      .ms-scroll-bar();
+      :deep(.report-container) {
+        height: auto;
+      }
+    }
+  }
+</style>