test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(测试计划): 测试计划详情-执行历史页面样式

This commit is contained in:
teukkk 2024-06-05 15:33:51 +08:00 committed by 刘瑞斌
parent 20969243cd
commit bcfee92570
7 changed files with 169 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/api/modules/test-plan/testPlan.ts
View File

@ -32,6 +32,7 @@ import {
GetTestPlanUsersUrl,
MoveTestPlanModuleUrl,
planDetailBugPageUrl,
PlanDetailExecuteHistoryUrl,
planPassRateUrl,
RunFeatureCaseUrl,
SortFeatureCaseUrl,
@ -60,6 +61,7 @@ import type {
PlanDetailApiCaseItem,
PlanDetailApiScenarioItem,
PlanDetailBugItem,
PlanDetailExecuteHistoryItem,
PlanDetailFeatureCaseItem,
PlanDetailFeatureCaseListQueryParams,
RunFeatureCaseParams,
@ -248,3 +250,7 @@ export function getPlanDetailApiCaseList(data: PlanDetailFeatureCaseListQueryPar
export function getPlanDetailApiScenarioList(data: PlanDetailFeatureCaseListQueryParams) {
return MSR.post<CommonList<PlanDetailApiScenarioItem>>({ url: GetPlanDetailFeatureCaseListUrl, data });
}
// 计划详情-执行历史 TODO 联调
export function getPlanDetailExecuteHistory(data: PlanDetailFeatureCaseListQueryParams) {
return MSR.post<CommonList<PlanDetailExecuteHistoryItem>>({ url: PlanDetailExecuteHistoryUrl, data });
}

2
frontend/src/api/requrls/test-plan/testPlan.ts
View File

@ -78,3 +78,5 @@ export const GetTestPlanUsersUrl = '/test-plan/functional/case/user-option';
export const BatchUpdateCaseExecutorUrl = '/test-plan/functional/case/batch/update/executor';
// 计划详情-功能用例-执行历史
export const ExecuteHistoryUrl = '/test-plan/functional/case/exec/history';
// 计划详情-执行历史 TODO 联调
export const PlanDetailExecuteHistoryUrl = '/api/scenario/execute/page';

13
frontend/src/models/testPlan/testPlan.ts
View File

@ -275,4 +275,17 @@ export interface PlanDetailApiScenarioItem {
testPlanId: string;
lastExecResultReportId: string;
}
// 执行历史 TODO 联调
export interface PlanDetailExecuteHistoryItem {
id: string;
num: string;
name: string;
operationUser: string;
createUser: string;
startTime: number;
endTime: number;
lastExecResult: LastExecuteResults;
triggerMode: string;
}
export default {};

140
frontend/src/views/test-plan/testPlan/detail/executeHistory/index.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<div class="p-[16px]">
<ms-base-table v-bind="propsRes" no-disable v-on="propsEvent">
<template #[FilterSlotNameEnum.API_TEST_CASE_API_REPORT_EXECUTE_RESULT]="{ filterContent }">
<ExecutionStatus :module-type="ReportEnum.API_REPORT" :status="filterContent.value" />
</template>
<template #triggerMode="{ record }">
<span>{{ t(TriggerModeLabel[record.triggerMode as keyof typeof TriggerModeLabel]) }}</span>
</template>
<template #lastExecResult="{ record }">
<ExecutionStatus :status="record.status" :module-type="ReportEnum.API_REPORT" />
</template>
<template #executionStartAndEndTime="{ record }">
<!-- TODO 样式 -->
<div>{{ record.startTime }} 至 {{ record.endTime ?? '-' }}</div>
</template>
<template #operation="{ record }">
<MsButton class="!mr-0" @click="toReport(record)">
{{ t('apiScenario.executeHistory.execution.operation') }}
</MsButton>
</template>
</ms-base-table>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import dayjs from 'dayjs';
import MsButton from '@/components/pure/ms-button/index.vue';
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 ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
import { getPlanDetailExecuteHistory } from '@/api/modules/test-plan/testPlan';
import { useI18n } from '@/hooks/useI18n';
import useOpenNewPage from '@/hooks/useOpenNewPage';
import useAppStore from '@/store/modules/app';
import type { PlanDetailExecuteHistoryItem } from '@/models/testPlan/testPlan';
import { ReportEnum, TriggerModeLabel } from '@/enums/reportEnum';
import { TestPlanRouteEnum } from '@/enums/routeEnum';
import { FilterSlotNameEnum } from '@/enums/tableFilterEnum';
import { triggerModeOptions } from '@/views/api-test/report/utils';
import { executionResultMap } from '@/views/case-management/caseManagementFeature/components/utils';
const { t } = useI18n();
const route = useRoute();
const appStore = useAppStore();
const { openNewPage } = useOpenNewPage();
const planId = ref(route.query.id as string);
const columns: MsTableColumn = [
{
title: 'apiTestManagement.order',
dataIndex: 'num',
sortIndex: 1,
width: 150,
},
{
title: 'apiTestManagement.executeMethod',
dataIndex: 'triggerMode',
slotName: 'triggerMode',
filterConfig: {
options: triggerModeOptions,
},
showTooltip: true,
width: 150,
},
{
title: 'common.executionResult',
dataIndex: 'lastExecResult',
slotName: 'lastExecResult',
filterConfig: {
valueKey: 'key',
labelKey: 'statusText',
options: Object.values(executionResultMap),
filterSlotName: FilterSlotNameEnum.CASE_MANAGEMENT_EXECUTE_RESULT,
},
width: 150,
},
{
title: 'apiTestManagement.taskOperator',
dataIndex: 'operationUser',
showTooltip: true,
width: 150,
},
{
title: 'testPlan.executeHistory.executionStartAndEndTime',
dataIndex: 'startTime',
slotName: 'executionStartAndEndTime',
width: 200,
},
{
title: 'common.operation',
slotName: 'operation',
dataIndex: 'operation',
fixed: 'right',
width: 100,
},
];
const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(
getPlanDetailExecuteHistory,
{
columns,
scroll: { x: '100%' },
selectable: false,
heightUsed: 398,
},
(record) => {
return {
...record,
startTime: dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss'),
};
}
);
function loadExecuteList() {
setLoadListParams({
projectId: appStore.currentProjectId,
id: planId.value,
});
loadList();
}
// 查看报告详情
function toReport(record: PlanDetailExecuteHistoryItem) {
openNewPage(TestPlanRouteEnum.TEST_PLAN_REPORT_DETAIL, {
id: record.id,
});
}
onBeforeMount(() => {
loadExecuteList();
});
</script>

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

@ -122,6 +122,7 @@
:can-edit="detail.status !== 'ARCHIVED'"
@refresh="initDetail"
/>
<ExecuteHistory v-if="activeTab === 'executeHistory'" />
</MsCard>
<AssociateDrawer
v-model:visible="caseAssociateVisible"
@ -159,6 +160,7 @@
import ApiCase from './apiCase/index.vue';
import ApiScenario from './apiScenario/index.vue';
import BugManagement from './bugManagement/index.vue';
import ExecuteHistory from './executeHistory/index.vue';
import FeatureCase from './featureCase/index.vue';
import CreateAndEditPlanDrawer from '@/views/test-plan/testPlan/createAndEditPlanDrawer.vue';
@ -320,6 +322,10 @@
value: 'apiScenario',
label: t('testPlan.testPlanIndex.apiScenarioCase'),
},
{
value: 'executeHistory',
label: t('testPlan.featureCase.executionHistory'),
},
]);
function getTabBadge(tabKey: string) {
switch (tabKey) {

1
frontend/src/views/test-plan/testPlan/locale/en-US.ts
View File

@ -108,4 +108,5 @@ export default {
'testPlan.featureCase.richTextDblclickPlaceholder': 'Double click for quick input',
'testPlan.featureCase.autoNextTip1': 'Enable: After submitting the results, jump to the next case',
'testPlan.featureCase.autoNextTip2': 'Close: After submitting the results, it is still in the current state',
'testPlan.executeHistory.executionStartAndEndTime': 'Execution start and end time',
};

1
frontend/src/views/test-plan/testPlan/locale/zh-CN.ts
View File

@ -102,4 +102,5 @@ export default {
'testPlan.featureCase.richTextDblclickPlaceholder': '双击可快速输入',
'testPlan.featureCase.autoNextTip1': '开启：提交结果后，跳转至下一条用例',
'testPlan.featureCase.autoNextTip2': '关闭：提交结果后，还在当前',
'testPlan.executeHistory.executionStartAndEndTime': '执行起止时间',
};