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

refactor(测试计划): 报告-测试点模式展示优化-子级列宽计算

This commit is contained in:
teukkk 2024-12-06 19:36:05 +08:00 committed by Craftsman
parent a51ea8702f
commit 4d3eee679b
6 changed files with 169 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/hooks/useTableStore.ts
View File

@ -167,6 +167,18 @@ export default function useTableStore() {
}
}
// 获取存储的列
async function getStoreColumns(tableKey: TableKeyEnum) {
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
tableKey.startsWith('SYSTEM') || tableKey.startsWith('ORGANIZATION')
);
if (tableColumnsMap) {
return tableColumnsMap.column;
}
return [];
}
async function getColumns(tableKey: TableKeyEnum, isSimple?: boolean) {
const tableColumnsMap = await getItem<MsTableSelectorItem>(
tableKey,
@ -273,5 +285,6 @@ export default function useTableStore() {
getColumns,
getShowInTableColumns,
getPageSize,
getStoreColumns,
};
}

51
frontend/src/views/test-plan/report/detail/component/reportConfig.ts
View File

@ -1,3 +1,5 @@
import type { MsTableColumn } from '@/components/pure/ms-table/type';
import { defaultCount } from '@/config/testPlan';
import { ApiOrScenarioCaseItem, ReportBugItem } from '@/models/testPlan/report';
@ -198,3 +200,52 @@ export const iconTypeStatus: Record<string, any> = {
color: '!text-[var(--color-text-input-border)]',
},
};
export const testPlanNameColumn: MsTableColumn = [
{
title: 'report.plan.name',
dataIndex: 'planName',
sortIndex: 0,
showTooltip: true,
width: 200,
showInTable: true,
showDrag: false,
columnSelectorDisabled: true,
},
];
export const lastStaticColumns: MsTableColumn = [
{
title: 'common.belongModule',
dataIndex: 'moduleName',
showTooltip: true,
width: 200,
showInTable: true,
showDrag: true,
},
{
title: 'testPlan.featureCase.executor',
dataIndex: 'executeUser',
showTooltip: true,
showInTable: true,
showDrag: true,
width: 150,
},
{
title: 'testPlan.featureCase.bugCount',
dataIndex: 'bugCount',
showInTable: true,
showDrag: true,
width: 100,
},
];
export const collectionNameColumn: MsTableColumn = [
{
title: 'ms.case.associate.testSet',
dataIndex: 'collectionName',
sortIndex: 0,
showInTable: true,
showDrag: false,
width: 200,
columnSelectorDisabled: true,
},
];

63
frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
View File

