@hzab/list-render 1.10.21-alpha.0 → 1.10.21-alpha.1

package/CHANGELOG.md

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

package/README.md

@@ -282,6 +282,26 @@ const Slots = {
 | onEdit       | row          | 手动触发编辑按钮相关操作                     |
 | onDel        | row          | 手动触发删除按钮相关操作                     |
 
+#### cellEditTableProps
+
+| 属性名称       | 属性类型 | 必须 | 默认值 | 描述               |
+| -------------- | -------- | ---- | ------ | ------------------ |
+| reactGridProps | Object   | 否   |        | reactGrid 相关参数 |
+| onChange       | Function | 否   |        | 单元格回调         |
+| formulaConfig  | Object   | 否   |        | 运算相关配置       |
+| headerHeight   | number   | 否   |        | 表头高度           |
+
+#### reactGridProps
+
+| 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
+| enableFillHandle | boolean | false | 开启后，选中单元格右下角会出现小方块，可拖拽快速复制 / 序列填充数据（类似 Excel 拖拽填充）|
+| enableRangeSelection | boolean | false | 开启框选单元格区域（批量选中、批量编辑 / 填充必备）|
+| onFocusLocationChanging | (location: CellLocation): boolean | 否 | 焦点 / 进入编辑态前回调，return false 阻止进入编辑）|
+| customCellTemplates | Function | 否 | 注册自定义单元格模板（按钮、下拉、日期等单元格）|
+| onSelectionChanged | Function | 否 | 选择区回调 |
+| headerRowHeight | number | 否 | 表头高度 |
+| rowHeight | number | 否 | 数据行高度 |
+
 - onSearch opt
   - isSaveQuery 是否保存传入的 query 值
   - isMergeQuery 是否合并上一次保存的 query 值
@@ -568,6 +588,7 @@ async function test() {
 ## 命令
 
 - Mac 执行该命令，设置 pre-commit 为可执行文件
+
   - npm run mac-chmod
   - chmod +x .husky && chmod +x .husky/pre-commit
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.21-alpha.0",
+  "version": "1.10.21-alpha.1",
   "description": "",
   "main": "src",
   "scripts": {
@@ -30,8 +30,8 @@
     "@hzab/formily-result-utils": "^1.2.0",
     "@hzab/permissions": "^1.0.0",
     "@hzab/schema-descriptions": "^1.3.0",
-    "@hzab/webpack-config": "^0.7.2",
     "@hzab/utils": "^1.0.7",
+    "@hzab/webpack-config": "^0.7.2",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.24.12",
@@ -66,6 +66,7 @@
     "lib": "lib"
   },
   "dependencies": {
+    "@silevis/reactgrid": "^4.1.17",
     "array-move": "^4.0.0",
     "react-sortable-hoc": "^2.0.0"
   }

package/src/components/CellEditTable/index.less

@@ -0,0 +1,11 @@
+.grid-container {
+  width: 100vw;
+  overflow: auto;
+  position: relative;
+
+  .reactgrid {
+    width: 100% !important;
+
+
+  }
+}

package/src/components/CellEditTable/index.tsx

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from "react";
+import { ReactGrid, Column, Row, CellChange, Cell, CellTemplate } from "@silevis/reactgrid";
+import "@silevis/reactgrid/styles.css";
+import _ from "lodash";
+import "./index.less";
+
+function isReactElement(value) {
+  return value !== null && typeof value === "object";
+}
+
+// 自定义单元格：状态标签（可编辑、带颜色）
+export interface StatusCell extends Cell {
+  type: "status"; // 唯一标识，必须
+  text: string; // 状态文本（如：待办/进行中/完成）
+  color?: string; // 自定义颜色
+  validator?: (text: string) => boolean; // 可选：校验
+}
+
+// 合并所有单元格类型（供 rows 使用）
+export type CustomCellTypes = StatusCell;
+
+export default function CellEditTable(props: any) {
+  const {
+    columns,
+    dataSource,
+    formulaConfig,
+    onChange,
+    reactGridProps = {},
+    onEditSubmit,
+    headerRowHeight,
+    rowHeight,
+  } = props;
+  const [headerList, setHeaderList] = useState([]);
+  const [rows, setRows] = useState<any>([]);
+  const [tableColumns, setTableColumns] = useState([]);
+
+  /**将数组转为对象 */
+  const handleArrayToObj = (item) => {
+    let obj = {
+      id: item?.rowId,
+    };
+    item?.cells?.forEach((el) => {
+      if (el?.columnsId) {
+        obj[el?.columnsId] = el?.value || el?.selectedValue || el?.text || "";
+      }
+    });
+    return obj;
+  };
+  /** 表头 */
+  useEffect(() => {
+    if (Array.isArray(columns) && columns?.length > 0) {
+      const cells = columns?.map((item) => {
+        return {
+          type: "header",
+          text:
+            typeof item?.title == "function"
+              ? isReactElement(item?.title())
+                ? item?.title()?.props.children
+                : item?.title() || ""
+              : item?.title || "",
+        };
+      });
+      setHeaderList([
+        {
+          rowId: "header",
+          height: headerRowHeight,
+          cells: cells,
+        },
+      ]);
+      setTableColumns(
+        columns?.map((item, index) => ({
+          ...item,
+          columnId: item?.dataIndex || "",
+        })),
+      );
+    }
+  }, [columns]);
+  /** 数据行 */
+  useEffect(() => {
+    const columnsIds = tableColumns?.map((el) => el?.columnId);
+    const newDataSource = dataSource?.map((item, index) => {
+      return {
+        rowId: item?.id,
+        height: rowHeight,
+        cells: columnsIds?.map((el, ind) => {
+          return {
+            type: tableColumns[ind]?.cellType ?? "text",
+            text: typeof item[el] == "string" ? item[el] : "",
+            columnsId: el,
+            nonEditable: !tableColumns[ind]?.editable,
+            ...item,
+          };
+        }),
+      };
+    });
+    setRows([...headerList, ...newDataSource]);
+  }, [dataSource, tableColumns]);
+
+  // 单元格编辑回调
+  const handleCellsChanged = (changes) => {
+    setRows((prevRows) => {
+      changes.forEach((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;
+        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])),
+            };
+            prevRows[changeRowIdx].cells[resultColumnIdx] = newCell;
+          }
+        }
+        onEditSubmit && onEditSubmit(handleArrayToObj(prevRows[changeRowIdx]));
+        onChange && onChange(prevRows[changeRowIdx]);
+      });
+      return [...prevRows];
+    });
+  };
+
+  return (
+    <div className="grid-container">
+      <ReactGrid
+        rows={rows}
+        columns={tableColumns}
+        onCellsChanged={handleCellsChanged}
+        enableFillHandle={true}
+        enableRangeSelection={true}
+        stickyLeftColumns={1}
+        // customCellTemplates={{ status: StatusCellTemplate }}
+        // onFocusLocationChanging={(location) => {
+        //   return false;
+        // }}
+        {...reactGridProps}
+        // onSelectionChanged={(newSelection) => {
+        //   console.log("选区发生变化", newSelection[0]);
+        // }}
+      />
+    </div>
+  );
+}

