From 1c64577431b800abb25406229cd2b71d5c458513 Mon Sep 17 00:00:00 2001 From: "xinxin.wu" Date: Mon, 25 Mar 2024 16:11:38 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?= =?UTF-8?q?=E6=8A=A5=E5=91=8Abug=E4=BF=AE=E5=A4=8D=E5=92=8C=E8=A1=A5?= =?UTF-8?q?=E5=85=85=E9=83=A8=E5=88=86=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../report/component/case/setReportChart.vue | 8 +- .../report/component/caseReportCom.vue | 56 ++++++----- .../api-test/report/component/scenarioCom.vue | 63 ++++++------- .../component/step/reportInfoHeaders.vue | 93 +++++++++++++++++++ .../report/component/step/stepStatus.vue | 48 ++++++++++ .../report/component/step/stepTree.vue | 50 ++++++++-- .../api-test/report/component/tiledList.vue | 89 +++++++++++++----- .../src/views/api-test/report/locale/en-US.ts | 4 + .../src/views/api-test/report/locale/zh-CN.ts | 4 + frontend/src/views/api-test/report/utils.ts | 4 + 10 files changed, 322 insertions(+), 97 deletions(-) create mode 100644 frontend/src/views/api-test/report/component/step/reportInfoHeaders.vue create mode 100644 frontend/src/views/api-test/report/component/step/stepStatus.vue diff --git a/frontend/src/views/api-test/report/component/case/setReportChart.vue b/frontend/src/views/api-test/report/component/case/setReportChart.vue index 858ee19550..fbfb7296bf 100644 --- a/frontend/src/views/api-test/report/component/case/setReportChart.vue +++ b/frontend/src/views/api-test/report/component/case/setReportChart.vue @@ -3,7 +3,7 @@
{{ t('report.detail.api.total') }}
-
4
+
{{ totalCount }}
@@ -38,6 +38,12 @@ options: Record; legendData: LegendData[]; }>(); + + const totalCount = computed(() => { + return props.legendData.reduce((prev, item) => { + return prev + item.count; + }, 0); + }); diff --git a/frontend/src/views/api-test/report/component/step/stepStatus.vue b/frontend/src/views/api-test/report/component/step/stepStatus.vue new file mode 100644 index 0000000000..fcf6a41dc3 --- /dev/null +++ b/frontend/src/views/api-test/report/component/step/stepStatus.vue @@ -0,0 +1,48 @@ + + + + + diff --git a/frontend/src/views/api-test/report/component/step/stepTree.vue b/frontend/src/views/api-test/report/component/step/stepTree.vue index 79abb79247..c81850cee0 100644 --- a/frontend/src/views/api-test/report/component/step/stepTree.vue +++ b/frontend/src/views/api-test/report/component/step/stepTree.vue @@ -4,6 +4,7 @@
- - {{ step.status === 'SUCCESS' ? t('report.detail.api.pass') : t('report.detail.api.resError') }} - + + + + + + + +
{{ t('report.detail.api.statusCode') }}
@@ -97,14 +116,22 @@ {{ t('report.detail.api.responseTime') }} {{ formatDuration(step.requestTime).split('-')[0] - }}{{ formatDuration(step.requestTime).split('-')[1] }}{{ step.requestTime ? formatDuration(step.requestTime).split('-')[0] : '-' + }}{{ step.requestTime ? formatDuration(step.requestTime).split('-')[1] : 'ms' }} - - {{ t('report.detail.api.responseSize') }} - {{ step.responseSize || 0 }} bytes + + + {{ t('report.detail.api.responseSize') }} + {{ step.responseSize || 0 }} bytes + +
@@ -142,6 +169,7 @@ import MsTag from '@/components/pure/ms-tag/ms-tag.vue'; import MsTree from '@/components/business/ms-tree/index.vue'; import { MsTreeExpandedData } from '@/components/business/ms-tree/types'; + import stepStatus from './stepStatus.vue'; import StepDetailContent from '@/views/api-test/components/requestComposition/response/result/index.vue'; import ConditionStatus from '@/views/api-test/report/component/conditionStatus.vue'; @@ -160,6 +188,7 @@ console?: string; environmentName?: string; reportId?: string; + expandedKeys: (string | number)[]; }>(); const loading = ref(false); @@ -170,6 +199,9 @@ const steps = defineModel('steps', { required: true, }); + const innerExpandedKeys = defineModel<(string | number)[]>('expandedKeys', { + required: false, + }); /** * 处理步骤展开折叠 diff --git a/frontend/src/views/api-test/report/component/tiledList.vue b/frontend/src/views/api-test/report/component/tiledList.vue index b6efabd7ad..a987e78116 100644 --- a/frontend/src/views/api-test/report/component/tiledList.vue +++ b/frontend/src/views/api-test/report/component/tiledList.vue @@ -5,17 +5,11 @@ 'border border-solid border-[var(--color-text-n8)]': props.showType === 'API', }" > - - import { ref } from 'vue'; - import { cloneDeep } from 'lodash-es'; + import { cloneDeep, debounce } from 'lodash-es'; import StepDrawer from './step/stepDrawer.vue'; import StepTree from './step/stepTree.vue'; - import { addLevelToTree } from '@/utils'; - import type { ReportDetail, ScenarioItemType } from '@/models/apiTest/report'; import { addFoldField } from '../utils'; @@ -56,6 +47,7 @@ reportDetail: ReportDetail; activeType: 'tiled' | 'tab'; // 平铺模式|tab模式 showType: 'API' | 'CASE'; // 接口场景|用例 + keyWords: string; }>(); const tiledList = ref([]); @@ -77,19 +69,74 @@ activeStepIndex.value = item.sort; } - onMounted(() => { - tiledList.value = addLevelToTree(tiledList.value) as ScenarioItemType[]; - }); + const expandedKeys = ref<(string | number)[]>([]); + const originTreeData = ref([]); - watchEffect(() => { - if (props.reportDetail && props.reportDetail.children) { - tiledList.value = props.reportDetail.children || []; - tiledList.value = addLevelToTree(tiledList.value) as ScenarioItemType[]; - tiledList.value.forEach((item) => { - addFoldField(item); + function initStepTree() { + tiledList.value = cloneDeep(props.reportDetail.children) || []; + tiledList.value.forEach((item) => { + addFoldField(item); + }); + originTreeData.value = cloneDeep(tiledList.value); + } + + watch( + () => props.reportDetail, + (val) => { + if (val && val.children) { + initStepTree(); + } + }, + { deep: true, immediate: true } + ); + + function searchStep() { + const splitLevel = props.keyWords.split('-'); + const stepTypeStatus = splitLevel[1]; + const stepType = splitLevel[0] !== 'REQUEST' ? ['API', 'API_CASE', 'CUSTOM_REQUEST'] : splitLevel[0]; + const search = (_data: ScenarioItemType[]) => { + const result: ScenarioItemType[] = []; + _data.forEach((item) => { + if ( + (stepType.includes(item.stepType) && item.status && item.status.includes(stepTypeStatus)) || + (stepTypeStatus && stepTypeStatus.includes('scriptIdentifier') && item.scriptIdentifier) + ) { + result.push({ ...item, expanded: true }); + } else if (item.children) { + const filterData = search(item.children); + if (filterData.length) { + result.push({ + ...item, + expanded: true, + children: filterData, + }); + } + } }); + result.forEach((item: any) => expandedKeys.value.push(item.stepId)); // 搜索时，匹配的节点需要自动展开 + return result; + }; + + return search(originTreeData.value); + } + + // 防抖搜索 + const updateDebouncedSearch = debounce(() => { + if (props.keyWords) { + tiledList.value = searchStep(); } - }); + }, 300); + + watch( + () => props.keyWords, + (val) => { + if (!val) { + initStepTree(); + } else { + updateDebouncedSearch(); + } + } + );