From 16866e796656d7d68ceaf7e11f1544e47edd2ab5 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Wed, 29 May 2024 12:41:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B=E5=85=B3=E8=81=94=E9=9C=80=E6=B1=82=E5=8C=85?=
 =?UTF-8?q?=E5=90=AB=E5=AD=90=E9=9C=80=E6=B1=82=E5=85=A8=E9=80=89=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98&=E8=A1=A5=E5=85=85=E8=A1=A8=E6=A0=BC=E5=B8=A6?=
 =?UTF-8?q?=E6=9C=89=E5=AD=90=E7=BA=A7=E5=85=A8=E9=80=89=E7=AD=89=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pure/ms-checkbox/MsCheckbox.vue           |   3 +-
 .../components/pure/ms-form-table/index.vue   |   4 +-
 .../components/pure/ms-table/base-table.vue   |  60 ++++++++--
 .../components/pure/ms-table/select-all.vue   |  47 ++++++--
 .../src/components/pure/ms-table/useTable.ts  | 103 ++++++++++++++----
 .../src/components/pure/ms-table/utils.ts     |  25 +++++
 .../common/importApiDrawer/table.vue          |   8 +-
 7 files changed, 205 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/components/pure/ms-table/utils.ts

diff --git a/frontend/src/components/pure/ms-checkbox/MsCheckbox.vue b/frontend/src/components/pure/ms-checkbox/MsCheckbox.vue
index 96dff85a0c..c6cbbcb170 100644
--- a/frontend/src/components/pure/ms-checkbox/MsCheckbox.vue
+++ b/frontend/src/components/pure/ms-checkbox/MsCheckbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-checkbox :model-value="checked" @change="handleChange"></a-checkbox>
+  <a-checkbox :model-value="checked" :indeterminate="props.indeterminate" @change="handleChange"></a-checkbox>
 </template>
 
 <script setup lang="ts">
@@ -7,6 +7,7 @@
 
   const props = defineProps<{
     value: boolean;
+    indeterminate: boolean; // 半选用于树形子级别选择状态
   }>();
   const emit = defineEmits<{
     (e: 'change', value: boolean): void;
diff --git a/frontend/src/components/pure/ms-form-table/index.vue b/frontend/src/components/pure/ms-form-table/index.vue
index 7788afcf9e..47a11fd29d 100644
--- a/frontend/src/components/pure/ms-form-table/index.vue
+++ b/frontend/src/components/pure/ms-form-table/index.vue
@@ -260,9 +260,9 @@
   });
 
   const selectedKeys = computed(() => propsRes.value.data.filter((e) => e.enable).map((e) => e.id));
