@lingxiteam/ebe-utils 0.5.5 → 0.5.7

package/lib/public/src/components/pcfactory/src/TreeTable/hooks/useCMDAction.ts

@@ -0,0 +1,82 @@
+import { useImperativeHandle } from 'react';
+import { useCommonCMDAction } from '../../Table/hooks';
+
+const useCMDAction = (props: any) => {
+  const {
+    ref,
+    currentRowKey,
+    childrenColumnName,
+    innerDataSource,
+    setInnerDataSource,
+    setOuterDataSource,
+    setChildrenColumnName,
+    setMode,
+  } = props;
+
+  const { loading, colServiceData } = useCommonCMDAction(props);
+
+  useImperativeHandle(ref, () => ({
+    /**
+     * 加载树形表格数据（加载完之后，表格就脱离了数据源的控制了）
+     */
+    reloadTreeTableData: (data: {
+      dataSource: any[];
+      childrenKey: string;
+      childrenSync: boolean;
+    }) => {
+      /**
+       * 注意，不是直接使用 setInnerDataSource
+       * 而是通过 setOuterDataSource 间接驱动 -> setInnerDataSource
+       * 因为需要对数据进行初始化
+       */
+      setOuterDataSource(data?.dataSource || []);
+      setChildrenColumnName(data?.childrenKey);
+      setMode(data?.childrenSync ? 'sync' : 'all');
+    },
+
+    /**
+     * 加载子节点数据
+     * 理论上，只更新内部数据
+     */
+    reloadTreeTableChildData: (data: {
+      children: any[];
+      expandRowKey: string;
+    }) => {
+      const { children, expandRowKey } = data;
+
+      // 异步加载限制为 children
+      const realChildrenColumnName = childrenColumnName || 'children';
+
+      const findChild = (data: any[]) => {
+        if (Array.isArray(data)) {
+          for (let i = 0; i < data.length; i += 1) {
+            const row = data[i];
+            if (row?.[currentRowKey] === expandRowKey) {
+              // 没有数据才加载
+              if (!row?.[realChildrenColumnName]?.length) {
+                row[realChildrenColumnName] = children;
+                row.isLeaf = children?.length === 0;
+              }
+              break;
+            }
+
+            if (Array.isArray(row?.[realChildrenColumnName])) {
+              findChild(row[realChildrenColumnName]);
+            }
+          }
+        }
+      };
+
+      findChild(innerDataSource);
+      // 触发一下表格刷新
+      setInnerDataSource([...innerDataSource]);
+    },
+  }));
+
+  return {
+    loading,
+    colServiceData,
+  };
+};
+
+export default useCMDAction;

package/lib/public/src/components/pcfactory/src/TreeTable/hooks/useExpandable.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+import { useExpandable as useTableExpandable } from '../../Table/hooks';
+
+const useExpandable = (props: any) => {
+  const { setInnerDataSource } = props;
+
+  const useTableExpandableReturn = useTableExpandable(props);
+  const { childrenColumnName, expandable } = useTableExpandableReturn;
+
+  const [mode, setMode] = useState('all');
+
+  const realExpandable = { ...expandable };
+  realExpandable.expandIcon = (props: any) => {
+    const { record } = props;
+
+    // 当 record.isLeaf 为空时，先强制设置为非叶子节点
+    let isLeaf = record?.isLeaf ?? false;
+
+    // 当 record.isLeaf 为空时，需要区分当前数据属于什么场景
+    if (record?.isLeaf === undefined) {
+      if (mode !== 'sync') {
+        if (
+          record?.[childrenColumnName] === null ||
+          record?.[childrenColumnName] === undefined ||
+          !(childrenColumnName in record) ||
+          (Array.isArray(record?.[childrenColumnName]) &&
+            record?.[childrenColumnName]?.length === 0)
+        ) {
+          // 为非异步场景，且没有下级数据，则修正为叶子节点
+          isLeaf = true;
+        }
+      }
+    }
+
+    return expandable?.expandIcon({
+      ...props,
+      isLeaf,
+    });
+  };
+
+  useEffect(() => {
+    // 当模式为异步时，
+    if (mode === 'sync') {
+      // 为第一层节点加上 children，否则展开图标显示异常，会显示在复选框同一列
+      setInnerDataSource((originDataSource: any) => {
+        return originDataSource.map((r: any) => {
+          r[childrenColumnName] = [];
+          return r;
+        });
+      });
+    }
+  }, [mode]);
+
+  return {
+    ...useTableExpandableReturn,
+    setMode,
+    expandable: realExpandable,
+  };
+};
+
+export default useExpandable;

