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

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,42 +13,64 @@ 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 "./index.less";
 
 const scenario = "table-render";
 
+/**
+ * 编辑按钮隐藏
+ */
+const editModeHideList = ["cell", "line-cell", "table-line-show"];
+
 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 = {},
     isDargTable,
     dargEndBack,
-    orderColType,
+    orderColType = "page",
     orderColWidth,
     tableEmptyValue,
     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 +90,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 = [];
 
     // 序号列
@@ -131,10 +139,28 @@ const TableRender = forwardRef(function (props, tableRef) {
     });
     _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 +230,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 +237,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),
@@ -256,8 +266,7 @@ const TableRender = forwardRef(function (props, tableRef) {
           const { editMode = "modal" } = props.topProps || {};
           // 编辑按钮权限
           const _hasEdit =
-            editMode !== "cell" &&
-            editMode !== "line-cell" &&
+            !editModeHideList.includes(editMode) &&
             (hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false);
 
           //详情按钮权限
@@ -289,6 +298,10 @@ const TableRender = forwardRef(function (props, tableRef) {
                   type="link"
                   onClick={() => {
                     props.onEdit && props.onEdit(record, index);
+                    if (editMode == "line") {
+                      // 整行编辑，编辑按钮在操作列的模式下表单数据回填
+                      return onEditByTable(record, record[props.idKey]);
+                    }
                   }}
                 >
                   {tableEdit}
@@ -327,12 +340,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 +354,66 @@ 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,
+    onRow: (record, index) => {
+      const _onRowRes = config?.onRow && config?.onRow(record, index);
+      return {
+        ..._onRowRes,
+        record,
+        id: record[props.idKey || "id"],
+        rowFormMapRef,
+        editingInofRef,
+        components: props.components,
+        topProps,
+        onEditSave,
+      };
+    },
     topProps: props.topProps,
     ...props.tableProps,
   };
 
-  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 +457,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>
   );
 });