@ -71,7 +71,11 @@
import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
import { casePriorityOptions, lastReportStatusListOptions } from '@/views/api-test/components/config';
import { detailTableExample } from '@/views/test-plan/report/detail/component/reportConfig';
import {
detailTableExample,
lastStaticColumns,
testPlanNameColumn,
} from '@/views/test-plan/report/detail/component/reportConfig';
const tableStore = useTableStore();
@ -136,42 +140,8 @@
showDrag: true,
},
];
const testPlanNameColumns: MsTableColumn = [
{
title: 'report.plan.name',
dataIndex: 'planName',
showTooltip: true,
width: 200,
showInTable: true,
showDrag: false,
columnSelectorDisabled: true,
},
];
const lastStaticColumns: MsTableColumn = [
{
title: 'common.belongModule',
dataIndex: 'moduleName',
showTooltip: true,
width: 200,
showInTable: true,
showDrag: true,
},
{
title: 'testPlan.featureCase.executor',
dataIndex: 'executeUser',
showTooltip: true,
width: 130,
showInTable: true,
showDrag: true,
},
{
title: 'testPlan.featureCase.bugCount',
dataIndex: 'bugCount',
slotName: 'bugCount',
width: 100,
showInTable: true,
showDrag: true,
},
const apiLastStaticColumns: MsTableColumn = [
...lastStaticColumns,
{
title: '',
slotName: 'operation',
@ -182,9 +152,9 @@
const columns = computed(() => {
if (isGroup.value) {
return [...staticColumns, ...testPlanNameColumns, ...lastStaticColumns];
return [...staticColumns, ...testPlanNameColumn, ...apiLastStaticColumns];
}
return [...staticColumns, ...lastStaticColumns];
return [...staticColumns, ...apiLastStaticColumns];
});
const keyMap: Record<string, any> = {
@ -316,13 +286,22 @@
}
);
async function initSetColumnConfig() {
if (!props.enabledTestSet) {
const tmpArr = await tableStore.getStoreColumns(tableKey.value);
await tableStore.initColumn(
tableKey.value,
tmpArr?.length ? tmpArr.filter((item) => item.dataIndex !== 'collectionName') : columns.value,
'drawer'
);
}
}
defineExpose({
loadCaseList,
});
if (!props.enabledTestSet) {
await tableStore.initColumn(tableKey.value, columns.value, 'drawer');
}
await initSetColumnConfig();
</script>
<style lang="less" scoped></style>

67
frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
View File

@ -74,7 +74,11 @@
import { ReportCardTypeEnum } from '@/enums/testPlanReportEnum';
import { executionResultMap } from '@/views/case-management/caseManagementFeature/components/utils';
import { detailTableExample } from '@/views/test-plan/report/detail/component/reportConfig';
import {
detailTableExample,
lastStaticColumns,
testPlanNameColumn,
} from '@/views/test-plan/report/detail/component/reportConfig';
const tableStore = useTableStore();
@ -138,16 +142,7 @@
width: 150,
},
];
const lastStaticColumns: MsTableColumn = [
{
title: 'common.belongModule',
dataIndex: 'moduleName',
ellipsis: true,
showTooltip: true,
showInTable: true,
showDrag: true,
width: 200,
},
const caseLastStaticColumns: MsTableColumn = [
{
title: 'case.caseLevel',
dataIndex: 'priority',
@ -156,47 +151,20 @@
showDrag: true,
width: 120,
},
{
title: 'testPlan.featureCase.executor',
dataIndex: 'executeUser',
showTooltip: true,
showInTable: true,
showDrag: true,
width: 150,
},
{
title: 'testPlan.featureCase.bugCount',
dataIndex: 'bugCount',
showInTable: true,
showDrag: true,
width: 100,
},
...lastStaticColumns,
{
title: '',
slotName: 'operation',
dataIndex: 'operation',
width: 30,
},
];
const testPlanNameColumns: MsTableColumn = [
{
title: 'report.plan.name',
dataIndex: 'planName',
showTooltip: true,
showInTable: true,
showDrag: false,
columnSelectorDisabled: true,
width: 200,
width: 80,
},
];
const columns = computed(() => {
if (isGroup.value) {
return [...staticColumns, ...testPlanNameColumns, ...lastStaticColumns];
return [...staticColumns, ...testPlanNameColumn, ...caseLastStaticColumns];
}
return [...staticColumns, ...lastStaticColumns];
return [...staticColumns, ...caseLastStaticColumns];
});
const reportFeatureCaseList = () => {
@ -311,13 +279,22 @@
}
});
async function initSetColumnConfig() {
if (!props.enabledTestSet) {
const tmpArr = await tableStore.getStoreColumns(tableKey.value);
await tableStore.initColumn(
tableKey.value,
tmpArr?.length ? tmpArr.filter((item) => item.dataIndex !== 'collectionName') : columns.value,
'drawer'
);
}
}
defineExpose({
loadCaseList,
});
if (!props.enabledTestSet) {
await tableStore.initColumn(tableKey.value, columns.value, 'drawer');
}
await initSetColumnConfig();
</script>
<style lang="less" scoped></style>

68
frontend/src/views/test-plan/report/detail/component/system-card/testSetTable.vue
View File

@ -53,6 +53,11 @@
import { casePriorityOptions, lastReportStatusListOptions } from '@/views/api-test/components/config';
import { executionResultMap } from '@/views/case-management/caseManagementFeature/components/utils';
import {
collectionNameColumn,
lastStaticColumns,
testPlanNameColumn,
} from '@/views/test-plan/report/detail/component/reportConfig';
const tableStore = useTableStore();
@ -191,54 +196,9 @@
showDrag: true,
},
];
const testPlanNameColumn: MsTableColumn = [
{
title: 'report.plan.name',
dataIndex: 'planName',
sortIndex: 0,
showTooltip: true,
width: 200,
showInTable: true,
showDrag: false,
columnSelectorDisabled: true,
},
];
const lastStaticColumns: MsTableColumn = [
{
title: 'common.belongModule',
dataIndex: 'moduleName',
showTooltip: true,
width: 200,
showInTable: true,
showDrag: true,
},
{
title: 'testPlan.featureCase.executor',
dataIndex: 'executeUser',
showTooltip: true,
showInTable: true,
showDrag: true,
width: 150,
},
{
title: 'testPlan.featureCase.bugCount',
dataIndex: 'bugCount',
showInTable: true,
showDrag: true,
width: 100,
},
];
const columns = computed<MsTableColumn>(() => {
return [
{
title: 'ms.case.associate.testSet',
dataIndex: 'collectionName',
sortIndex: 0,
showInTable: true,
showDrag: false,
width: 200,
columnSelectorDisabled: true,
},
...collectionNameColumn,
...(isGroup.value ? testPlanNameColumn : []),
...(props.activeType === ReportCardTypeEnum.FUNCTIONAL_DETAIL ? featureStaticColumns : apiStaticColumns),
...lastStaticColumns,
@ -246,7 +206,7 @@
title: '',
dataIndex: 'operation',
slotName: 'operation',
width: 30,
width: 80,
},
];
});
@ -300,13 +260,21 @@
emit('initColumn');
}
async function initSetColumnConfig() {
if (props.enabledTestSet) {
const tmpArr = await tableStore.getStoreColumns(props.tableKey);
const columnsConfig = tmpArr?.length
? [...collectionNameColumn, ...tmpArr.filter((item) => item.dataIndex !== 'collectionName')]
: columns.value;
await tableStore.initColumn(props.tableKey, columnsConfig, 'drawer');
}
}
defineExpose({
loadCaseList,
});
if (props.enabledTestSet) {
await tableStore.initColumn(props.tableKey, columns.value, 'drawer');
}
await initSetColumnConfig();
</script>
<style scoped lang="less">

