@hzab/list-render 1.10.20-alpha.6 → 1.10.21-alpha.0

package/CHANGELOG.md

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

package/README.md

@@ -107,13 +107,6 @@ const listDM = useMemo(
 | onEditReqVerify             | Function                  | 否   | -                                      | 编辑态保存时额外的规则校验函数，返回 Promise 的 resolve 或 reject 用于继续执行或停止执行                                   |
 
 - fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
-- editMode
-  - modal 弹窗/抽屉编辑;
-  - table-edit 整个 table 一起编辑;
-  - table-edit-show 整个 table 可 一起编辑，直接显示表单;
-  - line 编辑整行，编辑按钮在操作列;
-  - line-cell 编辑整行，操作按钮在单元格;
-  - cell 编辑指定单元格
 
 #### tableConf
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.20-alpha.6",
+  "version": "1.10.21-alpha.0",
   "description": "",
   "main": "src",
   "scripts": {
@@ -25,13 +25,13 @@
   "license": "ISC",
   "devDependencies": {
     "@ant-design/icons": "^4.8.1",
-    "@hzab/data-model": "^2.0.2",
-    "@hzab/form-render": "^1.7.14",
+    "@hzab/data-model": "^1.7.4",
+    "@hzab/form-render": "^1.6.12",
     "@hzab/formily-result-utils": "^1.2.0",
     "@hzab/permissions": "^1.0.0",
     "@hzab/schema-descriptions": "^1.3.0",
-    "@hzab/utils": "^1.0.16",
     "@hzab/webpack-config": "^0.7.2",
+    "@hzab/utils": "^1.0.7",
     "@types/react": "^17.0.62",
     "@types/react-dom": "^17.0.20",
     "antd": "^4.24.12",
@@ -51,7 +51,7 @@
     "@formily/react": "2.3.1",
     "@formily/reactive-react": "2.3.1",
     "@hzab/data-model": ">=1.7.4",
-    "@hzab/form-render": ">=1.7.14",
+    "@hzab/form-render": ">=1.0.0",
     "@hzab/formily-result-utils": ">=1.2.0",
     "@hzab/schema-descriptions": ">=1.0.0",
     "@hzab/utils": ">=1.0.7",

package/src/components/Formily/{--FormilyEditTable.tsx → FormilyEditTable.tsx}

@@ -1,9 +1,7 @@
-import React, { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import React, { useState, useCallback, useRef, useEffect } from "react";
 import { Card, Slider, Rate, Form, Button } from "antd";
 import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
-import { createForm, onFormValuesChange, onFieldValueChange } from "@formily/core";
 import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
-
 import { cloneDeep } from "lodash";
 
 import { antdComponents, customComponents } from "@hzab/form-render";
@@ -15,74 +13,6 @@ export interface Item {
   address: string;
 }
 
-export interface EditableRowProps extends React.HTMLAttributes<HTMLElement> {
-  SchemaField: any;
-  getField: () => {
-    type: string;
-    name: string;
-  };
-  editing: boolean;
-  dataIndex: string;
-  title: any;
-  inputType: "number" | "text";
-  record: Item;
-  index: number;
-  editable: boolean;
-  onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string, opt: Object) => void;
-  onSave: (field: { type: string; name: string }) => void;
-  onCancel: () => void;
-  topProps: {
-    config: { hasEdit: boolean | Function };
-    editMode: "modal" | "line" | "line-cell" | "cell";
-    formConf: any;
-  };
-  children: React.ReactNode;
-}
-
-export const EditableRow: React.FC<EditableRowProps> = ({
-  SchemaField,
-  getField,
-  editing,
-  dataIndex,
-  title,
-  inputType,
-  record,
-  index,
-  onEdit,
-  onSave,
-  onCancel,
-  editable,
-  topProps,
-  children,
-  ...restProps
-}) => {
-  const { formConf = {} } = topProps || {};
-  const formRender = useMemo(
-    () =>
-      createForm({
-        initialValues: record,
-        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
-        readOnly: formConf.readOnly,
-        disabled: formConf.disabled,
-        ...(formConf.formOptions || {}),
-        effects(...args) {
-          formConf.onFormValuesChange && onFormValuesChange(formConf.onFormValuesChange);
-          formConf.onFieldValueChange && onFieldValueChange("*", formConf.onFieldValueChange);
-          formConf.formOptions?.effects && formConf.formOptions?.effects(...args);
-        },
-      }),
-    [],
-  );
-  // return <tr {...restProps}>{children}</tr>;
-  return (
-    <FormProvider form={formRender}>
-      <Form layout="vertical" component={false}>
-        <FormConsumer>{() => <tr {...restProps}>{children}</tr>}</FormConsumer>
-      </Form>
-    </FormProvider>
-  );
-};
-
 export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   SchemaField: any;
   getField: () => {
@@ -100,9 +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";
-    isEditCell: (record) => boolean;
+    canEditCallback: (record: Partial<Item> & { key: React.Key }, field: { type: string; name: string }, dataIndex: string) => void;
   };
   children: React.ReactNode;
 }
@@ -127,17 +57,21 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   const field = getField && getField();
   const fPattern = field?.["x-pattern"];
   const fDisplay = field?.["x-display"];
-  const { editMode = "modal", isEditCell } = topProps || {};
-  const { hasEdit } = topProps?.config || {};
+  const { editMode = "modal", canEditCallback } = topProps || {};
+  const { hasEdit } = topProps?.tableConf || {};
   const fieldRef = useRef();
 
   // 弹窗编辑模式
-  if (editMode === "modal" || (typeof isEditCell === "function" && !isEditCell(record))) {
+  if (editMode === "modal") {
     return <td {...restProps}>{children}</td>;
   }
   // 无编辑权限或禁止编辑
   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/list-render.jsx

@@ -10,7 +10,6 @@ import axiosI, { isCancel, getCancelTokenSource } from "@hzab/data-model/src/axi
 import QueryRender from "./query-render";
 import Pagination from "./pagination-render";
 import TableRender from "./table-render";
-import EditArrayTable from "./EditArrayTable";
 import CardRender from "./card-render";
 import FormModal from "./FormModal";
 import DetailModal from "./DetailModal";
@@ -203,7 +202,6 @@ const ListRender = forwardRef(function (props, parentRef) {
           setTotal(res.pagination?.total);
           props.onGetListEnd && props.onGetListEnd(res);
           setListLoading(false);
-          return res;
         })
         .catch((err) => {
           // 兼容新老版本 data-model isCancel 取法
@@ -456,9 +454,6 @@ const ListRender = forwardRef(function (props, parentRef) {
     setShowSearch(!showSearch);
   };
 
-  const CTableRender =
-    props.editMode === "table-edit" || props.editMode === "table-edit-show" ? EditArrayTable : TableRender;
-
   return (
     <div className={`list-render ${props.className}`}>
       <div className={`list-header ${props.verticalHeader ? "vertical-header" : ""}`}>
@@ -521,10 +516,10 @@ const ListRender = forwardRef(function (props, parentRef) {
       ) : null}
 
       {layout === "default" ? (
-        <CTableRender
+        <TableRender
           idKey={idKey}
           ref={tableRef}
-          schema={schema}
+          schema={schema?.schema}
           list={list}
           config={props.tableConf}
           hasAction={props.hasAction}
@@ -545,7 +540,6 @@ const ListRender = forwardRef(function (props, parentRef) {
           i18n={i18n}
           onEditSubmit={onEditSubmit}
           topProps={props}
-          handleMessage={handleMessage}
         />
       ) : null}
 

package/src/table-render/index.jsx

@@ -1,10 +1,13 @@
-import { useEffect, useState, useRef, forwardRef, useImperativeHandle, Fragment, useMemo } from "react";
+import { useEffect, useState, useMemo, useRef, forwardRef, useImperativeHandle } 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";
@@ -13,19 +16,14 @@ import { getColRender } from "../common/formily-utils";
 import { getVal, getFieldList } from "../common/utils";
 import { handleReactions } from "../common/handleReactions";
 
-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 { useEditTable, EditableCell } from "../components/Formily/FormilyEditTable";
 
 import "./index.less";
 
 const scenario = "table-render";
 
 const TableRender = forwardRef(function (props, tableRef) {
-  const { topProps, config = {}, query = {}, i18n, setList, schema } = props;
-  const propsSchema = schema?.schema;
+  const { topProps, config = {}, query = {}, i18n, setList } = props;
   const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
   const {
     dragColConf = {},
@@ -37,36 +35,23 @@ const TableRender = forwardRef(function (props, tableRef) {
     isShowTableFilter = false,
     isTableSortXIdex = false,
   } = config || {};
-  const [_list, _setList] = useState(props.list);
-  const antdTableRef = useRef();
-  const rowFormMapRef = useRef(new Map());
-  const editingInofRef = useRef({
-    editingRowId: "",
-    editingKey: "",
-  });
-
+  const { editMode = "modal" } = topProps || {};
+  const isEditTable = editMode !== "modal";
   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) => <Fragment children={props.children} />);
+  const SortableItem = SortableElement((props) => <tr {...props} />);
   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);
     }
   };
@@ -86,27 +71,38 @@ const TableRender = forwardRef(function (props, tableRef) {
     fieldSchemas: {},
   });
 
-  const {
-    onEditSave,
-    onEdit: onEditByTable,
-    mergedColumns,
-  } = useEditTable({
+  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({
     idKey: props.idKey,
     columns,
     onEdit: props.onEdit,
     onEditSubmit: props.onEditSubmit,
+    formRender,
     components: props.components,
     schemaScope: props.schemaScope,
     topProps: props.topProps,
-    rowFormMapRef,
-    editingInofRef,
   });
 
   useEffect(() => {
-    if (!propsSchema?.properties) {
+    if (!(props.schema && props.schema.properties)) {
       return;
     }
-    const fieldList = getFieldList(propsSchema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
+    const fieldList = getFieldList(props.schema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
     const columns = [];
 
     // 序号列
@@ -129,34 +125,16 @@ const TableRender = forwardRef(function (props, tableRef) {
     }
 
     const { Slots = {} } = props;
-    const _fieldList = fieldList;
+    const _fieldList = handleReactions(fieldList, {
+      scope: props.schemaScope,
+      formilyRef,
+    });
     _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 = isFunction(title) ? title() : title;
-        if (_colConf?.title) {
-          _title = isFunction(_colConf?.title) ? _colConf?.title() : _colConf?.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]) {
@@ -226,6 +204,22 @@ 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,
@@ -252,23 +246,71 @@ const TableRender = forwardRef(function (props, tableRef) {
         title: "操作",
         key: "_$actions",
         render: getColRender(function (text, record, index) {
-          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} />;
+          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>
+          );
         }),
       });
     }
@@ -285,7 +327,12 @@ const TableRender = forwardRef(function (props, tableRef) {
     }
     setColumns(columns);
     setColumnList(columns);
-  }, [propsSchema, props.config]);
+  }, [props.schema, props.config]);
+
+  // 解决 FormilyField 中无相关参数报错的问题。自定义参数都从这里传入
+  const reactionOpts = {
+    scenario: scenario,
+  };
 
   const onChange = (e, col) => {
     if (e.target.checked) {
@@ -299,68 +346,38 @@ const TableRender = forwardRef(function (props, tableRef) {
   };
 
   const tableProps = {
-    ref: antdTableRef,
     className: "table-render",
     rowKey: props.idKey || "id",
     rowSelection: config?.rowSelection,
     columns: columns,
-    dataSource: _list,
+    dataSource: props.list,
     pagination: false,
     scroll: config.scroll,
     expandable: config.expandable,
     loading: props.loading,
-    ...props.tableProps,
-    onRow: (record, index) => {
-      const _onRow = config?.onRow ?? props.tableProps?.onRow;
-      const _onRowRes = _onRow && _onRow(record, index);
-      return {
-        ..._onRowRes,
-        record,
-        index,
-        id: record[props.idKey || "id"],
-        rowFormMapRef,
-        editingInofRef,
-        components: props.components,
-        topProps,
-        onEditSave,
-      };
-    },
+    onRow: config?.onRow,
     topProps: props.topProps,
+    ...props.tableProps,
   };
 
-  tableProps.columns = mergedColumns;
+  if (isDargTable) {
+    tableProps.components = {
+      body: {
+        wrapper: DraggableContainer,
+        row: DraggableBodyRow,
+      },
+    };
+  }
 
-  // useMemo 解决 row 重复渲染问题
-  const tableComponents = useMemo(
-    () => ({
+  if (isEditTable) {
+    tableProps.columns = mergedColumns;
+    tableProps.components = {
       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">
@@ -404,24 +421,26 @@ const TableRender = forwardRef(function (props, tableRef) {
           </Popover>
         </div>
       ) : null}
-      <TableFormilyContext.Provider
-        value={{
-          rowFormMapRef,
-          editingInofRef,
-        }}
-      >
+      {isEditTable ? (
+        <FormProvider form={formRender}>
+          <Form layout="vertical">
+            <FormConsumer>{() => <Table {...tableProps} />}</FormConsumer>
+          </Form>
+        </FormProvider>
+      ) : (
         <Table {...tableProps} />
-      </TableFormilyContext.Provider>
-      {/* <FormilyField
-        schema={propsSchema}
+      )}
+      <FormilyField
+        schema={props.schema}
         formilyRef={formilyRef}
         components={props.components}
+        topProps={topProps}
         schemaScope={{
           ...reactionOpts,
           ...props.schemaScope,
         }}
         reactionOpts={reactionOpts}
-      /> */}
+      />
     </div>
   );
 });

package/src/EditArrayTable/index.less

@@ -1,11 +0,0 @@
-.edit-array-table {
-  .edit-array-table-head {
-    display: flex;
-    justify-content: space-between;
-    .edit-array-table-actions {
-      .ant-btn + .ant-btn {
-        margin-left: 8px;
-      }
-    }
-  }
-}