package/lib/public/src/components/pcfactory/src/TreeTable/index.tsx

@@ -0,0 +1,273 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable eqeqeq */
+/* eslint-disable array-callback-return */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-underscore-dangle */
+import { Form, Table } from 'antd';
+import classnames from 'classnames';
+import React, { useMemo, useRef } from 'react';
+import BodyCell from '../Table/BodyCell';
+import HeaderCell from '../Table/HeaderCell';
+import {
+  useColumns,
+  useCommon,
+  useDataSource,
+  useRowEdit,
+  useScroll,
+  useSelection,
+} from '../Table/hooks';
+import TableHead from '../Table/TableHead';
+import type { MyTableProps } from '../Table/types/prop';
+import { customLocale } from '../utils/Empty/customLocale';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import { useLocale } from '../utils/hooks/useLocale';
+import { useCMDAction, useExpandable } from './hooks';
+
+const components = {
+  body: {
+    cell: BodyCell,
+  },
+  header: {
+    cell: HeaderCell,
+  },
+};
+
+const TreeTable = React.forwardRef<any, MyTableProps>((props, ref) => {
+  const {
+    dataSource: boundDataSource,
+    visible = true,
+    style: styles,
+    className,
+    onChange,
+    $$componentItem,
+    getEngineApis,
+    ...restProps
+  } = props;
+
+  const { uid: compId } = $$componentItem;
+  const [form] = Form.useForm();
+
+  const engineApis = getEngineApis?.();
+  const { sandBoxSafeRun } = engineApis || {};
+
+  const { getLocale } = useLocale(engineApis);
+
+  const funcExpExecute = useFuncExpExecute(sandBoxSafeRun as any, getLocale);
+
+  const appId = props?.appId || $$componentItem?.appId;
+  const pageId = props?.pageId || $$componentItem?.pageId;
+
+  const { currentRowKey, isBordered, innerClassName } = useCommon(props);
+
+  const {
+    innerDataSource,
+    setInnerDataSource,
+    outerDataSource,
+    setOuterDataSource,
+    currentPageDataSource,
+  } = useDataSource({
+    ...props,
+    compId,
+    currentRowKey,
+    boundDataSource,
+  });
+
+  const {
+    rowSelection,
+    selectedRows,
+    selectedRowKeys,
+    setSelectedRows,
+    setSelectedRowKeys,
+    setSelectedRowsRule,
+    onRowSelected,
+    onRowSelectClick,
+  } = useSelection({
+    ...props,
+    innerDataSource,
+    currentRowKey,
+    currentPageDataSource,
+    funcExpExecute,
+  });
+
+  const {
+    onRowDeleteClick,
+    onRowEditClick,
+    onRowDetailClick,
+    onRowClick,
+    onRowDoubleClick,
+  } = useRowEdit({
+    ...props,
+    funcExpExecute,
+    innerDataSource,
+    outerDataSource,
+    setInnerDataSource,
+    currentRowKey,
+    selectedRows,
+    onRowSelected,
+  });
+
+  const {
+    expandable: realExpandable,
+    childrenColumnName,
+    setChildrenColumnName,
+    setMode,
+  } = useExpandable({
+    ...props,
+    innerDataSource,
+    setInnerDataSource,
+    currentRowKey,
+    sandBoxSafeRun,
+    funcExpExecute,
+    engineApis,
+    isTree: true,
+  });
+
+  const { loading, colServiceData } = useCMDAction({
+    ref,
+    currentRowKey,
+    childrenColumnName,
+    innerDataSource,
+    setInnerDataSource,
+    setOuterDataSource,
+    selectedRows,
+    selectedRowKeys,
+    setSelectedRows,
+    setSelectedRowKeys,
+    setSelectedRowsRule,
+    setChildrenColumnName,
+    onRowSelected,
+    setMode,
+  });
+
+  const {
+    tableRef,
+    finalcolumns,
+    columnWidth,
+    setColumnWidth,
+    initLoadColWidth,
+    fixedAction,
+  } = useColumns({
+    ...props,
+    sandBoxSafeRun,
+    funcExpExecute,
+    engineApis,
+    form,
+    appId,
+    pageId,
+    compId,
+    innerDataSource,
+    currentRowKey,
+    colServiceData,
+    onRowDetailClick,
+    onRowDeleteClick,
+    onRowEditClick,
+    loading,
+    rowSelection,
+    getLocale,
+  });
+
+  const { scroll, tableWrapRef, initTableWrapWidthRef, getTableWrapWidth } =
+    useScroll({
+      ...props,
+      initLoadColWidth,
+      finalcolumns,
+      columnWidth,
+      setColumnWidth,
+    });
+
+  const superSelectTranslationMapRef: any = useRef(); // 防止state更新不及时，导致翻译无法获取翻译数据
+  if (!superSelectTranslationMapRef.current) {
+    superSelectTranslationMapRef.current = {};
+  }
+
+  const innerTableStyle: any = {};
+  if (styles?.overflowY) {
+    // 通过自定义样式给表格设置y轴滚动时， 认为希望只有表格滚动，但分页栏固定在底部
+    innerTableStyle.overflowY = styles.overflowY;
+  }
+
+  const handleTableChange = (
+    newPagination: any,
+    newFilters: any,
+    newSorter: any,
+    newExtra: any,
+  ) => {
+    if (typeof onChange === 'function') {
+      onChange(newPagination, newFilters, newSorter, newExtra);
+    }
+  };
+
+  // 表格宽度需要根据列宽度赋值
+  const finalStyles = useMemo(() => {
+    const tmpStyle = { ...styles };
+    const tableWidth = getTableWrapWidth();
+    if (tableWrapRef.current && tableWidth) {
+      const realTableWidth =
+        tableWidth >= initTableWrapWidthRef.current - 10
+          ? initTableWrapWidthRef.current - 9
+          : tableWidth;
+      tmpStyle.width = `${realTableWidth}px`;
+    }
+    return tmpStyle;
+  }, [columnWidth]);
+
+  return visible ? (
+    <Form form={form}>
+      <div
+        // appId={appId} // TODO:先注释，不知道什么场景用到
+        // pageId={pageId} // TODO:先注释，不知道什么场景用到
+        data-compid={(props as any)?.['data-compid']}
+        style={finalStyles}
+        className={classnames('ued-table-wrap', className)}
+        ref={tableWrapRef}
+      >
+        <TableHead
+          {...restProps} // 涉及到不确定的事件，所以要这么传
+          source="engine"
+          columns={[]}
+          sandBoxSafeRun={sandBoxSafeRun}
+          engineApis={engineApis}
+        />
+        <Table
+          locale={customLocale}
+          ref={tableRef}
+          bordered={isBordered}
+          className={innerClassName}
+          style={innerTableStyle}
+          components={components}
+          columns={finalcolumns.map((item, index) => {
+            // 固定列最后一项宽度根据本身计算返回
+            if (fixedAction && finalcolumns.length - 1 === index) {
+              return item;
+            }
+            item.width = columnWidth[index] || item.width;
+            return item;
+          })}
+          rowKey={currentRowKey}
+          scroll={scroll}
+          onChange={handleTableChange}
+          onRow={(record, index?: number) => {
+            return {
+              onClick: (event) => {
+                const hasOnRowClick = onRowClick(event, record, index);
+                !hasOnRowClick && onRowSelectClick(record, index);
+              }, // 点击行
+              onDoubleClick: (event) => {
+                onRowDoubleClick(event, record, index);
+              },
+              onContextMenu: (event) => {},
+              onMouseEnter: (event) => {}, // 鼠标移入行
+              onMouseLeave: (event) => {},
+            };
+          }}
+          rowSelection={rowSelection}
+          dataSource={innerDataSource}
+          expandable={realExpandable}
+          pagination={false}
+        />
+      </div>
+    </Form>
+  ) : null;
+});
+
+export default TreeTable;