@hzab/list-render 1.10.21-alpha.4 → 1.10.21-alpha.6

package/src/components/CellEditTable/common/utils.ts

@@ -0,0 +1,257 @@
+export const getNavigatorLanguage = (): string => navigator.language || "en-US";
+
+function getLocaleSeparators(locale: string) {
+  const testNumber = 123456.789;
+  const localeFormattedNumber = Intl.NumberFormat(locale).format(testNumber);
+
+  // Get the thousands separator of the locale
+  const thousandsSeparator = localeFormattedNumber.split("123")[1][0];
+
+  // Get the decimal separator of the locale
+  const decimalSeparator = localeFormattedNumber.split("123")[1][4];
+  return { thousandsSeparator, decimalSeparator };
+}
+export function parseLocaleNumber(stringNumber: string, locale = getNavigatorLanguage()): number {
+  if (!stringNumber.trim()) return NaN;
+  const { thousandsSeparator, decimalSeparator } = getLocaleSeparators(locale);
+  const normalizedStringNumber = stringNumber.replace(/\u00A0/g, " "); // Replace non-breaking space with normal space
+  const numberString = normalizedStringNumber
+    .replace(new RegExp(`[${thousandsSeparator}\\s]`, "g"), "") // Replace thousands separator and white-space
+    .replace(new RegExp(`\\${decimalSeparator}`, "g"), "."); // Replace decimal separator
+
+  const trimmedNumberString = numberString.replace(/^(?!-)\D+|\D+$/g, ""); // Remove characters before first and after last number, but keep negative sign
+  if (trimmedNumberString === null || trimmedNumberString.trim().length === 0) {
+    return NaN;
+  }
+  return Number(trimmedNumberString);
+}
+
+
+function isReactElement(value) {
+  return value !== null && typeof value === "object";
+}
+const getTitle = (item) => {
+  return typeof item?.title == "function"
+    ? isReactElement(item?.title())
+      ? item?.title()?.props.children
+      : String(item?.title()) || ""
+    : String(item?.title) || ""
+}
+
+export function convertColumnsToRows(columns, headerRowHeight = 40) {
+  // 获取所有叶子节点
+  const getLeaves = (cols) => {
+    return cols.reduce((acc, col) => {
+      if (col.children?.length) {
+        return [...acc, ...getLeaves(col.children)];
+      }
+      return [...acc, col];
+    }, []);
+  };
+
+  // 计算最大深度
+  const getDepth = (cols, depth = 1) => {
+    return cols.reduce((max, col) => {
+      if (col.children?.length) {
+        return Math.max(max, getDepth(col.children, depth + 1));
+      }
+      return Math.max(max, depth);
+    }, depth);
+  };
+
+  const leafColumns = getLeaves(columns);
+  const totalDepth = getDepth(columns);
+  const totalCols = leafColumns.length;
+
+  // 构建表头树
+  const buildTree = (cols, depth = 0) => {
+    return cols.map((col) => {
+      const hasChildren = col.children?.length > 0;
+      if (!hasChildren) {
+        return {
+          ...col,
+          rowspan: totalDepth - depth,
+          colspan: 1,
+          _depth: depth,
+          _isLeaf: true,
+        };
+      }
+      const leafCount = getLeaves(col.children).length;
+      return {
+        ...col,
+        rowspan: 1,
+        colspan: leafCount,
+        _depth: depth,
+        _isLeaf: false,
+        children: buildTree(col.children, depth + 1),
+      };
+    });
+  };
+
+  const tree = buildTree(columns, 0);
+
+  // 初始化行
+  const rows: any = Array.from({ length: totalDepth }, (_, i) => ({
+    rowId: `header-${i}`,
+    height: headerRowHeight,
+    cells: [],
+  }));
+
+
+  // 递归填充行
+  const fillRow = (nodes, rowIndex = 0) => {
+    nodes.forEach((node) => {
+      if (node._isLeaf) {
+        const cell = {
+          ...node,
+          type: node?.type == "rowSelection" ? "rowSelection" : "header",
+          text: getTitle(node),
+          dataIndex: node.dataIndex,
+          width: node.width,
+          rowspan: node.rowspan,
+          style: node?.type == "rowSelection" ? node?.style : {},
+        };
+        if (node.sorter) cell.sorter = node.sorter;
+        if (node.key) cell.key = node.key;
+        rows[rowIndex].cells.push(cell);
+      } else {
+        // 父节点：添加colspan
+        rows[rowIndex].cells.push({
+          ...node,
+          type: node?.type == "rowSelection" ? "rowSelection" : "header",
+          text: getTitle(node),
+          colspan: node.colspan,
+        });
+        if (node.children) {
+          fillRow(node.children, rowIndex + 1);
+        }
+      }
+    });
+  };
+
+  fillRow(tree, 0);
+
+  // 补全每一行的cell，使长度一致
+  rows.forEach((row, rowIndex) => {
+    const newCells = [];
+    let colIndex = 0;
+    let cellIndex = 0;
+
+    while (colIndex < totalCols) {
+      const currentCell = row.cells[cellIndex];
+
+      if (!currentCell) {
+        // 如果当前行没有足够的cell，从叶子节点补充
+        const leaf = leafColumns[colIndex];
+        newCells.push({
+          ...leaf,
+          type: leaf?.type == "rowSelection" ? "rowSelection" : "header",
+          text: getTitle(leaf),
+          dataIndex: leaf.dataIndex,
+          width: leaf.width,
+          rowspan: rowIndex === totalDepth - 1 ? 1 : undefined,
+        });
+        colIndex++;
+        cellIndex++;
+        continue;
+      }
+
+      const colspan = currentCell.colspan || 1;
+      const rowspan = currentCell.rowspan || 1;
+
+      // 检查当前cell是否应该出现在这一行
+      // 如果rowspan > 1，表示它跨多行，但只在第一行出现
+      if (rowspan > 1 && rowIndex > 0) {
+        // 这个cell不应该出现在当前行，跳过
+        colIndex += colspan;
+        cellIndex++;
+        continue;
+      }
+
+      // 如果当前cell有colspan，需要补全后面的空cell
+      newCells.push(currentCell);
+      colIndex += colspan;
+      cellIndex++;
+
+      // 如果colspan > 1，后面补充空cell
+      for (let i = 1; i < colspan; i++) {
+        newCells.push({
+          type: "header",
+          text: "",
+        });
+      }
+    }
+
+    row.cells = newCells;
+  });
+
+  // 最后一行的特殊处理：确保所有叶子节点都有对应的cell
+  const lastRow = rows[totalDepth - 1];
+  const lastRowCells = [];
+  let leafIndex = 0;
+
+  // 遍历所有叶子节点
+  leafColumns.forEach((leaf, index) => {
+    // 检查是否已经在lastRow中有对应的cell
+    const existingCell = lastRow.cells.find((cell) => cell.dataIndex === leaf.dataIndex && cell.text === leaf.title);
+
+    if (existingCell) {
+      lastRowCells.push(existingCell);
+    } else {
+      // 创建新的cell
+      lastRowCells.push({
+        ...leaf,
+        type: leaf?.type == "rowSelection" ? "rowSelection" : "header",
+        text: getTitle(leaf),
+        dataIndex: leaf.dataIndex,
+        width: leaf.width,
+        rowspan: 1,
+      });
+    }
+  });
+
+  lastRow.cells = lastRowCells;
+
+  // 确保所有行的cell数量等于totalCols
+  rows.forEach((row) => {
+    // 如果cell数量少于totalCols，补充空cell
+    while (row.cells.length < totalCols) {
+      row.cells.push({
+        type: "header",
+        text: "",
+      });
+    }
+  });
+
+  return rows;
+}
+
+
+export function flattenColumns(columns: any[]) {
+  const result: any[] = [];
+
+  function traverse(cols) {
+    cols.forEach((col) => {
+      if (col.children && col.children.length > 0) {
+        traverse(col.children);
+      } else {
+        // 创建新对象，只保留需要的属性
+        const { title, dataIndex, key, width, sorter, k, ...rest } = col;
+        result.push({
+          type: "Input",
+          dataIndex,
+          title,
+          ...(key && { key }),
+          ...(width && { width }),
+          ...(sorter && { sorter }),
+          ...(k && { k }),
+          // 如果需要保留其他属性
+          ...rest,
+        });
+      }
+    });
+  }
+
+  traverse(columns);
+  return result;
+}