-  propsEvent.value.rowSelectChange = (key: string) => {
+  propsEvent.value.rowSelectChange = (record: Record<string, any>) => {
     propsRes.value.data = propsRes.value.data.map((e) => {
-      if (e.id === key) {
+      if (e.id === record.id) {
         e.enable = !e.enable;
       }
       return e;
diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
index b0fc4ee0d2..a9348b6cc7 100644
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@@ -44,9 +44,10 @@
           <template #cell="{ record }">
             <MsCheckbox
               v-if="attrs.selectorType === 'checkbox'"
-              :value="props.selectedKeys.has(record[rowKey || 'id'])"
+              :value="getChecked(record)"
+              :indeterminate="getIndeterminate(record)"
               @click.stop
-              @change="rowSelectChange(record[rowKey || 'id'])"
+              @change="rowSelectChange(record)"
             />
             <a-radio
               v-else-if="attrs.selectorType === 'radio'"
@@ -221,9 +222,16 @@
         </div>
       </template>
       <template #expand-icon="{ expanded, record }">
-        <slot name="expand-icon" v-bind="{ expanded, record }">
-          <MsIcon v-if="!expanded" :size="8" type="icon-icon_right_outlined" class="text-[var(--color-text-4)]" />
-          <MsIcon v-else :size="8" class="text-[rgb(var(--primary-6))]" type="icon-icon_down_outlined" />
+        <!-- @desc: 这里为了树级别展开折叠如果子级别children不存在不展示展开折叠，所以原本组件的隐藏掉，改成自定义便于控制展示隐藏 -->
+        <slot v-if="record.children && record.children.length" name="expand-icon" v-bind="{ expanded, record }">
+          <div
+            :class="`${
+              expanded ? 'bg-[rgb(var(--primary-1))]' : 'bg-[var(--color-text-n8)]'
+            } expand-btn-wrapper flex items-center justify-center`"
+          >
+            <MsIcon v-if="!expanded" :size="8" type="icon-icon_right_outlined" class="text-[var(--color-text-4)]" />
+            <MsIcon v-else :size="8" class="text-[rgb(var(--primary-6))]" type="icon-icon_down_outlined" />
+          </div>
         </slot>
       </template>
     </a-table>
@@ -305,6 +313,7 @@
     MsTableDataItem,
     MsTableProps,
   } from './type';
+  import { getCurrentRecordChildrenIds } from './utils';
   import type { TableChangeExtra, TableColumnData, TableData } from '@arco-design/web-vue';
   import type { TableOperationColumn } from '@arco-design/web-vue/es/table/interface';
 
@@ -344,7 +353,7 @@
     (e: 'pageChange', value: number): void;
     (e: 'pageSizeChange', value: number): void;
     (e: 'rowNameChange', value: TableData, cb: (v: boolean) => void): void;
-    (e: 'rowSelectChange', key: string): void;
+    (e: 'rowSelectChange', record: TableData): void;
     (e: 'selectAllChange', value: SelectAllEnum, onlyCurrent: boolean): void;
     (e: 'dragChange', value: DragSortParams): void;
     (e: 'sorterChange', value: { [key: string]: string }): void;
@@ -489,8 +498,8 @@
     emit('selectAllChange', v, onlyCurrent);
   };
   // 行选择器change事件
-  const rowSelectChange = (key: string) => {
-    emit('rowSelectChange', key);
+  const rowSelectChange = (record: TableData) => {
+    emit('rowSelectChange', record);
   };
 
   // 分页change事件
@@ -661,6 +670,31 @@
     emit('filterChange', dataIndex, value, isCustomParam);
   };
 
+  function getChecked(record: TableData) {
+    if (!record.children) {
+      return props.selectedKeys.has(record[rowKey || 'id']);
+    }
+
+    const childKeyIds = getCurrentRecordChildrenIds(record.children, rowKey || 'id');
+    return childKeyIds.every((key) => props.selectedKeys.has(key));
+  }
+
+  function getIndeterminate(record: TableData) {
+    if (!record.children) {
+      return false;
+    }
+    const childKeyIds = getCurrentRecordChildrenIds(record.children, rowKey || 'id');
+    // 判断是否有被选中的元素
+    const isSomeSelected = childKeyIds.some((key) => props.selectedKeys.has(key));
+    // 判断是否所有元素都被选中
+    const isEverySelected = childKeyIds.every((key) => props.selectedKeys.has(key));
+
+    if (isSomeSelected && !isEverySelected) {
+      return true;
+    }
+    return false;
+  }
+
   onMounted(async () => {
     await initColumn();
     batchLeft.value = getBatchLeft();
@@ -832,10 +866,18 @@
     height: 16px;
     border: none;
     border-radius: 50%;
-    background: var(--color-text-n8);
+    background: transparent;
+    .expand-btn-wrapper {
+      width: 16px;
+      height: 16px;
+      border: none;
+      border-radius: 50%;
+      // background: var(--color-text-n8);
+    }
   }
   :deep(.arco-table .arco-table-expand-btn:hover) {
     border-color: transparent;
+    background: transparent;
   }
   :deep(.arco-table-drag-handle) {
     .arco-icon-drag-dot-vertical {
diff --git a/frontend/src/components/pure/ms-table/select-all.vue b/frontend/src/components/pure/ms-table/select-all.vue
index a243b73570..c9367d7464 100644
--- a/frontend/src/components/pure/ms-table/select-all.vue
+++ b/frontend/src/components/pure/ms-table/select-all.vue
@@ -58,14 +58,30 @@
     }
   );
 
+  // 是否具备子级children
+  const isHasChildren = computed(() => props.currentData.some((item) => item.children));
+
+  // 获取数据第一层级的ids，用来判断全选或者半选
+  const firstLevelAllIds = computed(() => {
+    if (isHasChildren) {
+      return props.currentData.map((item) => item[props.rowKey]);
+    }
+    return [];
+  });
+
   const selectAllStatus = ref<SelectAllEnum>(SelectAllEnum.NONE);
   const checked = computed({
     get: () => {
       // 如果是选中所有页则是全选状态（选中所有页分两种情况：一是直接通过下拉选项选中所有页；二是当前已选的数量等于表格总数）
-      return (
-        (props.selectedKeys.size > 0 && selectAllStatus.value === SelectAllEnum.ALL) ||
-        (props.selectedKeys.size > 0 && props.selectedKeys.size === props.total)
-      );
+      // 非子级全选条件
+      if (!isHasChildren.value) {
+        return (
+          (props.selectedKeys.size > 0 && selectAllStatus.value === SelectAllEnum.ALL) ||
+          (props.selectedKeys.size > 0 && props.selectedKeys.size === props.total)
+        );
+      }
+      // 含有子级 children全选条件
+      return firstLevelAllIds.value.every((item) => props.selectedKeys.has(item));
     },
     set: (value) => {
       return value;
@@ -73,12 +89,23 @@
   });
   const indeterminate = computed(() => {
     // 有无勾选的 key且是全选所有页，或非全选所有页且已选中的数量大于 0 且小于总数时是半选状态
-    return (
-      (props.excludeKeys.length > 0 && selectAllStatus.value === SelectAllEnum.ALL) ||
-      (selectAllStatus.value !== SelectAllEnum.ALL &&
-        props.selectedKeys.size > 0 &&
-        props.selectedKeys.size < props.total)
-    );
+    // 非子级半选条件
+    if (!isHasChildren.value) {
+      return (
+        (props.excludeKeys.length > 0 && selectAllStatus.value === SelectAllEnum.ALL) ||
+        (selectAllStatus.value !== SelectAllEnum.ALL &&
+          props.selectedKeys.size > 0 &&
+          props.selectedKeys.size < props.total)
+      );
+    }
+    // 包含子级半选条件
+    const isSomeSelected = firstLevelAllIds.value.some((key) => props.selectedKeys.has(key));
+    const isEverySelected = firstLevelAllIds.value.every((key) => props.selectedKeys.has(key));
+
+    if (isSomeSelected && !isEverySelected) {
+      return true;
+    }
+    return false;
   });
 
   const handleSelect = (v: SelectAllEnum, onlyCurrent = true) => {
diff --git a/frontend/src/components/pure/ms-table/useTable.ts b/frontend/src/components/pure/ms-table/useTable.ts
index 6865dddd2e..8bac9e001a 100644
--- a/frontend/src/components/pure/ms-table/useTable.ts
+++ b/frontend/src/components/pure/ms-table/useTable.ts
@@ -19,6 +19,7 @@ import type {
   MsTableProps,
   SetPaginationPrams,
 } from './type';
+import { getCurrentRecordChildrenIds } from './utils';
 import type { TableData } from '@arco-design/web-vue';
 
 export interface Pagination {
@@ -295,6 +296,22 @@ export default function useTableProps<T>(
       propsRes.value.msPagination.pageSize = appStore.pageSize;
     }
   };
+  // 非全选级取消包含或者不包含子级别
+  const processChildren = (data: MsTableDataItem<T>[], rowKey: string) => {
+    data.forEach((item: MsTableDataItem<T>) => {
+      propsRes.value.selectedKeys.delete(item[rowKey]);
+
+      if (propsRes.value.selectorStatus === SelectAllEnum.ALL) {
+        propsRes.value.excludeKeys.add(item[rowKey]);
+      } else {
+        propsRes.value.excludeKeys.delete(item[rowKey]);
+      }
+
+      if (item.children && item.children.length > 0) {
+        processChildren(item.children as MsTableDataItem<T>[], rowKey);
+      }
+    });
+  };
 
   // 重置选择器
   const resetSelector = (isNone = true) => {
@@ -306,14 +323,7 @@ export default function useTableProps<T>(
       propsRes.value.excludeKeys.clear();
     } else {
       // 取消当前页的选中项
-      propsRes.value.data.forEach((item) => {
-        propsRes.value.selectedKeys.delete(item[rowKey]);
-        if (propsRes.value.selectorStatus === SelectAllEnum.ALL) {
-          propsRes.value.excludeKeys.add(item[rowKey]);
-        } else {
-          propsRes.value.excludeKeys.delete(item[rowKey]);
-        }
-      });
+      processChildren(propsRes.value.data as MsTableDataItem<T>[], rowKey);
     }
   };
 
@@ -356,6 +366,8 @@ export default function useTableProps<T>(
     propsRes.value.filter = cloneDeep(filterItem.value);
   };
 
+  const setChildren = () => {};
+
   // 事件触发组
   const propsEvent = ref({
     // 排序触发
@@ -448,17 +460,70 @@ export default function useTableProps<T>(
     },
 
     // 表格行的选中/取消事件
-    rowSelectChange: (key: string) => {
-      const { selectedKeys, excludeKeys } = propsRes.value;
-      if (selectedKeys.has(key)) {
-        // 当前已选中，取消选中
-        selectedKeys.delete(key);
-        excludeKeys.add(key);
-      } else {
-        // 当前未选中，选中
-        selectedKeys.add(key);
-        if (excludeKeys.has(key)) {
-          excludeKeys.delete(key);
+    rowSelectChange: (record: MsTableDataItem<T>) => {
+      const { rowKey } = propsRes.value;
+      const key = record[rowKey || 'id'];
+      const { selectedKeys, excludeKeys, data } = propsRes.value;
+      // 是否包含子级
+      const isHasChildrenData = data.some((item) => item.children);
+      let isSelectChildren;
+      let currentALlParentChildrenIds: string[] = [];
+      // @desc: 如果存在子级获取当前同一级别所有的ids用来判断是否子级全部选择将父节点id也添加进来
+      if (isHasChildrenData) {
+        const parentItemChildren: any = data.find((item) => item[rowKey] === record.parent)?.children || [];
+        currentALlParentChildrenIds = getCurrentRecordChildrenIds(parentItemChildren, rowKey || 'id');
+      }
+      // 非子级
+      if (!record.children) {
+        if (selectedKeys.has(key)) {
+          // 当前已选中，取消选中
+          selectedKeys.delete(key);
+          excludeKeys.add(key);
+          // @desc: 只要取消一个子级则取消他的父节点选择
+          if (record.parent) {
+            selectedKeys.delete(record.parent);
+            excludeKeys.add(record.parent);
+          }
+        } else {
+          // 当前未选中，选中
+          selectedKeys.add(key);
+          if (excludeKeys.has(key)) {
+            excludeKeys.delete(key);
+          }
+          // @desc: 判断当前子级是否已经全选,全选则将上层父级也选择
+          isSelectChildren = currentALlParentChildrenIds.every((id) => selectedKeys.has(id));
+          if (isSelectChildren && record.parent) {
+            selectedKeys.add(record.parent);
+            excludeKeys.delete(record.parent);
+          }
+        }
+
+        // 包含子级
+      } else if (record.children) {
+        const childrenIds = getCurrentRecordChildrenIds(record.children, rowKey || 'id');
+        const isSelectAllChildren = childrenIds.every((id) => selectedKeys.has(id));
+        const includeCurrentIds = [key, ...childrenIds];
+        // 当前父节点已选中，取消选择父节点和父节点下所有子节点
+        if (isSelectAllChildren) {
+          // childrenIds.push(key);
+          includeCurrentIds.forEach((id) => {
+            selectedKeys.delete(id);
+          });
+          includeCurrentIds.forEach((id) => {
+            excludeKeys.add(id);
+          });
+          // selectedKeys.delete(key);
+          // excludeKeys.add(key);
+          //  未选中则全选父节点和下边所有子节点
+        } else {
+          selectedKeys.add(key);
+          collectIds(record.children, rowKey);
+          childrenIds.forEach((id) => {
+            excludeKeys.delete(id);
+          });
+          if (excludeKeys.has(key)) {
+            excludeKeys.delete(key);
+          }
         }
       }
       if (selectedKeys.size === 0 && propsRes.value.selectorStatus === SelectAllEnum.CURRENT) {
diff --git a/frontend/src/components/pure/ms-table/utils.ts b/frontend/src/components/pure/ms-table/utils.ts
new file mode 100644
index 0000000000..e5c0b3adbc
--- /dev/null
+++ b/frontend/src/components/pure/ms-table/utils.ts
@@ -0,0 +1,25 @@
+import type { TableData } from '@arco-design/web-vue';
+/**
+ *
+ * @param {childrenData} 包含子级数据
+ * @param {rowKey}
+ * @returns 返回当前子级childrenIds
+ */
+export function getCurrentRecordChildrenIds(childrenData: TableData[], rowKey: string) {
+  const currentRecordChildrenIds: string[] = [];
+
+  function traverse(childrenRecord: TableData) {
+    currentRecordChildrenIds.push(childrenRecord[rowKey as string]);
+    if (childrenRecord.children && childrenRecord.children.length > 0) {
+      childrenRecord.children.forEach((child: TableData) => traverse(child));
+    }
+  }
+
+  childrenData.forEach((childrenRecord: TableData) => {
+    traverse(childrenRecord);
+  });
+
+  return currentRecordChildrenIds;
+}
+
+export default {};
diff --git a/frontend/src/views/api-test/scenario/components/common/importApiDrawer/table.vue b/frontend/src/views/api-test/scenario/components/common/importApiDrawer/table.vue
index 541d0ead64..5b607d3aa0 100644
--- a/frontend/src/views/api-test/scenario/components/common/importApiDrawer/table.vue
+++ b/frontend/src/views/api-test/scenario/components/common/importApiDrawer/table.vue
@@ -424,11 +424,11 @@
   /**
    * 表格单行选中事件处理
    */
-  function handleRowSelectChange(key: string) {
-    const selectedData = currentTable.value.propsRes.value.data.find((e: any) => e.id === key);
-    if (tableSelectedKeys.value.includes(key)) {
+  function handleRowSelectChange(record: ApiCaseDetail | ApiDefinitionDetail | ApiScenarioTableItem) {
+    const selectedData = currentTable.value.propsRes.value.data.find((e: any) => e.id === record.id);
+    if (tableSelectedKeys.value.includes(record.id)) {
       // 取消选中
-      tableSelectedData.value = tableSelectedData.value.filter((e) => e.id !== key);
+      tableSelectedData.value = tableSelectedData.value.filter((e) => e.id !== record.id);
     } else if (selectedData) {
       tableSelectedData.value.push(selectedData);
     }