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

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/edit-table@0.0.2
+
+feat: 组件优化，批量提交
+
 # @hzab/edit-table@0.0.1
 
 组件初始化

package/README.md

@@ -18,11 +18,24 @@ import Demo from "@hzab/edit-table";
 
 ## API
 
-### InfoPanel Attributes
+#### cellEditTableProps
 
-| 参数   | 类型   | 必填 | 默认值 | 说明              |
-| ------ | ------ | ---- | ------ | ----------------- |
-| schema | Object | 是   | -      | 数据信息的 schema |
+| 属性名称        | 属性类型 | 必须 | 默认值 | 描述               |
+| --------------- | -------- | ---- | ------ | ------------------ |
+| reactGridProps  | Object   | 否   |        | reactGrid 相关参数 |
+| onChange        | Function | 否   |        | 单元格回调         |
+| formulaConfig   | Object   | 否   |        | 运算相关配置       |
+| headerRowHeight | number   | 否   |        | 表头高度           |
+| rowHeight       | number   | 否   |        | 数据行高度         |
+
+#### reactGridProps
+
+| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
+| enableFillHandle | boolean | false | 开启后，选中单元格右下角会出现小方块，可拖拽快速复制 / 序列填充数据（类似 Excel 拖拽填充）|
+| enableRangeSelection | boolean | false | 开启框选单元格区域（批量选中、批量编辑 / 填充必备）|
+| onFocusLocationChanging | (location: CellLocation): boolean | 否 | 焦点 / 进入编辑态前回调，return false 阻止进入编辑）|
+| customCellTemplates | Function | 否 | 注册自定义单元格模板（按钮、下拉、日期等单元格）|
+| onSelectionChanged | Function | 否 | 选择区回调 |
 
 # 组件开发流程
 
@@ -39,6 +52,7 @@ import Demo from "@hzab/edit-table";
 ## 命令
 
 - Mac 执行该命令，设置 pre-commit 为可执行文件
+
   - npm run mac-chmod
   - chmod +x .husky && chmod +x .husky/pre-commit
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/edit-table",
-  "version": "0.0.2-alpha.0",
+  "version": "0.1.0",
   "description": "",
   "main": "src",
   "scripts": {
@@ -41,7 +41,10 @@
     "react-router-dom": "6.14.1",
     "typedoc": "0.24.8",
     "typescript": "4.9.4",
-    "webpack": "5.75.0"
+    "webpack": "5.75.0",
+    "@hzab/form-render": "^1.7.17",
+    "@hzab/list-render": "^1.11.0",
+    "@silevis/reactgrid": "^4.1.17"
   },
   "directories": {
     "src": "src"
@@ -51,9 +54,5 @@
       "prettier --write"
     ]
   },
-  "dependencies": {
-    "@hzab/form-render": "^1.7.17",
-    "@hzab/list-render": "^1.11.0",
-    "@silevis/reactgrid": "^4.1.17"
-  }
+  "dependencies": {}
 }

package/src/Template/ExpandListTemplate/index.tsx

@@ -1,5 +1,5 @@
-import { MinusCircleOutlined, MinusSquareOutlined, PlusCircleOutlined } from "@ant-design/icons";
 import { useEffect, useState } from "react";
+import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";
 import "./index.less";
 
 export const ExpandListTemplate = (props) => {
@@ -29,10 +29,6 @@ export const ExpandListTemplate = (props) => {
     }
   }, [cell?.record]);
 
