@lingxiteam/ebe-utils 0.2.22 → 0.2.24

package/lib/pcpublic/src/components/pcfactory/src/TreeSelect/index.tsx

@@ -1,12 +1,13 @@
-import { LingxiForwardRef } from '@lingxiteam/types';
+
 import { TreeSelect } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import IconFont from '../IconFont';
+import { flattenTreeData, renderCommonList } from '../utils/renderReadOnly';
+import { LingxiForwardRef } from '@lingxiteam/types';
 import { FormFields, getFieldsProps, useCommonImperativeHandle, useListenProps } from '../utils';
 import EmptyComp from '../utils/Empty';
 import { useLocale } from '../utils/hooks/useLocale';
-import { flattenTreeData, renderCommonList } from '../utils/renderReadOnly';
 
 const { TreeNode } = TreeSelect;
 
@@ -177,7 +178,7 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
   // isGetAll 是否获取所有节点keys，否则只获取父级的，展开时使用
   const recursive = (arr: any[], keys: any[], map?: any, isGetAll = false, parentNode?: any) => {
     if (Array.isArray(arr)) {
-      arr.forEach(a => {
+      arr.forEach((a) => {
         if (map) {
           map[a.key] = { ...a, data: { ...(a.data || {}), parentNode } };
         }
@@ -229,8 +230,19 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
   }, [data, asyncService, treeDefaultExpandAll]);
 
   const getParams = (service: any, key: any) => {
-    const { providerId, appId, serviceCode, _source, loadKey, _serviceId, serviceVersion, sceneCode, linkCode, busiObjectId, versionCode } =
-      service || {};
+    const {
+      providerId,
+      appId,
+      serviceCode,
+      _source,
+      loadKey,
+      _serviceId,
+      serviceVersion,
+      sceneCode,
+      linkCode,
+      busiObjectId,
+      versionCode,
+    } = service || {};
     let params: any = { [loadKey]: key };
     // 特殊服务参数处理
     if (_source === SERVICE_SOURCE.ATOM) {
@@ -297,20 +309,20 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
     const { key, title, children, selectable = 'selectable' } = service || {};
     const getTreeData = (arr: any[]) => {
       if (Array.isArray(arr)) {
-        return arr.map(c => {
+        return arr.map((c) => {
           // _isReload 标识节点数据是通过加载子节点动作设置的,此时取该动作配置好的key/title/selectable
           const originData = c._isReload ? c.data : c;
           const isSelectable = transformBoolean(originData[selectable] ?? originData.selectable);
           // 如果加载子节点配置了映射，优先取加载子节点的，否则取当时加载数据的映射，若都没有则取数据上的默认字段
-          const nodeSelectable = c._isReload ? c.selectable ?? isSelectable : isSelectable;
+          const nodeSelectable = c._isReload ? (c.selectable ?? isSelectable) : isSelectable;
           const node: any = {
-            key: c._isReload ? c.key ?? originData[key] : originData[key] ?? originData.key,
-            title: c._isReload ? c.title ?? originData[title] : originData[title] ?? originData.title,
-            selectable: c._isReload ? c.selectable ?? isSelectable : isSelectable,
+            key: c._isReload ? (c.key ?? originData[key]) : (originData[key] ?? originData.key),
+            title: c._isReload ? (c.title ?? originData[title]) : (originData[title] ?? originData.title),
+            selectable: c._isReload ? (c.selectable ?? isSelectable) : isSelectable,
             disableCheckbox: c.disabled ?? c.disableCheckbox ?? (nodeSelectable !== undefined ? !nodeSelectable : undefined),
             disabled: c.disabled ?? c.disableCheckbox ?? (nodeSelectable !== undefined ? !nodeSelectable : undefined),
             isLeaf: c.isLeaf ?? originData.isLeaf ?? false,
-            data: c.data || c,
+            data: (c.data || c),
           };
           // 优先取配置的children字段，若配置错误则子节点为空，若无配置默认访问数据自身children
           const childrenKey = children || 'children';
@@ -328,12 +340,10 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
               // 加载数据配置子节点映射，或者数据上也有children数据，则视为同步加载
               // 目前不处理加载子节点数据动作返回来的数据里面的children
               // -null是叶子 -[]是叶子 -属性不存在是叶子 -[有值]是非叶子
-              if (
-                c[childrenKey] === null ||
+              if (c[childrenKey] === null ||
                 c[childrenKey] === undefined ||
                 !(childrenKey in c) ||
-                (Array.isArray(c[childrenKey]) && c[childrenKey]?.length === 0)
-              ) {
+                (Array.isArray(c[childrenKey]) && c[childrenKey]?.length === 0)) {
                 node.isLeaf = true;
               }
             }
@@ -349,7 +359,7 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
 
   const loadNodeData = (node: any) => {
     const { children, eventKey } = node.props;
-    return new Promise<void>(resolve => {
+    return new Promise<void>((resolve) => {
       if (children && children.length) {
         resolve();
         return;
@@ -373,10 +383,7 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
         (res: string | any[]) => {
           if (Array.isArray(res) && res.length) {
             const source = loadTreeData(res, asyncService);
-            node.props.dataRef.children = source.map(c => ({
-              ...c,
-              isLeaf: false,
-            }));
+            node.props.dataRef.children = source.map((c) => ({ ...c, isLeaf: false }));
             node.props.dataRef.isLeaf = false;
           } else {
             node.props.dataRef.children = undefined;
@@ -390,7 +397,7 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
           node.props.dataRef.isLeaf = true;
           setData([...data]);
           resolve(err);
-        }
+        },
       );
     });
   };
@@ -409,7 +416,7 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
 
   const createNodes = (nodes: any[], parentNode?: any) =>
     Array.isArray(nodes) && nodes.length > 0
-      ? nodes.map(c => (
+      ? nodes.map((c) => (
         <TreeNode
           key={c.key}
           title={c.title}
@@ -451,9 +458,7 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
     } else if (filter === 'remote') {
       // 根据配置的‘搜索’事件过滤
       setFilterObject({
-        filterTreeNode: () => {
-          return true;
-        },
+        filterTreeNode: () => { return true; },
         onSearch: _.debounce((input: any) => {
           try {
             if (typeof onSearch === 'function') {
@@ -467,9 +472,7 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
     } else if (filter === 'none') {
       // 不过滤
       setFilterObject({
-        filterTreeNode: () => {
-          return true;
-        },
+        filterTreeNode: () => { return true; },
       });
     }
   }, [filter, treeProps.showSearch]);
@@ -482,22 +485,23 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
       required={required}
       wrapperClassName={TREESELECT_WRAPPER_CLASSNAME}
       rules={finalRules}
-      render={val =>
-        renderCommonList(val, flattenTreeData(data), {
-          labelKey: 'title',
-          valueKey: 'value',
-          childrenKey: 'children',
-        })
-      }
+      render={(val) => renderCommonList(val, flattenTreeData(data), {
+        labelKey: 'title',
+        valueKey: 'value',
+        childrenKey: 'children',
+      })}
       ref={formFieldsRef}
       value={value}
       // @ts-ignore
-      afterComponent={
-        treeProps.showSearch && (treeProps.multiple || treeProps.treeCheckable) ? (
-          <IconFont width={14} height={14} className="ued-treeSelect-icon" iconClass="lcdp-icon-flow-single-record" />
-        ) : null
-      }
-      handleFormValue={val => {
+      afterComponent={treeProps.showSearch && (treeProps.multiple || treeProps.treeCheckable) ? (
+        <IconFont
+          width={14}
+          height={14}
+          className="ued-treeSelect-icon"
+          iconClass="lcdp-icon-flow-single-record"
+        />
+      ) : null}
+      handleFormValue={(val) => {
         if (val !== undefined) {
           let newValue = val;
           if (restProps.treeCheckable) {
@@ -532,7 +536,7 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
           resetSelectAll();
         }}
         notFoundContent={<EmptyComp getLocale={getLocale} dataState={dataState} clsName="pcfactory-empty-small" />}
-        onTreeExpand={keys => {
+        onTreeExpand={(keys) => {
           setExpandedKeys(keys);
           // 展开的时候触发
           if (keys?.length - expandedKeys?.length === 1) {
@@ -543,7 +547,7 @@ const MyTreeSelect = LingxiForwardRef<any, MyTreeSelectProps>((props, ref) => {
                 nodeKey,
                 (node.children || []).map((c: any) => c.key),
                 node?.data?.parentNode?.key,
-                node?.data?.parentNode
+                node?.data?.parentNode,
               );
             } else {
               node.isLeaf = !(node.children?.length > 0);

package/lib/pcpublic/src/components/pcfactory/src/TreeTable/TreeTable.tsx

@@ -0,0 +1,264 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable eqeqeq */
+/* eslint-disable array-callback-return */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-underscore-dangle */
+import { Table, Form } from 'antd';
+import classnames from 'classnames';
+import React, { useMemo, useRef } from 'react';
+import BodyCell from '../Table/BodyCell';
+import HeaderCell from '../Table/HeaderCell';
+import TableHead from '../Table/TableHead';
+import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
+import {
+  useColumns,
+  useSelection,
+  useDataSource,
+  useRowEdit,
+  useCommon,
+  useScroll,
+} from '../Table/hooks';
+import { useCMDAction, useExpandable } from './hooks';
+import type { MyTableProps } from '../Table/types/prop';
+import EmptyComp from '../utils/Empty';
+import { useLocale } from '../utils/hooks/useLocale';
+import { useCreation } from '../utils/ahooks';
+import useBackgroundStyle from '../View/useBackgroundStyle';
+
+type WrapperTableProps = ReturnType<typeof useCommon>
+& ReturnType<typeof useCMDAction>
+& ReturnType<typeof useSelection>
+& ReturnType<typeof useExpandable>
+& ReturnType<typeof useRowEdit>
+& ReturnType<typeof useDataSource>;
+
+
+const TreeTable = React.forwardRef<any, Omit<MyTableProps, keyof WrapperTableProps> & WrapperTableProps>((props, ref) => {
+  const {
+    dataSource: boundDataSource,
+    visible = true,
+    style: styles,
+    className,
+    onChange,
+    $$componentItem,
+    getEngineApis,
+    backgroundType,
+    innerDataSource,
+    currentRowKey,
+    outerDataSource,
+    setInnerDataSource,
+    selectedRows,
+    onRowSelected,
+    colServiceData,
+    loading,
+    rowSelection,
+    innerClassName,
+    isBordered,
+    expandable: realExpandable,
+    onRowSelectClick,
+    ...restProps
+  } = props;
+
+  const { uid: compId } = $$componentItem;
+  const [form] = Form.useForm();
+
+  const engineApis = getEngineApis?.();
+  const {
+    sandBoxSafeRun,
+    dataState,
+  } = 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 { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis, appId: $$componentItem?.appId, mode: 'engine' });
+
+  // 根据id获取真实的下标，避免过滤和排序后影响下标
+  const { getRealIndexById } = useCreation(() => {
+    const indexMap = new Map<string | number, number>();
+    return {
+      getRealIndexById: (id: string | number) => {
+        if (indexMap.has(id)) {
+          return indexMap.get(id);
+        }
+        const index = (innerDataSource || []).findIndex((c: any) => c[currentRowKey] === id);
+        if (index !== -1) {
+          indexMap.set(id, index);
+        }
+        return index;
+      },
+    };
+  }, [innerDataSource, currentRowKey]);
+
+  const {
+    onRowDeleteClick,
+    onRowEditClick,
+    onRowDetailClick,
+    onRowClick,
+    onRowDoubleClick,
+  } = useRowEdit({
+    ...props,
+    funcExpExecute,
+    innerDataSource,
+    outerDataSource,
+    setInnerDataSource,
+    currentRowKey,
+    selectedRows,
+    onRowSelected,
+    engineApis,
+  });
+
+  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,
+    getRealIndexById,
+  });
+
+  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 = { ...backgroundStyle, ...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, backgroundStyle]);
+
+  return visible ? (
+    <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}
+      />
+      <Form form={form}>
+        <Table
+          locale={{
+            emptyText: <EmptyComp dataState={dataState} getLocale={getLocale} />,
+          }}
+          ref={tableRef}
+          bordered={isBordered}
+          className={innerClassName}
+          style={innerTableStyle}
+          components={{
+            body: {
+              cell: BodyCell,
+            },
+            header: {
+              cell: (info: any) => <HeaderCell
+                {...info}
+                tableData={innerDataSource}
+                childrenColumnName={realExpandable.childrenColumnName}
+              />,
+            },
+          }}
+          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}
+        />
+      </Form>
+    </div>
+  ) : null;
+});
+
+export default TreeTable;

package/lib/pcpublic/src/components/pcfactory/src/TreeTable/hooks/index.ts

@@ -1,4 +1,7 @@
 import useCMDAction from './useCMDAction';
 import useExpandable from './useExpandable';
 
-export { useCMDAction, useExpandable };
+export {
+  useCMDAction,
+  useExpandable,
+};

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

@@ -14,14 +14,17 @@ const useCMDAction = (props: any) => {
     expandTableData,
   } = props;
 
-  const { loading, colServiceData } = useCommonCMDAction(props);
+  const {
+    loading,
+    colServiceData,
+  } = useCommonCMDAction(props);
 
   useImperativeHandle(ref, () => ({
 
     /**
      * 加载树形表格数据（加载完之后，表格就脱离了数据源的控制了）
      */
-    reloadTreeTableData: (data: { dataSource: any[]; childrenKey: string; childrenSync: boolean }) => {
+    reloadTreeTableData: (data: { dataSource: any[]; childrenKey: string; childrenSync: boolean; }) => {
       /**
        * 注意，不是直接使用 setInnerDataSource
        * 而是通过 setOuterDataSource 间接驱动 -> setInnerDataSource
@@ -37,7 +40,10 @@ const useCMDAction = (props: any) => {
      * 理论上，只更新内部数据
      */
     reloadTreeTableChildData: (data: { children: any[]; expandRowKey: string }) => {
-      const { children, expandRowKey } = data;
+      const {
+        children,
+        expandRowKey,
+      } = data;
 
       // 异步加载限制为 children
       const realChildrenColumnName = childrenColumnName || 'children';

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

@@ -2,10 +2,15 @@ import { useEffect, useState } from 'react';
 import { useExpandable as useTableExpandable } from '../../Table/hooks';
 
 const useExpandable = (props: any) => {
-  const { setInnerDataSource } = props;
+  const {
+    setInnerDataSource,
+  } = props;
 
   const useTableExpandableReturn = useTableExpandable(props);
-  const { childrenColumnName, expandable } = useTableExpandableReturn;
+  const {
+    childrenColumnName,
+    expandable,
+  } = useTableExpandableReturn;
 
   const [mode, setMode] = useState('all');
 
@@ -30,13 +35,14 @@ const useExpandable = (props: any) => {
         }
       }
     }
-
+    
     return expandable?.expandIcon({
       ...props,
       isLeaf,
     });
   };
 
+
   useEffect(() => {
     // 当模式为异步时，
     if (mode === 'sync') {