@hzab/list-render 1.10.19 → 1.10.20-alpha.1

package/src/table-render/TableActions.tsx

@@ -0,0 +1,95 @@
+import { Form, Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
+
+/**
+ * 编辑按钮隐藏
+ */
+export const editModeHideList = ["cell", "line-cell"];
+
+export function TableActions(props) {
+  const {
+    text,
+    record,
+    index,
+    topProps,
+    tableConf,
+    colConf,
+    onEditByTable,
+    onDetail,
+    onEdit,
+    onDel,
+    onSearch,
+    getList,
+  } = props;
+  const { idKey = "id", i18n, Slots, editMode = "modal" } = topProps || {};
+  const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
+
+  const slotProps = { text, record, index, onEdit: onEdit, onDel: onDel, onSearch, getList };
+
+  if (Slots?.tableActionsSlot) {
+    return <Slots.tableActionsSlot {...slotProps} />;
+  }
+
+  const { hasEdit, hasDel, hasDelTips, hasDetail = false } = tableConf || {};
+
+  // 编辑按钮权限
+  const _hasEdit =
+    !editModeHideList.includes(editMode) &&
+    (hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false);
+
+  // 详情按钮权限
+  const _hasDetail = hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
+
+  // 删除按钮权限
+  const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
+
+  // 删除按钮提示
+  const delTips =
+    hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
+
+  return (
+    <div style={{ width: colConf?.width, maxWidth: "100%" }}>
+      {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
+      {_hasDetail ? (
+        <Button
+          type="link"
+          onClick={() => {
+            onDetail && onDetail(record, index);
+          }}
+        >
+          {tableDetail}
+        </Button>
+      ) : null}
+      {_hasEdit ? (
+        <Button
+          type="link"
+          onClick={() => {
+            onEdit && onEdit(record, index);
+            if (editMode == "line") {
+              // 整行编辑，编辑按钮在操作列的模式下表单数据回填
+              return onEditByTable(record, record[idKey]);
+            }
+          }}
+        >
+          {tableEdit}
+        </Button>
+      ) : null}
+      {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
+      {_hasDel ? (
+        <Popconfirm
+          placement="topRight"
+          title={delTips}
+          onConfirm={() => {
+            onDel && onDel(record, index);
+          }}
+        >
+          <Button type="link" danger>
+            {tableDel}
+          </Button>
+        </Popconfirm>
+      ) : null}
+      {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
+    </div>
+  );
+}
+
+export default TableActions;

package/src/table-render/index.jsx

@@ -1,13 +1,10 @@
-import { useEffect, useState, useMemo, useRef, forwardRef, useImperativeHandle } from "react";
+import { useEffect, useState, useRef, forwardRef, useImperativeHandle, Fragment, useMemo } from "react";
 import { Form, Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
 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 { FormProvider, FormConsumer } from "@formily/react";
-import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
-
 import EnumRender from "@hzab/formily-result-utils/src/components/EnumRender";
 import { SHOW_MODE_TYPES } from "@hzab/formily-result-utils/src/common/constant";
 import { FormilyField } from "../components/Formily/FormilyField";
@@ -16,14 +13,19 @@ import { getColRender } from "../common/formily-utils";
 import { getVal, getFieldList } from "../common/utils";
 import { handleReactions } from "../common/handleReactions";
 
-import { useEditTable, EditableCell } from "../components/Formily/FormilyEditTable";
+import { useEditTable } from "../components/Formily/FormilyEditTable";
+import { EditTableRow } from "../components/Formily/FormilyEditTable/EditTableRow";
+import { EditableCell } from "../components/Formily/FormilyEditTable/EditTableCell";
+import { TableFormilyContext } from "../components/Formily/FormilyEditTable/useTableFormilyContext";
+import TableActions from "./TableActions";
 
 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, schema } = props;
+  const propsSchema = schema?.schema;
   const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
   const {
     dragColConf = {},
@@ -35,23 +37,36 @@ const TableRender = forwardRef(function (props, tableRef) {
     isShowTableFilter = false,
     isTableSortXIdex = false,
   } = config || {};
-  const { editMode = "modal" } = topProps || {};
-  const isEditTable = editMode !== "modal";
+  const [_list, _setList] = useState(props.list);
+  const antdTableRef = useRef();
+  const rowFormMapRef = useRef(new Map());
+  const editingInofRef = useRef({
+    editingRowId: "",
+    editingKey: "",
+  });
+
   useImperativeHandle(tableRef, () => ({
     onEditByTable,
   }));
 
+  useEffect(() => {
+    _setList(props.list);
+    // 数据清除问题，避免分页数据量持续累计过于庞大
+    rowFormMapRef.current.clear();
+  }, [props.list]);
+
   const [columns, setColumns] = useState([]);
   const [columnList, setColumnList] = useState([]);
   const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: "grab", color: "#999" }} />);
 
-  const SortableItem = SortableElement((props) => <tr {...props} />);
+  const SortableItem = SortableElement((props) => <Fragment children={props.children} />);
   const SortableBody = SortableContainer((props) => <tbody {...props} />);
 
   const onSortEnd = ({ oldIndex, newIndex }) => {
     if (oldIndex !== newIndex) {
       const newData = arrayMoveImmutable(props.list.slice(), oldIndex, newIndex).filter((el) => !!el);
       setList([...newData]);
+      _setList([...newData]);
       dargEndBack && dargEndBack(newData, query);
     }
   };
@@ -71,38 +86,27 @@ const TableRender = forwardRef(function (props, tableRef) {
     fieldSchemas: {},
   });
 
-  const formRender = useMemo(
-    () =>
-      createForm({
-        initialValues: props.initialValues,
-        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
-        readOnly: props.readOnly,
-        disabled: props.disabled,
-        ...(props.formOptions || {}),
-        effects(...args) {
-          props.onFormValuesChange && onFormValuesChange(props.onFormValuesChange);
-          props.onFieldValueChange && onFieldValueChange("*", props.onFieldValueChange);
-          props.formOptions?.effects && props.formOptions?.effects(...args);
-        },
-      }),
-    [],
-  );
-  const { onEdit: onEditByTable, mergedColumns } = useEditTable({
+  const {
+    onEditSave,
+    onEdit: onEditByTable,
+    mergedColumns,
+  } = useEditTable({
     idKey: props.idKey,
     columns,
     onEdit: props.onEdit,
     onEditSubmit: props.onEditSubmit,
-    formRender,
     components: props.components,
     schemaScope: props.schemaScope,
     topProps: props.topProps,
+    rowFormMapRef,
+    editingInofRef,
   });
 
   useEffect(() => {
-    if (!(props.schema && props.schema.properties)) {
+    if (!propsSchema.properties) {
       return;
     }
-    const fieldList = getFieldList(props.schema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
+    const fieldList = getFieldList(propsSchema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
     const columns = [];
 
     // 序号列
@@ -125,16 +129,31 @@ const TableRender = forwardRef(function (props, tableRef) {
     }
 
     const { Slots = {} } = props;
-    const _fieldList = handleReactions(fieldList, {
-      scope: props.schemaScope,
-      formilyRef,
-    });
+    const _fieldList = fieldList;
     _fieldList.forEach((field, colIndex) => {
       const fieldSchemas = formilyRef.current?.fields;
+      if (!field["x-decorator-props"]) {
+        field["x-decorator-props"] = {};
+      }
+      // 存储原始的 pattern，用于行内编辑还原数据
+      field["x-decorator-props"]._sourcePattern = field["x-pattern"];
       if (field.inTable !== false) {
         const { name, title } = field;
         const comName = field["x-component"];
 
+        const decoratorProps = field["x-decorator-props"] || {};
+        let _title = title;
+        if (decoratorProps.tooltip) {
+          _title = (
+            <span className="col-title-tooltip-wrap inline-block-max-w">
+              {_title}
+              <Tooltip className="col-title-tooltip" title={decoratorProps.tooltip}>
+                <QuestionCircleOutlined className="col-title-tooltip-icon" />
+              </Tooltip>
+            </span>
+          );
+        }
+
         let _colConf = {};
 
         if (props.config?.colConf && props.config?.colConf[name]) {
@@ -204,22 +223,6 @@ const TableRender = forwardRef(function (props, tableRef) {
           };
         }
 
-        let _title = isFunction(title) ? title() : title;
-        if (_colConf?.title) {
-          _title = isFunction(_colConf?.title) ? _colConf?.title() : _colConf?.title;
-        }
-        const decoratorProps = field["x-decorator-props"] || {};
-        if (decoratorProps.tooltip) {
-          _title = (
-            <span className="col-title-tooltip-wrap inline-block-max-w">
-              {_title}
-              <Tooltip className="col-title-tooltip" title={decoratorProps.tooltip}>
-                <QuestionCircleOutlined className="col-title-tooltip-icon" />
-              </Tooltip>
-            </span>
-          );
-        }
-
         columns.push({
           // field, // HACK: 直接传入 field 在 title 传入 ReactNode，内部深克隆导致页面报错白屏。使用函数获取解决
           getField: () => field,
@@ -227,8 +230,8 @@ const TableRender = forwardRef(function (props, tableRef) {
           ..._colConf,
           onCell: (record, rowIndex) =>
             _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex) || {},
-          // 函数式传入，解决 title ReactNode 传入报错问题（table 组件内部对 columns 进行 lodash.deepClone 导致 ReactNode 变成对象无法正常渲染） Uncaught TypeError: this.queryFeedbacks is not a function
-          title: () => _title,
+          // 函数式传入，解决 title ReactNode 传入报错问题
+          title: () => (isFunction(_colConf?.title) ? _colConf?.title() : _title),
           key: name,
           dataIndex: name,
           render: getColRender(colRender),
@@ -246,71 +249,23 @@ const TableRender = forwardRef(function (props, tableRef) {
         title: "操作",
         key: "_$actions",
         render: getColRender(function (text, record, index) {
-          const { onEdit, onDel, onSearch, getList } = props;
-          const slotProps = { text, record, index, onEdit: onEdit, onDel: onDel, onSearch, getList };
-
-          if (Slots?.tableActionsSlot) {
-            return <Slots.tableActionsSlot {...slotProps} />;
-          }
-
-          const { editMode = "modal" } = props.topProps || {};
-          // 编辑按钮权限
-          const _hasEdit =
-            editMode !== "cell" &&
-            editMode !== "line-cell" &&
-            (hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false);
-
-          //详情按钮权限
-          const _hasDetail =
-            hasDetail && typeof hasDetail === "function" ? hasDetail(record, index) : hasDetail !== false;
-
-          //删除按钮权限
-          const _hasDel = hasDel && typeof hasDel === "function" ? hasDel(record, index) : hasDel !== false;
-
-          //删除按钮提示
-          const delTips =
-            hasDelTips && typeof hasDelTips === "function" ? hasDelTips(record, index) : hasDelTips || tableDelTip;
-
-          return (
-            <div style={{ width: _colConf?.width, maxWidth: "100%" }}>
-              {Slots?.actionPrefixSlot && <Slots.actionPrefixSlot {...slotProps} />}
-              {_hasDetail ? (
-                <Button
-                  type="link"
-                  onClick={() => {
-                    props.onDetail && props.onDetail(record, index);
-                  }}
-                >
-                  {tableDetail}
-                </Button>
-              ) : null}
-              {_hasEdit ? (
-                <Button
-                  type="link"
-                  onClick={() => {
-                    props.onEdit && props.onEdit(record, index);
-                  }}
-                >
-                  {tableEdit}
-                </Button>
-              ) : null}
-              {Slots?.actionCenterSlot && <Slots.actionCenterSlot {...slotProps} />}
-              {_hasDel ? (
-                <Popconfirm
-                  placement="topRight"
-                  title={delTips}
-                  onConfirm={() => {
-                    props.onDel && props.onDel(record, index);
-                  }}
-                >
-                  <Button type="link" danger>
-                    {tableDel}
-                  </Button>
-                </Popconfirm>
-              ) : null}
-              {Slots?.actionSuffixSlot && <Slots.actionSuffixSlot {...slotProps} />}
-            </div>
-          );
+          const { onDetail, onEdit, onDel, onSearch, getList } = props;
+          const cProps = {
+            text,
+            record,
+            index,
+            Slots,
+            onEdit,
+            onDel,
+            onDetail,
+            onSearch,
+            onEditByTable,
+            getList,
+            tableConf: props.config,
+            colConf: _colConf,
+            topProps,
+          };
+          return <TableActions {...cProps} />;
         }),
       });
     }
@@ -327,12 +282,7 @@ const TableRender = forwardRef(function (props, tableRef) {
     }
     setColumns(columns);
     setColumnList(columns);
-  }, [props.schema, props.config]);
-
-  // 解决 FormilyField 中无相关参数报错的问题。自定义参数都从这里传入
-  const reactionOpts = {
-    scenario: scenario,
-  };
+  }, [propsSchema, props.config]);
 
   const onChange = (e, col) => {
     if (e.target.checked) {
@@ -346,38 +296,67 @@ const TableRender = forwardRef(function (props, tableRef) {
   };
 
   const tableProps = {
+    ref: antdTableRef,
     className: "table-render",
     rowKey: props.idKey || "id",
     rowSelection: config?.rowSelection,
     columns: columns,
-    dataSource: props.list,
+    dataSource: _list,
     pagination: false,
     scroll: config.scroll,
     expandable: config.expandable,
     loading: props.loading,
-    onRow: config?.onRow,
-    topProps: props.topProps,
     ...props.tableProps,
+    onRow: (record, index) => {
+      const _onRow = config?.onRow ?? props.tableProps?.onRow;
+      const _onRowRes = _onRow && _onRow(record, index);
+      return {
+        ..._onRowRes,
+        record,
+        id: record[props.idKey || "id"],
+        rowFormMapRef,
+        editingInofRef,
+        components: props.components,
+        topProps,
+        onEditSave,
+      };
+    },
+    topProps: props.topProps,
   };
 
-  if (isDargTable) {
-    tableProps.components = {
-      body: {
-        wrapper: DraggableContainer,
-        row: DraggableBodyRow,
-      },
-    };
-  }
+  tableProps.columns = mergedColumns;
 
-  if (isEditTable) {
-    tableProps.columns = mergedColumns;
-    tableProps.components = {
+  // useMemo 解决 row 重复渲染问题
+  const tableComponents = useMemo(
+    () => ({
       body: {
         ...tableProps?.components?.body,
         cell: EditableCell,
+        row: isDargTable
+          ? ({ rowFormMapRef, components, topProps, ...props }) => {
+              // 拖拽
+              return (
+                <DraggableBodyRow {...props}>
+                  <EditTableRow rowFormMapRef={rowFormMapRef} components={components} topProps={topProps} {...props} />
+                </DraggableBodyRow>
+              );
+            }
+          : EditTableRow,
+        ...(isDargTable
+          ? {
+              wrapper: DraggableContainer,
+            }
+          : {}),
       },
-    };
-  }
+    }),
+    [],
+  );
+  tableProps.components = tableComponents;
+
+  // 解决 FormilyField 中无相关参数报错的问题。自定义参数都从这里传入
+  const reactionOpts = {
+    scenario: scenario,
+  };
 
   return (
     <div className="table-render-wrap">
@@ -421,26 +400,24 @@ const TableRender = forwardRef(function (props, tableRef) {
           </Popover>
         </div>
       ) : null}
-      {isEditTable ? (
-        <FormProvider form={formRender}>
-          <Form layout="vertical">
-            <FormConsumer>{() => <Table {...tableProps} />}</FormConsumer>
-          </Form>
-        </FormProvider>
-      ) : (
+      <TableFormilyContext.Provider
+        value={{
+          rowFormMapRef,
+          editingInofRef,
+        }}
+      >
         <Table {...tableProps} />
-      )}
-      <FormilyField
-        schema={props.schema}
+      </TableFormilyContext.Provider>
+      {/* <FormilyField
+        schema={propsSchema}
         formilyRef={formilyRef}
         components={props.components}
-        topProps={topProps}
         schemaScope={{
           ...reactionOpts,
           ...props.schemaScope,
         }}
         reactionOpts={reactionOpts}
-      />
+      /> */}
     </div>
   );
 });