@hzab/list-render 1.10.21-alpha.3 → 1.10.21-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.21-alpha.3",
+  "version": "1.10.21-alpha.5",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/CellEditTable/Template/ExpandListTemplate/index.less

@@ -13,6 +13,6 @@
   }
 
   .expandList-template-indent {
-    margin-left: 26px;
+    margin-left: 32px;
   }
 }

package/src/components/CellEditTable/Template/ExpandListTemplate/index.tsx

@@ -1,5 +1,5 @@
-import { MinusSquareOutlined, PlusCircleOutlined } from "@ant-design/icons";
-import { useEffect, useState } from "react";
+import { MinusCircleOutlined, MinusSquareOutlined, PlusCircleOutlined } from "@ant-design/icons";
+import { useEffect, useState, memo } from "react";
 import "./index.less";
 export const ExpandListTemplate = (props) => {
   const [expand, setExpand] = useState<boolean>(false);
@@ -7,14 +7,18 @@ export const ExpandListTemplate = (props) => {
   const { Slots, setExpandKeys, expandKeys }: any = item;
   const onExpand = (isExpand) => {
     item?.setNewDataSource((pre) => {
+      const tempPre = [...pre];
+      const childrenIds = props?.record?.children?.map((el) => el?.groupId);
       if (isExpand) {
         const findIndex = pre?.findIndex((el) => el?.groupId == props?.record?.groupId);
-        pre.splice(findIndex + 1, 0, ...(props?.record?.children || []));
-        return [...pre];
+        const filterList = pre?.filter((el) => childrenIds?.includes(el?.groupId)) || [];
+        if (filterList?.length == 0) {
+          tempPre.splice(findIndex + 1, 0, ...(props?.record?.children || []));
+        }
+        return [...tempPre];
       }
-      const childrenIds = props?.record?.children?.map((el) => el?.groupId);
 
-      return pre?.filter((el) => !childrenIds?.includes(el?.groupId));
+      return tempPre?.filter((el) => !childrenIds?.includes(el?.groupId));
     });
   };
   useEffect(() => {
@@ -29,7 +33,6 @@ export const ExpandListTemplate = (props) => {
     // setExpand(props?.record?.expand);
   }, [props?.record]);
 
-  // console.log(props,"propspropsprops2",Slots[item?.columnId]);
   const colRender = function (text, record) {
     const Slot = Slots[item?.columnId];
     const slotProps = {
@@ -51,7 +54,7 @@ export const ExpandListTemplate = (props) => {
                 props.record["expand"] = !expand;
                 setExpandKeys((preExpandKeys) => {
                   if (preExpandKeys?.includes(props?.record?.groupId)) {
-                    return preExpandKeys?.filter((el) => el?.groupId != props?.record?.groupId);
+                    return preExpandKeys?.filter((el) => el != props?.record?.groupId);
                   }
                   return [...preExpandKeys, props?.record?.groupId];
                 });
@@ -60,10 +63,16 @@ export const ExpandListTemplate = (props) => {
               }}
             />
           ) : (
-            <MinusSquareOutlined
+            <MinusCircleOutlined
               className="expandList-template-icon"
               onClick={() => {
                 props.record["expand"] = !expand;
+                setExpandKeys((preExpandKeys) => {
+                  if (preExpandKeys?.includes(props?.record?.groupId)) {
+                    return preExpandKeys?.filter((el) => el != props?.record?.groupId);
+                  }
+                  return [...preExpandKeys, props?.record?.groupId];
+                });
                 setExpand(!expand);
                 onExpand(!expand);
               }}
@@ -72,7 +81,10 @@ export const ExpandListTemplate = (props) => {
         </>
       )}
 
-      <div className={`expandList-template-name ${props?.record?.children ? "" : "expandList-template-indent"}`}>
+      <div
+        className={`expandList-template-name ${record?.spiltTag == 0 ? "expandList-template-indent" : ""}`}
+        style={record?.spiltTag == 1 && !record?.children ? { marginLeft: "22px" } : {}}
+      >
         {Slots?.[item?.columnId] ? colRender("", record) : record[item?.columnId]}
       </div>
     </div>

package/src/components/CellEditTable/Template/widthWrap.tsx

@@ -152,7 +152,10 @@ export const WidthWrap = (opt: any, edit = false) => {
     ): React.ReactNode {
       if (edit) {
         return (
-          <div onPointerDown={(e) => e.stopPropagation()}>
+          <div
+            onPointerDown={(e) => e.stopPropagation()}
+            style={{ display: "flex", justifyContent: "center", alignItems: "center" }}
+          >
             <WrapComponent record={cell?.record} rowId={cell?.rowId} item={cell}></WrapComponent>
           </div>
         );
@@ -192,8 +195,8 @@ export const WidthWrap = (opt: any, edit = false) => {
     }, [cell]);
 
     const echoValue = useMemo(() => {
-      if(!cell?.getField){
-        return
+      if (!cell?.getField) {
+        return;
       }
       return getVal(
         { ...(cell?.getField && cell?.getField()), enum: cell?.getField()?.enum || cell?.values },
@@ -203,9 +206,8 @@ export const WidthWrap = (opt: any, edit = false) => {
 
     return (
       <div
-        style={{ width: "100%", height: "100%", display: "flex", alignItems: "center" }}
+        style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}
         onDoubleClick={(e) => {
-          console.log(cell,"c222ellcellcellcellcell");
           if (cell?.nonEditable) {
             return;
           }
@@ -222,7 +224,7 @@ export const WidthWrap = (opt: any, edit = false) => {
                 }
               }}
               open={isOpen}
-              style={{ width: "100%", display: "flex", alignItems: "center" }}
+              style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}
               value={cell[_value]}
               options={cell.values}
               onChange={(e) => {
@@ -247,7 +249,9 @@ export const WidthWrap = (opt: any, edit = false) => {
                 item={cell}
               />
             ) : (
-              <div style={{ height: "100%", display: "flex", alignItems: "center" }}>{echoValue}</div>
+              <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
+                {echoValue}
+              </div>
             )}
           </div>
         )}

package/src/components/CellEditTable/index.less

@@ -1,6 +1,7 @@
 .grid-container {
   overflow: auto;
   position: relative;
+  max-height: 80vh;
 
 
 

package/src/components/CellEditTable/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { memo, useEffect, useMemo, useState } from "react";
 import { ReactGrid, Column, Row, CellChange, Cell, CellTemplate } from "@silevis/reactgrid";
 import "@silevis/reactgrid/styles.css";
 import _ from "lodash";
@@ -7,11 +7,11 @@ import { TextTemplate } from "./Template/TextCellTemplate";
 import { antdComponents, customComponents } from "@hzab/form-render/src/index";
 import { WidthWrap } from "./Template/widthWrap";
 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";
 
-export default function CellEditTable(props: any) {
+export default memo(function CellEditTable(props: any) {
   const {
     columns,
     dataSource,
@@ -27,6 +27,7 @@ export default function CellEditTable(props: any) {
     rowSelection,
     rowKey,
     query,
+    loading,
   } = props;
 
   const [headerList, setHeaderList] = useState<any>([]);
@@ -107,7 +108,7 @@ export default function CellEditTable(props: any) {
           const columnsItem = tableColumns[ind];
           const cellItem = item[el];
           let type: any = columnsItem?.type ?? "text";
-          if (!rowSelection && ind == 0 && item?.children) {
+          if (!rowSelection && ind == 0) {
             type = "ExpandListTemplate";
           }
           if (rowSelection && ind == 1) {
@@ -130,7 +131,7 @@ export default function CellEditTable(props: any) {
           return {
             ...columnsItem,
             record: item,
-            rowId: item?.id || columnsItem?.type,
+            rowId: item[rowKey] || columnsItem?.type,
             type: type,
             nonEditable: columnsItem?.nonEditable,
             text: String(cellItem || ""),
@@ -143,6 +144,7 @@ export default function CellEditTable(props: any) {
             ...(columnsItem?.cellProps || {}),
             setNewDataSource,
             setExpandKeys,
+            rowKey,
             expandKeys,
             Slots,
             ...newCell,
@@ -153,14 +155,14 @@ export default function CellEditTable(props: any) {
         }),
       };
     });
-    setRows([...headerList, ...tempDataSource]);
+    setRows(_.uniqBy([...headerList, ...tempDataSource], "rowId"));
   }, [newDataSource, tableColumns, rowSelection]);
-  console.log(rows, "rowsrows");
 
   // 单元格编辑回调
   const handleCellsChanged = (changes) => {
-    console.log(changes, "changeschangeschanges");
-
+    if (!Array.isArray(changes) || changes.length === 0) return;
+    const hasDiff = changes.some((c) => JSON.stringify(c.previousCell) !== JSON.stringify(c.newCell));
+    if (!hasDiff) return;
     setRows((prevRows) => {
       changes.forEach((change) => {
         const changeRowIdx = prevRows.findIndex((el) => el.rowId == change.rowId);
@@ -233,7 +235,7 @@ export default function CellEditTable(props: any) {
         {...props}
         checked={
           rowSelection?.selectedRowKeys?.includes((props?.record && props?.record[rowKey]) || "") ||
-          rowSelection?.selectedRowKeys?.length == dataSource?.length
+          (rowSelection?.selectedRowKeys?.length == dataSource?.length && dataSource?.length > 0)
         }
         indeterminate={
           !props?.rowId &&
@@ -280,61 +282,63 @@ export default function CellEditTable(props: any) {
   }, [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;
+    <Spin spinning={loading}>
+      <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;
-          }
+            if (["_$actions", "rowSelection"]?.includes(cell?.columnId)) {
+              return false;
+            }
 
-          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,
-          ),
-        }}
+            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,
+            ),
+          }}
 
-        // onSelectionChanged={(newSelection) => {
-        //   console.log("选区发生变化", newSelection[0]);
-        // }}
-      />
-    </div>
+          // onSelectionChanged={(newSelection) => {
+          //   console.log("选区发生变化", newSelection[0]);
+          // }}
+        />
+      </div>
+    </Spin>
   );
-}
+});

package/src/table-render/index.jsx

@@ -361,7 +361,7 @@ const TableRender = forwardRef(function (props, tableRef) {
 
   const tableProps = {
     className: "table-render",
-    rowKey: props.idKey || "id",
+    rowKey: props?.idKey || "id",
     rowSelection: config?.rowSelection,
     columns: columns,
     dataSource: props.list,