feat: 表格支持展开行列对齐

frontend/src/components/pure/ms-table/base-table.vue

@@ -5,6 +5,7 @@
       :row-class="getRowClass"
       :span-method="spanMethod"
       :columns="currentColumns"
+      :expanded-keys="props.expandedKeys"
       @sorter-change="(dataIndex: string,direction: string) => handleSortChange(dataIndex, direction)"
     >
       <template #optional="{ rowIndex, record }">
@@ -27,6 +28,7 @@
             />
           </template>
         </a-table-column>
+        <a-table-column v-if="attrs.showExpand" :width="34"> </a-table-column>
         <a-table-column
           v-for="(item, idx) in currentColumns"
           :key="idx"
@@ -143,9 +145,21 @@
           </div>
         </slot>
       </template>
-      <template #expand-icon="{ expanded }">
+      <template #expand-icon="{ expanded, record }">
-        <MsIcon v-if="!expanded" :size="8" type="icon-icon_right_outlined" class="text-[rgb(var(--primary-6))]" />
+        <MsIcon
-        <MsIcon v-else :size="8" class="text-[var(--color-text-4)]" type="icon-icon_down_outlined" />
+          v-if="!expanded"
+          :size="8"
+          type="icon-icon_right_outlined"
+          class="text-[rgb(var(--primary-6))]"
+          @click="emit('expandChange', record[rowKey || 'id'])"
+        />
+        <MsIcon
+          v-else
+          :size="8"
+          class="text-[var(--color-text-4)]"
+          type="icon-icon_down_outlined"
+          @click="emit('expandChange', record[rowKey || 'id'])"
+        />
       </template>
     </a-table>
     <div
@@ -208,6 +222,7 @@
     noDisable?: boolean;
     showSetting?: boolean;
     columns: MsTableColumn;
+    expandedKeys?: string[];
     spanMethod?: (params: { record: TableData; rowIndex: number; columnIndex: number }) => void;
   }>();
   const emit = defineEmits<{
@@ -219,6 +234,7 @@
     (e: 'selectAllChange', value: SelectAllEnum): void;
     (e: 'sorterChange', value: { [key: string]: string }): void;
     (e: 'clearSelector'): void;
+    (e: 'expandChange', key: string): void;
   }>();
   const attrs = useAttrs();
 
@@ -463,4 +479,34 @@
   :deep(.arco-table .arco-table-expand-btn) {
     border-color: transparent;
   }
+  :deep(.arco-table-tr-expand .arco-table-td) {
+    padding: 0;
+    background: none;
+  }
+  :deep(.arco-table-tr-expand .arco-table-cell) {
+    padding: 0 !important;
+  }
+  :deep(.collapsebtn) {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--color-text-n8) !important;
+    @apply bg-white;
+  }
+  :deep(.expand) {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: rgb(var(--primary-1));
+  }
+  :deep(.arco-table-expand-btn) {
+    width: 16px;
+    height: 16px;
+    border: none;
+    border-radius: 50%;
+    background: var(--color-text-n8) !important;
+  }
+  :deep(.arco-table .arco-table-expand-btn:hover) {
+    border-color: transparent;
+  }
 </style>

frontend/src/components/pure/ms-table/type.ts

@@ -1,6 +1,6 @@
 import { ColumnEditTypeEnum, SelectAllEnum } from '@/enums/tableEnum';
 import { TableQueryParams } from '@/models/common';
