refactor(测试计划): 报告-测试点模式展示优化-宽度自适应
This commit is contained in:
parent
fc3bf641f0
commit
cadafca297
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<MsBaseTable
|
<MsBaseTable
|
||||||
v-if="enabledTestSet"
|
v-if="enabledTestSet"
|
||||||
|
ref="tableRef"
|
||||||
v-bind="propsRes"
|
v-bind="propsRes"
|
||||||
:expanded-keys="expandedKeys"
|
:expanded-keys="expandedKeys"
|
||||||
:expandable="expandable"
|
:expandable="expandable"
|
||||||
|
@ -8,6 +9,8 @@
|
||||||
v-on="propsEvent"
|
v-on="propsEvent"
|
||||||
@sorter-change="handleInitColumn"
|
@sorter-change="handleInitColumn"
|
||||||
@expand="(record) => handleExpand(record.id as string)"
|
@expand="(record) => handleExpand(record.id as string)"
|
||||||
|
@column-resize="getActualColumnWidth"
|
||||||
|
@init-end="getActualColumnWidth"
|
||||||
>
|
>
|
||||||
<template #expand-icon="{ record, expanded }">
|
<template #expand-icon="{ record, expanded }">
|
||||||
<div
|
<div
|
||||||
|
@ -34,6 +37,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { useResizeObserver } from '@vueuse/core';
|
||||||
|
import { debounce } from 'lodash-es';
|
||||||
|
|
||||||
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
|
import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
|
||||||
import type { MsTableColumn } from '@/components/pure/ms-table/type';
|
import type { MsTableColumn } from '@/components/pure/ms-table/type';
|
||||||
import useTable from '@/components/pure/ms-table/useTable';
|
import useTable from '@/components/pure/ms-table/useTable';
|
||||||
|
@ -81,6 +87,24 @@
|
||||||
|
|
||||||
const isGroup = inject<Ref<boolean>>('isPlanGroup', ref(false));
|
const isGroup = inject<Ref<boolean>>('isPlanGroup', ref(false));
|
||||||
|
|
||||||
|
const tableRef = ref();
|
||||||
|
|
||||||
|
const actualColumnWidth = ref<number[]>([]);
|
||||||
|
async function getActualColumnWidth() {
|
||||||
|
await nextTick();
|
||||||
|
const thElements = tableRef.value?.$el
|
||||||
|
.querySelector('.arco-table-tr')
|
||||||
|
?.querySelectorAll('.arco-table-th') as HTMLElement[];
|
||||||
|
actualColumnWidth.value = Array.from(thElements).map((th) => th.clientWidth);
|
||||||
|
}
|
||||||
|
|
||||||
|
useResizeObserver(
|
||||||
|
tableRef,
|
||||||
|
debounce(() => {
|
||||||
|
getActualColumnWidth();
|
||||||
|
}, 300)
|
||||||
|
);
|
||||||
|
|
||||||
const expandable = reactive({
|
const expandable = reactive({
|
||||||
title: '',
|
title: '',
|
||||||
width: 30,
|
width: 30,
|
||||||
|
@ -92,6 +116,7 @@
|
||||||
tableKey: props.tableKey,
|
tableKey: props.tableKey,
|
||||||
reportId: props.reportId,
|
reportId: props.reportId,
|
||||||
shareId: props.shareId,
|
shareId: props.shareId,
|
||||||
|
actualColumnWidth: actualColumnWidth.value,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return undefined;
|
return undefined;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<MsList ref="listRef" class="w-full" :data="props.list" :virtual-list-props="{ height: 400, threshold: 200 }">
|
<MsList ref="listRef" class="w-full" :data="props.list" :virtual-list-props="virtualListProps">
|
||||||
<template #item="{ item }">
|
<template #item="{ item }">
|
||||||
<div :class="`arco-table-tr flex h-[48px] items-center ${getRowClass(item)} `">
|
<div :class="`arco-table-tr flex h-[48px] items-center ${getRowClass(item)} `">
|
||||||
<div :style="{ width: `${expendWidth}px` }"></div>
|
<div :style="{ width: `${expendWidth}px` }"></div>
|
||||||
|
@ -124,6 +124,7 @@
|
||||||
reportId: string;
|
reportId: string;
|
||||||
shareId?: string;
|
shareId?: string;
|
||||||
tableKey: TableKeyEnum;
|
tableKey: TableKeyEnum;
|
||||||
|
actualColumnWidth: number[];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
@ -132,41 +133,41 @@
|
||||||
|
|
||||||
const listRef: Ref = ref(null);
|
const listRef: Ref = ref(null);
|
||||||
|
|
||||||
|
const virtualListProps = computed(() => {
|
||||||
|
return {
|
||||||
|
height: 'auto',
|
||||||
|
threshold: 200,
|
||||||
|
buffer: 15,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
// 处理属性顺序/显示/宽度
|
// 处理属性顺序/显示/宽度
|
||||||
const columns = ref<MsTableColumn>([]);
|
const columns = ref<MsTableColumn>([]);
|
||||||
const tableColumns = ref<MsTableColumn>([]); // 获取的存储数据
|
const tableColumns = ref<MsTableColumn>([]); // 获取的存储数据
|
||||||
const expendWidth = ref(0);
|
const expendWidth = ref(0);
|
||||||
const totalDefinedWidth = ref(0);
|
|
||||||
|
|
||||||
function setColumnWidth() {
|
function setColumnWidth() {
|
||||||
const listElement = document.querySelector('.ms-list') as HTMLElement;
|
expendWidth.value = props.actualColumnWidth[0] ?? 0;
|
||||||
const expendWidthElement = document.querySelector('.arco-table-operation') as HTMLElement;
|
columns.value = tableColumns.value.map((item, index) => ({
|
||||||
expendWidth.value = expendWidthElement.clientWidth;
|
...item,
|
||||||
const totalActualWidth = listElement.clientWidth - expendWidth.value;
|
width: props.actualColumnWidth[index + 1],
|
||||||
|
}));
|
||||||
if (totalActualWidth > totalDefinedWidth.value) {
|
|
||||||
columns.value = tableColumns.value.map((item) => ({
|
|
||||||
...item,
|
|
||||||
width: ((item.width as number) / totalDefinedWidth.value) * totalActualWidth,
|
|
||||||
}));
|
|
||||||
} else {
|
|
||||||
columns.value = [...tableColumns.value];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.actualColumnWidth,
|
||||||
|
() => {
|
||||||
|
setColumnWidth();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
async function initColumn() {
|
async function initColumn() {
|
||||||
tableColumns.value = await tableStore.getShowInTableColumns(props.tableKey);
|
tableColumns.value = await tableStore.getShowInTableColumns(props.tableKey);
|
||||||
totalDefinedWidth.value = tableColumns.value.reduce((sum, col) => sum + (col.width || 0), 0);
|
|
||||||
setColumnWidth();
|
setColumnWidth();
|
||||||
}
|
}
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await nextTick();
|
await nextTick();
|
||||||
initColumn();
|
initColumn();
|
||||||
const contentElement = listRef.value.$el.querySelector('.arco-list-content') as HTMLElement;
|
|
||||||
if (contentElement) {
|
|
||||||
contentElement.style.height = 'auto';
|
|
||||||
contentElement.style.maxHeight = '400px';
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 去详情页面
|
// 去详情页面
|
||||||
|
@ -246,4 +247,7 @@
|
||||||
.arco-table-tr {
|
.arco-table-tr {
|
||||||
border-bottom: 1px solid var(--color-text-n8) !important;
|
border-bottom: 1px solid var(--color-text-n8) !important;
|
||||||
}
|
}
|
||||||
|
:deep(.arco-list-content) {
|
||||||
|
max-height: 480px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue