@hzab/edit-table 0.1.9 → 0.1.12

package/src/index.tsx

@@ -1,464 +1,489 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Checkbox, Empty, Spin } from "antd";
-import { ReactGrid } from "@silevis/reactgrid";
-import TextTemplate from "./Template/TextCellTemplate";
-import { antdComponents, customComponents } from "@hzab/form-render";
-import { WidthWrapHoc } from "./common/WidthWrapHoc";
-import NumberTemplate from "./Template/NumberCellTemplate";
-import { ExpandListTemplate } from "./Template/ExpandListTemplate";
-import { convertColumnsToRows, flattenColumns, isReactElement } from "./common/utils";
-import { childAntdComponent } from "./common/childAntdComponent";
-import { GetBaseTemplate } from "./Template/GetBaseTemplate";
-import "./index.less";
-import "@silevis/reactgrid/styles.css";
-
-interface CellEditTableProps {
-  columns: any[];
-  dataSource: any[];
-  formulaConfig?: any;
-  onChange?: (v: any) => void;
-  reactGridProps?: any;
-  onEditSubmit?: (v: any) => void;
-  headerRowHeight?: number;
-  rowHeight?: number;
-  reactGridStyle?: any;
-  className?: string;
-  Slots?: any;
-  rowSelection?: any;
-  rowKey?: string;
-  query?: any;
-  loading?: boolean;
-  isExpand?: boolean;
-  getList?: () => void;
-  onRow?: (v: any, ri: number, ci: number) => void;
-}
-
-function CellEditTable(props: CellEditTableProps, ref: any) {
-  const {
-    columns,
-    dataSource,
-    formulaConfig,
-    onChange,
-    reactGridProps = {},
-    onEditSubmit,
-    headerRowHeight = 44,
-    rowHeight = 44,
-    reactGridStyle,
-    className,
-    Slots,
-    rowSelection,
-    rowKey = "id",
-    query,
-    loading,
-    isExpand = false,
-    getList,
-    onRow,
-  } = props;
-
-  const [headerList, setHeaderList] = useState<any>([]);
-  const [rows, setRows] = useState<any>([]);
-  const initRowsRef = useRef<any>([]);
-  /** 初始行数据 */
-  const [tableColumns, setTableColumns] = useState<any>([]);
-  const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
-  const [newDataSource, setNewDataSource] = useState<any>([]);
-  const [expandKeys, setExpandKeys] = useState<any>([]);
-  const [headerCustomTemplate, setHeaderCustomTemplate] = useState<any>([]);
-  const [highlights, setHighlights] = useState([]);
-  const highlightsRowIdRef = useRef();
-
-  const gridRef = useRef<any>();
-  const currentCell = useRef<any>();
-
-  useImperativeHandle(ref, () => {
-    return {
-      rows,
-    };
-  });
-  /** 递归处理子节点数据 */
-  const handleDataSource = (arr, level = 0) => {
-    arr?.forEach((el) => {
-      el.level = level + 1;
-      if (el?.children) {
-        handleDataSource(el?.children, el.level);
-      }
-    });
-  };
-  /** 洗数据 */
-  useEffect(() => {
-    handleDataSource(dataSource);
-    setNewDataSource(dataSource);
-  }, [dataSource]);
-
-  /** 判断当前选中行是否还存在 */
-  useEffect(() => {
-    const validRowIds = rows.map((r) => r.rowId);
-    if (!validRowIds?.includes(highlightsRowIdRef.current)) {
-      setHighlights([]);
-    }
-  }, [rows]);
-
-  /**将数组转为对象 */
-  const handleArrayToObj = (item) => {
-    const record = item?.cells?.[0]?.record;
-    const fieldList = ["_$actions", "rowSelection"];
-    const obj: any = {
-      id: item?.rowId,
-    };
-    item?.cells?.forEach((el) => {
-      if (el?.columnId && !fieldList?.includes(el?.columnId)) {
-        obj[el?.columnId] = el?.text || el?.value || el?.selectedValue || "";
-        if (el?.type == "Number") {
-          obj[el?.columnId] = el?.value;
-        }
-      }
-    });
-
-    return {
-      ...record,
-      ...obj,
-    };
-  };
-  /** 表头 */
-  useEffect(() => {
-    if (Array.isArray(columns) && columns?.length > 0) {
-      if (isExpand) {
-        columns.unshift({
-          type: "ExpandListTemplate",
-          width: 14,
-          key: "ExpandListTemplate",
-          nonEditable: true,
-          style: rowSelection?.style || {
-            background: "rgba(128, 128, 128, 0.1)",
-          },
-        });
-      }
-      if (rowSelection) {
-        columns.unshift({
-          type: "rowSelection",
-          nonEditable: true,
-          width: rowSelection?.width || 30,
-          key: "rowSelection",
-          style: rowSelection?.style || {
-            background: "rgba(128, 128, 128, 0.1)",
-            display: "flex",
-            justifyContent: "center",
-          },
-        });
-      }
-
-      setHeaderList(convertColumnsToRows(columns, headerRowHeight));
-      const newColumns = flattenColumns(columns);
-
-      setTableColumns(
-        newColumns?.map((item, index) => ({
-          ...item,
-          columnId: item?.dataIndex || item?.key || item?.name || "",
-        })),
-      );
-    }
-  }, [columns, rowSelection]);
-
-  /** 自定义表头 */
-  const headTemplate: any = {};
-  const handleHeader = (arr) => {
-    arr?.forEach((item) => {
-      if (isReactElement(typeof item?.title == "function" ? item?.title() : null)) {
-        const Com = item?.title;
-        headTemplate[item?.dataIndex] = WidthWrapHoc(Com);
-      }
-      if (item?.children) {
-        handleHeader(item?.children);
-      }
-    });
-  };
-  useEffect(() => {
-    handleHeader(columns);
-    setHeaderCustomTemplate(headTemplate);
-  }, [columns]);
-
-  /** 数据行 */
-  useEffect(() => {
-    const columnsIds = tableColumns?.map((el) => el?.columnId);
-
-    const tempDataSource = newDataSource?.map((item, index) => {
-      return {
-        rowId: item[rowKey],
-        height: rowHeight,
-        cells: columnsIds?.map((el, ind) => {
-          let newCell = {};
-          const columnsItem = tableColumns[ind];
-          const cellItem = item[el];
-          const type: any = columnsItem?.type ?? "text";
-          //设置单元格颜色及回显
-          if (formulaConfig) {
-            for (const key in formulaConfig) {
-              if (key == el) {
-                const it = formulaConfig[key];
-                newCell = {
-                  text: it?.setCellData && it?.setCellData(item),
-                  value: it?.setCellData && it?.setCellData(item),
-                  style: it?.setCellStyle && it?.setCellStyle((it?.setCellData && it?.setCellData(item)) || item),
-                };
-              }
-            }
-          }
-
-          return {
-            ...columnsItem,
-            record: item,
-            rowId: item[rowKey] || columnsItem?.type,
-            type: type,
-            nonEditable: columnsItem?.nonEditable,
-            text: String(cellItem || ""),
-            value: cellItem,
-            selectedValue: cellItem || "",
-            style: columnsItem?.type == "rowSelection" ? { display: "flex", justifyContent: "center" } : {},
-            ...(((onRow && onRow(item, index, ind)) as any) || {}),
-            ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
-            ...(columnsItem?.cellProps || {}),
-            setNewDataSource,
-            setExpandKeys,
-            rowKey,
-            expandKeys,
-            Slots,
-            ...newCell,
-          };
-        }),
-      };
-    });
-    const mergerList = [...headerList, ...tempDataSource];
-    setRows(mergerList);
-  }, [newDataSource, tableColumns, headerList]);
-  useEffect(() => {
-    if (loading) {
-      const item = rows?.find((el) => el?.rowId == currentCell.current?.rowId);
-      let newItem = item?.cells?.find((it) => it?.columnId == currentCell.current?.columnId);
-      newItem = { ...currentCell.current };
-      initRowsRef.current = rows;
-    }
-  }, [loading, rows]);
-  // 单元格编辑回调
-  const handleCellsChanged = async (changes) => {
-    const batchQuery: any = [];
-    if (!Array.isArray(changes) || changes.length === 0) return;
-    /** 批量提交 */
-    let isBatchSubmit = false;
-    if (changes?.length > 1) {
-      isBatchSubmit = true;
-    }
-
-    setRows((prevRows) => {
-      changes.forEach(async (change) => {
-        const changeRowIdx = prevRows.findIndex((el) => el.rowId == change.rowId);
-        const changeColumnIdx = tableColumns.findIndex((el) => el.columnId == change.columnId);
-        prevRows[changeRowIdx].cells[changeColumnIdx] = { ...change.newCell };
-        currentCell.current = { ...change.newCell };
-        batchQuery.push(handleArrayToObj(prevRows[changeRowIdx]));
-        if (formulaConfig) {
-          for (const key in formulaConfig) {
-            const item = formulaConfig[key];
-            const resultColumnIdx = tableColumns.findIndex((el) => el.columnId == key);
-            const newCell = {
-              ...prevRows[changeRowIdx].cells[resultColumnIdx],
-              text: item?.setCellData && item?.setCellData(prevRows[changeRowIdx]),
-              value: item?.setCellData && item?.setCellData(prevRows[changeRowIdx]),
-              style:
-                item?.setCellStyle &&
-                item?.setCellStyle(
-                  (item?.setCellData && item?.setCellData(prevRows[changeRowIdx])) || prevRows[changeRowIdx],
-                ),
-            };
-            prevRows[changeRowIdx].cells[resultColumnIdx] = newCell;
-          }
-        }
-        if (onEditSubmit && !isBatchSubmit) {
-          try {
-            await onEditSubmit(batchQuery);
-          } catch (err) {
-            getList && getList();
-          }
-        }
-        onChange && onChange(prevRows[changeRowIdx]);
-      });
-      return [...prevRows];
-    });
-
-    if (isBatchSubmit) {
-      try {
-        onEditSubmit && (await onEditSubmit(batchQuery));
-      } catch (err) {
-        getList && getList();
-      }
-    }
-  };
-
-  /** 自定义组件注册 */
-  const baseTemplate = useMemo(() => {
-    const mergeTemplate: any = { ...(antdComponents || {}), ...(customComponents || {}), ...childAntdComponent };
-    const newMergeTemplate: any = {};
-    for (const key in mergeTemplate) {
-      const NewCom = (newComProps) => {
-        return <GetBaseTemplate {...newComProps} {...props} Com={mergeTemplate[key]} />;
-      };
-      newMergeTemplate[key] = WidthWrapHoc(NewCom);
-    }
-    return newMergeTemplate;
-  }, [antdComponents, customComponents]);
-
-  const ActionDom = (props) => {
-    const rowData = rows?.find((el) => el?.rowId == props?.cell?.rowId);
-    return (
-      <div onPointerDown={(e) => e.stopPropagation()}>
-        {Slots?.tableActionsSlot && <Slots.tableActionsSlot {...props?.cell} rowData={rowData} />}
-        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...props?.cell} rowData={rowData} />}
-        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...props?.cell} rowData={rowData} />}
-        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...props?.cell} rowData={rowData} />}
-      </div>
-    );
-  };
-  function flattenDataSource(arr: any) {
-    const result: any = [];
-    function loop(list: any) {
-      for (const item of list) {
-        result.push(item);
-        if (item.children && item.children.length) {
-          loop(item.children);
-        }
-      }
-    }
-    loop(arr);
-    return result;
-  }
-  const CheckBoxDom = (props) => {
-    const { record, rowId } = props?.cell;
-    const newDataSource = flattenDataSource(dataSource);
-    return (
-      <Checkbox
-        {...props?.componentProps}
-        checked={
-          rowSelection?.selectedRowKeys?.includes((record && record[rowKey]) || "") ||
-          (rowSelection?.selectedRowKeys?.length == newDataSource?.length && newDataSource?.length > 0)
-        }
-        indeterminate={
-          !rowId &&
-          rowSelection?.selectedRowKeys?.length > 0 &&
-          rowSelection?.selectedRowKeys?.length < newDataSource?.length
-        }
-        onChange={(e) => {
-          if (e.target.checked && rowId) {
-            const newSelectedRowKeys = [...rowSelection?.selectedRowKeys, record[rowKey]];
-            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
-
-            rowSelection?.onChange(newSelectedRowKeys, rows);
-          } else if (!e.target.checked && rowId) {
-            const newSelectedRowKeys = rowSelection?.selectedRowKeys?.filter((el) => el != record[rowKey]);
-            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
-
-            rowSelection?.onChange(
-              rowSelection?.selectedRowKeys?.filter((el) => el != record[rowKey]),
-              rows,
-            );
-          } else if (e.target.checked && !rowId) {
-            const newSelectedRowKeys = newDataSource?.map((el) => el[rowKey]);
-            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
-
-            rowSelection?.onChange(
-              newDataSource?.map((el) => el[rowKey]),
-              rows,
-            );
-          } else if (!e.target.checked && !rowId) {
-            rowSelection?.onChange([], []);
-          }
-        }}
-      ></Checkbox>
-    );
-  };
-  useEffect(() => {
-    if (rowSelection) {
-      const newDataSource = flattenDataSource(dataSource);
-      const rows = newDataSource?.filter((el) => selectedRowKeys?.includes(el[rowKey]));
-      rowSelection?.onChange(selectedRowKeys, rows);
-    }
-  }, [selectedRowKeys, dataSource]);
-  useEffect(() => {
-    setSelectedRowKeys([]);
-  }, [query?.pageNum]);
-
-  const customCellTemplates = useMemo(() => {
-    const templatesObj: any = {};
-    for (const key in reactGridProps?.customCellTemplates) {
-      const item = reactGridProps?.customCellTemplates[key];
-      templatesObj[key] = WidthWrapHoc(item);
-    }
-    return templatesObj;
-  }, [reactGridProps?.customCellTemplates]);
-
-  /** 选中高亮整行 */
-  const onHightsRow = (cell: any, rows: any) => {
-    const list = rows
-      ?.find((el) => el?.rowId == cell?.rowId)
-      ?.cells?.map((item) => ({
-        columnId: item?.columnId,
-        rowId: cell?.rowId,
-        className: "custom-highlights-row",
-        borderColor: "transparent",
-      }));
-    highlightsRowIdRef.current = cell?.rowId;
-    setHighlights(list);
-  };
-
-  return (
-    <Spin spinning={loading}>
-      <div className={`grid-container ${className}`} style={reactGridStyle}>
-        <ReactGrid
-          ref={gridRef}
-          rows={loading ? initRowsRef.current : rows}
-          key={dataSource?.length == 0 ? 0 : 1}
-          columns={tableColumns}
-          onCellsChanged={handleCellsChanged}
-          enableFillHandle={true}
-          enableRangeSelection={true}
-          horizontalStickyBreakpoint={120}
-          {...reactGridProps}
-          highlights={reactGridProps?.highlights ?? highlights}
-          onFocusLocationChanging={(cell: any) => {
-            const datatypeId = cell?.columnId + cell?.rowId;
-            (window as any).gridEditId = datatypeId;
-            if (typeof cell?.rowId == "string" && cell?.rowId?.indexOf("header-") > -1) {
-              return false;
-            }
-            if (reactGridProps?.isRowHighlights && cell?.columnId) {
-              onHightsRow(cell, rows);
-            }
-            if (["_$actions", "rowSelection", "ExpandListTemplate"]?.includes(cell?.columnId)) {
-              return false;
-            }
-            if (reactGridProps?.onFocusLocationChanging) {
-              return reactGridProps?.onFocusLocationChanging(cell, rows);
-            }
-
-            return cell;
-          }}
-          customCellTemplates={{
-            ExpandListTemplate: WidthWrapHoc(ExpandListTemplate),
-            ...baseTemplate,
-            ...customCellTemplates,
-            ...headerCustomTemplate,
-            _$actions: WidthWrapHoc(ActionDom),
-            rowSelection: WidthWrapHoc(CheckBoxDom),
-            // Input: WidthWrapHoc(TextTemplate,props),
-            Number: WidthWrapHoc(NumberTemplate, props),
-          }}
-        />
-        {dataSource?.length <= 0 && (
-          <div className="grid-container-empty">
-            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-          </div>
-        )}
-      </div>
-    </Spin>
-  );
-}
-
-export default forwardRef(CellEditTable);
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Checkbox, Empty, Spin } from "antd";
+import { ReactGrid } from "@silevis/reactgrid";
+import TextTemplate from "./Template/TextCellTemplate";
+import { antdComponents, customComponents } from "@hzab/form-render";
+import { WidthWrapHoc } from "./common/WidthWrapHoc";
+import NumberTemplate from "./Template/NumberCellTemplate";
+import { ExpandListTemplate } from "./Template/ExpandListTemplate";
+import { convertColumnsToRows, flattenColumns, isReactElement } from "./common/utils";
+import { childAntdComponent } from "./common/childAntdComponent";
+import { GetBaseTemplate } from "./Template/GetBaseTemplate";
+import "./index.less";
+import "@silevis/reactgrid/styles.css";
+
+interface CellEditTableProps {
+  columns: any[];
+  dataSource: any[];
+  formulaConfig?: any;
+  onChange?: (v: any) => void;
+  reactGridProps?: any;
+  onEditSubmit?: (v: any) => void;
+  headerRowHeight?: number;
+  rowHeight?: number;
+  reactGridStyle?: any;
+  className?: string;
+  Slots?: any;
+  rowSelection?: any;
+  rowKey?: string;
+  query?: any;
+  loading?: boolean;
+  isExpand?: boolean;
+  getList?: () => void;
+  onRow?: (v: any, ri: number, ci: number) => void;
+}
+
+function CellEditTable(props: CellEditTableProps, ref: any) {
+  const {
+    columns,
+    dataSource,
+    formulaConfig,
+    onChange,
+    reactGridProps = {},
+    onEditSubmit,
+    headerRowHeight = 44,
+    rowHeight = 44,
+    reactGridStyle,
+    className,
+    Slots,
+    rowSelection,
+    rowKey = "id",
+    query,
+    loading,
+    isExpand = false,
+    getList,
+    onRow,
+  } = props;
+
+  const [headerList, setHeaderList] = useState<any>([]);
+  const [rows, setRows] = useState<any>([]);
+  const initRowsRef = useRef<any>([]);
+  /** 初始行数据 */
+  const [tableColumns, setTableColumns] = useState<any>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
+  const [newDataSource, setNewDataSource] = useState<any>([]);
+  const [expandKeys, setExpandKeys] = useState<any>([]);
+  const [headerCustomTemplate, setHeaderCustomTemplate] = useState<any>([]);
+  const [highlights, setHighlights] = useState([]);
+  const highlightsRowIdRef = useRef();
+
+  const gridRef = useRef<any>();
+  const currentCell = useRef<any>();
+
+  useImperativeHandle(ref, () => {
+    return {
+      rows,
+    };
+  });
+  /** 递归处理子节点数据 */
+  const handleDataSource = (arr, level = 0) => {
+    arr?.forEach((el) => {
+      el.level = level + 1;
+      if (el?.children) {
+        handleDataSource(el?.children, el.level);
+      }
+    });
+  };
+  /** 洗数据 */
+  useEffect(() => {
+    handleDataSource(dataSource);
+    setNewDataSource(dataSource);
+  }, [dataSource]);
+
+  /** 判断当前选中行是否还存在 */
+  useEffect(() => {
+    const validRowIds = rows.map((r) => r.rowId);
+    if (!validRowIds?.includes(highlightsRowIdRef.current)) {
+      setHighlights([]);
+    }
+  }, [rows]);
+
+  /**将数组转为对象 */
+  const handleArrayToObj = (item) => {
+    const record = item?.cells?.[0]?.record;
+    const fieldList = ["_$actions", "rowSelection"];
+    const obj: any = {
+      id: item?.rowId,
+    };
+    item?.cells?.forEach((el) => {
+      if (el?.columnId && !fieldList?.includes(el?.columnId)) {
+        obj[el?.columnId] = el?.text || el?.value || el?.selectedValue || "";
+        if (el?.type == "Number") {
+          obj[el?.columnId] = el?.value;
+        }
+      }
+    });
+
+    return {
+      ...record,
+      ...obj,
+    };
+  };
+  /** 表头 */
+  useEffect(() => {
+    if (Array.isArray(columns) && columns?.length > 0) {
+      if (isExpand) {
+        columns.unshift({
+          type: "ExpandListTemplate",
+          width: 14,
+          key: "ExpandListTemplate",
+          nonEditable: true,
+          style: rowSelection?.style || {
+            background: "rgba(128, 128, 128, 0.1)",
+          },
+        });
+      }
+      if (rowSelection) {
+        columns.unshift({
+          type: "rowSelection",
+          nonEditable: true,
+          width: rowSelection?.width || 30,
+          key: "rowSelection",
+          style: rowSelection?.style || {
+            background: "rgba(128, 128, 128, 0.1)",
+            display: "flex",
+            justifyContent: "center",
+          },
+        });
+      }
+
+      setHeaderList(convertColumnsToRows(columns, headerRowHeight));
+      const newColumns = flattenColumns(columns);
+
+      setTableColumns(
+        newColumns?.map((item, index) => ({
+          ...item,
+          columnId: item?.dataIndex || item?.key || item?.name || "",
+        })),
+      );
+    }
+  }, [columns, rowSelection]);
+
+  /** 自定义表头 */
+  const headTemplate: any = {};
+  const handleHeader = (arr) => {
+    arr?.forEach((item) => {
+      if (isReactElement(typeof item?.title == "function" ? item?.title() : null)) {
+        const Com = item?.title;
+        headTemplate[item?.dataIndex] = WidthWrapHoc(Com);
+      }
+      if (item?.children) {
+        handleHeader(item?.children);
+      }
+    });
+  };
+  useEffect(() => {
+    handleHeader(columns);
+    setHeaderCustomTemplate(headTemplate);
+  }, [columns]);
+
+  /** 数据行 */
+  useEffect(() => {
+    const columnsIds = tableColumns?.map((el) => el?.columnId);
+
+    const tempDataSource = newDataSource?.map((item, index) => {
+      return {
+        rowId: item[rowKey],
+        height: rowHeight,
+        cells: columnsIds?.map((el, ind) => {
+          let newCell = {};
+          const columnsItem = tableColumns[ind];
+          const cellItem = item[el];
+          const type: any = columnsItem?.type ?? "text";
+          //设置单元格颜色及回显
+          if (formulaConfig) {
+            for (const key in formulaConfig) {
+              if (key == el) {
+                const it = formulaConfig[key];
+                newCell = {
+                  text: it?.setCellData && it?.setCellData(item),
+                  value: it?.setCellData && it?.setCellData(item),
+                  style:
+                    it?.setCellStyle &&
+                    it?.setCellStyle((it?.setCellData && it?.setCellData(item)) || item),
+                };
+              }
+            }
+          }
+
+          return {
+            ...columnsItem,
+            record: item,
+            rowId: item[rowKey] || columnsItem?.type,
+            type: type,
+            nonEditable: columnsItem?.pattern == "readPretty" ? true : columnsItem?.nonEditable,
+            text: String(cellItem || ""),
+            value: cellItem,
+            selectedValue: cellItem || "",
+            style:
+              columnsItem?.type == "rowSelection"
+                ? { display: "flex", justifyContent: "center" }
+                : {},
+            ...(((onRow && onRow(item, index, ind)) as any) || {}),
+            ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
+            ...(columnsItem?.cellProps || {}),
+            setNewDataSource,
+            setExpandKeys,
+            rowKey,
+            expandKeys,
+            Slots,
+            ...newCell,
+          };
+        }),
+      };
+    });
+    const mergerList = [...headerList, ...tempDataSource];
+    setRows(mergerList);
+  }, [newDataSource, tableColumns, headerList]);
+  useEffect(() => {
+    if (loading) {
+      const item = rows?.find((el) => el?.rowId == currentCell.current?.rowId);
+      let newItem = item?.cells?.find((it) => it?.columnId == currentCell.current?.columnId);
+      newItem = { ...currentCell.current };
+      initRowsRef.current = rows;
+    }
+  }, [loading, rows]);
+  // 单元格编辑回调
+  const handleCellsChanged = async (changes) => {
+    const batchQuery: any = [];
+    if (!Array.isArray(changes) || changes.length === 0) return;
+    /** 批量提交 */
+    let isBatchSubmit = false;
+    if (changes?.length > 1) {
+      isBatchSubmit = true;
+    }
+
+    setRows((prevRows) => {
+      changes.forEach(async (change) => {
+        const changeRowIdx = prevRows.findIndex((el) => el.rowId == change.rowId);
+        const changeColumnIdx = tableColumns.findIndex((el) => el.columnId == change.columnId);
+        prevRows[changeRowIdx].cells[changeColumnIdx] = { ...change.newCell };
+        currentCell.current = { ...change.newCell };
+        batchQuery.push(handleArrayToObj(prevRows[changeRowIdx]));
+        if (formulaConfig) {
+          for (const key in formulaConfig) {
+            const item = formulaConfig[key];
+            const resultColumnIdx = tableColumns.findIndex((el) => el.columnId == key);
+            const newCell = {
+              ...prevRows[changeRowIdx].cells[resultColumnIdx],
+              text: item?.setCellData && item?.setCellData(prevRows[changeRowIdx]),
+              value: item?.setCellData && item?.setCellData(prevRows[changeRowIdx]),
+              style:
+                item?.setCellStyle &&
+                item?.setCellStyle(
+                  (item?.setCellData && item?.setCellData(prevRows[changeRowIdx])) ||
+                    prevRows[changeRowIdx],
+                ),
+            };
+            prevRows[changeRowIdx].cells[resultColumnIdx] = newCell;
+          }
+        }
+        if (onEditSubmit && !isBatchSubmit) {
+          try {
+            await onEditSubmit(batchQuery);
+          } catch (err) {
+            getList && getList();
+          }
+        }
+        onChange && onChange(prevRows[changeRowIdx]);
+      });
+      return [...prevRows];
+    });
+
+    if (isBatchSubmit) {
+      try {
+        onEditSubmit && (await onEditSubmit(batchQuery));
+      } catch (err) {
+        getList && getList();
+      }
+    }
+  };
+
+  /** 自定义组件注册 */
+  const baseTemplate = useMemo(() => {
+    const mergeTemplate: any = {
+      ...(antdComponents || {}),
+      ...(customComponents || {}),
+      ...childAntdComponent,
+    };
+    const newMergeTemplate: any = {};
+    for (const key in mergeTemplate) {
+      const NewCom = (newComProps) => {
+        return <GetBaseTemplate {...newComProps} {...props} Com={mergeTemplate[key]} />;
+      };
+      newMergeTemplate[key] = WidthWrapHoc(NewCom);
+    }
+    return newMergeTemplate;
+  }, [antdComponents, customComponents]);
+
+  const ActionDom = (props) => {
+    const rowData = rows?.find((el) => el?.rowId == props?.cell?.rowId);
+    return (
+      <div onPointerDown={(e) => e.stopPropagation()}>
+        {Slots?.tableActionsSlot && <Slots.tableActionsSlot {...props?.cell} rowData={rowData} />}
+        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...props?.cell} rowData={rowData} />}
+        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...props?.cell} rowData={rowData} />}
+        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...props?.cell} rowData={rowData} />}
+      </div>
+    );
+  };
+  function flattenDataSource(arr: any) {
+    const result: any = [];
+    function loop(list: any) {
+      for (const item of list) {
+        result.push(item);
+        if (item.children && item.children.length) {
+          loop(item.children);
+        }
+      }
+    }
+    loop(arr);
+    return result;
+  }
+  const CheckBoxDom = (props) => {
+    const { record, rowId } = props?.cell;
+
+    const newDataSource = flattenDataSource(dataSource)?.filter(
+      (item) => !rowSelection?.getCheckboxProps?.(item)?.disabled,
+    );
+
+    const checkboxProps =
+      typeof rowSelection?.getCheckboxProps === "function"
+        ? rowSelection?.getCheckboxProps?.(record)
+        : {};
+    return (
+      <Checkbox
+        {...props?.componentProps}
+        checked={
+          rowSelection?.selectedRowKeys?.includes((record && record[rowKey]) || "") ||
+          (!rowId &&
+            rowSelection?.selectedRowKeys?.length == newDataSource?.length &&
+            newDataSource?.length > 0)
+        }
+        indeterminate={
+          !rowId &&
+          rowSelection?.selectedRowKeys?.length > 0 &&
+          rowSelection?.selectedRowKeys?.length < newDataSource?.length
+        }
+        onChange={(e) => {
+          if (e.target.checked && rowId) {
+            const newSelectedRowKeys = [...rowSelection?.selectedRowKeys, record[rowKey]];
+            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+
+            rowSelection?.onChange(newSelectedRowKeys, rows);
+          } else if (!e.target.checked && rowId) {
+            const newSelectedRowKeys = rowSelection?.selectedRowKeys?.filter(
+              (el) => el != record[rowKey],
+            );
+            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+
+            rowSelection?.onChange(
+              rowSelection?.selectedRowKeys?.filter((el) => el != record[rowKey]),
+              rows,
+            );
+          } else if (e.target.checked && !rowId) {
+            const newSelectedRowKeys = newDataSource?.map((el) => el[rowKey]);
+            const rows = newDataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+
+            rowSelection?.onChange(
+              newDataSource?.map((el) => el[rowKey]),
+              rows,
+            );
+          } else if (!e.target.checked && !rowId) {
+            rowSelection?.onChange([], []);
+          }
+        }}
+        {...checkboxProps}
+      ></Checkbox>
+    );
+  };
+  useEffect(() => {
+    if (rowSelection) {
+      const newDataSource = flattenDataSource(dataSource)?.filter(
+        (item) => !rowSelection?.getCheckboxProps?.(item)?.disabled,
+      );
+      const rows = newDataSource?.filter((el) => selectedRowKeys?.includes(el[rowKey]));
+      rowSelection?.onChange(selectedRowKeys, rows);
+    }
+  }, [selectedRowKeys, dataSource]);
+  useEffect(() => {
+    setSelectedRowKeys([]);
+  }, [query?.pageNum]);
+
+  const customCellTemplates = useMemo(() => {
+    const templatesObj: any = {};
+    for (const key in reactGridProps?.customCellTemplates) {
+      const item = reactGridProps?.customCellTemplates[key];
+      templatesObj[key] = WidthWrapHoc(item);
+    }
+    return templatesObj;
+  }, [reactGridProps?.customCellTemplates]);
+
+  /** 选中高亮整行 */
+  const onHightsRow = (cell: any, rows: any) => {
+    const list = rows
+      ?.find((el) => el?.rowId == cell?.rowId)
+      ?.cells?.map((item) => ({
+        columnId: item?.columnId,
+        rowId: cell?.rowId,
+        className: "custom-highlights-row",
+        borderColor: "transparent",
+      }));
+    highlightsRowIdRef.current = cell?.rowId;
+    setHighlights(list);
+  };
+
+  return (
+    <Spin spinning={loading}>
+      <div className={`grid-container ${className}`} style={reactGridStyle}>
+        <ReactGrid
+          ref={gridRef}
+          rows={loading ? initRowsRef.current : rows}
+          key={dataSource?.length == 0 ? 0 : 1}
+          columns={tableColumns}
+          onCellsChanged={handleCellsChanged}
+          enableFillHandle={true}
+          enableRangeSelection={true}
+          horizontalStickyBreakpoint={120}
+          {...reactGridProps}
+          highlights={reactGridProps?.highlights ?? highlights}
+          onFocusLocationChanging={(cell: any) => {
+            const datatypeId = cell?.columnId + cell?.rowId;
+            (window as any).gridEditId = datatypeId;
+            if (typeof cell?.rowId == "string" && cell?.rowId?.indexOf("header-") > -1) {
+              return false;
+            }
+            if (reactGridProps?.isRowHighlights && cell?.columnId) {
+              onHightsRow(cell, rows);
+            }
+            if (["_$actions", "rowSelection", "ExpandListTemplate"]?.includes(cell?.columnId)) {
+              return false;
+            }
+            if (reactGridProps?.onFocusLocationChanging) {
+              return reactGridProps?.onFocusLocationChanging(cell, rows);
+            }
+
+            return cell;
+          }}
+          customCellTemplates={{
+            ExpandListTemplate: WidthWrapHoc(ExpandListTemplate),
+            ...baseTemplate,
+            ...customCellTemplates,
+            ...headerCustomTemplate,
+            _$actions: WidthWrapHoc(ActionDom),
+            rowSelection: WidthWrapHoc(CheckBoxDom),
+            // Input: WidthWrapHoc(TextTemplate,props),
+            Number: WidthWrapHoc(NumberTemplate, props),
+          }}
+        />
+        {dataSource?.length <= 0 && (
+          <div className="grid-container-empty">
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          </div>
+        )}
+      </div>
+    </Spin>
+  );
+}
+
+export default forwardRef(CellEditTable);