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

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,
   };
 }

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,
+  },
+];

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 = [
+  const apiLastStaticColumns: MsTableColumn = [
-    {
+    ...lastStaticColumns,
-      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,
-    },
     {
       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 initSetColumnConfig();
-    await tableStore.initColumn(tableKey.value, columns.value, 'drawer');
-  }
 </script>
 
 <style lang="less" scoped></style>

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 = [
+  const caseLastStaticColumns: MsTableColumn = [
-    {
-      title: 'common.belongModule',
-      dataIndex: 'moduleName',
-      ellipsis: true,
-      showTooltip: true,
-      showInTable: true,
-      showDrag: true,
-      width: 200,
-    },
     {
       title: 'case.caseLevel',
       dataIndex: 'priority',
@@ -156,47 +151,20 @@
       showDrag: true,
       width: 120,
     },
-
+    ...lastStaticColumns,
-    {
-      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,
-    },
     {
       title: '',
       slotName: 'operation',
       dataIndex: 'operation',
-      width: 30,
+      width: 80,
-    },
-  ];
-
-  const testPlanNameColumns: MsTableColumn = [
-    {
-      title: 'report.plan.name',
-      dataIndex: 'planName',
-      showTooltip: true,
-      showInTable: true,
-      showDrag: false,
-      columnSelectorDisabled: true,
-      width: 200,
     },
   ];
 
   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 initSetColumnConfig();
-    await tableStore.initColumn(tableKey.value, columns.value, 'drawer');
-  }
 </script>
 
 <style lang="less" scoped></style>

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 [
-      {
+      ...collectionNameColumn,
-        title: 'ms.case.associate.testSet',
-        dataIndex: 'collectionName',
-        sortIndex: 0,
-        showInTable: true,
-        showDrag: false,
-        width: 200,
-        columnSelectorDisabled: true,
-      },
       ...(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 initSetColumnConfig();
-    await tableStore.initColumn(props.tableKey, columns.value, 'drawer');
-  }
 </script>
 
 <style scoped lang="less">

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);
+    tableColumns.value = await tableStore.getShowInTableColumns(props.tableKey);
-    columns.value = [...tableColumns];
+    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;
   }