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

package/src/components/CellEditTable/index.tsx

@@ -0,0 +1,340 @@
+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";
+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 {
+    columns,
+    dataSource,
+    formulaConfig,
+    onChange,
+    reactGridProps = {},
+    onEditSubmit,
+    headerRowHeight,
+    rowHeight,
+    reactGridStyle,
+    className,
+    Slots,
+    rowSelection,
+    rowKey,
+    query,
+  } = props;
+
+  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) => {
+    const record = item?.cells?.[0]?.record;
+    const fieldList = ["_$actions", "rowSelection"];
+    let obj: any = {
+      id: item?.rowId,
+    };
+    item?.cells?.forEach((el) => {
+      if (el?.columnId && !fieldList?.includes(el?.columnId)) {
+        obj[el?.columnId] = el?.text || el?.value || el?.selectedValue || "";
+      }
+    });
+
+    return {
+      ...record,
+      ...obj,
+    };
+  };
+  /** 表头 */
+  useEffect(() => {
+    if (Array.isArray(columns) && columns?.length > 0) {
+      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(
+        newColumns?.map((item, index) => ({
+          ...item,
+          columnId: item?.dataIndex || item?.key || "",
+        })),
+      );
+    }
+  }, [columns, rowSelection]);
+
+  /** 数据行 */
+  useEffect(() => {
+    const columnsIds = tableColumns?.map((el) => el?.columnId);
+    const tempDataSource = newDataSource?.map((item, index) => {
+      return {
+        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 {
+            ...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, ...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);
+        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];
+    });
+  };
+
+  /**提取组件内部子组件 */
+  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 ${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 (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>
+  );
+}

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

@@ -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";
@@ -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) {
@@ -219,18 +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,
+          type: field["x-validator"] == "number" ? "Number" : comName,
+          nonEditable: editMode != "cell",
+          values: field?.enum || selectList || [],
+          cellProps: field.cellProps,
+          children: field?.children,
           render: getColRender(colRender),
         });
       }
@@ -245,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 };
@@ -421,15 +435,26 @@ 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}
+          Slots={props?.Slots}
+          rowSelection={config?.rowSelection}
+          query={query}
+        /> : <>
+          {isEditTable ? (
+            <FormProvider form={formRender}>
+              <Form layout="vertical">
+                <FormConsumer>{() => <Table {...tableProps} />}</FormConsumer>
+              </Form>
+            </FormProvider>
+          ) : (
+            <Table {...tableProps} />
+          )}
+        </>
+      }
       <FormilyField
         schema={props.schema}
         formilyRef={formilyRef}