-  const colRender = function (record) {
-    const Slot = Slots[columnId];
-    return <Slot record={record} />;
-  };
   /** 展开关闭子项 */
   const onClickExpand = () => {
     setExpandKeys((preExpandKeys) => {

package/src/common/WidthWrapHoc.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import {
   Cell,
@@ -12,7 +12,6 @@ import {
   Uncertain,
   UncertainCompatible,
 } from "@silevis/reactgrid";
-import { getVal } from "@hzab/list-render/src/common/utils";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { Popover } from "antd";
 
@@ -108,8 +107,10 @@ export const WidthWrapHoc = (WrapComponent: any) => {
       const [isOpen, setIsOpen] = useState<boolean>(false);
       const datatypeId = cell?.columnId + cell?.rowId;
       const [comValue, setComValue] = useState(cell?.text);
+      const comValueInit = useRef<any>(cell?.text);
       useEffect(() => {
         setComValue(cell?.text);
+        comValueInit.current = cell?.text;
       }, [cell?.text]);
 
       useEffect(() => {
@@ -124,21 +125,12 @@ export const WidthWrapHoc = (WrapComponent: any) => {
           document.removeEventListener("click", onClick);
         };
       }, []);
-      const echoValue = useMemo(() => {
-        if (!cell?.getField) {
-          return;
-        }
-        return getVal(
-          { ...cell?.getField(), enum: cell?.getField()?.enum || cell?.values },
-          { [cell?.getField().name]: cell.text },
-        );
-      }, [cell]);
 
       const isValidator = useMemo(() => {
         let flag = false;
         let isVerify = false;
         for (let it of cell?.validatorList || []) {
-          if (it?.pattern?.test(cell.text)) {
+          if (it?.pattern?.test(comValue)) {
             flag = true;
           }
           break;
@@ -146,7 +138,7 @@ export const WidthWrapHoc = (WrapComponent: any) => {
         isVerify = !flag && cell?.validatorList?.length > 0;
 
         return isVerify;
-      }, [cell?.validatorList, cell.text]);
+      }, [cell?.validatorList, comValue]);
 
       return (
         <div
@@ -155,7 +147,6 @@ export const WidthWrapHoc = (WrapComponent: any) => {
             if (cell?.nonEditable) {
               return;
             }
-            (window as any).preCell = cell;
             setIsOpen(true);
           }}
         >
@@ -168,6 +159,8 @@ export const WidthWrapHoc = (WrapComponent: any) => {
                 cell["commit"] = "change";
                 const targetValue = e?.target?.value ?? e;
                 setComValue(targetValue);
+                comValueInit.current = targetValue;
+
                 onCellChanged(
                   this.getCompatibleCell({
                     ...cell,
@@ -182,7 +175,7 @@ export const WidthWrapHoc = (WrapComponent: any) => {
                 if (isValidator) {
                   cell["commit"] = "verify";
                 }
-                const targetValue = cell?.text;
+                const targetValue = comValueInit.current;
                 onCellChanged(
                   this.getCompatibleCell({
                     ...cell,
@@ -206,8 +199,8 @@ export const WidthWrapHoc = (WrapComponent: any) => {
             cell={cell}
           ></WrapComponent>
           {isValidator && (
-            <Popover content="该字段不合法">
-              <InfoCircleOutlined style={{ cursor: "pointer" }} />
+            <Popover content={cell?.validatorMessage ?? "该字段不合法"}>
+              <InfoCircleOutlined className="validator-icon" />
             </Popover>
           )}
         </div>

package/src/index.less

@@ -13,14 +13,6 @@
   }
 
 
-  // .reactgrid-content .rg-pane .rg-cell {
-  //   padding: 0;
-
-  //   >div:nth-child(1) {
-  //     padding: 0 4px;
-  //   }
-  // }
-
   .rg-header-cell,
   .rg-cell {
     display: flex;
@@ -35,4 +27,23 @@
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.validator-icon {
+  position: relative;
+  background: #fff;
+  cursor: pointer;
+}
+
+.rg-rowSelection-cell {
+  label {
+    justify-content: center;
+  }
+}
+
+.grid-container-empty {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

package/src/index.tsx

@@ -1,10 +1,10 @@
 import { useEffect, 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/src/index";
 import { WidthWrapHoc } from "./common/WidthWrapHoc";
 import { NumberTemplate } from "./Template/NumberCellTemplate";
-import { Checkbox, Spin } from "antd";
 import { ExpandListTemplate } from "./Template/ExpandListTemplate";
 import { convertColumnsToRows, flattenColumns, isReactElement } from "./common/utils";
 import { childAntdComponent } from "./common/childAntdComponent";
@@ -59,6 +59,7 @@ export default function CellEditTable(props: CellEditTableProps) {
   const [rows, setRows] = useState<any>([]);
   /** 初始行数据 */
   const initRowsRef = useRef<any>([]);
+  const firstRender = useRef(true);
   const [tableColumns, setTableColumns] = useState<any>([]);
   const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
   const [newDataSource, setNewDataSource] = useState<any>([]);
@@ -205,6 +206,10 @@ export default function CellEditTable(props: CellEditTableProps) {
         }),
       };
     });
+    if (firstRender.current) {
+      initRowsRef.current = [...headerList, ...tempDataSource];
+      firstRender.current = false;
+    }
     setRows([...headerList, ...tempDataSource]);
   }, [newDataSource, tableColumns, headerList]);
 
@@ -217,10 +222,11 @@ export default function CellEditTable(props: CellEditTableProps) {
     if (changes?.length > 1) {
       isBatchSubmit = true;
     }
+
     setRows((prevRows) => {
       changes.forEach(async (change) => {
-        const hasDiff = JSON.stringify((window as any).preCell?.text) != JSON.stringify(change.newCell?.text);
-        if (!hasDiff) return;
+        // const hasDiff = JSON.stringify( change?.newCell?.text) != JSON.stringify(change.previousCell?.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 };
@@ -242,6 +248,7 @@ export default function CellEditTable(props: CellEditTableProps) {
             prevRows[changeRowIdx].cells[resultColumnIdx] = newCell;
           }
         }
+
         if (change?.newCell?.commit == "submit" && onEditSubmit && !isBatchSubmit) {
           try {
             await onEditSubmit(batchQuery);
@@ -356,8 +363,6 @@ export default function CellEditTable(props: CellEditTableProps) {
         <ReactGrid
           ref={gridRef}
           rows={loading ? initRowsRef.current : rows}
-          /** 兼容初始化时吸顶生效 */
-          key={loading ? 1 : 2}
           columns={tableColumns}
           onCellsChanged={handleCellsChanged}
           enableFillHandle={true}
@@ -385,11 +390,12 @@ export default function CellEditTable(props: CellEditTableProps) {
             Input: TextTemplate,
             Number: NumberTemplate,
           }}
-
-          // onSelectionChanged={(newSelection) => {
-          //   console.log("选区发生变化", newSelection[0]);
-          // }}
         />
+        {dataSource?.length <= 0 && (
+          <div className="grid-container-empty">
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+          </div>
+        )}
       </div>
     </Spin>
   );