From 4d3eee679bfed2eba1699e76e61accddbdf61c33 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Fri, 6 Dec 2024 19:36:05 +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=AD=90?=
 =?UTF-8?q?=E7=BA=A7=E5=88=97=E5=AE=BD=E8=AE=A1=E7=AE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useTableStore.ts           | 13 ++++
 .../report/detail/component/reportConfig.ts   | 51 ++++++++++++++
 .../system-card/apiAndScenarioTable.vue       | 63 ++++++-----------
 .../system-card/featureCaseTable.vue          | 67 ++++++------------
 .../component/system-card/testSetTable.vue    | 68 +++++--------------
 .../system-card/testSetTableChildrenList.vue  | 52 +++++++++++---
 6 files changed, 169 insertions(+), 145 deletions(-)

diff --git a/frontend/src/hooks/useTableStore.ts b/frontend/src/hooks/useTableStore.ts
index 0304623dbc..6326961b97 100644
--- a/frontend/src/hooks/useTableStore.ts
+++ b/frontend/src/hooks/useTableStore.ts
@@ -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,
   };
 }
diff --git a/frontend/src/views/test-plan/report/detail/component/reportConfig.ts b/frontend/src/views/test-plan/report/detail/component/reportConfig.ts
index af573f9df5..e62cea5eb4 100644
--- a/frontend/src/views/test-plan/report/detail/component/reportConfig.ts
+++ b/frontend/src/views/test-plan/report/detail/component/reportConfig.ts
@@ -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,
+  },
+];
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
index 25a5c89574..48c61162ac 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
@@ -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>
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
index 1e9d9d95d8..695d33d345 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
@@ -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>
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 67713a9902..e0b0ae37c7 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
@@ -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">
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 90293bf9b3..9ff79329a1 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
@@ -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;
   }