package/src/components/CellEditTable/index.less

@@ -1,10 +1,28 @@
 .grid-container {
   overflow: auto;
   position: relative;
+  max-height: 80vh;
 
 
 
   .ant-select {
     width: 100% !important;
   }
+
+
+  .reactgrid-content .rg-pane .rg-cell {
+    padding: 0;
+
+    >div:nth-child(1) {
+      padding: 0 4px;
+    }
+  }
 }
+
+.base-hoc {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/CellEditTable/index.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import { ReactGrid, Column, Row, CellChange, Cell, CellTemplate } from "@silevis/reactgrid";
 import "@silevis/reactgrid/styles.css";
-import _ from "lodash";
-import "./index.less";
 import { TextTemplate } from "./Template/TextCellTemplate";
 import { antdComponents, customComponents } from "@hzab/form-render/src/index";
-import { WidthWrap } from "./Template/widthWrap";
+import { WidthWrapHoc } from "./common/WidthWrapHoc";
 import { NumberTemplate } from "./Template/NumberCellTemplate";
-import { Checkbox } from "antd";
+import { Checkbox, Spin } from "antd";
 import { ExpandListTemplate } from "./Template/ExpandListTemplate";
-import { convertColumnsToRows, flattenColumns } from "./Template/utils";
+import { convertColumnsToRows, flattenColumns } from "./common/utils";
+import { childAntdComponent } from "./common/childAntdComponent";
+import { GetBaseTemplate } from "./Template/GetBaseTemplate";
+import "./index.less";
 
 export default function CellEditTable(props: any) {
   const {
@@ -27,6 +28,7 @@ export default function CellEditTable(props: any) {
     rowSelection,
     rowKey,
     query,
+    loading,
   } = props;
 
   const [headerList, setHeaderList] = useState<any>([]);
@@ -35,6 +37,7 @@ export default function CellEditTable(props: any) {
   const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
   const [newDataSource, setNewDataSource] = useState<any>([]);
   const [expandKeys, setExpandKeys] = useState<any>([]);
+  const gridRef = useRef<any>();
   useEffect(() => {
     setNewDataSource(dataSource);
   }, [dataSource]);
@@ -71,19 +74,6 @@ export default function CellEditTable(props: any) {
           },
         });
       }
-      // const cells = columns?.map((item, index) => {
-      //   return {
-      //     type: item?.type == "rowSelection" ? "rowSelection" : "header",
-      //     text:
-      //       typeof item?.title == "function"
-      //         ? isReactElement(item?.title())
-      //           ? item?.title()?.props.children
-      //           : String(item?.title()) || ""
-      //         : String(item?.title) || "",
-      //     style: item?.type == "rowSelection" ? item?.style : {},
-      //     onCell: item?.onCell,
-      //   };
-      // });
       setHeaderList(convertColumnsToRows(columns, headerRowHeight));
       const newColumns = flattenColumns(columns);
       setTableColumns(
@@ -107,13 +97,14 @@ export default function CellEditTable(props: any) {
           const columnsItem = tableColumns[ind];
           const cellItem = item[el];
           let type: any = columnsItem?.type ?? "text";
+          /** 是否有复选框 */
           if (!rowSelection && ind == 0) {
             type = "ExpandListTemplate";
           }
           if (rowSelection && ind == 1) {
             type = "ExpandListTemplate";
           }
-
+          //设置单元格颜色及回显
           if (formulaConfig) {
             for (let key in formulaConfig) {
               if (key == el) {
@@ -136,33 +127,37 @@ export default function CellEditTable(props: any) {
             text: String(cellItem || ""),
             value: cellItem,
             selectedValue: cellItem || "",
-            // rowspan: item?.extendedConfig?.name == el ? item?.extendedConfig?.rowspan || 0 : 0,
-            // colspan: item?.extendedConfig?.name == el ? item?.extendedConfig?.colspan || 0 : 0,
             style: columnsItem?.type == "rowSelection" ? { display: "flex", justifyContent: "center" } : {},
             ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
             ...(columnsItem?.cellProps || {}),
             setNewDataSource,
             setExpandKeys,
+            rowKey,
             expandKeys,
             Slots,
             ...newCell,
-
-            // style:item?.extendedConfig?.name==el?item?.extendedConfig?.style||{}:{}
-            // ...handleType(item[el],tableColumns[ind]),
           };
         }),
       };
     });
-    setRows(_.uniqBy([...headerList, ...tempDataSource], "rowId"));
-  }, [newDataSource, tableColumns, rowSelection]);
+    setRows([...headerList, ...tempDataSource]);
+  }, [newDataSource, tableColumns]);
 
   // 单元格编辑回调
   const handleCellsChanged = (changes) => {
+    if (!Array.isArray(changes) || changes.length === 0) return;
+    /** 批量提交 */
+    let isBatchSubmit = false;
+    if (changes?.length > 1) {
+      isBatchSubmit = true;
+    }
     setRows((prevRows) => {
       changes.forEach((change) => {
+        const hasDiff = JSON.stringify((window as any).preCell?.text) != JSON.stringify(change.newCell?.text);
+        if (!hasDiff) return;
         const changeRowIdx = prevRows.findIndex((el) => el.rowId == change.rowId);
         const changeColumnIdx = tableColumns.findIndex((el) => el.columnId == change.columnId);
-        prevRows[changeRowIdx].cells[changeColumnIdx] = change.newCell;
+        prevRows[changeRowIdx].cells[changeColumnIdx] = { ...change.newCell };
         if (formulaConfig) {
           for (let key in formulaConfig) {
             const item = formulaConfig[key];
@@ -176,39 +171,23 @@ export default function CellEditTable(props: any) {
             prevRows[changeRowIdx].cells[resultColumnIdx] = newCell;
           }
         }
-        onEditSubmit && onEditSubmit(handleArrayToObj(prevRows[changeRowIdx]));
+        if (change?.newCell?.commit == "submit") {
+          onEditSubmit && onEditSubmit(handleArrayToObj(prevRows[changeRowIdx]));
+        }
         onChange && onChange(prevRows[changeRowIdx]);
       });
       return [...prevRows];
     });
   };
-
-  /**提取组件内部子组件 */
-  function extractSubComponents(comp, compName): any {
-    if (!comp || typeof comp !== "object") return {};
-
-    return Object.entries(comp).reduce((result, [key, value]) => {
-      // 匹配 antd 规范子组件命名：XXPicker / XX / 驼峰组件名
-      // 排除普通函数、数字、布尔、内部私有属性(带下划线)、原型上的方法
-      const isNativeFunc = ["render", "defaultProps", "propTypes", "displayName", "Group", "$$typeof"].includes(key);
-      // 判定为子组件：值是函数（React组件本质是函数/类），且不是内部方法
-      const isSubComponent = typeof comp == "object" && !isNativeFunc;
-
-      if (isSubComponent) {
-        result[`${compName}.${key}`] = value;
-      }
-      return result;
-    }, {});
-  }
   /** 自定义组件注册 */
   const baseTemplate = useMemo(() => {
-    const mergeTemplate: any = { ...(antdComponents || {}), ...(customComponents || {}) };
+    const mergeTemplate: any = { ...(antdComponents || {}), ...(customComponents || {}), ...childAntdComponent };
     const newMergeTemplate: any = {};
     for (let key in mergeTemplate) {
-      for (let it in extractSubComponents(mergeTemplate[key], key)) {
-        newMergeTemplate[it] = WidthWrap({ WrapComponent: extractSubComponents(mergeTemplate[key], key)[it] });
-      }
-      newMergeTemplate[key] = WidthWrap({ WrapComponent: mergeTemplate[key] });
+      const NewCom = (props) => {
+        return <GetBaseTemplate {...props} Com={mergeTemplate[key]} />;
+      };
+      newMergeTemplate[key] = WidthWrapHoc(NewCom);
     }
     return newMergeTemplate;
   }, [antdComponents, customComponents]);
@@ -216,42 +195,43 @@ export default function CellEditTable(props: any) {
   const ActionDom = (props) => {
     return (
       <div onPointerDown={(e) => e.stopPropagation()}>
-        {Slots?.tableActionsSlot && <Slots.tableActionsSlot {...props} />}
-        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...props} />}
-        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...props} />}
-        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...props} />}
+        {Slots?.tableActionsSlot && <Slots.tableActionsSlot {...props?.cell} />}
+        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...props?.cell} />}
+        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...props?.cell} />}
+        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...props?.cell} />}
       </div>
     );
   };
 
   const CheckBoxDom = (props) => {
+    const { record, rowId } = props?.cell;
     return (
       <Checkbox
-        {...props}
+        {...props?.componentProps}
         checked={
-          rowSelection?.selectedRowKeys?.includes((props?.record && props?.record[rowKey]) || "") ||
-          rowSelection?.selectedRowKeys?.length == dataSource?.length
+          rowSelection?.selectedRowKeys?.includes((record && record[rowKey]) || "") ||
+          (rowSelection?.selectedRowKeys?.length == dataSource?.length && dataSource?.length > 0)
         }
         indeterminate={
-          !props?.rowId &&
+          !rowId &&
           rowSelection?.selectedRowKeys?.length > 0 &&
           rowSelection?.selectedRowKeys?.length < dataSource?.length
         }
         onChange={(e) => {
-          if (e.target.checked && props?.rowId) {
-            const newSelectedRowKeys = [...rowSelection?.selectedRowKeys, props?.record[rowKey]];
+          if (e.target.checked && rowId) {
+            const newSelectedRowKeys = [...rowSelection?.selectedRowKeys, record[rowKey]];
             const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
 
             rowSelection?.onChange(newSelectedRowKeys, rows);
-          } else if (!e.target.checked && props?.rowId) {
-            const newSelectedRowKeys = rowSelection?.selectedRowKeys?.filter((el) => el != props?.record[rowKey]);
+          } else if (!e.target.checked && rowId) {
+            const newSelectedRowKeys = rowSelection?.selectedRowKeys?.filter((el) => el != record[rowKey]);
             const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
 
             rowSelection?.onChange(
-              rowSelection?.selectedRowKeys?.filter((el) => el != props?.record[rowKey]),
+              rowSelection?.selectedRowKeys?.filter((el) => el != record[rowKey]),
               rows,
             );
-          } else if (e.target.checked && !props?.rowId) {
+          } else if (e.target.checked && !rowId) {
             const newSelectedRowKeys = dataSource?.map((el) => el[rowKey]);
             const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
 
@@ -259,7 +239,7 @@ export default function CellEditTable(props: any) {
               dataSource?.map((el) => el[rowKey]),
               rows,
             );
-          } else if (!e.target.checked && !props?.rowId) {
+          } else if (!e.target.checked && !rowId) {
             rowSelection?.onChange([], []);
           }
         }}
@@ -276,62 +256,54 @@ export default function CellEditTable(props: any) {
     setSelectedRowKeys([]);
   }, [query?.pageNum]);
 
-  return (
-    <div className={`grid-container ${className}`} style={reactGridStyle}>
-      <ReactGrid
-        rows={rows}
-        columns={tableColumns}
-        onCellsChanged={handleCellsChanged}
-        enableFillHandle={true}
-        enableRangeSelection={true}
-        horizontalStickyBreakpoint={120}
-        // stickyLeftColumns={1}
-        // onFocusLocationChanging={(location) => {
-        //   return false;
-        // }}
-        {...reactGridProps}
-        onFocusLocationChanging={(cell: any) => {
-          const datatypeId = cell?.columnId + cell?.rowId;
-          window.gridEditId = datatypeId;
-
-          if (["_$actions", "rowSelection"]?.includes(cell?.columnId)) {
-            return false;
-          }
+  const customCellTemplates = useMemo(() => {
+    const templatesObj: any = {};
+    for (let key in reactGridProps?.customCellTemplates) {
+      const item = reactGridProps?.customCellTemplates[key];
+      templatesObj[key] = WidthWrapHoc(item);
+    }
+    return templatesObj;
+  }, [reactGridProps?.customCellTemplates]);
 
-          if (reactGridProps?.onFocusLocationChanging) {
-            return reactGridProps?.onFocusLocationChanging(cell, rows);
-          }
-          return cell;
-        }}
-        customCellTemplates={{
-          ...baseTemplate,
-          ...reactGridProps?.customCellTemplates,
-          _$actions: WidthWrap(
-            {
-              WrapComponent: ActionDom,
-            },
-            true,
-          ),
-          rowSelection: WidthWrap(
-            {
-              WrapComponent: CheckBoxDom,
-            },
-            true,
-          ),
-          Input: TextTemplate,
-          Number: NumberTemplate,
-          ExpandListTemplate: WidthWrap(
-            {
-              WrapComponent: ExpandListTemplate,
-            },
-            true,
-          ),
-        }}
+  return (
+    <Spin spinning={loading}>
+      <div className={`grid-container ${className}`} style={reactGridStyle}>
+        <ReactGrid
+          ref={gridRef}
+          rows={rows}
+          columns={tableColumns}
+          onCellsChanged={handleCellsChanged}
+          enableFillHandle={true}
+          enableRangeSelection={true}
+          horizontalStickyBreakpoint={120}
+          {...reactGridProps}
+          onFocusLocationChanging={(cell: any) => {
+            const datatypeId = cell?.columnId + cell?.rowId;
+            (window as any).gridEditId = datatypeId;
+            if (["_$actions", "rowSelection"]?.includes(cell?.columnId)) {
+              return false;
+            }
+            if (reactGridProps?.onFocusLocationChanging) {
+              return reactGridProps?.onFocusLocationChanging(cell, rows);
+            }
+            return cell;
+          }}
+          customCellTemplates={{
+            ExpandListTemplate: WidthWrapHoc(ExpandListTemplate),
+            ...baseTemplate,
+            ...customCellTemplates,
+            _$actions: WidthWrapHoc(ActionDom),
+            rowSelection: WidthWrapHoc(CheckBoxDom),
+            Input: TextTemplate,
+            Number: NumberTemplate,
+            // ExpandListTemplate: WidthWrap({ WrapComponent: ExpandListTemplate }, true),
+          }}
 
-        // onSelectionChanged={(newSelection) => {
-        //   console.log("选区发生变化", newSelection[0]);
-        // }}
-      />
-    </div>
+          // onSelectionChanged={(newSelection) => {
+          //   console.log("选区发生变化", newSelection[0]);
+          // }}
+        />
+      </div>
+    </Spin>
   );
 }