@lingxiteam/ebe-utils 0.5.10 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useColumns.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable no-nested-ternary */
 import CustomModule from '../../utils/CustomModule';
-import { Popover, Skeleton, Table, Tooltip } from 'antd';
+import { Popover, Table, Tooltip } from 'antd';
 import type { ColumnProps } from 'antd/lib/table';
 import { FilterDropdownProps } from 'antd/lib/table/interface';
 import classnames from 'classnames';
-import { cloneDeep, get, set } from 'lodash';
+import { get, set } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import EditComponent from '../EditComponent';
 import HeaderCellTitle from '../HeaderCell/HeaderCellTitle';
@@ -13,9 +13,12 @@ import { getOrSaveData } from '../utils/indexedDBHelper';
 import OperationCell from '../OperationCell';
 import { isDynamicProperty } from '../../utils/common';
 import { TH_CELL_KEY } from '../constant';
+import { usePersistFn } from '../../utils/ahooks';
 import { translateStaticData } from '../utils/translate';
 
 const ACTION_COL_KEY = '_actions';
+export const LEVEL_COL_KEY = 'children';
+export const DYNAMIC_COL_KEY = 'dynamicCol';
 
 const actionsMapFn = (getLocale: any) => ({
   edit: [getLocale('edit'), 'edit'],
@@ -32,7 +35,7 @@ const useColumns = (props: any) => {
     size,
     innerDataSource,
     columns,
-    editMode,
+    // editMode,
     extend,
     currentRowKey,
     extendNum, // 操作栏按钮最大展示数
@@ -69,7 +72,6 @@ const useColumns = (props: any) => {
     sandBoxSafeRun,
     funcExpExecute,
     engineApis,
-    loading,
     handleIsRowEditableCanUse,
     filters,
     filterDropdownOpen,
@@ -81,6 +83,8 @@ const useColumns = (props: any) => {
     getRealIndexById,
     showCustom,
     scroll,
+    showLevelGroup = true,
+    isBordered,
   } = props;
   const actionsMap: any = actionsMapFn(getLocale);
 
@@ -102,8 +106,18 @@ const useColumns = (props: any) => {
   const initRef = useRef(false);
   // 初始加载列宽
   const [initLoadColWidth, setInitLoadColWidth] = useState(false);
+  const [defaultColWidthMap, updateDefaultColWidthMap] = useState<Record<string, number>>({});
   const { hasCustom, defaultColumn } = showCustom || {};
 
+  // 绑定了主从列的表格不允许整表编辑
+  const { hasLevelData, editMode } = useMemo(() => {
+    const isLevel = columns.find((c: any) => c.type === LEVEL_COL_KEY);
+    return {
+      hasLevelData: !!isLevel,
+      editMode: isLevel ? 'single' : props.editMode,
+    };
+  }, [columns, props.editMode]);
+
   const getInnerRowAction = (rowAction: any, row: any, index: number | null, rowId: any) => {
     let visible = false;
     let clickText = rowAction.value;
@@ -310,12 +324,19 @@ const useColumns = (props: any) => {
     [size],
   );
 
-  const handleResize = (key: string) => (_: React.SyntheticEvent<Element>, { size }: any) => {
+  const handleResize = usePersistFn((key: string) => (_: React.SyntheticEvent<Element>, { size }: any) => {
     setColumnWidth(pre => ({ ...pre, [key]: Number.isNaN(size.width) ? 200 : size.width }));
-  };
+  });
 
   // 处理cell props
-  const createCellProps = (record: any, col: {dataIndex: string | string[], [key:string]: any}, rowIndex:number) => {
+  const createCellProps = usePersistFn((record: any, col: {dataIndex: string | string[], [key:string]: any}, rowIndex:number,
+    childInfo?: {
+      record: any;
+      dataIndex: string | string[]
+    }) => {
+    // 真实行数据，当为从表字段时，改数据为从表项数据，用于翻译/自定义渲染等
+    const realRecord = childInfo?.record || record;
+    const realDataIndex = childInfo?.dataIndex || col.dataIndex;
     const __rowSpan = rowSpanMap?.get(record) || {};
     const __rowClass = rowClassMap?.get(record) || {};
     const dataIndex = `${col.dataIndex}`;
@@ -333,12 +354,13 @@ const useColumns = (props: any) => {
         WebkitLineClamp: col.lineNum,
       };
     }
+
     const cellProps: any = {
       engineApis,
       funcExpExecute,
       appId,
       pageId,
-      row: record,
+      row: realRecord,
       rowId: record[currentRowKey],
       rowIndex,
       editable:
@@ -347,7 +369,7 @@ const useColumns = (props: any) => {
               // 整表或当前行编辑时
               ((nowInlineEditKey && record[currentRowKey] === nowInlineEditKey) || editMode === 'multiple'),
       isExtend: col.isExtend,
-      dataIndex: col.dataIndex,
+      dataIndex: realDataIndex,
       colorFormatInfo: [...(colorFormatInfo || []), ...(col.colorFormatInfo || [])],
       width: col.width,
       isCustomRendering: !!col.customRendering,
@@ -357,14 +379,21 @@ const useColumns = (props: any) => {
       controllLineStyle,
       $$componentItemId: props.$$componentItem.id,
       index: getRealIndexById(record[currentRowKey]),
+      type: col.type,
+      defaultColWidthMap,
+      size,
+      colKey: col.key,
+      isBordered,
     };
 
-    if (col.filter) {
+    if (col.filter && col.type !== LEVEL_COL_KEY) {
       // 开启过滤时，在td元素上记录对应的字段编码
-      cellProps['td-dataIndex'] = col.dataIndex;
+      cellProps['td-dataIndex'] = `${col.dataIndex}-${col.key}`;
     }
 
-    const { translateContent } = parseTranslateContent(col, { text: get(record, col.dataIndex), row: record, index: rowIndex });
+    const { translateContent } = parseTranslateContent(col, { text: get(realRecord, realDataIndex), row: record, index: rowIndex });
+
+    cellProps.rowText = translateContent;
 
     // 单元格提示 -> 默认提示
     if (
@@ -405,7 +434,7 @@ const useColumns = (props: any) => {
     }
 
     return cellProps;
-  };
+  });
 
   // 递归解析列信息
   const recursiveColumns = (columns: any) => {
@@ -420,8 +449,9 @@ const useColumns = (props: any) => {
 
       return {
         ...col,
-        onCell: (record: any, rowIndex: number) => {
-          const cellProps = createCellProps(record, col, rowIndex);
+        onCell: (record: any, rowIndex: number, childInfo?: {record: any; dataIndex: string | string[]}) => {
+          const cellProps = createCellProps(record, col, rowIndex, childInfo);
+          cellProps.createCellPropsFn = createCellProps;
           return cellProps;
         },
         onHeaderCell: (record: any) => ({
@@ -431,6 +461,7 @@ const useColumns = (props: any) => {
           style: record?.style,
           columnIndex: record?.columnIndex,
           [TH_CELL_KEY]: col?.key,
+          className: col.fixed !== undefined ? 'ued-fixed-th' : undefined,
         }),
       };
     })
@@ -465,132 +496,6 @@ const useColumns = (props: any) => {
     return actionWidth;
   }, [innerDataSource, actionWidth, getRealRowActions, getRealExtendRowActions, calcRowActionWidth]);
 
-  /**
-   * 符合非隐藏规则列
-   * customCols：左右固定列 + 已选的、自定义顺序的列
-   * customizableCols：可自定义(显隐、顺序)的列
-   */
-  const [customCols, customizableCols, groupMark] = useMemo(() => {
-    const fixedLeft: any[] = [];
-    const fixedRight: any[] = [];
-    let newColumns = [...columns];
-    // let hiddenCount = 0;
-    // 当前用户设置过的自定义列顺序
-    const orderMap: any = {};
-    // @ts-ignore
-    colCustomOrder.forEach((o, i) => {
-      orderMap[o] = i;
-    });
-    // 记录表格列内容
-    const colMap: any = {};
-    // 记录重新调整列内容后之前没有的列
-    const extendCols: any[] = [];
-    // 记录每层分组的数量
-    const group = new Map<number, number>();
-    
-    // 解析column
-    const parseCol = (c: any) => {
-      try {
-        let isHidden;
-        const colHiddenRule = c?.hiddenRule;
-        if (colHiddenRule) {
-          isHidden = sandBoxSafeRun(colHiddenRule);
-        }
-
-        const newCol = {
-          ...c,
-          originTitle: c.title,
-        };
-
-        if (!isHidden && c.fixed) {
-          if (c.fixed === 'left') {
-            fixedLeft.push(newCol);
-          } else {
-            fixedRight.push(newCol);
-          }
-        } else if (!isHidden) {
-          colMap[c.dataIndex] = newCol;
-          if (orderMap[c.dataIndex] === undefined) {
-            extendCols.push(newCol);
-          }
-        }
-        if (!isHidden && Array.isArray(newCol?.group)) {
-          newCol.group.forEach((c: string, gi: number) => {
-            if (!group.has(gi)) {
-              group.set(gi, 0);
-            }
-            const len = group.get(gi) || 0;
-            if (c) {
-              group.set(gi, len + 1);
-            }
-          });
-        }
-      } catch (e) {
-        console.log(e);
-      }
-    };
-    columns.forEach((col: any, i: number) => {
-      // 解析动态列
-      if (col.type === 'dynamicCol') {
-        if (col?.dataSource?.length) {
-          col.dataSource.forEach((c: any, index: number) => {
-            const dataIndex = get(c, col.dataIndex);
-            const realCol = {
-              ...col, // 动态列所有配置行为（排序、固定等）相同
-              dataIndex,
-              title: c[col.title],
-            };
-  
-            // 动态列标记一下，合计行需要根据key处理
-            realCol.dynamicOriginKey = realCol.key;
-            // key增强，拼接index，防止重复
-            realCol.key = `${realCol.key}_${index}`;
-            // 移除动态列标识字段，和动态列数据源字段
-            // delete realCol.type;
-            delete realCol.dataSource;
-            parseCol(realCol);
-            return realCol;
-          });
-        }
-      } else {
-        parseCol(col);
-      }
-    });
-    newColumns = [];
-    colCustomOrder.forEach((c: any) => {
-      if (colMap[c]) {
-        newColumns.push(colMap[c]);
-      }
-    });
-    const customizableCols = newColumns.concat(extendCols);
-    const defaultColumnSet = new Set<string>();
-    if (hasCustom && defaultColumn?.length) {
-      defaultColumn.forEach((c: any) => {
-        defaultColumnSet.add(c.key);
-      });
-    }
-    // 只展示选中列
-    let customCols = customizableCols.filter(
-      (c) => {
-        if (hasCustom) {
-          if (customSelectedCols === undefined) {
-            if (defaultColumn) {
-              // 没有缓存列，使用默认列
-              return defaultColumnSet.has(c.key);
-            }
-          } else {
-            // 有缓存列，使用缓存列
-            return customSelectedCols?.includes(`${c.dataIndex}`);
-          }
-        }
-        return true;
-      },
-    );
-    // 固定列与自定义列拼接在一起组成最终展示列
-    customCols = fixedLeft.concat(customCols).concat(fixedRight);
-    return [customCols, customizableCols, group];
-  }, [columns, colCustomOrder, customSelectedCols, hasCustom, defaultColumn]);
-
   const actionRowFlag = useRef<boolean>(false);
 
   const parseTranslateContent = (
@@ -667,15 +572,19 @@ const useColumns = (props: any) => {
         translateContent = _introduce ? (Array.isArray(_introduce) ? _introduce : [_introduce]).join(',') : text;
       }
       // 服务数据翻译
-      if (staticService && colServiceData) {
-        const { labelKey, valueKey } = staticService;
-        const needtranskey = Object.keys(colServiceData).find(k => `${k}` === `${c.dataIndex}` && Array.isArray(colServiceData[k]));
+      if (colServiceData) {
+        const needtranskey = Object.keys(colServiceData).find(k => `${k}` === `${c.dataIndex}` && Array.isArray(colServiceData[k]?.data));
+        const { labelKey: oldLabelKey, valueKey: oldValueKey } = staticService || {};
         if (needtranskey) {
+          const colServiceDataItem = colServiceData[needtranskey];
+          const { data: serviceData } = colServiceDataItem || {};
+          const labelKey = colServiceDataItem?.labelKey || oldLabelKey;
+          const valueKey = colServiceDataItem?.valueKey || oldValueKey;
           // 支持数组或逗号分支字符翻译
           translateContent = (Array.isArray(text) ? text : String(text).split(','))
             .map(n => {
               // 弱等保证 Number 与 String 可比较
-              const obj = colServiceData[needtranskey].find((o: any) => o[valueKey] == n); // eslint-disable-line
+              const obj = serviceData.find((o: any) => o[valueKey] == n); // eslint-disable-line
               return obj ? obj[labelKey] : n;
             })
             .join(',');
@@ -1077,6 +986,170 @@ const useColumns = (props: any) => {
     }
   };
 
+  /**
+   * 符合非隐藏规则列
+   * customCols：左右固定列 + 已选的、自定义顺序的列
+   * customizableCols：可自定义(显隐、顺序)的列
+   */
+  const [customCols, customizableCols, groupMark] = useMemo(() => {
+    const fixedLeft: any[] = [];
+    const fixedRight: any[] = [];
+    let newColumns = [...columns];
+    // let hiddenCount = 0;
+    // 当前用户设置过的自定义列顺序
+    const orderMap: any = {};
+    // @ts-ignore
+    colCustomOrder.forEach((o, i) => {
+      orderMap[o] = i;
+    });
+    // 记录表格列内容
+    const colMap: any = {};
+    // 记录重新调整列内容后之前没有的列
+    const extendCols: any[] = [];
+    // 记录每层分组的数量
+    const group = new Map<number, number>();
+    
+    // 解析column
+    const parseCol = (c: any) => {
+      try {
+        const newCol = {
+          ...c,
+          originTitle: c.title,
+        };
+        if (newCol.type === LEVEL_COL_KEY) {
+          // 层级列不支持排序功能
+          newCol.sorter = undefined;
+        }
+
+        if (c.fixed) {
+          if (c.fixed === 'left') {
+            fixedLeft.push(newCol);
+          } else {
+            fixedRight.push(newCol);
+          }
+        } else {
+          colMap[c.dataIndex] = newCol;
+          if (orderMap[c.dataIndex] === undefined) {
+            extendCols.push(newCol);
+          }
+        }
+        if (Array.isArray(newCol?.group)) {
+          newCol.group.forEach((c: string, gi: number) => {
+            if (!group.has(gi)) {
+              group.set(gi, 0);
+            }
+            const len = group.get(gi) || 0;
+            if (c) {
+              group.set(gi, len + 1);
+            }
+          });
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
+    columns.forEach((c: any) => {
+      let isHidden;
+      const colHiddenRule = c?.hiddenRule;
+      if (colHiddenRule) {
+        isHidden = sandBoxSafeRun(colHiddenRule);
+      }
+      if (isHidden) {
+        return;
+      }
+      const col = { ...c };
+      const { width } = col;
+      col.width = columnWidth[c?.key] || width || defaultColWidthMap[col.key];
+      // 解析动态列
+      if (col.type === DYNAMIC_COL_KEY) {
+        if (col?.dataSource?.length) {
+          col.dataSource.forEach((c: any, index: number) => {
+            const dataIndex = get(c, col.dataIndex);
+            const realCol = {
+              ...col, // 动态列所有配置行为（排序、固定等）相同
+              dataIndex,
+              title: c[col.title],
+            };
+  
+            // 动态列标记一下，合计行需要根据key处理
+            realCol.dynamicOriginKey = realCol.key;
+            // key增强，拼接index，防止重复
+            realCol.key = `${realCol.key}_${index}`;
+            // 移除动态列标识字段，和动态列数据源字段
+            // delete realCol.type;
+            delete realCol.dataSource;
+            // 按照条件，初始化生成实际的列定义
+            generateTableCol(realCol);
+            parseCol(realCol);
+            return realCol;
+          });
+        }
+      } else {
+        // 按照条件，初始化生成实际的列定义
+        generateTableCol(col);
+        parseCol(col);
+      }
+    });
+    newColumns = [];
+    colCustomOrder.forEach((c: any) => {
+      if (colMap[c]) {
+        newColumns.push(colMap[c]);
+      }
+    });
+    const customizableCols = newColumns.concat(extendCols);
+    const defaultColumnSet = new Set<string>();
+    if (hasCustom && defaultColumn?.length) {
+      defaultColumn.forEach((c: any) => {
+        defaultColumnSet.add(c.key);
+      });
+    }
+    // 只展示选中列
+    let customCols = customizableCols.filter(
+      (c) => {
+        if (hasCustom) {
+          if (customSelectedCols === undefined) {
+            if (defaultColumn) {
+              // 没有缓存列，使用默认列
+              return defaultColumnSet.has(c.key);
+            }
+          } else {
+            // 有缓存列，使用缓存列
+            return customSelectedCols?.includes(`${c.dataIndex}`);
+          }
+        }
+        return true;
+      },
+    );
+    // 固定列与自定义列拼接在一起组成最终展示列
+    customCols = fixedLeft.concat(customCols).concat(fixedRight);
+    return [customCols, customizableCols, group];
+  }, [
+    form,
+    columns,
+    colCustomOrder,
+    customSelectedCols,
+    hasCustom,
+    defaultColumn,
+    columnWidth,
+    rowSpanColMap,
+    defaultColWidthMap,
+    innerDataSource,
+    nowEditingData,
+    nowInlineEditKey,
+    hasSortEvent,
+    page,
+    pagination?.current,
+    pagination?.pageSize,
+    size,
+    colServiceData,
+    colServiceDataForEdit,
+    editMode,
+    nowEditingData,
+    nowInlineEditKey,
+    onRowAttrValsChange,
+  ]);
+
   const finalcolumns: any[] = useMemo(() => {
     const newColumns = [...customCols];
     let finalCols: ColumnProps<any>[] = [];
@@ -1093,9 +1166,6 @@ const useColumns = (props: any) => {
 
       newColumns[i].columnIndex = i;
 
-      // 按照条件，初始化生成实际的列定义
-      generateTableCol(c);
-
       // 是否开启筛选
       if (c.filter) {
         newColumns[i].filteredValue = filters[dataIndex];
@@ -1113,6 +1183,10 @@ const useColumns = (props: any) => {
           engineApis={engineApis}
         />
       );
+      // 层级表格只展示层级列的分组
+      if (hasLevelData && ((showLevelGroup && c.type !== LEVEL_COL_KEY) || !showLevelGroup)) {
+        newColumns[i].group = [];
+      }
 
       if (Array.isArray(c?.group)) {
         // 过滤掉整层为空的分组
@@ -1149,7 +1223,6 @@ const useColumns = (props: any) => {
         id: ACTION_COL_KEY,
         render: (text: any, row: any, index: number | null) => {
           const isNowEditRow = currentRowKey && nowInlineEditKey && row[currentRowKey] === nowInlineEditKey;
-
           return (
             <OperationCell
               row={row}
@@ -1202,22 +1275,11 @@ const useColumns = (props: any) => {
     }
 
     const resolvedColumns = recursiveColumns(finalCols);
-    // loading的时候改成鱼骨屏
-    if (loading) {
-      const myColumns: any[] = [];
-      resolvedColumns.forEach((item: any) => {
-        const column: any = cloneDeep(item);
-        column.render = () => <Skeleton.Input active size="small" />;
-        myColumns.push(column);
-      });
-      return myColumns;
-    }
     return resolvedColumns;
   }, [
     // TODO: 简单补充并修正一下依赖项，有问题再看怎么改
     form,
     actionsColWidth,
-    innerDataSource,
     getRealExtendRowActions,
     getRealRowActions,
     handleResize,
@@ -1254,7 +1316,7 @@ const useColumns = (props: any) => {
     expandIconPositionRef,
     filters,
     filterDropdownOpen,
-    loading,
+    showLevelGroup,
   ]);
 
   const printColumns: any[] = useMemo(() => {
@@ -1264,8 +1326,27 @@ const useColumns = (props: any) => {
     return finalcolumns;
   }, [finalcolumns]);
 
+  const collectInitDefaultColWidth = () => {
+    if (tableRef.current) {
+      setTimeout(() => {
+        const thColWidth: any = {};
+        const thList = tableRef?.current?.querySelectorAll('.pcfactory-table-thead th') || [];
+        for (let i = 0; i < thList.length; i += 1) {
+          const rowWidth = thList[i].offsetWidth;
+          // 根据唯一key标识拖拽宽度
+          const cellKey = thList[i].getAttribute(TH_CELL_KEY);
+          if (cellKey) {
+            thColWidth[cellKey] = rowWidth;
+          }
+        }
+        updateDefaultColWidthMap(thColWidth);
+      });
+    }
+  };
+
   useEffect(() => {
     if (!initRef.current) {
+      collectInitDefaultColWidth();
       if (tableRef.current && isFlexColumn) {
       // 如果开启了内容滚动， 但是没有配置内容宽度，则取表格项配置里的宽度，否则通过计算表格最终th渲染的宽度
         if (scroll && !scroll.x) {
@@ -1278,7 +1359,7 @@ const useColumns = (props: any) => {
           });
           setInitLoadColWidth(true);
         } else {
-        // 当前执行时，antd表格列虽展示，但列宽按指定宽度渲染，需等下一次render，目前解决办法先延迟执行
+          // 当前执行时，antd表格列虽展示，但列宽按指定宽度渲染，需等下一次render，目前解决办法先延迟执行
           setTimeout(() => {
             setColumnWidth(pre => {
               const p = { ...pre };
@@ -1295,6 +1376,7 @@ const useColumns = (props: any) => {
           });
         }
       }
+      
       initRef.current = true;
     }
   }, [tableRef.current, isFlexColumn]);
@@ -1309,8 +1391,10 @@ const useColumns = (props: any) => {
         userId,
         compId: fatherBOFramerId ? `${fatherBOFramerId}-${props.$$componentItem?.uid}` : props.$$componentItem?.uid,
         save: true,
-        order: colCustomOrder,
-        selected: customSelectedCols,
+        data: {
+          ORDER: colCustomOrder,
+          SELECTED: customSelectedCols,
+        },
       });
     }
   }, [colCustomOrder, customSelectedCols, compId, showCustom]);
@@ -1343,6 +1427,8 @@ const useColumns = (props: any) => {
     initLoadColWidth,
     printColumns,
     fixedAction,
+    customCols,
+    hasLevelData,
   };
 };
 

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useDataSource.ts

@@ -77,7 +77,8 @@ const useDataSource = (props: any) => {
       } else {
         row[currentRowKey] = cachedKey;
       }
-    } else if (!row[currentRowKey]) {
+      // 避免行id为0情况
+    } else if (row[currentRowKey] === undefined || row[currentRowKey] === null) {
       // 指定字段
       // 非临时数据，但没有主键
       // 直接生成(因为无法知道唯一标识是什么，只能每次渲染都生成新的)

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

@@ -73,7 +73,7 @@ const useExpandable = (expandCfg: any, isED?: boolean) => {
         const expandIconSpaceCls = `${iconClassName} ${prefixCls}-row-expand-icon-spaced`;
         const space = <span className={expandIconSpaceCls} />;
         // 树形结构数据，要保留空白
-        if (isTree || record?.[realChildrenColumnName]) {
+        if (record?.[realChildrenColumnName]) {
           return space;
         }