From cadafca297c50b7580ccdff50c346af6cc646244 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Mon, 9 Dec 2024 16:20:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92):?=
 =?UTF-8?q?=20=E6=8A=A5=E5=91=8A-=E6=B5=8B=E8=AF=95=E7=82=B9=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96-=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/system-card/testSetTable.vue    | 25 ++++++++++
 .../system-card/testSetTableChildrenList.vue  | 46 ++++++++++---------
 2 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/testSetTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/testSetTable.vue
index e0b0ae37c7..6abce70222 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/testSetTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/testSetTable.vue
@@ -1,6 +1,7 @@
 <template>
   <MsBaseTable
     v-if="enabledTestSet"
+    ref="tableRef"
     v-bind="propsRes"
     :expanded-keys="expandedKeys"
     :expandable="expandable"
@@ -8,6 +9,8 @@
     v-on="propsEvent"
     @sorter-change="handleInitColumn"
     @expand="(record) => handleExpand(record.id as string)"
+    @column-resize="getActualColumnWidth"
+    @init-end="getActualColumnWidth"
   >
     <template #expand-icon="{ record, expanded }">
       <div
@@ -34,6 +37,9 @@
 </template>
 
 <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 type { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
@@ -81,6 +87,24 @@
 
   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({
     title: '',
     width: 30,
@@ -92,6 +116,7 @@
           tableKey: props.tableKey,
           reportId: props.reportId,
           shareId: props.shareId,
+          actualColumnWidth: actualColumnWidth.value,
         });
       }
       return undefined;
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/testSetTableChildrenList.vue b/frontend/src/views/test-plan/report/detail/component/system-card/testSetTableChildrenList.vue
index 9ff79329a1..38a751934a 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/testSetTableChildrenList.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/testSetTableChildrenList.vue
@@ -1,5 +1,5 @@
 <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 }">
       <div :class="`arco-table-tr flex h-[48px] items-center ${getRowClass(item)} `">
         <div :style="{ width: `${expendWidth}px` }"></div>
@@ -124,6 +124,7 @@
     reportId: string;
     shareId?: string;
     tableKey: TableKeyEnum;
+    actualColumnWidth: number[];
   }>();
 
   const { t } = useI18n();
@@ -132,41 +133,41 @@
 
   const listRef: Ref = ref(null);
 
+  const virtualListProps = computed(() => {
+    return {
+      height: 'auto',
+      threshold: 200,
+      buffer: 15,
+    };
+  });
+
   // 处理属性顺序/显示/宽度
   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];
-    }
+    expendWidth.value = props.actualColumnWidth[0] ?? 0;
+    columns.value = tableColumns.value.map((item, index) => ({
+      ...item,
+      width: props.actualColumnWidth[index + 1],
+    }));
   }
 
+  watch(
+    () => props.actualColumnWidth,
+    () => {
+      setColumnWidth();
+    }
+  );
+
   async function initColumn() {
     tableColumns.value = await tableStore.getShowInTableColumns(props.tableKey);
-    totalDefinedWidth.value = tableColumns.value.reduce((sum, col) => sum + (col.width || 0), 0);
     setColumnWidth();
   }
   onMounted(async () => {
     await nextTick();
     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 {
     border-bottom: 1px solid var(--color-text-n8) !important;
   }
+  :deep(.arco-list-content) {
+    max-height: 480px;
+  }
 </style>