-import { TableColumnData, TableData, TableDraggable, TableChangeExtra } from '@arco-design/web-vue';
+import { TableColumnData, TableData, TableDraggable, TableChangeExtra, TableExpandable } from '@arco-design/web-vue';
 
 export interface MsPaginationI {
   current: number;
@@ -74,6 +74,9 @@ export interface MsTableProps<T> {
   tableErrorStatus?: MsTableErrorStatus; // 表格的错误状态，默认为false
   debug?: boolean; // debug模式，开启后会打印表格所有state
   showFirstOperation?: boolean; // 是否展示第一行的操作
+  /** 展开行相关 */
+  showExpand?: boolean; // 是否显示展开行
+  expandedKeys?: string[]; // 显示的展开行、子树（受控模式）
 
   [key: string]: any;
 }

frontend/src/components/pure/ms-table/useTable.ts

@@ -57,6 +57,9 @@ export default function useTableProps<T>(
     tableErrorStatus: false, // 表格的错误状态
     debug: false, // debug 模式
     showFirstOperation: false, // 展示第一行的操作
+    /** 展开行相关 */
+    showExpand: false, // 是否显示展开行
+    expandedKeys: [], // 显示的展开行、子树（受控模式）
     ...props,
   };
 
@@ -348,6 +351,18 @@ export default function useTableProps<T>(
       propsRes.value.selectedKeys = selectedKeys;
       propsRes.value.excludeKeys = excludeKeys;
     },
+    // 展开收起
+    expandChange: (key: string) => {
+      const { expandedKeys: oldExpandedKeys } = propsRes.value;
+      if (!oldExpandedKeys) {
+        return;
+      }
+      if (oldExpandedKeys.includes(key)) {
+        propsRes.value.expandedKeys = oldExpandedKeys.filter((item) => item !== key);
+      } else {
+        propsRes.value.expandedKeys = [...oldExpandedKeys, key];
+      }
+    },
   });
 
   watchEffect(() => {

frontend/src/locale/zh-CN/index.ts

@@ -24,7 +24,7 @@ export default {
     'menu.featureTest': '功能测试',
     'menu.apiTest': '接口测试',
     'menu.uiTest': 'UI测试',
-    'meun.workstation': '工作台',
+    'menu.workstation': '工作台',
     'menu.loadTest': '性能测试',
     'menu.caseManagement': '功能测试',
     'menu.performanceTest': '性能测试',

frontend/src/models/projectManagement/menuManagement.ts

@@ -5,7 +5,6 @@ export interface MenuTableListItem {
   moduleEnable: boolean;
   moduleDesc?: string;
   children?: MenuTableListItem[];
-  isLeaf?: boolean;
 }
 
 export interface MenuTableListParams {

frontend/src/views/project-management/projectAndPermission/menuManagement/TableExpand.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="flex flex-col">
+    <div class="flex h-[54px] flex-row items-center pl-[61px]">
+      <div class="title w-[251px] py-[16px] pl-[36px] pr-[8px]"> 报告保留时间范围 </div>
+      <div class="w-[547px] px-[16px]">
+        <a-input :style="{ width: '320px' }" placeholder="Please enter something" allow-clear>
+          <template #append> RMB </template>
+        </a-input>
+      </div>
+      <div class="w-[90px] p-[16px]">
+        <a-switch />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { MenuTableListItem } from '@/models/projectManagement/menuManagement';
+
+  const props = defineProps<{
+    record: MenuTableListItem;
+  }>();
+</script>

frontend/src/views/project-management/projectAndPermission/menuManagement/index.vue

@@ -7,7 +7,7 @@
   </div>
   <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
     <template #module="{ record }">
-      <MsIcon class="text-[var(--color-text-4)]" :type="getMenuIcon(record.module)" />
+      <MsIcon v-if="record.children" class="text-[var(--color-text-4)]" :type="getMenuIcon(record.module)" />
       <span class="ml-[4px]">{{ t(`menu.${record.module}`) }}</span>
     </template>
     <template #moduleEnable="{ record }">
@@ -30,7 +30,6 @@
   import { useAppStore } from '@/store';
   import { MenuTableListItem } from '@/models/projectManagement/menuManagement';
   import { MenuEnum } from '@/enums/commonEnum';
-
   import { Message } from '@arco-design/web-vue';
 
   const appStore = useAppStore();
@@ -42,21 +41,23 @@
       title: 'project.menu.name',
       dataIndex: 'module',
       slotName: 'module',
+      width: 221,
     },
     {
       title: 'project.menu.description',
       slotName: 'description',
       dataIndex: 'description',
       showDrag: true,
+      width: 515,
     },
     {
       title: 'common.operation',
       slotName: 'moduleEnable',
       dataIndex: 'moduleEnable',
-      fixed: 'right',
+      width: 58,
-      width: 150,
     },
   ];
+
   const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(
     postTabletList,
     {
@@ -66,9 +67,17 @@
       scroll: { x: '100%' },
       noDisable: true,
       rowKey: 'module',
+      showExpand: true,
     },
     (item) => {
-      item = { ...item, children: [], isLeaf: false };
+      item = {
+        ...item,
+        children: [
+          {
+            ...item,
+          },
+        ],
+      };
       return item;
     }
   );