@hzab/list-render 1.10.9 → 1.10.11

package/CHANGELOG.md

@@ -1,10 +1,18 @@
+# @hzab/list-render@1.10.11
+
+fix: 行内编辑统一onEdit获取数据，单元格编辑支持传入其他参数
+
+# @hzab/list-render@1.10.10
+
+fix: 解决 FormModal 与 DetailModal 相互影响的问题
+
 # @hzab/list-render@1.10.9
 
 fix: 行内编辑 解决 select 等表单项 focus 报错问题
 
 # @hzab/list-render@1.10.8
 
-feat: 行内编辑事件通过onEdit抛出 添加保存前自定义处理函数onEditReqVerify，返回Promise用于截断或正常执行
+feat: 行内编辑事件通过 onEdit 抛出 添加保存前自定义处理函数 onEditReqVerify，返回 Promise 用于截断或正常执行
 
 # @hzab/list-render@1.10.7
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.9",
+  "version": "1.10.11",
   "description": "",
   "main": "src",
   "scripts": {

package/src/DetailModal/index.jsx

@@ -18,7 +18,7 @@ function DetailModal(props, parentRef) {
     setOpen(true);
     // 处理 formRef.current 为 undefined 的问题
     setData(formData);
-    setTitle(title || '详情')
+    setTitle(title || "详情");
   }
 
   function close() {
@@ -34,10 +34,15 @@ function DetailModal(props, parentRef) {
     formRef,
   }));
 
+  // Hack: 解决 FormModal DetailModal 相互影响的问题
+  if (!open) {
+    return null;
+  }
+
   let footer = undefined;
   const options = {
     close,
-    form: formRef.current?.formRender,
+    formRef,
     scenario: "detail",
   };
   if (modalConf?.footer) {

package/src/FormModal/index.tsx

@@ -62,6 +62,11 @@ export function FormModal(props, parentRef) {
     formRef,
   }));
 