package/src/components/Formily/FormilyEditTable.tsx

@@ -30,9 +30,8 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   onSave: (field: { type: string; name: string }) => void;
   onCancel: () => void;
   topProps: {
-    tableConf: { hasEdit: boolean | Function };
+    config: { hasEdit: boolean | Function };
     editMode: "modal" | "line" | "line-cell" | "cell";
-    canEditCallback: (record: Partial<Item> & { key: React.Key }, field: { type: string; name: string }, dataIndex: string) => void;
   };
   children: React.ReactNode;
 }
@@ -57,8 +56,8 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   const field = getField && getField();
   const fPattern = field?.["x-pattern"];
   const fDisplay = field?.["x-display"];
-  const { editMode = "modal", canEditCallback } = topProps || {};
-  const { hasEdit } = topProps?.tableConf || {};
+  const { editMode = "modal" } = topProps || {};
+  const { hasEdit } = topProps?.config || {};
   const fieldRef = useRef();
 
   // 弹窗编辑模式
@@ -67,11 +66,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   }
   // 无编辑权限或禁止编辑
   const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
-  let _editable =
-    _hasEdit &&
-    editable &&
-    !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none") &&
-    (canEditCallback ? canEditCallback(record, field, dataIndex) : true);
+  let _editable = _hasEdit && editable && !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none");
   if (!_editable) {
     return <td {...restProps}>{children}</td>;
   }

package/src/list-render.jsx

@@ -540,6 +540,7 @@ const ListRender = forwardRef(function (props, parentRef) {
           i18n={i18n}
           onEditSubmit={onEditSubmit}
           topProps={props}
+          cellEditTableProps={props?.cellEditTableProps}
         />
       ) : null}
 

package/src/table-render/index.jsx

@@ -17,13 +17,13 @@ import { getVal, getFieldList } from "../common/utils";
 import { handleReactions } from "../common/handleReactions";
 
 import { useEditTable, EditableCell } from "../components/Formily/FormilyEditTable";
-
+import CellEditTable from "../components/CellEditTable"
 import "./index.less";
 
 const scenario = "table-render";
 
 const TableRender = forwardRef(function (props, tableRef) {
-  const { topProps, config = {}, query = {}, i18n, setList } = props;
+  const { topProps, config = {}, query = {}, i18n, setList, cellEditTableProps } = props;
   const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
   const {
     dragColConf = {},
@@ -34,6 +34,7 @@ const TableRender = forwardRef(function (props, tableRef) {
     tableEmptyValue,
     isShowTableFilter = false,
     isTableSortXIdex = false,
+    isCellEditTable = false
   } = config || {};
   const { editMode = "modal" } = topProps || {};
   const isEditTable = editMode !== "modal";
@@ -129,6 +130,7 @@ const TableRender = forwardRef(function (props, tableRef) {
       scope: props.schemaScope,
       formilyRef,
     });
+
     _fieldList.forEach((field, colIndex) => {
       const fieldSchemas = formilyRef.current?.fields;
       if (field.inTable !== false) {
@@ -231,6 +233,7 @@ const TableRender = forwardRef(function (props, tableRef) {
           title: () => _title,
           key: name,
           dataIndex: name,
+          cellType: field?.cellType,
           render: getColRender(colRender),
         });
       }
@@ -421,15 +424,23 @@ const TableRender = forwardRef(function (props, tableRef) {
           </Popover>
         </div>
       ) : null}
-      {isEditTable ? (
-        <FormProvider form={formRender}>
-          <Form layout="vertical">
-            <FormConsumer>{() => <Table {...tableProps} />}</FormConsumer>
-          </Form>
-        </FormProvider>
-      ) : (
-        <Table {...tableProps} />
-      )}
+      {
+        isCellEditTable ? <CellEditTable
+          {...tableProps}
+          {...cellEditTableProps}
+          onEditSubmit={props?.onEditSubmit}
+        /> : <>
+          {isEditTable ? (
+            <FormProvider form={formRender}>
+              <Form layout="vertical">
+                <FormConsumer>{() => <Table {...tableProps} />}</FormConsumer>
+              </Form>
+            </FormProvider>
+          ) : (
+            <Table {...tableProps} />
+          )}
+        </>
+      }
       <FormilyField
         schema={props.schema}
         formilyRef={formilyRef}