feat(任务中心): 接口用例/场景/测试计划/组执行历史的执行结果

frontend/src/api/modules/test-plan/testPlan.ts

@@ -82,6 +82,7 @@ import {
   SortApiCaseUrl,
   SortApiScenarioUrl,
   SortFeatureCaseUrl,
+  TaskResultUrl,
   TestPlanAndGroupCopyUrl,
   TestPlanApiAssociatedPageUrl,
   TestPlanAssociateBugUrl,
@@ -127,6 +128,7 @@ import type {
   PlanDetailExecuteHistoryItem,
   PlanDetailFeatureCaseItem,
   PlanDetailFeatureCaseListQueryParams,
+  PlanExecuteResult,
   PlanMinderEditParams,
   PlanMinderNode,
   RunFeatureCaseParams,
@@ -522,3 +524,8 @@ export function batchAssociatedBugToMinderCase(data: TableQueryParams) {
 export function batchAddBugToMinderCase(data: { request: BugEditFormObject; fileList: File[] }) {
   return MSR.uploadFile({ url: BatchAddBugToMinderCaseUrl }, data, '', true);
 }
+
+// 测试计划/组-执行结果
+export function getTaskResult(id: string) {
+  return MSR.get<PlanExecuteResult>({ url: `${TaskResultUrl}/${id}` });
+}

frontend/src/api/requrls/test-plan/testPlan.ts

@@ -188,3 +188,5 @@ export const BatchAddBugToCaseUrl = '/test-plan/functional/case/batch/add-bug';
 export const BatchAssociatedBugToMinderCaseUrl = '/test-plan/functional/case/minder/batch/associate-bug';
 // 测试计划-详情-用例列表-脑图批量新建缺陷
 export const BatchAddBugToMinderCaseUrl = '/test-plan/functional/case/minder/batch/add-bug';
+// 测试计划/组-执行结果
+export const TaskResultUrl = '/test-plan/report/get-task';

frontend/src/models/testPlan/testPlan.ts

@@ -6,6 +6,7 @@ import type { customFieldsItem } from '@/models/caseManagement/featureCase';
 import type { TableQueryParams } from '@/models/common';
 import { BatchApiParams, DragSortParams } from '@/models/common';
 import { CaseLinkEnum, LastExecuteResults } from '@/enums/caseEnum';
+import type { ExecuteStatusEnum } from '@/enums/taskCenter';
 import {
   type PlanMinderAssociateType,
   type PlanMinderCollectionType,
@@ -13,6 +14,8 @@ import {
   testPlanTypeEnum,
 } from '@/enums/testPlanEnum';
 
+import type { TaskReportDetail } from '../apiTest/report';
+
 export type planStatusType = 'PREPARED' | 'UNDERWAY' | 'COMPLETED' | 'ARCHIVED';
 
 export interface AssociateFunctionalCaseItem {
@@ -383,7 +386,7 @@ export interface PlanDetailExecuteHistoryItem {
   id: string;
   num: string;
   triggerMode: string; // 执行方式
-  execResult: string; // 执行结果
+  execResult: ExecuteStatusEnum; // 执行结果
   operationUser: string;
   startTime: number;
   endTime: number;
@@ -447,3 +450,17 @@ export interface PlanMinderEditParams {
   editList: PlanMinderEditListItem[];
   deletedIds: string[];
 }
+export interface PlanExecuteResultExecuteCaseCount {
+  success: number;
+  error: number;
+  fakeError: number;
+  block: number;
+  pending: number;
+}
+export interface PlanExecuteResult extends TaskReportDetail {
+  taskName: string;
+  reportId: string;
+  childPlans: { id: string; name: string }[]; // 子计划
+  createUser: string;
+  executeCaseCount: PlanExecuteResultExecuteCaseCount;
+}

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

@@ -35,9 +35,16 @@
       <template #status="{ record }">
         <ExecutionStatus :status="record.status" :module-type="ReportEnum.API_REPORT" />
       </template>
+      <template #executeStatus="{ record }">
+        <ExecStatus :status="record.execStatus" />
+      </template>
       <template #operation="{ record, rowIndex }">
         <div v-if="record.historyDeleted">
-          <a-tooltip :content="t('common.executionResultCleaned')" position="top">
+          <a-tooltip
+            v-if="record.execStatus !== ExecuteStatusEnum.PENDING"
+            :content="t('common.executionResultCleaned')"
+            position="top"
+          >
             <MsButton
               :disabled="
                 record.historyDeleted ||
@@ -51,6 +58,7 @@
         </div>
         <div v-else>
           <MsButton
+            v-if="record.execStatus !== ExecuteStatusEnum.PENDING"
             :disabled="
               record.historyDeleted ||
               !hasAnyPermission(['PROJECT_API_DEFINITION_CASE:READ+EXECUTE', 'PROJECT_API_REPORT:READ'])
@@ -83,6 +91,7 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
   import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
+  import ExecStatus from '@/views/taskCenter/component/execStatus.vue';
 
   import { getApiCaseExecuteHistory } from '@/api/modules/api-test/management';
   import { useI18n } from '@/hooks/useI18n';
@@ -90,9 +99,9 @@
   import { hasAnyPermission } from '@/utils/permission';
 
   import { ExecuteHistoryItem } from '@/models/apiTest/scenario';
-  // import { ReportExecStatus } from '@/enums/apiEnum';
   import { ReportEnum, ReportStatus, TriggerModeLabel } from '@/enums/reportEnum';
   import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
+  import { ExecuteStatusEnum } from '@/enums/taskCenter';
 
   import { triggerModeOptions } from '@/views/api-test/report/utils';
 
@@ -111,15 +120,6 @@
     });
   });
 
-  // const ExecStatusList = computed(() => {
-  //   return Object.values(ReportExecStatus).map((e) => {
-  //     return {
-  //       value: e,
-  //       key: e,
-  //     };
-  //   });
-  // });
-
   const showResponse = ref(false);
 
   const props = defineProps<{
@@ -152,6 +152,12 @@
       },
       width: 150,
     },
+    {
+      title: 'ms.taskCenter.executeStatus',
+      dataIndex: 'executeStatus',
+      slotName: 'executeStatus',
+      width: 150,
+    },
     {
       title: 'report.result',
       dataIndex: 'status',

frontend/src/views/api-test/scenario/components/executeHistory.vue

@@ -25,9 +25,16 @@
       <template #status="{ record }">
         <ExecutionStatus :status="record.status" :module-type="ReportEnum.API_SCENARIO_REPORT" />
       </template>
+      <template #executeStatus="{ record }">
+        <ExecStatus :status="record.execStatus" />
+      </template>
       <template #operation="{ record }">
         <div v-if="record.historyDeleted">
-          <a-tooltip :content="t('common.executionResultCleaned')" position="top">
+          <a-tooltip
+            v-if="record.execStatus !== ExecuteStatusEnum.PENDING"
+            :content="t('common.executionResultCleaned')"
+            position="top"
+          >
             <MsButton
               :disabled="
                 record.historyDeleted ||
@@ -41,6 +48,7 @@
         </div>
         <div v-else>
           <MsButton
+            v-if="record.execStatus !== ExecuteStatusEnum.PENDING"
             :disabled="
               record.historyDeleted ||
               !hasAnyPermission(['PROJECT_API_SCENARIO:READ+EXECUTE', 'PROJECT_API_REPORT:READ'])
@@ -74,15 +82,16 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
   import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
+  import ExecStatus from '@/views/taskCenter/component/execStatus.vue';
 
   import { getExecuteHistory } from '@/api/modules/api-test/scenario';
   import { useI18n } from '@/hooks/useI18n';
   import { hasAnyPermission } from '@/utils/permission';
 
   import { ExecuteHistoryItem } from '@/models/apiTest/scenario';
-  import { ReportExecStatus } from '@/enums/apiEnum';
   import { ReportEnum, ReportStatus, TriggerModeLabel } from '@/enums/reportEnum';
   import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
+  import { ExecuteStatusEnum } from '@/enums/taskCenter';
 
   import { triggerModeOptions } from '@/views/api-test/report/utils';
 
@@ -108,15 +117,6 @@
     });
   });
 
