@hzab/list-render 1.10.0-beta4 → 1.10.0-beta6

package/CHANGELOG.md

@@ -1,6 +1,7 @@
 # @hzab/list-render@1.10.0
 
 feat: 支持行内编辑编辑 isEditTable
+feat: editBtnType 编辑按钮位置 "cell" 各单元格内; "action" 操作列中
 
 # @hzab/list-render@1.9.16
 

package/README.md

@@ -101,7 +101,8 @@ const listDM = useMemo(
 | queryFormInitialValues      | Object           |      | {}              | 列表上方查询 Form 默认值                                                                                       |
 | queryFormIsExtendModelQuery | Boolean          |      | false           | 列表上方查询 Form 默认值是否继承 data-model.query 置                                                           |
 | useFormData                 | boolean          | 否   |                 | 是否使用 form data 提交数据                                                                                    |
-| isEditTable                 | boolean          | 否   |                 | 是否行内编辑表格                                                                                               |
+| isEditTable                 | boolean          | 否   | false           | 是否行内编辑表格                                                                                               |
+| editBtnType                 | cell/action      | 否   | action          | 编辑按钮位置 cell 各单元格内 action 操作列中                                                                   |
 
 - fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.0-beta4",
+  "version": "1.10.0-beta6",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/Formily/FormilyEditTable.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useRef } from "react";
 import { Card, Slider, Rate, Form, Button } from "antd";
+import { EditOutlined } from "@ant-design/icons";
 import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
 import { cloneDeep } from "lodash";
 
@@ -24,6 +25,12 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   inputType: "number" | "text";
   record: Item;
   index: number;
+  editable: boolean;
+  onEdit: (record: Partial<Item> & { key: React.Key }) => void;
+  topProps: {
+    config: { hasEdit: boolean | Function };
+    editBtnType: "cell" | "action";
+  };
   children: React.ReactNode;
 }
 
@@ -36,13 +43,26 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   inputType,
   record,
   index,
+  onEdit,
+  editable,
+  topProps,
   children,
   ...restProps
 }) => {
-  // 使用 Schema 渲染模式
-  return (
-    <td {...restProps}>
-      {editing ? (
+  const fPattern = field?.["x-pattern"];
+  const fDisplay = field?.["x-display"];
+  const { hasEdit } = topProps?.config || {};
+  //编辑按钮权限
+  const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
+  let _editable = _hasEdit && editable && !(fPattern === "disabled" || fPattern === "readOnly" || fDisplay === "none");
+  if (!_editable) {
+    return <td {...restProps}>{children}</td>;
+  }
+  // 编辑中状态
+  if (editing) {
+    // 使用 Schema 渲染模式
+    return (
+      <td {...restProps}>
         <SchemaField
           schema={{
             type: "object",
@@ -51,11 +71,36 @@ export const EditableCell: React.FC<EditableCellProps> = ({
             },
           }}
         />
-      ) : (
-        children
-      )}
-    </td>
-  );
+      </td>
+    );
+  }
+  // 行内单元格编辑按钮
+  const showEditIcon = topProps.editBtnType === "cell";
+  if (showEditIcon) {
+    return (
+      <td {...restProps}>
+        <div
+          className="table-cell"
+          onDoubleClick={(e) => {
+            e?.preventDefault();
+            e?.stopPropagation();
+            onEdit(record);
+          }}
+        >
+          {children}
+          <EditOutlined
+            className="table-cell-edit-icon"
+            onClick={(e) => {
+              e?.preventDefault();
+              e?.stopPropagation();
+              onEdit(record);
+            }}
+          />
+        </div>
+      </td>
+    );
+  }
+  return <td {...restProps}>{children}</td>;
 };
 
 export const useEditTable = (props) => {
@@ -124,10 +169,11 @@ export const useEditTable = (props) => {
   };
 
   const mergedColumns = cloneDeep(columns)?.map((col) => {
-    if (!col.editable) {
+    const isActions = col.key === "_$actions";
+    if (!col.editable && !isActions) {
       return col;
     }
-    const isActions = col.key === "_$actions";
+
     const resCol = {
       ...col,
       onCell: (record: Item, ...args) => ({
@@ -137,7 +183,10 @@ export const useEditTable = (props) => {
         field: col.field,
         dataIndex: col.dataIndex,
         title: col.title,
+        editable: col.editable,
         editing: isActions ? false : isEditing(record),
+        topProps: props.topProps,
+        onEdit,
       }),
     };
     // 操作列编辑态改成保存、取消按钮

package/src/list-render.jsx

@@ -446,6 +446,7 @@ const ListRender = forwardRef(function (props, parentRef) {
           i18n={i18n}
           onEditSubmit={onEditSubmit}
           isEditTable={props.isEditTable}
+          topProps={props}
         />
       ) : null}
 

package/src/table-render/index.jsx

@@ -88,6 +88,9 @@ function TableRender(props) {
     onEdit: props.onEdit,
     onEditSubmit: props.onEditSubmit,
     formRender,
+    components: props.components,
+    schemaScope: props.schemaScope,
+    topProps: props.topProps,
   });
 
   useEffect(() => {
@@ -230,7 +233,6 @@ function TableRender(props) {
 
       columns.push({
         ..._colConf,
-        editable: isEditTable,
         title: "操作",
         key: "_$actions",
         render: getColRender(function (text, record, index) {
@@ -242,7 +244,9 @@ function TableRender(props) {
           }
 
           //编辑按钮权限
-          const _hasEdit = hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false;
+          const _hasEdit =
+            props.topProps.editBtnType !== "cell" &&
+            (hasEdit && typeof hasEdit === "function" ? hasEdit(record, index) : hasEdit !== false);
 
           //详情按钮权限
           const _hasDetail =
@@ -344,6 +348,7 @@ function TableRender(props) {
     expandable: config.expandable,
     loading: props.loading,
     onRow: config?.onRow,
+    topProps: props.topProps,
     ...props.tableProps,
   };
 

package/src/table-render/index.less

@@ -36,10 +36,15 @@
     text-overflow: ellipsis;
   }
 
+  .table-cell-edit-icon {
+    margin-left: 8px;
+    cursor: pointer;
+    color: var(--ant-primary-color, #1890ff);
+  }
 }
 
 .row-dragging {
-  background: #FFF;
+  background: #fff;
   border: 1px solid #ccc;
   display: flex;
   justify-content: space-between;
@@ -63,4 +68,4 @@
     margin-bottom: 8px;
     margin-left: 0 !important;
   }
-}
+}