@hzab/edit-table 0.0.1 → 0.0.2-alpha.0

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "@hzab/edit-table",
-  "version": "0.0.1",
-  "description": "",
-  "main": "src",
-  "scripts": {
-    "dev": "webpack serve -c ./config/webpack.config.js --env local",
-    "build": "webpack -c ./config/webpack.config.js --env production",
-    "version:alpha": "npm version prerelease --preid=alpha",
-    "publish:alpha": "npm publish --tag alpha",
-    "version:beta": "npm version prerelease --preid=beta",
-    "publish:beta": "npm publish --tag beta",
-    "version:patch": "npm version patch",
-    "version:minior": "npm version minor",
-    "version:major": "npm version major",
-    "publish:stable": "npm publish --access public",
-    "prepare": "husky install",
-    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
-    "docs": "typedoc"
-  },
-  "files": [
-    "src",
-    "CHANGELOG.md"
-  ],
-  "keywords": [],
-  "author": "CaiYansong",
-  "license": "ISC",
-  "devDependencies": {
-    "@hzab/permissions": "1.0.0",
-    "@hzab/webpack-config": "1.1.4",
-    "@types/react": "17.0.62",
-    "@types/react-dom": "17.0.20",
-    "antd": "4.24.16",
-    "axios": "1.13.6",
-    "eslint": "8.30.0",
-    "less": "4.1.3",
-    "mobx": "6.7.0",
-    "mobx-react": "7.6.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-router-dom": "6.14.1",
-    "typedoc": "0.24.8",
-    "typescript": "4.9.4",
-    "webpack": "5.75.0"
-  },
-  "directories": {
-    "src": "src"
-  },
-  "lint-staged": {
-    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
-      "prettier --write"
-    ]
-  },
-  "dependencies": {
-    "@hzab/form-render": "^1.7.17",
-    "@hzab/list-render": "^1.11.0",
-    "@silevis/reactgrid": "^4.1.17"
-  }
-}
+{
+  "name": "@hzab/edit-table",
+  "version": "0.0.2-alpha.0",
+  "description": "",
+  "main": "src",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "version:alpha": "npm version prerelease --preid=alpha",
+    "publish:alpha": "npm publish --tag alpha",
+    "version:beta": "npm version prerelease --preid=beta",
+    "publish:beta": "npm publish --tag beta",
+    "version:patch": "npm version patch",
+    "version:minior": "npm version minor",
+    "version:major": "npm version major",
+    "publish:stable": "npm publish --access public",
+    "prepare": "husky install",
+    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
+    "docs": "typedoc"
+  },
+  "files": [
+    "src",
+    "CHANGELOG.md"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/permissions": "1.0.0",
+    "@hzab/webpack-config": "1.1.4",
+    "@types/react": "17.0.62",
+    "@types/react-dom": "17.0.20",
+    "antd": "4.24.16",
+    "axios": "1.13.6",
+    "eslint": "8.30.0",
+    "less": "4.1.3",
+    "mobx": "6.7.0",
+    "mobx-react": "7.6.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-router-dom": "6.14.1",
+    "typedoc": "0.24.8",
+    "typescript": "4.9.4",
+    "webpack": "5.75.0"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@hzab/form-render": "^1.7.17",
+    "@hzab/list-render": "^1.11.0",
+    "@silevis/reactgrid": "^4.1.17"
+  }
+}

package/src/Template/ExpandListTemplate/index.tsx

@@ -57,9 +57,6 @@ export const ExpandListTemplate = (props) => {
       ) : (
         <div style={{ width: 14 }}></div>
       )}
-      <div className={`expandList-template-name`} style={{ marginLeft: record?.level * 8 }}>
-        {Slots?.[columnId] ? colRender(record) : record[columnId]}
-      </div>
     </div>
   );
 };

package/src/Template/NumberCellTemplate.tsx

@@ -15,7 +15,7 @@ import {
   UncertainCompatible,
 } from "@silevis/reactgrid";
 import * as React from "react";