-  const ExecStatusList = computed(() => {
-    return Object.values(ReportExecStatus).map((e) => {
-      return {
-        value: e,
-        key: e,
-      };
-    });
-  });
-
   const columns: MsTableColumn = [
     {
       title: 'apiScenario.executeHistory.num',
@@ -135,6 +135,12 @@
       },
       width: 100,
     },
+    {
+      title: 'ms.taskCenter.executeStatus',
+      dataIndex: 'executeStatus',
+      slotName: 'executeStatus',
+      width: 150,
+    },
     {
       title: 'report.result',
       dataIndex: 'status',

frontend/src/views/api-test/scenario/components/scenarioTable.vue

@@ -1527,7 +1527,7 @@
         ...propsRes.value.filter,
       };
       const { selectedIds, selectAll, excludeIds } = batchParams.value;
-      await batchEditScenario({
+      await scenarioBatchEditSchedule({
         selectIds: selectedIds || [],
         selectAll: !!selectAll,
         excludeIds: excludeIds || [],
@@ -1538,7 +1538,7 @@
           keyword: keyword.value,
         },
         type: 'Schedule',
-        scheduleOpen: enable,
+        enable,
       });
       Message.success(
         enable

frontend/src/views/taskCenter/component/caseTaskDetailTable.vue

@@ -44,10 +44,10 @@
       <execStatus :status="filterContent.value" />
     </template>
     <template #result="{ record }">
-      <executionStatus :status="record.result" />
+      <executeResultStatus :status="record.result" />
     </template>
     <template #[FilterSlotNameEnum.GLOBAL_TASK_CENTER_EXEC_RESULT]="{ filterContent }">
-      <executionStatus :status="filterContent.value" />
+      <executeResultStatus :status="filterContent.value" />
     </template>
     <template #triggerMode="{ record }">
       {{ t(executeMethodMap[record.triggerMode]) }}
@@ -80,9 +80,15 @@
       >
         {{ t('common.stop') }}
       </MsButton>
-      <MsButton v-if="record.status !== ExecuteStatusEnum.PENDING" @click="checkExecuteResult(record)">
+      <a-tooltip
-        {{ t('ms.taskCenter.executeResult') }}
+        v-if="record.status !== ExecuteStatusEnum.PENDING"
-      </MsButton>
+        :content="t('common.executionResultCleaned')"
+        :disabled="!record.deleted"
+      >
+        <MsButton :disabled="record.resultDeleted" @click="checkExecuteResult(record)">
+          {{ t('ms.taskCenter.executeResult') }}
+        </MsButton>
+      </a-tooltip>
     </template>
   </ms-base-table>
   <caseExecuteResultDrawer
@@ -116,7 +122,7 @@
   import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
   import MsCascader from '@/components/business/ms-cascader/index.vue';
   import execStatus from './execStatus.vue';
-  import executionStatus from './executionStatus.vue';
+  import executeResultStatus from './executeResultStatus.vue';
 
   import {
     getOrganizationExecuteTaskDetailList,

frontend/src/views/taskCenter/component/caseTaskTable.vue

@@ -36,10 +36,10 @@
       <execStatus :status="filterContent.value" />
     </template>
     <template #result="{ record }">
-      <executionStatus :status="record.result" />
+      <executeResultStatus :status="record.result" />
     </template>
     <template #[FilterSlotNameEnum.GLOBAL_TASK_CENTER_EXEC_RESULT]="{ filterContent }">
-      <executionStatus :status="filterContent.value" />
+      <executeResultStatus :status="filterContent.value" />
     </template>
     <template #triggerMode="{ record }">
       {{ t(executeMethodMap[record.triggerMode]) }}
@@ -127,7 +127,7 @@
   import batchTaskReportDrawer from './batchTaskReportDrawer.vue';
   import execStatus from './execStatus.vue';
   import executeRatePopper from './executeRatePopper.vue';
-  import executionStatus from './executionStatus.vue';
+  import executeResultStatus from './executeResultStatus.vue';
   import CaseReportDrawer from '@/views/api-test/report/component/caseReportDrawer.vue';
   import ReportDetailDrawer from '@/views/api-test/report/component/reportDetailDrawer.vue';
 

frontend/src/views/taskCenter/component/executeRatePopper.vue

@@ -6,7 +6,7 @@
     :disabled="record.caseTotal === 0 || record.status === ExecuteStatusEnum.PENDING"
     @popup-visible-change="($event) => handleExecuteRatePopVisibleChange($event)"
   >
-    <div>{{ record.executeRate || '0.00' }}%</div>
+    <div :class="props.class">{{ record.executeRate || '0.00' }}%</div>
     <template #content>
       <a-spin :loading="record.loading" class="flex w-[130px] flex-col gap-[8px]">
         <div class="ms-taskCenter-execute-rate-item">
@@ -62,12 +62,15 @@
   import { useI18n } from '@/hooks/useI18n';
 
   import { TaskCenterStatisticsItem, TaskCenterTaskItem } from '@/models/taskCenter';
+  import { PlanExecuteResultExecuteCaseCount } from '@/models/testPlan/testPlan';
   import { ExecuteStatusEnum } from '@/enums/taskCenter';
 
   import { executeFinishedRateMap } from './config';
 
   const props = defineProps<{
-    executeTaskStatisticsRequest: (ids: string[]) => Promise<TaskCenterStatisticsItem[]>;
+    class?: string;
+    executeCaseCount?: PlanExecuteResultExecuteCaseCount;
+    executeTaskStatisticsRequest?: (ids: string[]) => Promise<TaskCenterStatisticsItem[]>;
   }>();
 
   const { t } = useI18n();
@@ -80,7 +83,7 @@
   });
 
   async function handleExecuteRatePopVisibleChange(_visible: boolean) {
-    if (_visible) {
+    if (_visible && props.executeTaskStatisticsRequest) {
       try {
         record.value.loading = true;
         const res = await props.executeTaskStatisticsRequest([record.value.id]);
@@ -96,6 +99,11 @@
       } finally {
         record.value.loading = false;
       }
+    } else if (props.executeCaseCount) {
+      record.value.pendingCount = props.executeCaseCount.pending;
+      record.value.successCount = props.executeCaseCount.success;
+      record.value.fakeErrorCount = props.executeCaseCount.fakeError;
+      record.value.errorCount = props.executeCaseCount.error;
     }
   }
 </script>

frontend/src/views/test-plan/testPlan/detail/executeHistory/index.vue

@@ -7,6 +7,9 @@
       <template #triggerMode="{ record }">
         <span>{{ t(TriggerModeLabel[record.triggerMode as keyof typeof TriggerModeLabel]) }}</span>
       </template>
+      <template #executeStatus="{ record }">
+        <ExecStatus :status="record.execStatus" />
+      </template>
       <template #lastExecResult="{ record }">
         <ExecutionStatus v-if="record.execResult" :status="record.execResult" :module-type="ReportEnum.API_REPORT" />
       </template>
@@ -18,7 +21,11 @@
         </a-tooltip>
       </template>
       <template #operation="{ record }">
-        <a-tooltip :content="t('common.executionResultCleaned')" :disabled="!record.deleted">
+        <a-tooltip
+          v-if="record.execStatus !== ExecuteStatusEnum.PENDING"
+          :content="t('common.executionResultCleaned')"
+          :disabled="!record.deleted"
+        >
           <MsButton
             :disabled="record.deleted || !hasAnyPermission(['PROJECT_TEST_PLAN_REPORT:READ'])"
             class="!mr-0"
@@ -42,6 +49,7 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import executeResultDrawer from '../executeResultDrawer.vue';
   import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
+  import ExecStatus from '@/views/taskCenter/component/execStatus.vue';
 
   import { getPlanDetailExecuteHistory } from '@/api/modules/test-plan/testPlan';
   import { useI18n } from '@/hooks/useI18n';
@@ -50,6 +58,7 @@
   import type { PlanDetailExecuteHistoryItem } from '@/models/testPlan/testPlan';
   import { PlanReportStatus, ReportEnum, TriggerModeLabel } from '@/enums/reportEnum';
   import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
+  import { ExecuteStatusEnum } from '@/enums/taskCenter';
 
   import { triggerModeOptions } from '@/views/api-test/report/utils';
 
@@ -88,6 +97,12 @@
       showTooltip: true,
       width: 150,
     },
+    {
+      title: 'ms.taskCenter.executeStatus',
+      dataIndex: 'executeStatus',
+      slotName: 'executeStatus',
+      width: 150,
+    },
     {
       title: 'common.executionResult',
       dataIndex: 'execResult',
@@ -118,20 +133,11 @@
       width: 100,
     },
   ];
