@hzab/list-render 1.10.7 → 1.10.8

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/list-render@1.10.8
+
+feat: 行内编辑事件通过onEdit抛出 添加保存前自定义处理函数onEditReqVerify，返回Promise用于截断或正常执行
+
 # @hzab/list-render@1.10.7
 
 fix: 去除 调试 log

package/README.md

@@ -104,6 +104,7 @@ const listDM = useMemo(
 | editMode                    | modal/line/line-cell/cell | 否   | modal                                  | 编辑模式： modal 弹窗/抽屉编辑; line 编辑整行，编辑按钮在操作列; line-cell 编辑整行，操作按钮在单元格; cell 编辑指定单元格 |
 | appendUrlQuery              | boolean                   | 否   | true                                   | 筛选条件改变时是否将参数（对象形式）设置到 url query 中                                                                    |
 | appendUrlQueryKey           | string                    | 否   | URL_PARAM_NAME = "defaultSearchParams" | 自定义设置 url query 对象参数的 key                                                                                        |
+| onEditReqVerify             | Function                  | 否   | -                                      | 编辑态保存时额外的规则校验函数，返回Promise的resolve或reject用于继续执行或停止执行
 
 - fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
 

package/package.json

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

package/src/components/Formily/FormilyEditTable.tsx

@@ -193,8 +193,8 @@ export const useEditTable = (props) => {
     const { fieldRef } = opt || {};
     editingFiledRef.current = fieldRef;
 
-    const value = await (props.onEdit && props.onEdit(record));
-    formRender?.setValues(value);
+    // const value = await (props.onEdit && props.onEdit(record));
+    formRender?.setValues(record);
     setEditingId(record[idKey]);
     setEditingKey(key);
   };
@@ -212,7 +212,7 @@ export const useEditTable = (props) => {
     try {
       // 点击保存，数据抛出
       (await formRender?.validate()) as Item;
-      onEditSubmit && onEditSubmit(formRender.values);
+      onEditSubmit && await onEditSubmit(formRender.values);
       // 清除编辑目标
       setEditingId("");
       setEditingKey("");

package/src/list-render.jsx

@@ -81,6 +81,7 @@ const ListRender = forwardRef(function (props, parentRef) {
   const useFormData = _useFormData ?? dialogConf.useFormData ?? modalConf?.useFormData;
   const getListSourceRef = useRef();
   const [showSearch, setShowSearch] = useState(true);
+  const tableRef = useRef({});
 
   useImperativeHandle(parentRef, () => ({
     getList,
@@ -334,8 +335,6 @@ const ListRender = forwardRef(function (props, parentRef) {
   }
 
   function onEdit(row, idx) {
-    const { editMode = "modal" } = props;
-    const isEditTable = editMode !== "modal";
     //编辑的时候提前存id和状态
     setRowId(row[idKey]);
     setFormState("edit");
@@ -351,7 +350,7 @@ const ListRender = forwardRef(function (props, parentRef) {
         .get(getQuery)
         .then((res) => {
           // 解决非弹窗编辑模式触发弹窗问题
-          !isEditTable && handleEdit(res, row[idKey]);
+          handleEdit(res, row[idKey]);
           return res;
         })
         .catch((err) => {
@@ -361,12 +360,17 @@ const ListRender = forwardRef(function (props, parentRef) {
         });
     } else {
       // 解决非弹窗编辑模式触发弹窗问题
-      !isEditTable && handleEdit(row, row[idKey]);
+      handleEdit(row, row[idKey]);
       return Promise.resolve(row);
     }
   }
 
   function handleEdit(data, id) {
+    const { editMode = "modal" } = props;
+    const isEditTable = editMode !== "modal";
+    if (isEditTable) {
+      return tableRef.current.onEditByTable(data, id);
+    }
     let title = data[modalConf?.title?.editKey] || modalConf?.title?.editText || "编辑";
     formModalRef.current.show(data, title, "edit");
   }
@@ -381,6 +385,10 @@ const ListRender = forwardRef(function (props, parentRef) {
       _data = model.updateMap(data);
     }
 
+    if (props.onEditReqVerify) {
+      await props.onEditReqVerify(_data);
+    }
+
     if (useFormData) {
       _data = objToFormData(_data);
     }
@@ -489,6 +497,7 @@ const ListRender = forwardRef(function (props, parentRef) {
       {layout === "default" ? (
         <TableRender
           idKey={idKey}
+          ref={tableRef}
           schema={schema?.schema}
           list={list}
           config={props.tableConf}

package/src/table-render/index.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo, useRef } 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";
@@ -22,7 +22,7 @@ import "./index.less";
 
 const scenario = "table-render";
 
-function TableRender(props) {
+const TableRender = forwardRef(function (props, tableRef) {
   const { topProps, config = {}, query = {}, i18n, setList } = props;
   const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
   const {
@@ -37,6 +37,9 @@ function TableRender(props) {
   } = config || {};
   const { editMode = "modal" } = topProps || {};
   const isEditTable = editMode !== "modal";
+  useImperativeHandle(tableRef, () => ({
+    onEditByTable,
+  }));
 
   const [columns, setColumns] = useState([]);
   const [columnList, setColumnList] = useState([]);
@@ -280,10 +283,10 @@ function TableRender(props) {
                 <Button
                   type="link"
                   onClick={() => {
-                    // 可编辑表格使用对应回调
-                    if (isEditTable) {
-                      return onEditByTable && onEditByTable(record, index);
-                    }
+                    // // 可编辑表格使用对应回调
+                    // if (isEditTable) {
+                    //   return onEditByTable && onEditByTable(record, index);
+                    // }
                     props.onEdit && props.onEdit(record, index);
                   }}
                 >
@@ -438,6 +441,6 @@ function TableRender(props) {
       />
     </div>
   );
-}
+});
 
 export default TableRender;