+  // Hack: 解决 FormModal DetailModal 相互影响的问题
+  if (!open) {
+    return null;
+  }
+
   function onOk() {
     validate().then(async () => {
       const submitForm = _.cloneDeep(await formRef.current?.formRender?.values);
@@ -111,7 +116,7 @@ export function FormModal(props, parentRef) {
     cancel: close,
     onOk,
     close,
-    form: formRef.current?.formRender,
+    formRef,
     validate,
     scenario: scenarioRef.current,
   };
@@ -177,7 +182,7 @@ export function FormModal(props, parentRef) {
   return (
     <CModal {..._modalProps}>
       {FormSlot ? (
-        <FormSlot {...props} formRef={formRef} scenario={scenarioRef.current} schema={props.schema?.schema} />
+        <FormSlot {...props} formRef={formRef} scenario={scenarioRef.current} schema={props.schema} />
       ) : (
         <FormRender
           {...props.formProps}

package/src/common/handleReactions.js

@@ -1,72 +1,72 @@
-import { cloneDeep } from "lodash";
-import { autorun, observable } from "@formily/reactive";
-import { getStateFunc } from "./formily-utils";
-
-/**
- * 处理自己添加的变量
- * @param {Array} fieldList
- * @param {Object} opt
- * @returns
- */
-export function handleReactions(fieldList, opt = {}) {
-  if (!Array.isArray(fieldList)) {
-    console.warn("Error handleReactions: fieldList not array");
-    return fieldList;
-  }
-  const resList = [];
-  cloneDeep(fieldList).forEach((item) => {
-    handleReaction(item, opt);
-    resList.push(item);
-  });
-  return resList;
-}
-
-/**
- * 处理自己添加的变量
- * @param {Object} fieldSchema
- * @param {Object} opt
- * @returns
- */
-export function handleReaction(fieldSchema, opt = {}) {
-  const { scope, formilyRef = {}, scenario } = opt || {};
-
-  const field = fieldSchema?.field || fieldSchema;
-  const { state, run } = field["x-reactions"]?.fulfill || {};
-  const args = {
-    scope,
-    // $deps,
-    $self: field,
-    $effect: autorun.effect,
-    // $form: $form,
-    // $values: $values,
-    $observable: observable,
-    $memo: autorun.memo,
-    $props: {
-      // formilyRef.current.fields  formilyRef.current.fieldSchemas
-      formilyRef,
-    },
-  };
-
-  // 自身变量
-  if (field.inTable) {
-    const inTableEffectFn = getStateFunc(field.inTable, args);
-    if (inTableEffectFn) {
-      const inTable = inTableEffectFn(args);
-      field.inTable = inTable;
-    }
-  }
-
-  // 属性响应器
-  if (state) {
-  }
-
-  // 动作响应器
-  // if (run) {
-  //   getFunc(run)(args);
-  // }
-
-  if (field.visible === false) {
-    return field;
-  }
-  return field;
-}
+import { cloneDeep } from "lodash";
+import { autorun, observable } from "@formily/reactive";
+import { getStateFunc } from "./formily-utils";
+
+/**
+ * 处理自己添加的变量
+ * @param {Array} fieldList
+ * @param {Object} opt
+ * @returns
+ */
+export function handleReactions(fieldList, opt = {}) {
+  if (!Array.isArray(fieldList)) {
+    console.warn("Error handleReactions: fieldList not array");
+    return fieldList;
+  }
+  const resList = [];
+  cloneDeep(fieldList).forEach((item) => {
+    handleReaction(item, opt);
+    resList.push(item);
+  });
+  return resList;
+}
+
+/**
+ * 处理自己添加的变量
+ * @param {Object} fieldSchema
+ * @param {Object} opt
+ * @returns
+ */
+export function handleReaction(fieldSchema, opt = {}) {
+  const { scope, formilyRef = {}, scenario } = opt || {};
+
+  const field = fieldSchema?.field || fieldSchema;
+  const { state, run } = field["x-reactions"]?.fulfill || {};
+  const args = {
+    scope,
+    // $deps,
+    $self: field,
+    $effect: autorun.effect,
+    // $form: $form,
+    // $values: $values,
+    $observable: observable,
+    $memo: autorun.memo,
+    $props: {
+      // formilyRef.current.fields  formilyRef.current.fieldSchemas
+      formilyRef,
+    },
+  };
+
+  // 自身变量
+  if (field.inTable) {
+    const inTableEffectFn = getStateFunc(field.inTable, args);
+    if (inTableEffectFn) {
+      const inTable = inTableEffectFn(args);
+      field.inTable = inTable;
+    }
+  }
+
+  // 属性响应器
+  if (state) {
+  }
+
+  // 动作响应器
+  // if (run) {
+  //   getFunc(run)(args);
+  // }
+
+  if (field.visible === false) {
+    return field;
+  }
+  return field;
+}

package/src/components/Formily/FormilyEditTable.tsx

@@ -27,7 +27,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   index: number;
   editable: boolean;
   onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string, opt: Object) => void;
-  onSave: () => void;
+  onSave: (field: { type: string; name: string }) => void;
   onCancel: () => void;
   topProps: {
     config: { hasEdit: boolean | Function };
@@ -100,7 +100,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
           />
           {editMode !== "line" ? (
             <div className="cell-editing-actions">
-              <CheckOutlined className="table-cell-confirm-icon" onClick={onSave} />
+              <CheckOutlined className="table-cell-confirm-icon" onClick={() => onSave(field)} />
               <CloseOutlined className="table-cell-cancel-icon" onClick={onCancel} />
             </div>
           ) : null}
@@ -195,13 +195,20 @@ export const useEditTable = (props) => {
   const onEdit = async (record: Partial<Item> & { key: React.Key }, key, opt = { fieldRef: null }) => {
     const { fieldRef } = opt || {};
     editingFiledRef.current = fieldRef;
-
-    // const value = await (props.onEdit && props.onEdit(record));
     formRender?.setValues(record);
     setEditingId(record[idKey]);
     setEditingKey(key);
   };
 
+  /**
+   * 点击编辑按钮
+   * @param record
+   */
+  const onEditAFetch = async (record: Partial<Item> & { key: React.Key }, ...args) => {
+    const value = await (props.onEdit && props.onEdit(record));
+    onEdit.call(this, value, ...args);
+  };
+
   const onCancel = () => {
     setEditingId("");
     setEditingKey("");
@@ -211,11 +218,11 @@ export const useEditTable = (props) => {
   /**
    * 保存数据
    */
-  const onSave = async () => {
+  const onSave = async (field) => {
     try {
       // 点击保存，数据抛出
       (await formRender?.validate()) as Item;
-      onEditSubmit && (await onEditSubmit(formRender.values));
+      onEditSubmit && (await onEditSubmit(formRender.values, { field } ));
       // 清除编辑目标
       setEditingId("");
       setEditingKey("");
@@ -246,7 +253,7 @@ export const useEditTable = (props) => {
           ? isEditing(record) && isEditingCell(col.dataIndex)
           : isEditing(record),
         topProps: props.topProps,
-        onEdit,
+        onEdit: onEditAFetch,
         onSave,
         onCancel,
       }),
@@ -274,6 +281,7 @@ export const useEditTable = (props) => {
   });
 
   return {
+    onEditAFetch,
     onEdit,
     SchemaField,
     mergedColumns,

package/src/list-render.jsx

@@ -70,7 +70,6 @@ const ListRender = forwardRef(function (props, parentRef) {
   const [total, setTotal] = useState(0);
   const [list, setList] = useState([]);
   const [formState, setFormState] = useState("");
-  const [rowId, setRowId] = useState(0);
   const [listLoading, setListLoading] = useState(false);
   const formModalRef = useRef();
   const detailModalRef = useRef();
@@ -329,14 +328,11 @@ const ListRender = forwardRef(function (props, parentRef) {
   }
 
   function handleDetail(data, id) {
-    setRowId(id);
     let title = data[modalConf?.title?.detailKey] || modalConf?.title?.detailText || "详情";
     detailModalRef.current.show(data, title);
   }
 
   function onEdit(row, idx) {
-    //编辑的时候提前存id和状态
-    setRowId(row[idKey]);
     setFormState("edit");
 
     if (props.fetchOnEdit !== false) {
@@ -367,24 +363,27 @@ const ListRender = forwardRef(function (props, parentRef) {
 
   function handleEdit(data, id) {
     const { editMode = "modal" } = props;
-    const isEditTable = editMode !== "modal";
-    if (isEditTable) {
+    // 整行编辑的模式下列表数据回填
+    if (editMode == "line") {
       return tableRef.current.onEditByTable(data, id);
     }
-    let title = data[modalConf?.title?.editKey] || modalConf?.title?.editText || "编辑";
-    formModalRef.current.show(data, title, "edit");
+    if (editMode === "modal") {
+      let title = data[modalConf?.title?.editKey] || modalConf?.title?.editText || "编辑";
+      formModalRef.current.show(data, title, "edit");
+    }
   }
 
-  async function onEditSubmit(data) {
+  async function onEditSubmit(data, opt) {
     let _data = data;
     if (isPatchUpdate) {
       if (model?.patchMap === "function") {
-        _data = model.patchMap(data);
+        _data = model.patchMap(data, opt);
       }
     } else if (typeof model?.updateMap === "function") {
-      _data = model.updateMap(data);
+      _data = model.updateMap(data, opt);
     }
 
+    // 行内编辑确认前的校验
     if (props.onEditReqVerify) {
       await props.onEditReqVerify(_data);
     }
@@ -394,7 +393,7 @@ const ListRender = forwardRef(function (props, parentRef) {
     }
     const request = isPatchUpdate ? model?.patch : model?.update;
     return request
-      .bind(model)(_data, { id: rowId })
+      .bind(model)(_data, { id: data[idKey] })
       .then((res) => {
         getList();
         message.success(res?._message || "编辑成功");

package/src/table-render/index.jsx

@@ -283,10 +283,6 @@ const TableRender = forwardRef(function (props, tableRef) {
                 <Button
                   type="link"
                   onClick={() => {
-                    // // 可编辑表格使用对应回调
-                    // if (isEditTable) {
-                    //   return onEditByTable && onEditByTable(record, index);
-                    // }
                     props.onEdit && props.onEdit(record, index);
                   }}
                 >