-  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(
+  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getPlanDetailExecuteHistory, {
-    getPlanDetailExecuteHistory,
+    columns,
-    {
+    scroll: { x: '100%' },
-      columns,
+    selectable: false,
-      scroll: { x: '100%' },
+  });
-      selectable: false,
-    },
-    (record) => {
-      return {
-        ...record,
-        startTime: dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss'),
-      };
-    }
-  );
 
   function loadExecuteList() {
     setLoadListParams({
@@ -149,7 +155,7 @@
   }
 
   function getStartAndEndTime(record: PlanDetailExecuteHistoryItem) {
-    return `${dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss')}${t('common.to')}${
+    return `${record.startTime ? dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss') : '-'}${t('common.to')}${
       record.endTime ? dayjs(record.endTime).format('YYYY-MM-DD HH:mm:ss') : '-'
     }`;
   }

frontend/src/views/test-plan/testPlan/detail/executeResultDrawer.vue

@@ -5,7 +5,7 @@
         <a-tag :color="executeResultMap[props.planDetail.execResult]?.color">
           {{ t(executeResultMap[props.planDetail.execResult]?.label || '-') }}
         </a-tag>
-        <div class="one-line-text flex-1">{{ detail.name }}</div>
+        <div class="one-line-text flex-1">{{ detail.taskName }}</div>
       </div>
       <div class="flex justify-end">
         <MsButton type="icon" status="secondary" class="!rounded-[var(--border-radius-small)]" @click="init">
@@ -15,23 +15,22 @@
       </div>
     </template>
     <a-spin :loading="loading" class="block min-h-[200px]">
-      <MsDescription :descriptions="detail.description" :column="3" :line-gap="8" one-line-value>
+      <MsDescription :descriptions="detail.description" :column="2" :line-gap="8" one-line-value>
         <template #value="{ item }">
-          <execStatus
+          <execStatus v-if="item.key === 'status'" :status="props.planDetail.execResult" size="small" />
-            v-if="item.key === 'status'"
-            :status="props.planDetail.execResult as unknown as ExecuteStatusEnum"
-            size="small"
-          />
           <a-select
             v-else-if="item.key === 'testPlan'"
             v-model:model-value="activePlan"
             :options="testPlanGroups"
+            size="small"
+            @change="searchList"
           ></a-select>
           <executeRatePopper
             v-else-if="item.key === 'rate'"
             v-model:visible="executeRateVisible"
             v-model:record="detail"
-            :execute-task-statistics-request="fakeStatisticsRequest"
+            :execute-case-count="detail.executeCaseCount"
+            class="inline-block"
           />
           <a-tooltip
             v-else
@@ -46,7 +45,13 @@
         </template>
       </MsDescription>
       <div class="flex items-center justify-between">
-        <MsTab v-model:active-key="activeTable" :content-tab-list="contentTabList" :show-badge="false" />
+        <MsTab
+          v-model:active-key="activeTable"
+          :content-tab-list="contentTabList"
+          :show-badge="false"
+          class="no-content"
+          @change="searchList"
+        />
         <a-input-search
           v-model:model-value="keyword"
           :placeholder="t('report.detail.caseDetailSearchPlaceholder')"
@@ -89,6 +94,7 @@
     </a-spin>
   </MsDrawer>
   <CaseAndScenarioReportDrawer
+    v-if="reportVisible"
     v-model:visible="reportVisible"
     :report-id="apiReportId"
     do-not-show-share
@@ -99,6 +105,7 @@
 </template>
 
 <script setup lang="ts">
+  import { SelectOptionData } from '@arco-design/web-vue';
   import dayjs from 'dayjs';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
@@ -110,12 +117,10 @@
   import type { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
   import caseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
-  import CaseAndScenarioReportDrawer from '@/views/api-test/components/caseAndScenarioReportDrawer.vue';
   import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
   import execStatus from '@/views/taskCenter/component/execStatus.vue';
   import executeRatePopper from '@/views/taskCenter/component/executeRatePopper.vue';
 
-  import { getCaseTaskReport } from '@/api/modules/api-test/report';
   import {
     getApiPage,
     getScenarioPage,
@@ -124,6 +129,7 @@
     reportScenarioDetail,
     reportStepDetail,
   } from '@/api/modules/test-plan/report';
+  import { getTaskResult } from '@/api/modules/test-plan/testPlan';
   import { useI18n } from '@/hooks/useI18n';
   import useOpenNewPage from '@/hooks/useOpenNewPage';
 
@@ -132,11 +138,14 @@
   import { ReportEnum } from '@/enums/reportEnum';
   import { ApiTestRouteEnum } from '@/enums/routeEnum';
   import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
-  import { ExecuteStatusEnum } from '@/enums/taskCenter';
 
   import { casePriorityOptions, lastReportStatusListOptions } from '@/views/api-test/components/config';
   import { executeResultMap, executeStatusMap } from '@/views/taskCenter/component/config';
 
+  const CaseAndScenarioReportDrawer = defineAsyncComponent(
+    () => import('@/views/api-test/components/caseAndScenarioReportDrawer.vue')
+  );
+
   const props = defineProps<{
     planDetail: PlanDetailExecuteHistoryItem;
   }>();
@@ -147,72 +156,9 @@
   const visible = defineModel<boolean>('visible', { required: true });
   const loading = ref(false);
   const detail = ref<any>({ description: [] });
-  const testPlanGroups = ref<any[]>([]);
+  const testPlanGroups = ref<SelectOptionData[]>([]);
   const executeRateVisible = ref(false);
-
+  const activePlan = ref('');
-  async function fakeStatisticsRequest() {
-    return Promise.resolve([]);
-  }
-
-  async function init() {
-    try {
-      loading.value = true;
-      const res = await getCaseTaskReport(props.planDetail.id);
-      const { apiReportDetailDTOList } = res;
-      const [caseDetail] = apiReportDetailDTOList;
-      detail.value = {
-        name: caseDetail?.requestName,
-        description: [
-          {
-            label: t('ms.taskCenter.executeStatus'),
-            key: 'status',
-            value: t(executeStatusMap[res.status].label),
-          },
-          {
-            label: t('ms.taskCenter.taskCreateTime'),
-            value: res.createTime ? dayjs(res.createTime).format('YYYY-MM-DD HH:mm:ss') : '-',
-          },
-          {
-            label: t('ms.taskCenter.operationUser'),
-            value: props.planDetail.operationUser,
-          },
-          {
-            label: t('ms.taskCenter.taskStartTime'),
-            value: res.startTime ? dayjs(res.startTime).format('YYYY-MM-DD HH:mm:ss') : '-',
-          },
-          {
-            label: t('ms.taskCenter.executeFinishedRate'),
-            key: 'rate',
-            value: res.result,
-          },
-          {
-            label: t('ms.taskCenter.taskEndTime'),
-            value: res.endTime ? dayjs(res.endTime).format('YYYY-MM-DD HH:mm:ss') : '-',
-          },
-          {
-            label: t('menu.testPlan'),
-            key: 'testPlan',
-            value: '',
-          },
-        ] as Description[],
-      };
-      testPlanGroups.value = [
-        {
-          id: '1',
-          name: 'A',
-        },
-        {
-          id: '2',
-          name: 'B',
-        },
-      ];
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    } finally {
-      loading.value = false;
-    }
-  }
 
   const columns: MsTableColumn = [
     {
@@ -263,7 +209,6 @@
     },
   ];
 
-  const activePlan = ref('1');
   const activeTable = ref<'case' | 'scenario'>('case');
   const contentTabList = [
     { value: 'case', label: t('report.detail.apiCaseDetails') },
@@ -311,25 +256,85 @@
   }
 
   function searchList() {
-    currentCaseTable.value.setLoadListParams({ keyword: keyword.value });
+    currentCaseTable.value.setLoadListParams({
+      keyword: keyword.value,
+      reportId: detail.value.reportId,
+      planId: activePlan.value || detail.value.id,
+    });
     currentCaseTable.value.loadList();
   }
 
   // 去用例详情页面
-  function toDetail(record: PlanDetailExecuteHistoryItem) {
+  function toDetail(record: ApiOrScenarioCaseItem) {
     if (activeTable.value === 'scenario') {
       openNewPage(ApiTestRouteEnum.API_TEST_SCENARIO, {
         id: record.id,
-        pId: record.id,
+        pId: record.projectId,
       });
     } else {
       openNewPage(ApiTestRouteEnum.API_TEST_MANAGEMENT, {
         cId: record.id,
-        pId: record.id,
+        pId: record.projectId,
       });
     }
   }
 
+  async function init() {
+    try {
+      loading.value = true;
+      const res = await getTaskResult(props.planDetail.id);
+      detail.value = {
+        description: [
+          {
+            label: t('ms.taskCenter.executeStatus'),
+            key: 'status',
+            value: t(executeStatusMap[res.status].label),
+          },
+          {
+            label: t('ms.taskCenter.taskCreateTime'),
+            value: res.createTime ? dayjs(res.createTime).format('YYYY-MM-DD HH:mm:ss') : '-',
+          },
+          {
+            label: t('ms.taskCenter.operationUser'),
+            value: res.createUser,
+          },
+          {
+            label: t('ms.taskCenter.taskStartTime'),
+            value: res.startTime ? dayjs(res.startTime).format('YYYY-MM-DD HH:mm:ss') : '-',
+          },
+          {
+            label: t('ms.taskCenter.executeFinishedRate'),
+            key: 'rate',
+            value: res.result,
+          },
+          {
+            label: t('ms.taskCenter.taskEndTime'),
+            value: res.endTime ? dayjs(res.endTime).format('YYYY-MM-DD HH:mm:ss') : '-',
+          },
+        ] as Description[],
+        ...res,
+      };
+      if (res.childPlans.length) {
+        detail.value.description.push({
+          label: t('testPlan.testPlanIndex.testPlan'),
+          key: 'testPlan',
+          value: '',
+        });
+        testPlanGroups.value = res.childPlans.map((item) => ({
+          value: item.id,
+          label: item.name,
+        }));
+        activePlan.value = res.childPlans[0]?.id;
+      }
+      searchList();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      loading.value = false;
+    }
+  }
+
   watch(
     () => visible.value,
     (val) => {

frontend/src/views/test-plan/testPlan/detail/index.vue

@@ -94,7 +94,7 @@
       :content-tab-list="tabList"
       :change-interceptor="changeTabInterceptor"
       no-content
-      class="relative mx-[16px] border-b"
+      class="relative mx-[16px]"
     />
   </MsCard>
   <MsCard class="mt-[16px]" simple has-breadcrumb no-content-padding>