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

package/CHANGELOG.md

@@ -1,6 +1,34 @@
 # @hzab/list-render@1.10.0
 
-feat: 表单、分页参数变化时设置到url query，首次进入页面时会使用url query中的参数进行回显、请求
+feat: 支持行内编辑编辑 isEditTable
+
+# @hzab/list-render@1.9.16
+
+fix: modal 弹窗标题支持配置
+
+# @hzab/list-render@1.9.15
+
+fix: components 改为外部可配置
+
+# @hzab/list-render@1.9.14
+
+fix: 拖动列添加 fixed
+
+# @hzab/list-render@1.9.13
+
+fix: 首次自动请求 onSearch 入参添加 queryFormInitialValues
+
+# @hzab/list-render@1.9.12
+
+fix: table 添加拖拽排序
+
+# @hzab/list-render@1.9.11
+
+fix: 修复 model query 被污染 2
+
+# @hzab/list-render@1.9.10
+
+fix: 修复 model query 被污染
 
 # @hzab/list-render@1.9.9
 

package/README.md

@@ -49,60 +49,59 @@ const listDM = useMemo(
 
 ### InfoPanel Attributes
 
-| 属性名称                    | 属性类型             | 必须  | 默认值          | 描述                                                                                                           |
-| --------------------------- |------------------|-----| --------------- | -------------------------------------------------------------------------------------------------------------- |
+| 属性名称                    | 属性类型         | 必须 | 默认值          | 描述                                                                                                           |
+| --------------------------- | ---------------- | ---- | --------------- | -------------------------------------------------------------------------------------------------------------- |
 | layout                      | string           | 否   | default         | 列表渲染类型格式                                                                                               |
 | className                   | string           | 否   | -               | 外层 div className                                                                                             |
 | idKey                       | string           | 否   | id              | 唯一值字段的 key                                                                                               |
 | schema                      | Object           | 是   | -               | 字段描述文件，包含各个字段的信息                                                                               |
 | model                       | Object           | 是   | -               | 数据模型，包含 CURD 接口信息，传入 DataModel 的实例                                                            |
 | isPatchUpdate               | boolean          | 否   | false           | 编辑提交接口是否使用 patch 发起请求                                                                            |
-| list                        | Array            |     | -               | 本地数据源                                                                                                     |
-| closeAutoRequest            | Boolean          |     | false           | 是否关闭加载完毕后自动发起请求。true 时组件 didMount 不自动发起请求                                            |
-| hasQuery                    | Boolean          |     | true            | 是否包含搜索、筛选框、搜索按钮等                                                                               |
-| verticalHeader              | Boolean          |     | false           | 搜索项和新增按钮是否处于不同的行等                                                                             |
-| search                      | String           |     | -               | 传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符                 |
-| filters                     | Array            |     | []              | 字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用）       |
-| queryConf                   | Object           |     | {}              | 设置 query 参数的 key                                                                                          |
-| createText                  | String/ReactNote |     | 新增            | 新增按钮文案                                                                                                   |
-| hasCreate                   | Boolean          |     | true            | 是否显示新增按钮                                                                                               |
-| hasAction                   | Boolean          |     | true            | 是否在表格的最右增加一个“操作”列；hasAction 为 true 时，下面的 hasEdit/hasDel 才会生效                         |
-| hasEdit                     | Boolean/Function |     | true            | 是否显示编辑按钮，可传入回调控制当前行是否显示                                                                 |
-| hasDel                      | Boolean/Function |     | true            | 是否显示删除按钮，可传入回调控制当前行是否显示                                                                 |
-| hasDetail                   | Boolean/Function |     | true            | 是否显示详情按钮，可传入回调控制当前行是否显示                                                                 |
-| hasDelTips                  | String/Function  |     | "确认删除该项?" | 删除按钮自定义提示，可传入回调根据当前行数据显示对应提示                                                       |
-| tableConf                   | Object           |     | {}              | Table 相关配置                                                                                                 |
-| tableProps                  | Object           |     | {}              | 直接传给 Table 的 props，相关 API 可直接参考 antd table 组件                                                   |
-| cardConf                    | Object           |     | {}              | Card 相关配置                                                                                                  |
-| cardProps                   | Object           |     | {}              | 直接传给 cardRender 的 props，因内部渲染使用的的是详情组件，相关 API 可直接参考 @hzab/schema-descriptions 组件 |
-| fetchOnEdit                 | Boolean          |     | true            | 展示编辑弹框时，是否会调用一次详情接口进行回填；若为 false，则会使用表格列表接口返回的 row 数据进行回填        |
-| fetchById                   | Boolean          |     | true            | 编辑中的详情请求，是否使用 id 作为入参的 key                                                                   |
-| modalMode                   | string           |     | dialog          | 新增/编辑表单、详情 展示模式： dialog drawer                                                                   |
-| modalConf                   | Object           |     | {}              | modal/Drawer 配置对象                                                                                          |
-| modalDetailProps            | Object           |     | {}              | modal descriptions 配置对象                                                                                    |
-| modalFormProps              | Object           |     | {}              | modal/drawer fromRender 配置对象                                                                               |
-| modalProps                  | Object           |     | {}              | modal/drawer 配置对象                                                                                          |
-| schemaScope                 | Object           |     | {}              | formRender schemaScope props                                                                                   |
-| components                  | Object           |     | {}              | formRender components props 自定义组件                                                                         |
-| detailComponents            | Object           |     | {}              | descriptions components props 自定义组件                                                                       |
-| hasPagination               | Boolean          |     | true            | 是否显示分页                                                                                                   |
-| paginationConf              | Object           |     | {}              | 可自定义 Pagination props，进行 pagination 相关设置                                                            |
-| formInitialValues           | Object           |     | {}              | 给新增、编辑对话框中的表单增加默认值                                                                           |
-| Slots                       | Object           |     | {}              | 组件插槽                                                                                                       |
-| getFieldListOpt             | Object           |     | {}              | getFieldList opt 参数                                                                                          |
-| onGetListEnd                | Function         |     | -               | 请求列表成功返回的回调                                                                                         |
-| onCreateSuc                 | Function         |     | -               | 新增成功返回的回调                                                                                             |
-| onEditSuc                   | Function         |     | -               | 编辑成功返回的回调                                                                                             |
-| onDelSuc                    | Function         |     | -               | 删除成功返回的回调                                                                                             |
-| onFormModalClose            | Function         |     | -               | 表单弹窗关闭回调                                                                                               |
-| modalFormMount              | Function         |     | -               | 新增、编辑弹窗 Form 渲染完成回调                                                                               |
-| msgConf                     | Object           |     | {}              | 新增、编辑、删除、列表查询，详情查询的报错 msg 提示设置                                                        |
-| i18n                        | Object           |     | {}              | 文案配置                                                                                                       |
-| queryFormInitialValues      | Object           |     | {}              | 列表上方查询 Form 默认值                                                                                       |
-| queryFormIsExtendModelQuery | Boolean          |     | false           | 列表上方查询 Form 默认值是否继承 data-model.query 置                                                           |
+| list                        | Array            |      | -               | 本地数据源                                                                                                     |
+| closeAutoRequest            | Boolean          |      | false           | 是否关闭加载完毕后自动发起请求。true 时组件 didMount 不自动发起请求                                            |
+| hasQuery                    | Boolean          |      | true            | 是否包含搜索、筛选框、搜索按钮等                                                                               |
+| verticalHeader              | Boolean          |      | false           | 搜索项和新增按钮是否处于不同的行等                                                                             |
+| search                      | String           |      | -               | 传入空字符串时，不包含搜索框；传入非空字符串时，显示搜索框，同时传入的字符串作为搜索框的占位符                 |
+| filters                     | Array            |      | []              | 字符串数组，可以包含要筛选的字段 key 值（schema 中的 name），或者字符串 '$timerange'（时间范围筛选专用）       |
+| queryConf                   | Object           |      | {}              | 设置 query 参数的 key                                                                                          |
+| createText                  | String/ReactNote |      | 新增            | 新增按钮文案                                                                                                   |
+| hasCreate                   | Boolean          |      | true            | 是否显示新增按钮                                                                                               |
+| hasAction                   | Boolean          |      | true            | 是否在表格的最右增加一个“操作”列；hasAction 为 true 时，下面的 hasEdit/hasDel 才会生效                         |
+| hasEdit                     | Boolean/Function |      | true            | 是否显示编辑按钮，可传入回调控制当前行是否显示                                                                 |
+| hasDel                      | Boolean/Function |      | true            | 是否显示删除按钮，可传入回调控制当前行是否显示                                                                 |
+| hasDetail                   | Boolean/Function |      | true            | 是否显示详情按钮，可传入回调控制当前行是否显示                                                                 |
+| hasDelTips                  | String/Function  |      | "确认删除该项?" | 删除按钮自定义提示，可传入回调根据当前行数据显示对应提示                                                       |
+| tableConf                   | Object           |      | {}              | Table 相关配置                                                                                                 |
+| tableProps                  | Object           |      | {}              | 直接传给 Table 的 props，相关 API 可直接参考 antd table 组件                                                   |
+| cardConf                    | Object           |      | {}              | Card 相关配置                                                                                                  |
+| cardProps                   | Object           |      | {}              | 直接传给 cardRender 的 props，因内部渲染使用的的是详情组件，相关 API 可直接参考 @hzab/schema-descriptions 组件 |
+| fetchOnEdit                 | Boolean          |      | true            | 展示编辑弹框时，是否会调用一次详情接口进行回填；若为 false，则会使用表格列表接口返回的 row 数据进行回填        |
+| fetchById                   | Boolean          |      | true            | 编辑中的详情请求，是否使用 id 作为入参的 key                                                                   |
+| modalMode                   | string           |      | dialog          | 新增/编辑表单、详情 展示模式： dialog drawer                                                                   |
+| modalConf                   | Object           |      | {}              | modal/Drawer 配置对象                                                                                          |
+| modalDetailProps            | Object           |      | {}              | modal descriptions 配置对象                                                                                    |
+| modalFormProps              | Object           |      | {}              | modal/drawer fromRender 配置对象                                                                               |
+| modalProps                  | Object           |      | {}              | modal/drawer 配置对象                                                                                          |
+| schemaScope                 | Object           |      | {}              | formRender schemaScope props                                                                                   |
+| components                  | Object           |      | {}              | formRender components props 自定义组件                                                                         |
+| detailComponents            | Object           |      | {}              | descriptions components props 自定义组件                                                                       |
+| hasPagination               | Boolean          |      | true            | 是否显示分页                                                                                                   |
+| paginationConf              | Object           |      | {}              | 可自定义 Pagination props，进行 pagination 相关设置                                                            |
+| formInitialValues           | Object           |      | {}              | 给新增、编辑对话框中的表单增加默认值                                                                           |
+| Slots                       | Object           |      | {}              | 组件插槽                                                                                                       |
+| getFieldListOpt             | Object           |      | {}              | getFieldList opt 参数                                                                                          |
+| onGetListEnd                | Function         |      | -               | 请求列表成功返回的回调                                                                                         |
+| onCreateSuc                 | Function         |      | -               | 新增成功返回的回调                                                                                             |
+| onEditSuc                   | Function         |      | -               | 编辑成功返回的回调                                                                                             |
+| onDelSuc                    | Function         |      | -               | 删除成功返回的回调                                                                                             |
+| onFormModalClose            | Function         |      | -               | 表单弹窗关闭回调                                                                                               |
+| modalFormMount              | Function         |      | -               | 新增、编辑弹窗 Form 渲染完成回调                                                                               |
+| msgConf                     | Object           |      | {}              | 新增、编辑、删除、列表查询，详情查询的报错 msg 提示设置                                                        |
+| i18n                        | Object           |      | {}              | 文案配置                                                                                                       |
+| queryFormInitialValues      | Object           |      | {}              | 列表上方查询 Form 默认值                                                                                       |
+| queryFormIsExtendModelQuery | Boolean          |      | false           | 列表上方查询 Form 默认值是否继承 data-model.query 置                                                           |
 | useFormData                 | boolean          | 否   |                 | 是否使用 form data 提交数据                                                                                    |
-| appendUrlQuery                 | boolean          | 否 |      true           | 筛选条件改变时是否将参数（对象形式）设置到url query中                                                                                   |
-| appendUrlQueryKey                 | string           | 否 |         URL_PARAM_NAME = "defaultSearchParams"        | 自定义设置url query对象参数的key                                                                                    |
+| isEditTable                 | boolean          | 否   |                 | 是否行内编辑表格                                                                                               |
 
 - fetchOnEdit 展示编辑弹框时，是否会调用一次详情接口进行回填（某些场景下，列表接口只返回部分部分字段，只有详情接口会返回全部字段）；若为 false，则会使用表格列表接口返回的 row 数据进行回填
 
@@ -119,6 +118,9 @@ const listDM = useMemo(
 | orderColWidth    | string/number |      | -         | 序号列 width 的参数                                                                          |
 | tableEmptyValue  | string/number |      | undefined | table 列表空值展示数                                                                         |
 | isTableSortXIdex | Boolean       |      | undefined | table 列表列排序是否按照 x-index 排序                                                        |
+| dragColConf      | Object        |      | undefined | 拖拽列的配置                                                                                 |
+| isDargTable      | Boolean       |      | undefined | 是否开启表格拖拽排序                                                                         |
+| dargEndBack      | function      |      | undefined | 拖拽结束后返回表格数据                                                                       |
 
 ##### tableConf.colConf[xxx]
 
@@ -155,6 +157,29 @@ const listDM = useMemo(
 | queryMap          | Function                                  |      | -                                 | query 数据提交前的处理函数                                                                    |
 | beforeQuerySearch | Function ｜ Promise\<boolean>             |      | -                                 | 点击搜索按钮前触发的函数                                                                      |
 
+#### modalConf |
+
+| 属性名称     | 属性类型      | 必须 | 默认值 | 描述                                            |
+| ------------ | ------------- | ---- | ------ | ----------------------------------------------- |
+| width        | number/string | 否   | 720    | 弹窗宽度                                        |
+| okText       | string        | 否   |        | 弹窗底部确定按钮文案                            |
+| cancelText   | string        | 否   |        | 弹窗底部取消按钮文案                            |
+| footer       | Array         | 否   |        | 自定义弹窗底部按钮                              |
+| beforeSubmit | Function      | 否   |        | 提交前的回调， return false; 表示拦截，不进行请 |
+| 求。         |
+| title        | Object        | 否   |        | 配置弹窗标题                                    |
+
+#### modalConf.title
+
+| 属性名称   | 属性类型 | 必须 | 默认值 | 描述                                           |
+| ---------- | -------- | ---- | ------ | ---------------------------------------------- |
+| createText | string   | 否   |        | 新增弹窗标题                                   |
+| createKey  | string   | 否   |        | 新增弹窗标题 key,取自初始值 formInitialValues  |
+| editText   | string   | 否   |        | 编辑弹窗标题                                   |
+| editKey    | string   | 否   |        | 编辑弹窗标题 key,取自当前选中行的 key 的对应值 |
+| detailText | string   | 否   |        | 详情弹窗标题                                   |
+| detailKey  | string   | 否   |        | 详情弹窗标题 key,取自当前选中行的 key 的对应值 |
+
 #### model
 
 | 属性名称 | 属性类型 | 必须 | 默认值 | 描述         |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.0-beta1",
+  "version": "1.10.0-beta4",
   "description": "",
   "main": "src",
   "scripts": {
@@ -24,6 +24,7 @@
     "@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/webpack-config": "^0.7.2",
     "@types/react": "^17.0.62",
@@ -31,6 +32,8 @@
     "antd": "^4.24.12",
     "axios": "^1.4.0",
     "eslint": "^8.30.0",
+    "mobx": "^6.7.0",
+    "mobx-react": "^7.6.0",
     "less": "^4.1.3",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
@@ -55,5 +58,9 @@
   },
   "directories": {
     "lib": "lib"
+  },
+  "dependencies": {
+    "array-move": "^4.0.0",
+    "react-sortable-hoc": "^2.0.0"
   }
 }

package/src/DetailModal/index.jsx

@@ -11,11 +11,14 @@ function DetailModal(props, parentRef) {
   const { modalMode, Slots = {}, modalConf = {}, modalProps = {} } = props;
   const [open, setOpen] = useState(false);
   const [data, setData] = useState({});
+  const [title, setTitle] = useState("详情");
+
   const formRef = useRef();
-  function show(formData = props.formInitialValues) {
+  function show(formData = props.formInitialValues, title) {
     setOpen(true);
     // 处理 formRef.current 为 undefined 的问题
     setData(formData);
+    setTitle(title || '详情')
   }
 
   function close() {
@@ -72,7 +75,7 @@ function DetailModal(props, parentRef) {
   const _modalProps = {
     className: "detail-modal",
     wrapClassName: "detail-modal",
-    title: "详情",
+    title: title,
     visible: open,
     open: open,
     onClose: close,

package/src/common/handleQuerySchema.ts

@@ -1,61 +1,6 @@
 import _ from "lodash";
 import { getFieldMap } from "./utils";
 import { isRunStr, handleSchemaStrVal, isScopeKey as formIsScopeKey, getScopeKeyVal } from '@hzab/form-render/src/common/schema-handler';
-import { URL_PARAM_NAME } from "./constant";
-
-// ===================== 类型定义 =====================
-
-type AntdDateComponent = 'DatePicker' | 'DatePicker.RangePicker';
-
-interface XComponentProps {
-  isSplitTimes?: boolean;
-  startKey?: string;
-  endKey?: string;
-  [k: string]: unknown;
-}
-
-interface FormilyField {
-  type?: string;
-  title?: string;
-  'x-decorator'?: string;
-  'x-component'?: string;
-  'x-validator'?: unknown[];
-  'x-component-props'?: XComponentProps;
-  'x-decorator-props'?: Record<string, unknown>;
-  'x-designable-id'?: string;
-  'x-index'?: number;
-  [k: string]: unknown;
-}
-
-interface FormilyV1SchemaNode {
-  type?: string;
-  properties?: Record<string, FormilyField>;
-  [k: string]: unknown;
-}
-
-interface FormilyV1Schema {
-  form?: Record<string, unknown>;
-  schema: FormilyV1SchemaNode;
-}
-
-type URLQueryObject = Record<string, any> | null | undefined;
-
-interface ExtractOptions {
-  /** 分拆开关字段名，位于 x-component-props；默认 'isSplitTimes' */
-  splitFlag?: string;
-  /** 分拆开关的期望值；默认 true */
-  splitFlagExpectedValue?: unknown;
-  /** 默认开始/结束键名（当 schema 未显式配置时），默认 'startTime' / 'endTime' */
-  defaultStartKey?: string;
-  defaultEndKey?: string;
-  /** 认为是 antd 日期组件的名单，默认 DatePicker / DatePicker.RangePicker */
-  antdDateComponents?: readonly AntdDateComponent[];
-  /**
-   * 命中并成功赋值后，是否从返回对象中删除对应的 startKey / endKey
-   * 默认 true（删除）
-   */
-  removeMatchedKeys?: boolean;
-}
 
 export const handleQuerySchema = (opt) => {
   const { schema, search, filters, onSearch, replaceComList, schemaScope } = opt || {};
@@ -354,174 +299,4 @@ export const getValByScope = (strKey, schemaScope = {}) => {
   }
 };
 
-/**
- * 将对象序列化后写入 URL query 中
- * @param obj 要存储的对象（保持原始类型）
- * @param paramName query 参数名
- */
-export function setURLObjectQueryParam<T extends object>(obj: T, paramName = URL_PARAM_NAME): void {
-  try {
-    if (typeof window === "undefined") return;
-
-    const href = window.location.href;
-    const [origin, hash = ""] = href.split("#");
-    const [path, queryString = ""] = hash.split("?");
-    const searchParams = new URLSearchParams(queryString);
-    const encoded = encodeURIComponent(JSON.stringify(obj));
-
-    searchParams.set(paramName, encoded);
-
-    const newHash = `${path}?${searchParams.toString()}`;
-
-    window.history.replaceState({}, "", `${origin}#${newHash}`);
-  } catch (e) {
-    console.error(`[setURLObjectQueryParam] 设置失败:`, e);
-  }
-}
-
-/**
- * 从当前URL中删除指定的查询参数（不刷新页面）
- * 专门处理哈希路由中的查询参数
- * @param key 要删除的查询参数名称
- */
- export function removeURLObjectQueryParam(key: string): void {
-  if (typeof window === "undefined") return;
-
-  try {
-    const href = window.location.href;
-    const [origin, hash = ""] = href.split("#");
-    const [hashPath, queryString = ""] = hash.split("?");
-    const searchParams = new URLSearchParams(queryString);
-
-    searchParams.delete(key);
-
-    // 重建哈希部分
-    let newHash = hashPath;
-    if (searchParams.toString()) {
-      newHash += `?${searchParams.toString()}`;
-    }
-
-    const newUrl = `${origin}${newHash ? `#${newHash}` : ''}`;
-
-    window.history.replaceState({}, "", newUrl);
-  } catch (e) {
-    console.error(`[removeURLObjectQueryParam] 删除失败:`, e);
-  }
-}
-/**
- * 从 URL 中解析序列化的对象
- * @param paramName query 参数名
- * @returns 还原的对象（如果不存在返回 null）
- */
-export function getURLObjectQueryParam<T = any>(paramName = URL_PARAM_NAME): T | Record<string, any> {
-  // 返回空对象是为了防止在合并对象时报错导致页面空白
-  if (typeof window === "undefined") return {};
-
-  const href = window.location.href;
-  const [, hash = ""] = href.split("#");
-  const [, queryString = ""] = hash.split("?");
-  const searchParams = new URLSearchParams(queryString);
-  const encoded = searchParams.get(paramName);
-
-  if (!encoded) return null;
-
-  try {
-    return JSON.parse(decodeURIComponent(encoded)) as T;
-  } catch (e) {
-    console.error(`[getURLObjectQueryParam] 解析失败:`, e);
-    return {};
-  }
-}
-
-
-// ===================== 辅助函数 =====================
-
-const pickFormilyProperties = (schema: FormilyV1Schema): Record<string, FormilyField> =>
-  (schema?.schema?.properties ?? {});
-
-const isAntdDateComponent = (comp: unknown, whitelist: readonly string[]) =>
-  typeof comp === 'string' && whitelist.includes(comp);
-
-const filterKeys = (props: Record<string, FormilyField>, filters: readonly string[]) => {
-  const filterSet = new Set(filters);
-  return Object.entries(props).filter(([k]) => filterSet.has(k));
-};
-
-const matchSplitFlag = (field: FormilyField, splitFlag: string, expected: unknown) =>
-  field?.['x-component-props']?.[splitFlag] === expected;
-
-/** 两个值都缺失则返回 undefined；否则返回二元组 */
-const getRangeTupleOrUndefined = (
-  urlObj: URLQueryObject,
-  startKey: string,
-  endKey: string
-): [any, any] | undefined => {
-  const obj = (urlObj ?? {}) as Record<string, any>;
-  const hasStart = Object.prototype.hasOwnProperty.call(obj, startKey);
-  const hasEnd = Object.prototype.hasOwnProperty.call(obj, endKey);
-  if (!hasStart && !hasEnd) return undefined;
-  return [obj[startKey], obj[endKey]];
-};
-
-// ===================== 主函数 =====================
-/**
- * 根据formilySchema配置逆解析表单key并将url query赋值
- * 三层筛选：根据filters + splitFlag + antdDateComponents 提取formilySchema配置项然后通过配置的key赋值并返回
- * */
-export function extractSplitDateRanges(
-  filters: string[],
-  formilySchema: FormilyV1Schema,
-  urlObj: URLQueryObject,
-  options: ExtractOptions = {}
-): Record<string, any> {
-  const {
-    splitFlag = 'isSplitTimes',
-    splitFlagExpectedValue = true,
-    defaultStartKey = 'startTime',
-    defaultEndKey = 'endTime',
-    antdDateComponents = ['DatePicker', 'DatePicker.RangePicker'],
-    removeMatchedKeys = true,
-  } = options;
-
-  const properties = pickFormilyProperties(formilySchema);
-  const candidates = filterKeys(properties, filters);
-
-  // 保持不变性
-  const base = _.cloneDeep(urlObj) as Record<string, any>;
-
-  // 统一延迟删除，避免顺序影响
-  const keysToDelete = new Set<string>();
-
-  for (const [fieldKey, field] of candidates) {
-    // 未命中则直接跳过本次循环
-    if (!isAntdDateComponent(field?.['x-component'], antdDateComponents)) continue;
-    if (!matchSplitFlag(field, splitFlag, splitFlagExpectedValue)) continue;
-
-    const props = field?.['x-component-props'] ?? {};
-    const startKey = (props?.startKey as string) || defaultStartKey;
-    const endKey = (props?.endKey as string) || defaultEndKey;
-
-    const tuple = getRangeTupleOrUndefined(base, startKey, endKey);
-    if (!tuple) continue; // 两个值都没有则不赋值、不删除
-
-    // 命中，给 fieldKey 赋值
-    base[fieldKey] = tuple;
-
-    // 按需记录要删除的键（只删除“命中的”）
-    if (removeMatchedKeys) {
-      if (Object.prototype.hasOwnProperty.call(base, startKey)) keysToDelete.add(startKey);
-      if (Object.prototype.hasOwnProperty.call(base, endKey)) keysToDelete.add(endKey);
-    }
-  }
-
-  // 统一执行删除，保证无顺序副作用
-  if (removeMatchedKeys) {
-    for (const k of keysToDelete) {
-      delete base[k];
-    }
-  }
-
-  return base;
-}
-
 export default handleQuerySchema;

package/src/components/Formily/FormilyEditTable.tsx

@@ -0,0 +1,180 @@
+import React, { useState, useCallback, useRef } from "react";
+import { Card, Slider, Rate, Form, Button } from "antd";
+import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
+import { cloneDeep } from "lodash";
+
+import { antdComponents, customComponents } from "@hzab/form-render";
+
+export interface Item {
+  key: string;
+  name: string;
+  age: number;
+  address: string;
+}
+
+export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
+  SchemaField: any;
+  field: {
+    type: string;
+    name: string;
+  };
+  editing: boolean;
+  dataIndex: string;
+  title: any;
+  inputType: "number" | "text";
+  record: Item;
+  index: number;
+  children: React.ReactNode;
+}
+
+export const EditableCell: React.FC<EditableCellProps> = ({
+  SchemaField,
+  field,
+  editing,
+  dataIndex,
+  title,
+  inputType,
+  record,
+  index,
+  children,
+  ...restProps
+}) => {
+  // 使用 Schema 渲染模式
+  return (
+    <td {...restProps}>
+      {editing ? (
+        <SchemaField
+          schema={{
+            type: "object",
+            properties: {
+              [field.name]: { ...field, title: "" },
+            },
+          }}
+        />
+      ) : (
+        children
+      )}
+    </td>
+  );
+};
+
+export const useEditTable = (props) => {
+  const { schema: _schema, idKey, columns, onEditSubmit, formRender } = props;
+
+  const schema = _schema?.schema || _schema || {};
+  // 创建 formily 表单相关参数
+  /** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
+  const schemaScopeRef = useRef<{ _$tempData: Object }>();
+  if (props.schemaScope && !schemaScopeRef.current) {
+    schemaScopeRef.current = props.schemaScope;
+  } else if (!schemaScopeRef.current) {
+    schemaScopeRef.current = { _$tempData: {} };
+  }
+  if (!schemaScopeRef.current?._$tempData) {
+    schemaScopeRef.current._$tempData = {};
+  }
+  const SchemaField = useCallback(
+    createSchemaField({
+      components: {
+        // Upload,
+        Card,
+        Slider,
+        Rate,
+        ...antdComponents,
+        ...customComponents,
+        ...props.components,
+      },
+      scope: schemaScopeRef.current,
+    }),
+    [],
+  );
+
+  // 是否可编辑状态逻辑处理
+  const [editingKey, setEditingKey] = useState("");
+  /** 判断当前单元格是否处于编辑状态 */
+  const isEditing = (record: Item) => record[idKey] === editingKey;
+
+  /**
+   * 点击编辑按钮
+   * @param record
+   */
+  const onEdit = async (record: Partial<Item> & { key: React.Key }) => {
+    const value = await (props.onEdit && props.onEdit(record));
+    formRender?.setValues(value);
+    setEditingKey(record[idKey]);
+  };
+
+  const onCancel = () => {
+    setEditingKey("");
+  };
+
+  /**
+   * 保存数据
+   */
+  const onSave = async () => {
+    try {
+      // 点击保存，数据抛出
+      (await formRender?.validate()) as Item;
+      onEditSubmit && onEditSubmit(formRender.values);
+      // 清除编辑目标
+      setEditingKey("");
+    } catch (errInfo) {
+      console.error("Validate Failed:", errInfo);
+    }
+  };
+
+  const mergedColumns = cloneDeep(columns)?.map((col) => {
+    if (!col.editable) {
+      return col;
+    }
+    const isActions = col.key === "_$actions";
+    const resCol = {
+      ...col,
+      onCell: (record: Item, ...args) => ({
+        ...(col.onCell ? col.onCell(record, ...args) : {}),
+        record,
+        SchemaField,
+        field: col.field,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        editing: isActions ? false : isEditing(record),
+      }),
+    };
+    // 操作列编辑态改成保存、取消按钮
+    if (isActions) {
+      resCol.render = (record, index) => {
+        // 编辑态操作栏变成保存和取消按钮
+        if (record[idKey] === editingKey) {
+          return (
+            <div className="edit-table-actions">
+              <Button type="link" onClick={onSave}>
+                保存
+              </Button>
+              <Button type="text" onClick={onCancel}>
+                取消
+              </Button>
+            </div>
+          );
+        }
+        return col.render(record, index);
+      };
+    }
+    return resCol;
+  });
+
+  return {
+    onEdit,
+    SchemaField,
+    formRender,
+    mergedColumns,
+    Form: (props) => {
+      return (
+        <FormProvider form={formRender}>
+          <Form layout={schema?.form?.layout}>
+            <FormConsumer>{() => props.children}</FormConsumer>
+          </Form>
+        </FormProvider>
+      );
+    },
+  };
+};

package/src/components/Formily/FormilyField.tsx

@@ -21,6 +21,7 @@ export const FormilyField = memo(function (props: formilyFieldPropsT) {
   const { fields, fieldSchemas } = formilyRef.current || {};
   const SchemaField = useCallback(
     createSchemaField({
+      // @ts-ignore
       components: {
         ...antdComponents,
         ...customComponents,
@@ -38,7 +39,7 @@ export const FormilyField = memo(function (props: formilyFieldPropsT) {
         },
       },
       scope: { ...schemaScope },
-    } as any),
+    }),
     [],
   );
 

package/src/list-render.jsx

@@ -15,8 +15,6 @@ import FormModal from "./FormModal";
 import DetailModal from "./DetailModal";
 
 import { objToFormData } from "./common/utils";
-import { setURLObjectQueryParam, getURLObjectQueryParam, removeURLObjectQueryParam, extractSplitDateRanges } from "./common/handleQuerySchema";
-import { URL_PARAM_NAME } from "./common/constant";
 
 import "./index.less";
 
@@ -45,16 +43,6 @@ const ListRender = forwardRef(function (props, parentRef) {
      * 表单提交是否使用 FormData 格式
      */
     useFormData: _useFormData,
-
-    /**
-     * 筛选条件改变时是否将参数（对象形式）设置到url query中
-     * */
-    appendUrlQuery = true,
-
-    /**
-     * 自定义设置url query对象参数的key
-     * */
-    appendUrlQueryKey = URL_PARAM_NAME
   } = props;
   const pageSizeOptions = props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100];
   // const [pageSizeOptions, setPageSizeOptions] = useState(
@@ -89,7 +77,7 @@ const ListRender = forwardRef(function (props, parentRef) {
     onDel,
   }));
 
-  const { schema = {}, config = {}, model = {}, msgConf = {}, filters } = props;
+  const { schema = {}, config = {}, model = {}, msgConf = {} } = props;
 
   // useEffect(() => {
   //   const list = props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100];
@@ -98,34 +86,20 @@ const ListRender = forwardRef(function (props, parentRef) {
   // }, [layout]);
 
   useEffect(() => {
-    const getUrlQuery = appendUrlQuery ? getURLObjectQueryParam(appendUrlQueryKey) : {};
-
     if (model) {
       if (!model.query) {
         model.query = {};
       } else {
-        model.query.pageNum = 1;
-
         modelQueryRef.current = model?.query;
         paginationQueryRef.current = {
-          pageNum: getUrlQuery?.pageNum || model?.query?.pageNum || paginationQueryRef.current?.pageNum,
-          pageSize: getUrlQuery?.pageSize || model?.query?.pageSize || paginationQueryRef.current?.pageSize,
+          pageNum: model?.query?.pageNum ?? paginationQueryRef.current?.pageNum,
+          pageSize: model?.query?.pageSize ?? paginationQueryRef.current?.pageSize,
         };
       }
+      model.query.pageNum = 1;
     }
-
-    // 延迟获取表单实例
-    Promise.resolve().then(() => {
-      if (queryRef.current && queryRef.current?.formRef?.current.formRender) {
-        const extractValues = extractSplitDateRanges(filters, schema, getUrlQuery);
-
-        queryRef.current.formRef.current.formRender?.setValues(extractValues)
-
-        formQueryRef.current = _.cloneDeep(getUrlQuery)
-      }
-    })
-
-    !props.closeAutoRequest && getList({ ...(modelQueryRef.current || {}), ...getUrlQuery });
+    // 首次自动请求，取 筛选表单的默认值 进行请求
+    !props.closeAutoRequest && onSearch(queryFormInitialValues);
   }, []);
 
   useEffect(() => {
@@ -182,6 +156,7 @@ const ListRender = forwardRef(function (props, parentRef) {
     }
 
     // model.query = mergedQueries;
+
     // 取消上一次请求
     getListSourceRef.current?.cancel({ code: 601, message: "取消上一次请求" });
 
@@ -221,19 +196,11 @@ const ListRender = forwardRef(function (props, parentRef) {
     // model.query.pageNum = page;
     // model.query.pageSize = size;
     paginationQueryRef.current = { pageNum: page, pageSize: size };
-
-    if (appendUrlQuery) {
-      const getUrlQuery = getURLObjectQueryParam(appendUrlQueryKey);
-      setURLObjectQueryParam({ ...getUrlQuery, ...paginationQueryRef.current }, appendUrlQueryKey)
-    }
     getList();
   }
 
-  function onSearch(quer, source, isReset = false) {
+  function onSearch(quer, source) {
     const query = source === "queryRender" ? { ...quer } : { ...formQueryRef.current, ...quer };
-    // 重置操作时不赋值
-    if (source === "queryRender" && !isReset && appendUrlQuery) setURLObjectQueryParam(query, appendUrlQueryKey);
-
     if (model && !model.query) {
       model.query = {};
     }
@@ -244,21 +211,18 @@ const ListRender = forwardRef(function (props, parentRef) {
       model.query.pageSize = pageSizeOptions[0];
     }
     formQueryRef.current = query;
-    model.query = Object.assign(model.query, query);
+    // model.query = Object.assign(model.query, query);
     getList(query);
   }
 
-  function handleFormReset() {
-    appendUrlQuery && removeURLObjectQueryParam(appendUrlQueryKey)
-  }
-
   function forceUpdate() {
     setList((l) => _.cloneDeep(l));
   }
 
   function onCreate() {
     setFormState("create");
-    formModalRef.current.show();
+    let title = props.formInitialValues?.[modalConf?.title?.createKey] || modalConf?.title?.createText || "新增";
+    formModalRef.current.show(props.formInitialValues, title);
   }
 
   async function onCreateSubmit(data) {
@@ -305,10 +269,12 @@ const ListRender = forwardRef(function (props, parentRef) {
 
   function handleDetail(data, id) {
     setRowId(id);
-    detailModalRef.current.show(data);
+    let title = data[modalConf?.title?.detailKey] || modalConf?.title?.detailText || "详情";
+    detailModalRef.current.show(data, title);
   }
 
   function onEdit(row, idx) {
+    const { isEditTable } = props;
     if (props.fetchOnEdit !== false) {
       const getQuery = {};
       if (props.fetchById !== false) {
@@ -316,10 +282,10 @@ const ListRender = forwardRef(function (props, parentRef) {
       } else {
         getQuery[idKey] = row[idKey];
       }
-      model
+      return model
         .get(getQuery)
         .then((res) => {
-          handleEdit(res, row[idKey]);
+          !isEditTable && handleEdit(res, row[idKey]);
         })
         .catch((err) => {
           console.error("err", err);
@@ -327,14 +293,16 @@ const ListRender = forwardRef(function (props, parentRef) {
           return Promise.reject(err);
         });
     } else {
-      handleEdit(row, row[idKey]);
+      !isEditTable && handleEdit(row, row[idKey]);
+      return Promise.resolve(row);
     }
   }
 
   function handleEdit(data, id) {
     setRowId(id);
     setFormState("edit");
-    formModalRef.current.show(data, "编辑", "edit");
+    let title = data[modalConf?.title?.editKey] || modalConf?.title?.editText || "编辑";
+    formModalRef.current.show(data, title, "edit");
   }
 
   async function onEditSubmit(data) {
@@ -401,12 +369,15 @@ const ListRender = forwardRef(function (props, parentRef) {
             search={props.search}
             filters={props.filters}
             config={props.queryConf}
-            queryFormInitialValues={{
-              ...queryFormInitialValues,
-              ...(queryFormIsExtendModelQuery ? model.query : {}),
-            }}
+            queryFormInitialValues={
+              queryFormIsExtendModelQuery
+                ? {
+                    ...queryFormInitialValues,
+                    ...model.query,
+                  }
+                : queryFormInitialValues
+            }
             onSearch={onSearch}
-            onReset={handleFormReset}
             schemaScope={props.schemaScope}
             components={props.components}
             i18n={i18n}
@@ -462,6 +433,7 @@ const ListRender = forwardRef(function (props, parentRef) {
           Slots={props.Slots}
           onEdit={onEdit}
           onDel={onDel}
+          setList={setList}
           onDetail={onDetail}
           onSearch={onSearch}
           getList={getList}
@@ -472,6 +444,8 @@ const ListRender = forwardRef(function (props, parentRef) {
           components={props.components}
           schemaScope={props.schemaScope}
           i18n={i18n}
+          onEditSubmit={onEditSubmit}
+          isEditTable={props.isEditTable}
         />
       ) : null}
 

package/src/query-render/index.jsx

@@ -54,11 +54,9 @@ function QueryRender(props, parentRef) {
 
   function onReset() {
     formRef.current?.formRender?.reset();
-    props.onReset?.();
-    props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values), "queryRender", true);
+    props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values), "queryRender");
   }
 
-
   return (
     <div className="query-render">
       {Object.keys(schema?.schema?.properties || {}).length > 0 ? (

package/src/table-render/index.jsx

@@ -1,8 +1,13 @@
-import { useEffect, useState, useMemo, useCallback, useRef } from "react";
-import { Table, Button, Popconfirm, Tooltip, Checkbox, Popover } from "antd";
-import { QuestionCircleOutlined, FilterOutlined, SettingOutlined } from "@ant-design/icons";
+import { useEffect, useState, useMemo, useRef } 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 _ 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";
@@ -11,14 +16,19 @@ 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 "./index.less";
 
 const scenario = "table-render";
 
 function TableRender(props) {
-  const { config = {}, query = {}, i18n } = props;
+  const { isEditTable, config = {}, query = {}, i18n, setList } = props;
   const { tableDel = "删除", tableEdit = "编辑", tableDelTip = "确认删除该项?", tableDetail = "详情" } = i18n || {};
   const {
+    dragColConf = {},
+    isDargTable,
+    dargEndBack,
     orderColType,
     orderColWidth,
     tableEmptyValue,
@@ -28,12 +38,58 @@ function TableRender(props) {
 
   const [columns, setColumns] = useState([]);
   const [columnList, setColumnList] = useState([]);
+  const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: "grab", color: "#999" }} />);
+
+  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]);
+      dargEndBack && dargEndBack(newData, query);
+    }
+  };
+
+  const DraggableContainer = (props) => (
+    <SortableBody useDragHandle disableAutoscroll helperClass="row-dragging" onSortEnd={onSortEnd} {...props} />
+  );
+
+  const DraggableBodyRow = ({ className, style, ...restProps }) => {
+    // function findIndex base on Table rowKey props and should always be a right array index
+    const index = props.list.findIndex((x) => x[props.idKey || "id"] === restProps["data-row-key"]);
+    return <SortableItem index={index} {...restProps} />;
+  };
 
   const formilyRef = useRef({
     fields: {},
     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({
+    idKey: props.idKey,
+    columns,
+    onEdit: props.onEdit,
+    onEditSubmit: props.onEditSubmit,
+    formRender,
+  });
+
   useEffect(() => {
     if (!(props.schema && props.schema.properties)) {
       return;
@@ -154,6 +210,8 @@ function TableRender(props) {
         }
 
         columns.push({
+          field,
+          editable: true,
           ..._colConf,
           onCell: (record, rowIndex) =>
             _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex) || {},
@@ -172,6 +230,7 @@ function TableRender(props) {
 
       columns.push({
         ..._colConf,
+        editable: isEditTable,
         title: "操作",
         key: "_$actions",
         render: getColRender(function (text, record, index) {
@@ -213,6 +272,10 @@ function TableRender(props) {
                 <Button
                   type="link"
                   onClick={() => {
+                    // 可编辑表格使用对应回调
+                    if (isEditTable) {
+                      return onEditByTable && onEditByTable(record, index);
+                    }
                     props.onEdit && props.onEdit(record, index);
                   }}
                 >
@@ -240,6 +303,16 @@ function TableRender(props) {
       });
     }
 
+    if (isDargTable) {
+      columns.unshift({
+        title: "",
+        dataIndex: "sort",
+        width: 60,
+        fixed: "left",
+        render: () => <DragHandle />,
+        ...dragColConf,
+      });
+    }
     setColumns(columns);
     setColumnList(columns);
   }, [props.schema, props.config]);
@@ -260,6 +333,39 @@ function TableRender(props) {
     }
   };
 
+  const tableProps = {
+    className: "table-render",
+    rowKey: props.idKey || "id",
+    rowSelection: config?.rowSelection,
+    columns: columns,
+    dataSource: props.list,
+    pagination: false,
+    scroll: config.scroll,
+    expandable: config.expandable,
+    loading: props.loading,
+    onRow: config?.onRow,
+    ...props.tableProps,
+  };
+
+  if (isDargTable) {
+    tableProps.components = {
+      body: {
+        wrapper: DraggableContainer,
+        row: DraggableBodyRow,
+      },
+    };
+  }
+
+  if (isEditTable) {
+    tableProps.columns = mergedColumns;
+    tableProps.components = {
+      body: {
+        ...tableProps?.components?.body,
+        cell: EditableCell,
+      },
+    };
+  }
+
   return (
     <div className="table-render-wrap">
       {isShowTableFilter ? (
@@ -302,19 +408,15 @@ function TableRender(props) {
           </Popover>
         </div>
       ) : null}
-      <Table
-        className="table-render"
-        rowKey={props.idKey || "id"}
-        rowSelection={config?.rowSelection}
-        columns={columns}
-        dataSource={props.list}
-        pagination={false}
-        scroll={config.scroll}
-        expandable={config.expandable}
-        loading={props.loading}
-        onRow={config?.onRow}
-        {...props.tableProps}
-      />
+      {isEditTable ? (
+        <FormProvider form={formRender}>
+          <Form layout="vertical">
+            <FormConsumer>{() => <Table {...tableProps} />}</FormConsumer>
+          </Form>
+        </FormProvider>
+      ) : (
+        <Table {...tableProps} />
+      )}
       <FormilyField
         schema={props.schema}
         formilyRef={formilyRef}

package/src/table-render/index.less

@@ -5,37 +5,62 @@
     justify-content: flex-end;
     align-items: center;
     margin-bottom: 12px;
+
     .table-filter {
       font-size: 16px;
       cursor: pointer;
+
       .table-filter-icon {
         margin: 0 4px 0 10px;
         cursor: pointer;
       }
     }
   }
+
   .inline-block-max-w {
     display: inline-block;
     max-width: 100%;
   }
+
   .col-title-tooltip-icon {
     margin-left: 8px;
   }
+
   .table-render {
     border-top: 1px solid #f0f0f0;
   }
+
   .table-cell-ellipsis {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
+
 }
+
+.row-dragging {
+  background: #FFF;
+  border: 1px solid #ccc;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.row-dragging td {
+  padding: 16px;
+}
+
+.row-dragging .drag-visible {
+  visibility: visible;
+}
+
 .table-popover-content {
   max-width: 400px;
   display: flex;
   flex-direction: column;
+
   .ant-checkbox-wrapper {
     margin-bottom: 8px;
     margin-left: 0 !important;
   }
-}
+}

package/src/common/constant.ts

@@ -1,2 +0,0 @@
-// 设置url query参数时默认key名称
-export const URL_PARAM_NAME = "defaultSearchParams";