52
frontend/src/views/test-plan/report/detail/component/system-card/testSetTableChildrenList.vue
View File

@ -2,15 +2,18 @@
<MsList ref="listRef" class="w-full" :data="props.list" :virtual-list-props="{ height: 400, threshold: 200 }">
<template #item="{ item }">
<div :class="`arco-table-tr flex h-[48px] items-center ${getRowClass(item)} `">
<div :style="{ width: `${expendWidth}px` }"></div>
<template v-for="column in columns" :key="column.dataIndex">
<div
v-if="['collectionName', 'operation'].includes(column.dataIndex as string)"
:class="`arco-table-cell w-[${column.width}px]`"
class="list-column"
:style="{ width: `${column.width}px` }"
>
</div>
<div
v-if="['name','planName', 'bugCount', 'executeUser', 'moduleName'].includes(column.dataIndex as string)"
:class="`arco-table-cell w-[${column.width}px]`"
class="list-column"
:style="{ width: `${column.width}px` }"
>
<a-tooltip
position="tl"
@ -25,15 +28,16 @@
</div>
</a-tooltip>
</div>
<div v-if="column.dataIndex === 'num'" :class="`arco-table-cell w-[${column.width}px]`">
<div v-if="column.dataIndex === 'num'" class="list-column" :style="{ width: `${column.width}px` }">
<MsButton type="text" @click="toDetail(item)">{{ item.num }}</MsButton>
</div>
<div v-if="column.dataIndex === 'priority'" :class="`arco-table-cell w-[${column.width}px]`">
<div v-if="column.dataIndex === 'priority'" class="list-column" :style="{ width: `${column.width}px` }">
<CaseLevel :case-level="item.priority" />
</div>
<div
v-if="column.dataIndex === 'executeResult'"
:class="`arco-table-cell flex items-center w-[${column.width}px]`"
:class="`list-column flex items-center`"
:style="{ width: `${column.width}px` }"
>
<ExecuteResult
v-if="props.activeType === ReportCardTypeEnum.FUNCTIONAL_DETAIL"
@ -126,14 +130,43 @@
const { openNewPage } = useOpenNewPage();
const tableStore = useTableStore();
const listRef: Ref = ref(null);
// 处理属性顺序/显示/宽度
const columns = ref<MsTableColumn>([]);
const tableColumns = ref<MsTableColumn>([]); // 获取的存储数据
const expendWidth = ref(0);
const totalDefinedWidth = ref(0);
function setColumnWidth() {
const listElement = document.querySelector('.ms-list') as HTMLElement;
const expendWidthElement = document.querySelector('.arco-table-operation') as HTMLElement;
expendWidth.value = expendWidthElement.clientWidth;
const totalActualWidth = listElement.clientWidth - expendWidth.value;
if (totalActualWidth > totalDefinedWidth.value) {
columns.value = tableColumns.value.map((item) => ({
...item,
width: ((item.width as number) / totalDefinedWidth.value) * totalActualWidth,
}));
} else {
columns.value = [...tableColumns.value];
}
}
async function initColumn() {
const tableColumns = await tableStore.getShowInTableColumns(props.tableKey);
columns.value = [...tableColumns];
tableColumns.value = await tableStore.getShowInTableColumns(props.tableKey);
totalDefinedWidth.value = tableColumns.value.reduce((sum, col) => sum + (col.width || 0), 0);
setColumnWidth();
}
onMounted(async () => {
await initColumn();
await nextTick();
initColumn();
const contentElement = listRef.value.$el.querySelector('.arco-list-content') as HTMLElement;
if (contentElement) {
contentElement.style.height = 'auto';
contentElement.style.maxHeight = '400px';
}
});
// 去详情页面
@ -207,6 +240,9 @@
</script>
<style lang="less" scoped>
.list-column {
padding: 8px 16px;
}
.arco-table-tr {
border-bottom: 1px solid var(--color-text-n8) !important;
}