From 17339d24efb57b5574ace2617c92ed39bcd623ba Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Fri, 7 Apr 2023 16:56:11 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20combo=20=E6=89=A9=E5=85=85=20subFormHo?= =?UTF-8?q?rizontal=20=E5=B1=9E=E6=80=A7=E6=94=AF=E6=8C=81=20(#6544)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/form/combo.md | 73 +++++++------- docs/zh-CN/components/form/index.md | 108 ++++++++++----------- packages/amis/src/renderers/Form/Combo.tsx | 11 ++- 3 files changed, 101 insertions(+), 91 deletions(-) diff --git a/docs/zh-CN/components/form/combo.md b/docs/zh-CN/components/form/combo.md index cf2dd3d90..f02296835 100755 --- a/docs/zh-CN/components/form/combo.md +++ b/docs/zh-CN/components/form/combo.md @@ -906,42 +906,43 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层 当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | -| ------------------------ | ---------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| formClassName | `string` | | 单组表单项的类名 | -| items | Array<[表单项](./formitem)> | | 组合展示的表单项 | -| items[x].columnClassName | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 | -| items[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 | -| noBorder | `boolean` | `false` | 单组表单项是否显示边框 | -| scaffold | `object` | `{}` | 单组表单项初始值 | -| multiple | `boolean` | `false` | 是否多选 | -| multiLine | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 | -| minLength | `number` | | 最少添加的条数，`2.4.1` 版本后支持变量 | -| maxLength | `number` | | 最多添加的条数，`2.4.1` 版本后支持变量 | -| flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 items 的 length 为 1 且 multiple 为 true 的时候才有效。 | -| joinValues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 | -| delimiter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 | -| addable | `boolean` | `false` | 是否可新增 | -| addattop | `boolean` | `false` | 在顶部添加 | -| removable | `boolean` | `false` | 是否可删除 | -| deleteApi | [API](../../../docs/types/api) | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 | -| deleteConfirmText | `string` | `"确认要删除？"` | 当配置 `deleteApi` 才生效！删除时用来做用户确认 | -| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段 | -| draggableTip | `string` | | 可拖拽的提示文字 | -| subFormMode | `string` | `"normal"` | 可选`normal`、`horizontal`、`inline` | -| placeholder | `string` | `` | 没有成员时显示。 | -| canAccessSuperData | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 | -| conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`items`为符合该条件后渲染的`schema` | -| typeSwitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 | -| strictMode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 | -| syncFields | `Array` | `[]` | 配置同步字段。只有 `strictMode` 为 `false` 时有效。如果 Combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`["os"]` | -| nullable | `boolean` | `false` | 允许为空，如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。 | -| itemClassName | `string` | | 单组 CSS 类 | -| itemsWrapperClassName | `string` | | 组合区域 CSS 类 | -| deleteBtn | [Button](../button.md) or `string` | 自定义删除按钮 | 只有当`removable`为 `true` 时有效; 如果为`string`则为按钮的文本；如果为`Button`则根据配置渲染删除按钮。 | -| addBtn | [Button](../button.md) | 自定义新增按钮 | 可新增自定义配置渲染新增按钮，在`tabsMode: true`下不生效。 | -| addButtonClassName | `string` | | 新增按钮 CSS 类名 | -| addButtonText | `string` | `"新增"` | 新增按钮文字 | +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------------ | ---------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| formClassName | `string` | | 单组表单项的类名 | +| items | Array<[表单项](./formitem)> | | 组合展示的表单项 | +| items[x].columnClassName | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 | +| items[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 | +| noBorder | `boolean` | `false` | 单组表单项是否显示边框 | +| scaffold | `object` | `{}` | 单组表单项初始值 | +| multiple | `boolean` | `false` | 是否多选 | +| multiLine | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 | +| minLength | `number` | | 最少添加的条数，`2.4.1` 版本后支持变量 | +| maxLength | `number` | | 最多添加的条数，`2.4.1` 版本后支持变量 | +| flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 items 的 length 为 1 且 multiple 为 true 的时候才有效。 | +| joinValues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 | +| delimiter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 | +| addable | `boolean` | `false` | 是否可新增 | +| addattop | `boolean` | `false` | 在顶部添加 | +| removable | `boolean` | `false` | 是否可删除 | +| deleteApi | [API](../../../docs/types/api) | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 | +| deleteConfirmText | `string` | `"确认要删除？"` | 当配置 `deleteApi` 才生效！删除时用来做用户确认 | +| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段 | +| draggableTip | `string` | | 可拖拽的提示文字 | +| subFormMode | `string` | `"normal"` | 可选`normal`、`horizontal`、`inline` | +| subFormHorizontal | `Object` | `{"left":2, "right":10, justify: false}` | 当 subFormMode 为 `horizontal` 时有用，用来控制 label 的展示占比 | +| placeholder | `string` | `` | 没有成员时显示。 | +| canAccessSuperData | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 | +| conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`items`为符合该条件后渲染的`schema` | +| typeSwitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 | +| strictMode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 | +| syncFields | `Array` | `[]` | 配置同步字段。只有 `strictMode` 为 `false` 时有效。如果 Combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`["os"]` | +| nullable | `boolean` | `false` | 允许为空，如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。 | +| itemClassName | `string` | | 单组 CSS 类 | +| itemsWrapperClassName | `string` | | 组合区域 CSS 类 | +| deleteBtn | [Button](../button.md) or `string` | 自定义删除按钮 | 只有当`removable`为 `true` 时有效; 如果为`string`则为按钮的文本；如果为`Button`则根据配置渲染删除按钮。 | +| addBtn | [Button](../button.md) | 自定义新增按钮 | 可新增自定义配置渲染新增按钮，在`tabsMode: true`下不生效。 | +| addButtonClassName | `string` | | 新增按钮 CSS 类名 | +| addButtonText | `string` | `"新增"` | 新增按钮文字 | ## 事件表 diff --git a/docs/zh-CN/components/form/index.md b/docs/zh-CN/components/form/index.md index a259e3feb..bc9f3eac6 100755 --- a/docs/zh-CN/components/form/index.md +++ b/docs/zh-CN/components/form/index.md @@ -1392,60 +1392,60 @@ Form 支持轮询初始化接口，步骤如下： ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| --------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| type | `string` | | `"form"` 指定为 Form 渲染器 | -| name | `string` | | 设置一个名字后，方便其他组件与其通信 | -| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` | -| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label | -| labelAlign | `"right" \| "left"` | `"right"` | 表单项标签对齐方式，默认右对齐，仅在 `mode`为`horizontal` 时生效 | -| labelWidth | `number \| string` | | 表单项标签自定义宽度 | -| title | `string` | `"表单"` | Form 的标题 | -| submitText | `String` | `"提交"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 | -| className | `string` | | 外层 Dom 的类名 | -| body | Array<[表单项](./formitem) or [SchemaNode](../../docs/types/schemanode) > | | Form 表单项集合 | -| actions | Array<[行为按钮](../action)> | | Form 提交按钮，成员为 Action | -| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 | -| messages.fetchSuccess | `string` | | 获取成功时提示 | -| messages.fetchFailed | `string` | | 获取失败时提示 | -| messages.saveSuccess | `string` | | 保存成功时提示 | -| messages.saveFailed | `string` | | 保存失败时提示 | -| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | -| panelClassName | `string` | | 外层 panel 的类名 | -| api | [API](../../../docs/types/api) | | Form 用来保存数据的 api。 | -| initApi | [API](../../../docs/types/api) | | Form 用来获取初始数据的 api。 | -| rules | Array<{rule:string;message:string;name?: string[]}> | | 表单组合校验规则 | -| interval | `number` | `3000` | 刷新时间(最低 3000) | -| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 | -| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 | -| initAsyncApi | [API](../../../docs/types/api) | | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮询请求该接口，直到返回 finished 属性为 true 才 结束。 | -| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 | -| initFetchOn | `string` | | 用表达式来配置 | -| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 | -| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后，默认拉取的时间间隔 | -| asyncApi | [API](../../../docs/types/api) | | 设置此属性后，表单提交发送保存接口后，还会继续轮询请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 | -| checkInterval | `number` | 3000 | 轮询请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 | -| finishedField | `string` | `"finished"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` | -| submitOnChange | `boolean` | `false` | 表单修改即提交 | -| submitOnInit | `boolean` | `false` | 初始就提交一次 | -| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 | -| primaryField | `string` | `"id"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 | -| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 | -| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 | -| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 | -| autoFocus | `boolean` | `false` | 是否自动聚焦。 | -| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 | -| persistData | `string` | `""` | 指定一个唯一的 key，来配置当前表单是否开启本地缓存 | -| persistDataKeys | `string[]` | `""` | 指指定只有哪些 key 缓存 | -| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 | -| preventEnterSubmit | `boolean` | `false` | 禁用回车提交表单 | -| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 | -| promptPageLeave | `boolean` | `false` | form 还没保存，即将离开页面前是否弹框确认。 | -| columnCount | `number` | 0 | 表单项显示为几列 | -| inheritData | `boolean` | `true` | 默认表单是采用数据链的形式创建个自己的数据域，表单提交的时候只会发送自己这个数据域的数据，如果希望共用上层数据域可以设置这个属性为 false，这样上层数据域的数据不需要在表单中用隐藏域或者显式映射才能发送了。 | -| static | `boolean` | | `2.4.0` 整个表单静态方式展示，详情请查看[示例页](../../../examples/form/switchDisplay) | -| staticClassName | `string` | | `2.4.0` 表单静态展示时使用的类名 | -| closeDialogOnSubmit | `boolean` | | 提交的时候是否关闭弹窗。当 form 里面有且只有一个弹窗的时候，本身提交会触发弹窗关闭，此属性可以关闭此行为 | +| 属性名 | 类型 | 默认值 | 说明 | +| --------------------------- | ------------------------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| type | `string` | | `"form"` 指定为 Form 渲染器 | +| name | `string` | | 设置一个名字后，方便其他组件与其通信 | +| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` | +| horizontal | `Object` | `{"left":2, "right":10, "justify": false}` | 当 mode 为 `horizontal` 时有用，用来控制 label 的展示占比 | +| labelAlign | `"right" \| "left"` | `"right"` | 表单项标签对齐方式，默认右对齐，仅在 `mode`为`horizontal` 时生效 | +| labelWidth | `number \| string` | | 表单项标签自定义宽度 | +| title | `string` | `"表单"` | Form 的标题 | +| submitText | `String` | `"提交"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 | +| className | `string` | | 外层 Dom 的类名 | +| body | Array<[表单项](./formitem) or [SchemaNode](../../docs/types/schemanode) > | | Form 表单项集合 | +| actions | Array<[行为按钮](../action)> | | Form 提交按钮，成员为 Action | +| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 | +| messages.fetchSuccess | `string` | | 获取成功时提示 | +| messages.fetchFailed | `string` | | 获取失败时提示 | +| messages.saveSuccess | `string` | | 保存成功时提示 | +| messages.saveFailed | `string` | | 保存失败时提示 | +| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | +| panelClassName | `string` | | 外层 panel 的类名 | +| api | [API](../../../docs/types/api) | | Form 用来保存数据的 api。 | +| initApi | [API](../../../docs/types/api) | | Form 用来获取初始数据的 api。 | +| rules | Array<{rule:string;message:string;name?: string[]}> | | 表单组合校验规则 | +| interval | `number` | `3000` | 刷新时间(最低 3000) | +| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 | +| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 | +| initAsyncApi | [API](../../../docs/types/api) | | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮询请求该接口，直到返回 finished 属性为 true 才 结束。 | +| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 | +| initFetchOn | `string` | | 用表达式来配置 | +| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 | +| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后，默认拉取的时间间隔 | +| asyncApi | [API](../../../docs/types/api) | | 设置此属性后，表单提交发送保存接口后，还会继续轮询请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 | +| checkInterval | `number` | 3000 | 轮询请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 | +| finishedField | `string` | `"finished"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` | +| submitOnChange | `boolean` | `false` | 表单修改即提交 | +| submitOnInit | `boolean` | `false` | 初始就提交一次 | +| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 | +| primaryField | `string` | `"id"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 | +| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 | +| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 | +| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 | +| autoFocus | `boolean` | `false` | 是否自动聚焦。 | +| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 | +| persistData | `string` | `""` | 指定一个唯一的 key，来配置当前表单是否开启本地缓存 | +| persistDataKeys | `string[]` | `""` | 指指定只有哪些 key 缓存 | +| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 | +| preventEnterSubmit | `boolean` | `false` | 禁用回车提交表单 | +| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 | +| promptPageLeave | `boolean` | `false` | form 还没保存，即将离开页面前是否弹框确认。 | +| columnCount | `number` | 0 | 表单项显示为几列 | +| inheritData | `boolean` | `true` | 默认表单是采用数据链的形式创建个自己的数据域，表单提交的时候只会发送自己这个数据域的数据，如果希望共用上层数据域可以设置这个属性为 false，这样上层数据域的数据不需要在表单中用隐藏域或者显式映射才能发送了。 | +| static | `boolean` | | `2.4.0` 整个表单静态方式展示，详情请查看[示例页](../../../examples/form/switchDisplay) | +| staticClassName | `string` | | `2.4.0` 表单静态展示时使用的类名 | +| closeDialogOnSubmit | `boolean` | | 提交的时候是否关闭弹窗。当 form 里面有且只有一个弹窗的时候，本身提交会触发弹窗关闭，此属性可以关闭此行为 | ## 事件表 diff --git a/packages/amis/src/renderers/Form/Combo.tsx b/packages/amis/src/renderers/Form/Combo.tsx index cb4ca2e41..79996881a 100644 --- a/packages/amis/src/renderers/Form/Combo.tsx +++ b/packages/amis/src/renderers/Form/Combo.tsx @@ -6,7 +6,8 @@ import { FormControlProps, FormBaseControl, resolveEventData, - ApiObject + ApiObject, + FormHorizontal } from 'amis-core'; import {ActionObject, Api} from 'amis-core'; import {ComboStore, IComboStore} from 'amis-core'; @@ -199,6 +200,11 @@ export interface ComboControlSchema extends FormBaseControlSchema { */ subFormMode?: 'normal' | 'horizontal' | 'inline'; + /** + * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。 + */ + subFormHorizontal?: FormHorizontal; + /** * 没有成员时显示。 * @default empty @@ -1635,6 +1641,7 @@ export default class ComboControl extends React.Component { multiple, tabsMode, subFormMode, + subFormHorizontal, changeImmediately, lazyLoad, translate: __, @@ -1651,6 +1658,7 @@ export default class ComboControl extends React.Component { wrapperComponent: 'div', wrapWithPanel: false, mode: multiLine ? subFormMode || 'normal' : 'row', + horizontal: subFormHorizontal, className: cx(`Combo-form`, formClassName) }, { @@ -1673,6 +1681,7 @@ export default class ComboControl extends React.Component { wrapperComponent: 'div', wrapWithPanel: false, mode: tabsMode ? subFormMode : multiLine ? subFormMode : 'row', + horizontal: subFormHorizontal, className: cx(`Combo-form`, formClassName) }, {