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

package/CHANGELOG.md

@@ -1,4 +1,4 @@
-# @hzab/list-render@1.10.21
+# @hzab/list-render@1.11.0
 
 feat: 增加行内编辑表格时，canEditCallback的回调，从外部控制cell是否能编辑，修复原有的hasEdit逻辑
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.21-alpha.4",
+  "version": "1.11.0",
   "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,4 +1,4 @@
-import { MinusSquareOutlined, PlusCircleOutlined } from "@ant-design/icons";
+import { MinusCircleOutlined, MinusSquareOutlined, PlusCircleOutlined } from "@ant-design/icons";
 import { useEffect, useState, memo } from "react";
 import "./index.less";
 export const ExpandListTemplate = (props) => {
@@ -63,7 +63,7 @@ export const ExpandListTemplate = (props) => {
               }}
             />
           ) : (
-            <MinusSquareOutlined
+            <MinusCircleOutlined
               className="expandList-template-icon"
               onClick={() => {
                 props.record["expand"] = !expand;
@@ -81,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>
         );
@@ -203,7 +206,7 @@ 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) => {
           if (cell?.nonEditable) {
             return;
@@ -221,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) => {
@@ -246,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>([]);
@@ -143,6 +144,7 @@ export default function CellEditTable(props: any) {
             ...(columnsItem?.cellProps || {}),
             setNewDataSource,
             setExpandKeys,
+            rowKey,
             expandKeys,
             Slots,
             ...newCell,
@@ -158,6 +160,9 @@ export default function CellEditTable(props: any) {
 
   // 单元格编辑回调
   const handleCellsChanged = (changes) => {
+    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);
@@ -230,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 &&
@@ -277,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>
   );
-}
+});