-import { parseLocaleNumber } from "./utils";
+import { parseLocaleNumber } from "../common/utils";
 
 // NOTE: all modules imported below may be imported from '@silevis/reactgrid'
 

package/src/common/WidthWrapHoc.tsx

@@ -108,6 +108,10 @@ export const WidthWrapHoc = (WrapComponent: any) => {
       const [isOpen, setIsOpen] = useState<boolean>(false);
       const datatypeId = cell?.columnId + cell?.rowId;
       const [comValue, setComValue] = useState(cell?.text);
+      useEffect(() => {
+        setComValue(cell?.text);
+      }, [cell?.text]);
+
       useEffect(() => {
         // 处理下拉选项弹层失焦逻辑
         function onClick() {

package/src/index.less

@@ -1,7 +1,10 @@
 .grid-container {
   overflow: auto;
   position: relative;
-  max-height: 80vh;
+  max-height: 100vh;
+  padding-bottom: 16px;
+
+
 
 
 
@@ -10,13 +13,13 @@
   }
 
 
-  .reactgrid-content .rg-pane .rg-cell {
-    padding: 0;
+  // .reactgrid-content .rg-pane .rg-cell {
+  //   padding: 0;
 
-    >div:nth-child(1) {
-      padding: 0 4px;
-    }
-  }
+  //   >div:nth-child(1) {
+  //     padding: 0 4px;
+  //   }
+  // }
 
   .rg-header-cell,
   .rg-cell {

package/src/index.tsx

@@ -29,6 +29,8 @@ interface CellEditTableProps {
   query?: any;
   loading?: boolean;
   isExpand?: boolean;
+  getList?: () => void;
+  onRow?: (v: any, ri: number, ci: number) => void;
 }
 
 export default function CellEditTable(props: CellEditTableProps) {
@@ -39,8 +41,8 @@ export default function CellEditTable(props: CellEditTableProps) {
     onChange,
     reactGridProps = {},
     onEditSubmit,
-    headerRowHeight,
-    rowHeight,
+    headerRowHeight = 44,
+    rowHeight = 44,
     reactGridStyle,
     className,
     Slots,
@@ -49,15 +51,21 @@ export default function CellEditTable(props: CellEditTableProps) {
     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 gridRef = useRef<any>();
+
   /** 递归处理子节点数据 */
   const handleDataSource = (arr, level = 0) => {
     arr?.forEach((el) => {
@@ -166,9 +174,9 @@ export default function CellEditTable(props: CellEditTableProps) {
               if (key == el) {
                 const it = formulaConfig[key];
                 newCell = {
-                  text: it?.setCellData(item),
-                  value: it?.setCellData(item),
-                  style: it?.setCellStyle(it?.setCellData(item)),
+                  text: it?.setCellData && it?.setCellData(item),
+                  value: it?.setCellData && it?.setCellData(item),
+                  style: it?.setCellStyle && it?.setCellStyle((it?.setCellData && it?.setCellData(item)) || item),
                 };
               }
             }
@@ -184,6 +192,7 @@ export default function CellEditTable(props: CellEditTableProps) {
             value: cellItem,
             selectedValue: cellItem || "",
             style: columnsItem?.type == "rowSelection" ? { display: "flex", justifyContent: "center" } : {},
+            ...((onRow && onRow(item, index, ind)) || {}),
             ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
             ...(columnsItem?.cellProps || {}),
             setNewDataSource,
@@ -200,7 +209,8 @@ export default function CellEditTable(props: CellEditTableProps) {
   }, [newDataSource, tableColumns, headerList]);
 
   // 单元格编辑回调
-  const handleCellsChanged = (changes) => {
+  const handleCellsChanged = async (changes) => {
+    const batchQuery: any = [];
     if (!Array.isArray(changes) || changes.length === 0) return;
     /** 批量提交 */
     let isBatchSubmit = false;
@@ -208,32 +218,51 @@ export default function CellEditTable(props: CellEditTableProps) {
       isBatchSubmit = true;
     }
     setRows((prevRows) => {
-      changes.forEach((change) => {
+      changes.forEach(async (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 };
+        batchQuery.push(handleArrayToObj(prevRows[changeRowIdx]));
         if (formulaConfig) {
           for (let key in formulaConfig) {
             const item = formulaConfig[key];
             const resultColumnIdx = tableColumns.findIndex((el) => el.columnId == key);
             const newCell = {
               ...prevRows[changeRowIdx].cells[resultColumnIdx],
-              text: item?.setCellData(prevRows[changeRowIdx]),
-              value: item?.setCellData(prevRows[changeRowIdx]),
-              style: item?.setCellStyle(item?.setCellData(prevRows[changeRowIdx])),
+              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 (change?.newCell?.commit == "submit") {
-          onEditSubmit && onEditSubmit(handleArrayToObj(prevRows[changeRowIdx]));
+        if (change?.newCell?.commit == "submit" && onEditSubmit && !isBatchSubmit) {
+          try {
+            await onEditSubmit(batchQuery);
+          } catch (err) {
+            getList && getList();
+          }
         }
+
         onChange && onChange(prevRows[changeRowIdx]);
       });
+      initRowsRef.current = prevRows;
       return [...prevRows];
     });
+
+    if (isBatchSubmit) {
+      try {
+        onEditSubmit && (await onEditSubmit(batchQuery));
+      } catch (err) {
+        getList && getList();
+      }
+    }
   };
   /** 自定义组件注册 */
   const baseTemplate = useMemo(() => {
@@ -325,7 +354,10 @@ export default function CellEditTable(props: CellEditTableProps) {
     <Spin spinning={loading}>
       <div className={`grid-container ${className}`} style={reactGridStyle}>
         <ReactGrid
-          rows={rows}
+          ref={gridRef}
+          rows={loading ? initRowsRef.current : rows}
+          /** 兼容初始化时吸顶生效 */
+          key={loading ? 1 : 2}
           columns={tableColumns}
           onCellsChanged={handleCellsChanged}
           enableFillHandle={true}

package/src/Template/utils.ts

@@ -1,288 +0,0 @@
-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);
-}
-
-
-export 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 handleType = (item) => {
-    if (["rowSelection", "ExpandListTemplate"]?.includes(item?.type)) {
-      return item?.type
-    }
-
-    if (isReactElement(typeof item?.title == "function" ? item?.title() : null)) {
-      return `${item?.dataIndex}`
-    }
-    return "header"
-  }
-
-
-  // 递归填充行
-  const fillRow = (nodes, rowIndex = 0) => {
-    nodes.forEach((node) => {
-      if (node._isLeaf) {
-        const cell = {
-          ...node,
-          type: handleType(node),
-          text: getTitle(node),
-          dataIndex: node.dataIndex,
-          width: node.width,
-          rowspan: node.rowspan,
-          style: node?.style ? node?.style : {
-            background: "rgba(128, 128, 128, 0.1)",
-            display: "flex",
-            justifyContent: "center"
-          },
-        };
-        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: handleType(node),
-          text: getTitle(node),
-          colspan: node.colspan,
-          style: node?.style ? node?.style : {
-            background: "rgba(128, 128, 128, 0.1)",
-            display: "flex",
-            justifyContent: "center"
-          },
-        });
-        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: handleType(leaf),
-          text: getTitle(leaf),
-          dataIndex: leaf.dataIndex,
-          width: leaf.width,
-          rowspan: rowIndex === totalDepth - 1 ? 1 : undefined,
-          style: leaf?.style ? leaf?.style : {
-            background: "rgba(128, 128, 128, 0.1)",
-            display: "flex",
-            justifyContent: "center"
-          },
-        });
-        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: handleType(leaf),
-        text: getTitle(leaf),
-        dataIndex: leaf.dataIndex,
-        width: leaf.width,
-        rowspan: 1,
-        style: leaf?.style ? leaf?.style : {
-          background: "rgba(128, 128, 128, 0.1)",
-          display: "flex",
-          justifyContent: "center"
-        },
-      });
-    }
-  });
-
-  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/common/test.ts

@@ -1,3 +0,0 @@
-export const test = function () {
-  console.log("test");
-};