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

package/src/components/CellEditTable/index.tsx

@@ -1,23 +1,15 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, 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;
+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 { ExpandListTemplate } from "./Template/ExpandListTemplate";
+import { convertColumnsToRows, flattenColumns } from "./Template/utils";
 
 export default function CellEditTable(props: any) {
   const {
@@ -29,84 +21,155 @@ export default function CellEditTable(props: any) {
     onEditSubmit,
     headerRowHeight,
     rowHeight,
+    reactGridStyle,
+    className,
+    Slots,
+    rowSelection,
+    rowKey,
+    query,
   } = props;
-  const [headerList, setHeaderList] = useState([]);
-  const [rows, setRows] = useState<any>([]);
-  const [tableColumns, setTableColumns] = useState([]);
 
+  const [headerList, setHeaderList] = useState<any>([]);
+  const [rows, setRows] = useState<any>([]);
+  const [tableColumns, setTableColumns] = useState<any>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
+  const [newDataSource, setNewDataSource] = useState<any>([]);
+  const [expandKeys, setExpandKeys] = useState<any>([]);
+  useEffect(() => {
+    setNewDataSource(dataSource);
+  }, [dataSource]);
   /**将数组转为对象 */
   const handleArrayToObj = (item) => {
-    let obj = {
+    const record = item?.cells?.[0]?.record;
+    const fieldList = ["_$actions", "rowSelection"];
+    let obj: any = {
       id: item?.rowId,
     };
     item?.cells?.forEach((el) => {
-      if (el?.columnsId) {
-        obj[el?.columnsId] = el?.value || el?.selectedValue || el?.text || "";
+      if (el?.columnId && !fieldList?.includes(el?.columnId)) {
+        obj[el?.columnId] = el?.text || el?.value || el?.selectedValue || "";
       }
     });
-    return obj;
+
+    return {
+      ...record,
+      ...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,
-        },
-      ]);
+      if (rowSelection) {
+        columns.unshift({
+          type: "rowSelection",
+          width: rowSelection?.width || 30,
+          key: "rowSelection",
+          style: rowSelection?.style || {
+            background: "rgba(128, 128, 128, 0.1)",
+            display: "flex",
+            justifyContent: "center",
+          },
+        });
+      }
+      // const cells = columns?.map((item, index) => {
+      //   return {
+      //     type: item?.type == "rowSelection" ? "rowSelection" : "header",
+      //     text:
+      //       typeof item?.title == "function"
+      //         ? isReactElement(item?.title())
+      //           ? item?.title()?.props.children
+      //           : String(item?.title()) || ""
+      //         : String(item?.title) || "",
+      //     style: item?.type == "rowSelection" ? item?.style : {},
+      //     onCell: item?.onCell,
+      //   };
+      // });
+      setHeaderList(convertColumnsToRows(columns, headerRowHeight));
+      const newColumns = flattenColumns(columns);
       setTableColumns(
-        columns?.map((item, index) => ({
+        newColumns?.map((item, index) => ({
           ...item,
-          columnId: item?.dataIndex || "",
+          columnId: item?.dataIndex || item?.key || "",
         })),
       );
     }
-  }, [columns]);
+  }, [columns, rowSelection]);
+
   /** 数据行 */
   useEffect(() => {
     const columnsIds = tableColumns?.map((el) => el?.columnId);
-    const newDataSource = dataSource?.map((item, index) => {
+    const tempDataSource = newDataSource?.map((item, index) => {
       return {
-        rowId: item?.id,
+        rowId: item[rowKey],
         height: rowHeight,
         cells: columnsIds?.map((el, ind) => {
+          let newCell = {};
+          const columnsItem = tableColumns[ind];
+          const cellItem = item[el];
+          let type: any = columnsItem?.type ?? "text";
+          if (!rowSelection && ind == 0 && item?.children) {
+            type = "ExpandListTemplate";
+          }
+          if (rowSelection && ind == 1) {
+            type = "ExpandListTemplate";
+          }
+
+          if (formulaConfig) {
+            for (let key in formulaConfig) {
+              if (key == el) {
+                const it = formulaConfig[key];
+                newCell = {
+                  text: it?.setCellData(item),
+                  value: it?.setCellData(item),
+                  style: it?.setCellStyle(it?.setCellData(item)),
+                };
+              }
+            }
+          }
+
           return {
-            type: tableColumns[ind]?.cellType ?? "text",
-            text: typeof item[el] == "string" ? item[el] : "",
-            columnsId: el,
-            nonEditable: !tableColumns[ind]?.editable,
-            ...item,
+            ...columnsItem,
+            record: item,
+            rowId: item?.id || columnsItem?.type,
+            type: type,
+            nonEditable: columnsItem?.nonEditable,
+            text: String(cellItem || ""),
+            value: cellItem,
+            selectedValue: cellItem || "",
+            // rowspan: item?.extendedConfig?.name == el ? item?.extendedConfig?.rowspan || 0 : 0,
+            // colspan: item?.extendedConfig?.name == el ? item?.extendedConfig?.colspan || 0 : 0,
+            style: columnsItem?.type == "rowSelection" ? { display: "flex", justifyContent: "center" } : {},
+            ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
+            ...(columnsItem?.cellProps || {}),
+            setNewDataSource,
+            setExpandKeys,
+            expandKeys,
+            Slots,
+            ...newCell,
+
+            // style:item?.extendedConfig?.name==el?item?.extendedConfig?.style||{}:{}
+            // ...handleType(item[el],tableColumns[ind]),
           };
         }),
       };
     });
-    setRows([...headerList, ...newDataSource]);
-  }, [dataSource, tableColumns]);
+    setRows([...headerList, ...tempDataSource]);
+  }, [newDataSource, tableColumns, rowSelection]);
+  console.log(rows, "rowsrows");
 
   // 单元格编辑回调
   const handleCellsChanged = (changes) => {
+    console.log(changes, "changeschangeschanges");
+
     setRows((prevRows) => {
       changes.forEach((change) => {
-        const changeRowIdx = prevRows.findIndex((el) => el.rowId === change.rowId);
-        const changeColumnIdx = tableColumns.findIndex((el) => el.columnId === change.columnId);
+        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 resultColumnIdx = tableColumns.findIndex((el) => el.columnId == key);
             const newCell = {
               ...prevRows[changeRowIdx].cells[resultColumnIdx],
               text: item?.setCellData(prevRows[changeRowIdx]),
@@ -123,20 +186,151 @@ export default function CellEditTable(props: any) {
     });
   };
 
+  /**提取组件内部子组件 */
+  function extractSubComponents(comp, compName): any {
+    if (!comp || typeof comp !== "object") return {};
+
+    return Object.entries(comp).reduce((result, [key, value]) => {
+      // 匹配 antd 规范子组件命名：XXPicker / XX / 驼峰组件名
+      // 排除普通函数、数字、布尔、内部私有属性(带下划线)、原型上的方法
+      const isNativeFunc = ["render", "defaultProps", "propTypes", "displayName", "Group", "$$typeof"].includes(key);
+      // 判定为子组件：值是函数（React组件本质是函数/类），且不是内部方法
+      const isSubComponent = typeof comp == "object" && !isNativeFunc;
+
+      if (isSubComponent) {
+        result[`${compName}.${key}`] = value;
+      }
+      return result;
+    }, {});
+  }
+  /** 自定义组件注册 */
+  const baseTemplate = useMemo(() => {
+    const mergeTemplate: any = { ...(antdComponents || {}), ...(customComponents || {}) };
+    const newMergeTemplate: any = {};
+    for (let key in mergeTemplate) {
+      for (let it in extractSubComponents(mergeTemplate[key], key)) {
+        newMergeTemplate[it] = WidthWrap({ WrapComponent: extractSubComponents(mergeTemplate[key], key)[it] });
+      }
+      newMergeTemplate[key] = WidthWrap({ WrapComponent: mergeTemplate[key] });
+    }
+    return newMergeTemplate;
+  }, [antdComponents, customComponents]);
+
+  const ActionDom = (props) => {
+    return (
+      <div onPointerDown={(e) => e.stopPropagation()}>
+        {Slots?.tableActionsSlot && <Slots.tableActionsSlot {...props} />}
+        {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...props} />}
+        {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...props} />}
+        {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...props} />}
+      </div>
+    );
+  };
+
+  const CheckBoxDom = (props) => {
+    return (
+      <Checkbox
+        {...props}
+        checked={
+          rowSelection?.selectedRowKeys?.includes((props?.record && props?.record[rowKey]) || "") ||
+          rowSelection?.selectedRowKeys?.length == dataSource?.length
+        }
+        indeterminate={
+          !props?.rowId &&
+          rowSelection?.selectedRowKeys?.length > 0 &&
+          rowSelection?.selectedRowKeys?.length < dataSource?.length
+        }
+        onChange={(e) => {
+          if (e.target.checked && props?.rowId) {
+            const newSelectedRowKeys = [...rowSelection?.selectedRowKeys, props?.record[rowKey]];
+            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+
+            rowSelection?.onChange(newSelectedRowKeys, rows);
+          } else if (!e.target.checked && props?.rowId) {
+            const newSelectedRowKeys = rowSelection?.selectedRowKeys?.filter((el) => el != props?.record[rowKey]);
+            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+
+            rowSelection?.onChange(
+              rowSelection?.selectedRowKeys?.filter((el) => el != props?.record[rowKey]),
+              rows,
+            );
+          } else if (e.target.checked && !props?.rowId) {
+            const newSelectedRowKeys = dataSource?.map((el) => el[rowKey]);
+            const rows = dataSource?.filter((el) => newSelectedRowKeys?.includes(el[rowKey]));
+
+            rowSelection?.onChange(
+              dataSource?.map((el) => el[rowKey]),
+              rows,
+            );
+          } else if (!e.target.checked && !props?.rowId) {
+            rowSelection?.onChange([], []);
+          }
+        }}
+      ></Checkbox>
+    );
+  };
+  useEffect(() => {
+    if (rowSelection) {
+      const rows = dataSource?.filter((el) => selectedRowKeys?.includes(el[rowKey]));
+      rowSelection?.onChange(selectedRowKeys, rows);
+    }
+  }, [selectedRowKeys, dataSource]);
+  useEffect(() => {
+    setSelectedRowKeys([]);
+  }, [query?.pageNum]);
+
   return (
-    <div className="grid-container">
+    <div className={`grid-container ${className}`} style={reactGridStyle}>
       <ReactGrid
         rows={rows}
         columns={tableColumns}
         onCellsChanged={handleCellsChanged}
         enableFillHandle={true}
         enableRangeSelection={true}
-        stickyLeftColumns={1}
-        // customCellTemplates={{ status: StatusCellTemplate }}
+        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 (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]);
         // }}

package/src/components/Formily/FormilyEditTable.tsx

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

package/src/table-render/index.jsx

@@ -3,7 +3,7 @@ import { Form, Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "ant
 import { QuestionCircleOutlined, FilterOutlined, SettingOutlined, MenuOutlined } from "@ant-design/icons";
 import { SortableContainer, SortableElement, SortableHandle } from "react-sortable-hoc";
 import { arrayMoveImmutable } from "array-move";
-import _, { isFunction } from "lodash";
+import _, { isFunction, values } from "lodash";
 
 import { FormProvider, FormConsumer } from "@formily/react";
 import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
@@ -221,19 +221,28 @@ const TableRender = forwardRef(function (props, tableRef) {
             </span>
           );
         }
+        const selectList = fieldSchemas?.[name]?.dataSource?.map((el) => ({
+          ...el,
+          label: el?.[field?.["x-component-props"]?.["fieldNames"]?.["label"]] || el?.label,
+          value: el?.[field?.["x-component-props"]?.["fieldNames"]?.["value"]] || el?.value,
+        }))
 
         columns.push({
           // field, // HACK: 直接传入 field 在 title 传入 ReactNode，内部深克隆导致页面报错白屏。使用函数获取解决
           getField: () => field,
           editable: true,
           ..._colConf,
-          onCell: (record, rowIndex) =>
-            _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex) || {},
+          onCell: (record, rowIndex, ci) =>
+            _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex, ci) || {},
           // 函数式传入，解决 title ReactNode 传入报错问题（table 组件内部对 columns 进行 lodash.deepClone 导致 ReactNode 变成对象无法正常渲染） Uncaught TypeError: this.queryFeedbacks is not a function
           title: () => _title,
           key: name,
           dataIndex: name,
-          cellType: field?.cellType,
+          type: field["x-validator"] == "number" ? "Number" : comName,
+          nonEditable: editMode != "cell",
+          values: field?.enum || selectList || [],
+          cellProps: field.cellProps,
+          children: field?.children,
           render: getColRender(colRender),
         });
       }
@@ -248,6 +257,8 @@ const TableRender = forwardRef(function (props, tableRef) {
         ..._colConf,
         title: "操作",
         key: "_$actions",
+        type: "_$actions",
+        nonEditable: true,
         render: getColRender(function (text, record, index) {
           const { onEdit, onDel, onSearch, getList } = props;
           const slotProps = { text, record, index, onEdit: onEdit, onDel: onDel, onSearch, getList };
@@ -429,6 +440,9 @@ const TableRender = forwardRef(function (props, tableRef) {
           {...tableProps}
           {...cellEditTableProps}
           onEditSubmit={props?.onEditSubmit}
+          Slots={props?.Slots}
+          rowSelection={config?.rowSelection}
+          query={query}
         /> : <>
           {isEditTable ? (
             <FormProvider form={formRender}>