diff --git a/docs/zh-CN/components/form/button-group-select.md b/docs/zh-CN/components/form/button-group-select.md index 5d17d000716..9d188972b54 100755 --- a/docs/zh-CN/components/form/button-group-select.md +++ b/docs/zh-CN/components/form/button-group-select.md @@ -215,6 +215,48 @@ order: 6 | -------- | ------------------------- | ---------------- | | change | `[name]: string` 组件的值 | 选中值变化时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "button-group-select", + "label": "选项", + "name": "type", + "options": [ + { + "label": "Option A", + "value": "a" + }, + { + "label": "Option B", + "value": "b" + }, + { + "label": "Option C", + "value": "c" + } + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/chain-select.md b/docs/zh-CN/components/form/chain-select.md index 4cb556340a9..ae315491fef 100755 --- a/docs/zh-CN/components/form/chain-select.md +++ b/docs/zh-CN/components/form/chain-select.md @@ -65,6 +65,36 @@ order: 7 | -------- | ------------------------- | ---------------- | | change | `[name]: string` 组件的值 | 选中值变化时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "select3", + "type": "chained-select", + "label": "链式下拉", + "source": "/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4", + "value": "a,b", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/checkbox.md b/docs/zh-CN/components/form/checkbox.md index 1f3676327a5..b37cbe198a3 100755 --- a/docs/zh-CN/components/form/checkbox.md +++ b/docs/zh-CN/components/form/checkbox.md @@ -110,6 +110,35 @@ order: 8 | -------- | -------------------------- | ------------------ | | change | `[name]: boolean` 组件的值 | 选中状态变化时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "checkbox", + "type": "checkbox", + "label": "勾选框", + "option": "选项说明", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/checkboxes.md b/docs/zh-CN/components/form/checkboxes.md index 1f6744db924..09e6c0768a6 100755 --- a/docs/zh-CN/components/form/checkboxes.md +++ b/docs/zh-CN/components/form/checkboxes.md @@ -473,9 +473,207 @@ order: 9 > `[name]`表示当前组件绑定的名称,即`name`属性,如果没有配置`name`属性,则通过`value`取值。 -| 事件名称 | 事件参数 | 说明 | -| -------- | ----------------------- | ---------------- | -| change | `[name]: string` 选中值 | 选中值变化时触发 | +| 事件名称 | 事件参数 | 说明 | +| -------------------------------- | ----------------------------------------------------------------------------------------- | ------------------ | +| change | `[name]: string` 选中值 | 选中值变化时触发 | +| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值
`item: object` 新增的节点信息
`items: object[]`选项集合 | 新增节点提交时触发 | +| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值
`item: object` 编辑的节点信息
`items: object[]`选项集合 | 编辑节点提交时触发 | +| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值
`item: object` 删除的节点信息
`items: object[]`选项集合 | 删除节点提交时触发 | + +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "checkboxes", + "type": "checkboxes", + "label": "复选框", + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value}" + } + } + ] + } + } + } + ] + } +``` + +### addConfirm + +配置 `creatable`后,可监听确认新增操作。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "checkboxes", + "type": "checkboxes", + "label": "复选框", + "creatable": true, + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ], + "onEvent": { + "addConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + } + } + ] + } +``` + +### editConfirm + +配置 `editable`后,可监听确认编辑操作。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "checkboxes", + "type": "checkboxes", + "label": "复选框", + "editable": true, + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ], + "onEvent": { + "editConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + } + } + ] + } +``` + +### deleteConfirm + +配置 `removable`后,可监听确认删除操作。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "checkboxes", + "type": "checkboxes", + "label": "复选框", + "removable": true, + "labelField": "label2", + "valueField": "value2", + "options": [ + { + "label2": "OptionA", + "value2": "a" + }, + { + "label2": "OptionB", + "value2": "b" + }, + { + "label2": "OptionC", + "value2": "c" + }, + { + "label2": "OptionD", + "value2": "d" + } + ], + "onEvent": { + "deleteConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + } + } + ] + } +``` ## 动作表 diff --git a/docs/zh-CN/components/form/combo.md b/docs/zh-CN/components/form/combo.md index 4b7e49043ac..b164b25f80b 100755 --- a/docs/zh-CN/components/form/combo.md +++ b/docs/zh-CN/components/form/combo.md @@ -957,6 +957,155 @@ combo 还有一个作用是增加层级,比如返回的数据是一个深层 | delete | `key: number` 移除项的索引
`item: object` 移除项
`[name]: object \| object[]` 组件的值 | 删除组合项时触发 | | tabsChange | `key: number` 选项卡索引
`item: object` 激活项
`[name]: object \| object[]` 组件的值 | 当设置 tabsMode 为 true 时,切换选项卡时触发 | +### add + +```schema: scope="body" +{ + "type": "form", + "mode": "horizontal", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "combo", + "name": "combo", + "label": "Combo", + "multiple": true, + "items": [ + { + "name": "text", + "label": "文本", + "type": "input-text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ], + "onEvent": { + "add": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] +} +``` + +### delete + +```schema: scope="body" +{ + "type": "form", + "mode": "horizontal", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "combo", + "name": "combo", + "label": "Combo", + "multiple": true, + "items": [ + { + "name": "text", + "label": "文本", + "type": "input-text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ], + "onEvent": { + "delete": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + } + } + ] +} +``` + +### tabsChange + +监听 tab 切换,获取被激活的索引。 + +```schema: scope="body" +{ + "type": "form", + "mode": "horizontal", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "combo", + "name": "combo101", + "label": "组合多条多行", + "multiple": true, + "multiLine": true, + "value": [ + {} + ], + "tabsMode": true, + "tabsStyle": "card", + "maxLength": 3, + "items": [ + { + "name": "a", + "label": "文本", + "type": "input-text", + "placeholder": "文本", + "value": "", + "size": "full" + }, + { + "name": "b", + "label": "选项", + "type": "select", + "options": [ + "a", + "b", + "c" + ], + "size": "full" + } + ], + "onEvent": { + "tabsChange": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.key|json}" + } + } + ] + } + } + } + ] +} +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/input-city.md b/docs/zh-CN/components/form/input-city.md index 42312333dce..9e01cdf620c 100755 --- a/docs/zh-CN/components/form/input-city.md +++ b/docs/zh-CN/components/form/input-city.md @@ -113,6 +113,34 @@ order: 10 | -------- | ----------------------------------- | ---------------- | | change | `[name]: number \| string` 组件的值 | 选中值变化时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "city", + "type": "input-city", + "label": "城市", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/input-range.md b/docs/zh-CN/components/form/input-range.md index 7c202eba1ff..87e4bf2fc06 100755 --- a/docs/zh-CN/components/form/input-range.md +++ b/docs/zh-CN/components/form/input-range.md @@ -300,16 +300,16 @@ order: 38 当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | 版本 | -| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -| className | `string` | | css 类名 | -| value | `number` or `string` or `{min: number, max: number}` or `[number, number]` | | | -| min | `number \| string` | `0` | 最小值,支持变量 | `3.3.0`后支持变量 | -| max | `number \| string` | `100` | 最大, 支持变量值 | `3.3.0`后支持变量 | -| disabled | `boolean` | `false` | 是否禁用 | -| step | `number \| string` | `1` | 步长,支持变量 | `3.3.0`后支持变量 | -| showSteps | `boolean` | `false` | 是否显示步长 | -| parts | `number` or `number[]` | `1` | 分割的块数
主持数组传入分块的节点 | +| 属性名 | 类型 | 默认值 | 说明 | 版本 | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | +| className | `string` | | css 类名 | +| value | `number` or `string` or `{min: number, max: number}` or `[number, number]` | | | +| min | `number \| string` | `0` | 最小值,支持变量 | `3.3.0`后支持变量 | +| max | `number \| string` | `100` | 最大, 支持变量值 | `3.3.0`后支持变量 | +| disabled | `boolean` | `false` | 是否禁用 | +| step | `number \| string` | `1` | 步长,支持变量 | `3.3.0`后支持变量 | +| showSteps | `boolean` | `false` | 是否显示步长 | +| parts | `number` or `number[]` | `1` | 分割的块数
主持数组传入分块的节点 | | marks | { [number | string]: string | number | SchemaObject } or { [number | string]: { style: CSSProperties, label: string } } | | 刻度标记
- 支持自定义样式
- 设置百分比 | | tooltipVisible | `boolean` | `false` | 是否显示滑块标签 | | tooltipPlacement | `auto` or `bottom` or `left` or `right` | `top` | 滑块标签的位置,默认`auto`,方向自适应
前置条件:tooltipVisible 不为 false 时有效 | @@ -336,6 +336,99 @@ order: 38 | blur | `[name]: number \| string \|{min: number, max: number}` 组件的值 | 当设置 showInput 为 true 时,输入框失去焦点时触发 | | focus | `[name]: number \| string \|{min: number, max: number}` 组件的值 | 当设置 showInput 为 true 时,输入框获取焦点时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "input-range", + "label": "滑块", + "name": "range", + "value": 20, + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### blur + +当设置 `showInput` 为 true 时,输入框失去焦点时触发。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "input-range", + "label": "滑块", + "name": "range", + "value": 20, + "showInput": true, + "onEvent": { + "blur": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### focus + +当设置 `showInput` 为 true 时,输入框获取焦点时触发。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "input-range", + "label": "滑块", + "name": "range", + "value": 20, + "showInput": true, + "onEvent": { + "focus": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/input-table.md b/docs/zh-CN/components/form/input-table.md index a3a69ae7d14..e30973b9387 100755 --- a/docs/zh-CN/components/form/input-table.md +++ b/docs/zh-CN/components/form/input-table.md @@ -905,7 +905,7 @@ order: 54 | 事件名称 | 事件参数 | 说明 | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | -| add | `[name]: object[]` 列表记录 | 点击左下角添加按钮 或 某一行右侧操作栏添加按钮时触发 | +| add | `index: number` 新增行记录索引
`[name]: object[]` 列表记录 | 点击左下角添加按钮 或 某一行右侧操作栏添加按钮时触发 | | addConfirm | `index: number` 新增行记录索引
`item: object` 新增行记录
`[name]: object[]`列表记录 | 开启`needConfirm`,点击添加按钮,填入数据后点击“保存”按钮后触发 | | addSuccess | `index: number` 新增行记录索引
`item: object` 新增行记录
`[name]: object[]`列表记录 | 开启`needConfirm`并且配置`addApi`,点击“保存”后调用接口成功时触发 | | addFail | `index: number` 新增行记录索引
`item: object` 新增行记录
`[name]: object[]`列表记录
`error: object` `addApi`请求失败后返回的错误信息 | 开启`needConfirm`并且配置`addApi`,点击“保存”后调用接口失败时触发 | diff --git a/docs/zh-CN/components/form/input-tag.md b/docs/zh-CN/components/form/input-tag.md index 7174662d5f6..c4827469069 100755 --- a/docs/zh-CN/components/form/input-tag.md +++ b/docs/zh-CN/components/form/input-tag.md @@ -144,6 +144,111 @@ order: 55 | blur | `[name]: string` 组件的值
`selectedItems: Option[]` 选中的项
`items: Option[]` 所有选项 | 输入框失去焦点时触发 | | focus | `[name]: string` 组件的值
`selectedItems: Option[]` 选中的项
`items: Option[]` 所有选项 | 输入框获取焦点时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "input-tag", + "name": "tag", + "label": "标签", + "placeholder": "请选择标签", + "options": [ + "Aaron Rodgers", + "Tom Brady", + "Charlse Woodson", + "Aaron Jones" + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### blur + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "input-tag", + "name": "tag", + "label": "标签", + "placeholder": "请选择标签", + "options": [ + "Aaron Rodgers", + "Tom Brady", + "Charlse Woodson", + "Aaron Jones" + ], + "onEvent": { + "blur": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### focus + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "input-tag", + "name": "tag", + "label": "标签", + "placeholder": "请选择标签", + "options": [ + "Aaron Rodgers", + "Tom Brady", + "Charlse Woodson", + "Aaron Jones" + ], + "onEvent": { + "focus": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/input-text.md b/docs/zh-CN/components/form/input-text.md index 84b1bf65593..37123841ce6 100755 --- a/docs/zh-CN/components/form/input-text.md +++ b/docs/zh-CN/components/form/input-text.md @@ -456,6 +456,165 @@ order: 56 | change | `[name]: string` 组件的值 | 值变化时触发 | | clear | `[name]: string` 组件的值 | 点击清除按钮时触发 | +### enter + +选择器模式下,回车时触发。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "text", + "type": "input-text", + "label": "text", + "options": [ + { + "label": "aa", + "value": "aa" + }, + { + "label": "bb", + "value": "bb" + } + ], + "onEvent": { + "enter": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### focus + +当设置 `showInput` 为 true 时,输入框获取焦点时触发。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "text", + "type": "input-text", + "label": "text", + "onEvent": { + "focus": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### blur + +当设置 `showInput` 为 true 时,输入框失去焦点时触发。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "text", + "type": "input-text", + "label": "text", + "onEvent": { + "blur": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "text", + "type": "input-text", + "label": "text", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### clear + +配置`clearable`为 true,点击清除按钮时触发。 + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "text", + "type": "input-text", + "label": "text", + "clearable": true, + "onEvent": { + "clear": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/input-tree.md b/docs/zh-CN/components/form/input-tree.md index 917f7924f29..a63418c5eef 100755 --- a/docs/zh-CN/components/form/input-tree.md +++ b/docs/zh-CN/components/form/input-tree.md @@ -684,6 +684,7 @@ order: 59 { "type": "form", "api": "/api/mock2/form/saveForm", + "debug": true, "body": [ { "type": "input-tree", @@ -842,6 +843,7 @@ order: 59 { "type": "form", "api": "/api/mock2/form/saveForm", + "debug": true, "body": [ { "type": "input-tree", @@ -1142,13 +1144,301 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A > `[name]`表示当前组件绑定的名称,即`name`属性,如果没有配置`name`属性,则通过`value`取值。 -| 事件名称 | 事件参数 | 说明 | -| ------------ | ----------------------------------------------------------------------------------------------- | ---------------------------- | -| change | `items: object[]`选项集合(< 3.6.0 及以下版本 不支持该参数)
`[name]: string` 组件的值 | 选中值变化时触发 | -| add | `items: object[]`选项集合(< 2.3.2 及以下版本 为`options`)
`[name]: object` 新增的节点信息 | 新增节点提交时触发 | -| edit | `items: object[]`选项集合(< 2.3.2 及以下版本 为`options`)
`[name]: object` 编辑的节点信息 | 编辑节点提交时触发 | -| delete | `items: object[]`选项集合(< 2.3.2 及以下版本 为`options`)
`[name]: object` 删除的节点信息 | 删除节点提交时触发 | -| loadFinished | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 | +| 事件名称 | 事件参数 | 说明 | +| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ---------------------------- | +| change | `items: object[]`选项集合(< 3.6.0 及以下版本 不支持该参数)
`[name]: string` 组件的值 | 选中值变化时触发 | +| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值
`item: object` 新增的节点信息
`items: object[]`选项集合 | 新增节点提交时触发 | +| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值
`item: object` 编辑的节点信息
`items: object[]`选项集合 | 编辑节点提交时触发 | +| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值
`item: object` 删除的节点信息
`items: object[]`选项集合 | 删除节点提交时触发 | +| deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值
`result: object` deferApi 懒加载远程请求成功后返回的数据
`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 | +| add(不推荐) | `[name]: object` 新增的节点信息
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 新增节点提交时触发 | +| edit(不推荐) | `[name]: object` 编辑的节点信息
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 编辑节点提交时触发 | +| delete(不推荐) | `[name]: object` 删除的节点信息
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 删除节点提交时触发 | +| loadFinished(不推荐) | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 | + +### change + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "input-tree", + "name": "tree", + "label": "Tree", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.tree|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### addConfirm + +配置 `creatable`后,可监听确认新增操作。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "input-tree", + "name": "tree", + "label": "Tree", + "creatable": true, + "removable": true, + "editable": true, + "addApi": "/api/mock2/form/saveForm", + "onEvent": { + "addConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### editConfirm + +配置 `editable`后,可监听确认编辑操作。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "input-tree", + "name": "tree", + "label": "Tree", + "creatable": true, + "removable": true, + "editable": true, + "onEvent": { + "editConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### deleteConfirm + +配置 `removable`后,可监听确认删除操作。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "input-tree", + "name": "tree", + "label": "Tree", + "creatable": true, + "removable": true, + "editable": true, + "onEvent": { + "deleteConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### deferLoadFinished + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "input-tree", + "name": "tree", + "label": "Tree", + "deferApi": "/api/mock2/form/deferOptions?label=${label}&waitSeconds=2", + "onEvent": { + "deferLoadFinished": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.result|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "collapsed": true, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "这下面是懒加载的", + "value": 4, + "defer": true + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` ## 动作表 diff --git a/docs/zh-CN/components/form/list-select.md b/docs/zh-CN/components/form/list-select.md index a622f4c04d3..e3897c70818 100755 --- a/docs/zh-CN/components/form/list-select.md +++ b/docs/zh-CN/components/form/list-select.md @@ -101,6 +101,45 @@ ListSelect 一般用来实现选择,可以单选也可以多选,和 Radio/Ch | -------- | ------------------------- | ---------------- | | change | `[name]: string` 组件的值 | 选中值变化时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "list-select", + "name": "select", + "label": "单选", + "clearable": true, + "options": [ + { + "label": "Option A", + "value": "a" + }, + { + "label": "Option B", + "value": "b" + } + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/location-picker.md b/docs/zh-CN/components/form/location-picker.md index 5566836da43..e9f26a257e3 100644 --- a/docs/zh-CN/components/form/location-picker.md +++ b/docs/zh-CN/components/form/location-picker.md @@ -57,16 +57,16 @@ order: 30 当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | -| --------------- | ------------------ | ------------------------------------ | -------------------------------------------------------------------------------- | -| value | `LocationData` | 参考 [`LocationData`](#LocationData) | | -| vendor | 'baidu' \| 'gaode' | 'baidu' | 地图厂商,目前只实现了百度地图和高德地图 | -| ak | `string` | 无 | 百度/高德地图的 ak | -| clearable | `boolean` | false | 输入框是否可清空 | -| placeholder | `string` | '请选择位置' | 默认提示 | -| autoSelectCurrentLoc | `boolean` | false | 是否自动选中当前地理位置 | -| onlySelectCurrentLoc | `boolean` | false | 是否限制只能选中当前地理位置,设置为true后,可用于充当定位组件 | -| coordinatesType | 'bd09' \| 'gcj02' | 'bd09' | 坐标系类型,默认百度坐标,使用高德地图时应设置为'gcj02', 高德地图不支持坐标转换 | +| 属性名 | 类型 | 默认值 | 说明 | +| -------------------- | ------------------ | ------------------------------------ | -------------------------------------------------------------------------------- | +| value | `LocationData` | 参考 [`LocationData`](#LocationData) | | +| vendor | 'baidu' \| 'gaode' | 'baidu' | 地图厂商,目前只实现了百度地图和高德地图 | +| ak | `string` | 无 | 百度/高德地图的 ak | +| clearable | `boolean` | false | 输入框是否可清空 | +| placeholder | `string` | '请选择位置' | 默认提示 | +| autoSelectCurrentLoc | `boolean` | false | 是否自动选中当前地理位置 | +| onlySelectCurrentLoc | `boolean` | false | 是否限制只能选中当前地理位置,设置为 true 后,可用于充当定位组件 | +| coordinatesType | 'bd09' \| 'gcj02' | 'bd09' | 坐标系类型,默认百度坐标,使用高德地图时应设置为'gcj02', 高德地图不支持坐标转换 | ### 坐标系说明 @@ -90,6 +90,35 @@ order: 30 | -------- | ------------------------------- | ---------------- | | change | `[name]: LocationData` 组件的值 | 选中值变化时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "location-picker", + "name": "location", + "ak": "LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7", + "label": "地址", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/matrix-checkboxes.md b/docs/zh-CN/components/form/matrix-checkboxes.md index a10564c599e..02394c6a471 100755 --- a/docs/zh-CN/components/form/matrix-checkboxes.md +++ b/docs/zh-CN/components/form/matrix-checkboxes.md @@ -331,6 +331,51 @@ row 模式,每行只能单选某个单元格 | -------- | ------------------------ | ---------------- | | change | `[name]: Array` 组件的值 | 选中值变化时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "matrix-checkboxes", + "name": "matrix", + "label": "Matrix", + "rowLabel": "行标题说明", + "columns": [ + { + "label": "列1" + }, + { + "label": "列2" + } + ], + "rows": [ + { + "label": "行1" + }, + { + "label": "行2" + } + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/nestedselect.md b/docs/zh-CN/components/form/nestedselect.md index 9e93c203931..b1a01a9d816 100755 --- a/docs/zh-CN/components/form/nestedselect.md +++ b/docs/zh-CN/components/form/nestedselect.md @@ -751,8 +751,8 @@ order: 31 当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | 版本 | -| ------------------ | ----------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | --- | +| 属性名 | 类型 | 默认值 | 说明 | 版本 | +| ------------------ | ----------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------- | | options | `Array`或`Array` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) | | source | `string`或 [API](../../../docs/types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) | | delimiter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | @@ -785,6 +785,58 @@ order: 31 | blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 | | focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "nested-select", + "name": "nestedSelect", + "label": "级联选择器", + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + } + ] + }, + { + "label": "C", + "value": "c" + } + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/picker.md b/docs/zh-CN/components/form/picker.md index bd6065f2fa3..28526f7ee76 100755 --- a/docs/zh-CN/components/form/picker.md +++ b/docs/zh-CN/components/form/picker.md @@ -687,10 +687,11 @@ order: 35 ## 限制标签最大展示数量 设置`overflowConfig`后可以限制标签的最大展示数量,该属性仅在多选模式开启后生效,包含以下几个配置项: -- `maxTagCount`:最大展示数量,是范围为0 - 选项总数量的整数,超出数量的部分会收纳到 Popover 中。 + +- `maxTagCount`:最大展示数量,是范围为 0 - 选项总数量的整数,超出数量的部分会收纳到 Popover 中。 - `displayPosition`:收纳标签生效的位置,类型为字符串数组,未开启内嵌模式默认为**选择器**, 开启后默认为**选择器**和**CRUD 顶部**,可选值为`'select'`(选择器)、`'crud'`(增删改查)。 - `overflowTagPopover`配置收纳标签 Popover 相关[属性](../tooltip#属性表)。 -- `overflowTagPopoverInCRUD`可以配置**CRUD 顶部**收纳标签的 Popover相关[属性](../tooltip#属性表)。 +- `overflowTagPopoverInCRUD`可以配置**CRUD 顶部**收纳标签的 Popover 相关[属性](../tooltip#属性表)。 > `3.4.0` 及以上版本 @@ -1190,38 +1191,35 @@ order: 35 } ``` - - ## 属性表 当做选择器表单项使用时,除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | 版本 | -| ------------ | -------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- | --- | -| options | `Array`或`Array` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) | -| source | `string`或 [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) | -| multiple | `boolean` | | 是否为多选。 | -| delimiter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | -| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | -| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | -| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) | -| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) | -| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) | -| modalTitle | `string` | `"请选择"` | 设置模态框的标题 | -| modalMode | `string` | `"dialog"` | 设置 `dialog` 或者 `drawer`,用来配置弹出方式。 | -| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染,来展示列表信息。更多配置参考 [CRUD](../crud) | -| embed | `boolean` | `false` | 是否使用内嵌模式 | -| overflowConfig | `OverflowConfig` | 参考[OverflowConfig](./#overflowconfig) | 开启最大标签展示数量的相关配置 | `3.4.0` | +| 属性名 | 类型 | 默认值 | 说明 | 版本 | +| -------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- | ---- | +| options | `Array`或`Array` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) | +| source | `string`或 [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) | +| multiple | `boolean` | | 是否为多选。 | +| delimiter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) | +| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) | +| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) | +| modalTitle | `string` | `"请选择"` | 设置模态框的标题 | +| modalMode | `string` | `"dialog"` | 设置 `dialog` 或者 `drawer`,用来配置弹出方式。 | +| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染,来展示列表信息。更多配置参考 [CRUD](../crud) | +| embed | `boolean` | `false` | 是否使用内嵌模式 | +| overflowConfig | `OverflowConfig` | 参考[OverflowConfig](./#overflowconfig) | 开启最大标签展示数量的相关配置 `3.4.0` | ### OverflowConfig -| 属性名 | 类型 | 默认值 | 说明 | -| ------------ | -------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- | -| maxTagCount | `number` | `-1` | 标签的最大展示数量,超出数量后以收纳浮层的方式展示,仅在多选模式开启后生效,默认为`-1` 不开启 | `3.4.0` | -| displayPosition | `('select' \| 'crud')[]` | `['select', 'crud']` | 收纳标签生效的位置,未开启内嵌模式默认为选择器, 开启后默认为选择器和CRUD 顶部,可选值为`'select'`(选择器)、`'crud'`(增删改查) | `3.4.0` | -| overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 选择器内收纳标签的Popover配置,详细配置参考[Tooltip](../tooltip#属性表) | `3.4.0` | -| overflowTagPopoverInCRUD | `TooltipObject` | `{"placement": "bottom", "trigger": "hover", "showArrow": false, "offset": [0, 10]}` | CRUD顶部内收纳标签的Popover配置,详细配置参考[Tooltip](../tooltip#属性表) | `3.4.0` | - +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------------ | ------------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | +| maxTagCount | `number` | `-1` | 标签的最大展示数量,超出数量后以收纳浮层的方式展示,仅在多选模式开启后生效,默认为`-1` 不开启 `3.4.0` | +| displayPosition | `('select' \| 'crud')[]` | `['select', 'crud']` | 收纳标签生效的位置,未开启内嵌模式默认为选择器, 开启后默认为选择器和 CRUD 顶部,可选值为`'select'`(选择器)、`'crud'`(增删改查) `3.4.0` | +| overflowTagPopover | `TooltipObject` | `{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}` | 选择器内收纳标签的 Popover 配置,详细配置参考[Tooltip](../tooltip#属性表) `3.4.0` | +| overflowTagPopoverInCRUD | `TooltipObject` | `{"placement": "bottom", "trigger": "hover", "showArrow": false, "offset": [0, 10]}` | CRUD 顶部内收纳标签的 Popover 配置,详细配置参考[Tooltip](../tooltip#属性表) `3.4.0` | ## 事件表 @@ -1233,3 +1231,89 @@ order: 35 | --------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------- | | change | `[name]: string` 组件的值(多个以逗号分隔)
`selectedItems: object` \| `object[]`选中项(< 2.3.2 及以下版本 为`option`) | 选中值变化时触发 | | itemClick | `item: Option` 所点击的选项 | 选项被点击时触发 | + +### change + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "body": [ + { + "type": "picker", + "name": "picker", + "label": "picker", + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value}" + } + } + ] + } + } + } + ] + } +``` + +### itemClick + +输入框内已被选中的选项被点击时触发。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "body": [ + { + "type": "picker", + "name": "picker", + "label": "picker", + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ], + "onEvent": { + "itemClick": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + } + } + ] + } +``` diff --git a/docs/zh-CN/components/form/radio.md b/docs/zh-CN/components/form/radio.md index 605b0fd2d04..fb49428a8f4 100644 --- a/docs/zh-CN/components/form/radio.md +++ b/docs/zh-CN/components/form/radio.md @@ -179,6 +179,33 @@ order: 8 | -------- | -------------------------- | ------------------ | | change | `[name]: boolean` 组件的值 | 选中状态变化时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "type": "radio", + "name": "radio", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/radios.md b/docs/zh-CN/components/form/radios.md index dbdf78d2a01..10cf4dbb163 100644 --- a/docs/zh-CN/components/form/radios.md +++ b/docs/zh-CN/components/form/radios.md @@ -260,6 +260,52 @@ api 返回内容需要包含 options 字段 | -------- | --------------------------------------------------------------------------------------------- | ---------------- | | change | `[name]: string` 组件的值
`selectedItems: Option` 选中的项
`items: Option[]` 选项集合 | 选中值变化时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "name": "radios", + "type": "radios", + "label": "radios", + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/select.md b/docs/zh-CN/components/form/select.md index fe944734370..aff6f7b3847 100755 --- a/docs/zh-CN/components/form/select.md +++ b/docs/zh-CN/components/form/select.md @@ -43,6 +43,7 @@ order: 48 ``` ## 展示模式 + ### 分组展示模式 _单选_ @@ -687,7 +688,6 @@ _多选_ 适用于需选择的数据/信息源较多时,用户可直观的知道自己所选择的数据/信息的场景,一般左侧框为数据/信息源,右侧为已选数据/信息,被选中信息同时存在于 2 个框内。 - ## 延时加载 选型设置 defer: true,结合配置组件层的 `deferApi` 来实现。 @@ -1274,14 +1274,290 @@ leftOptions 动态加载,默认 source 接口是返回 options 部分,而 le > `[name]`表示当前组件绑定的名称,即`name`属性,如果没有配置`name`属性,则通过`value`取值。 -| 事件名称 | 事件参数 | 说明 | -| -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -| change | `[name]: string` 组件的值
`selectedItems: Option \| Option[]` 选中的项
`items: Option[]` 选项集合(< 2.3.2 及以下版本 为`options`) | 选中值变化时触发 | -| blur | `[name]: string` 组件的值
`items: Option[]` 选项集合(< 2.3.2 及以下版本 为`options`) | 输入框失去焦点时触发 | -| focus | `[name]: string` 组件的值
`items: Option[]` 选项集合(< 2.3.2 及以下版本 为`options`) | 输入框获取焦点时触发 | -| add | `[name]: Option` 新增的选项
`items: Option[]` 选项集合(< 2.3.2 及以下版本 为`options`) | 新增选项提交时触发 | -| edit | `[name]: Option` 编辑的选项
`items: Option[]` 选项集合(< 2.3.2 及以下版本 为`options`) | 编辑选项提交时触发 | -| delete | `[name]: Option` 删除的选项
`items: Option[]` 选项集合(< 2.3.2 及以下版本 为`options`) | 删除选项提交时触发 | +| 事件名称 | 事件参数 | 说明 | +| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| change | `[name]: string` 组件的值
`selectedItems: Option \| Option[]` 选中的项
`items: Option[]` 选项集合(< 2.3.2 及以下版本 为`options`) | 选中值变化时触发 | +| blur | `[name]: string` 组件的值
`items: Option[]` 选项集合(< 2.3.2 及以下版本 为`options`) | 输入框失去焦点时触发 | +| focus | `[name]: string` 组件的值
`items: Option[]` 选项集合(< 2.3.2 及以下版本 为`options`) | 输入框获取焦点时触发 | +| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值
`item: object` 新增的节点信息
`items: object[]`选项集合 | 新增节点提交时触发 | +| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值
`item: object` 编辑的节点信息
`items: object[]`选项集合 | 编辑节点提交时触发 | +| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值
`item: object` 删除的节点信息
`items: object[]`选项集合 | 删除节点提交时触发 | +| add(不推荐) | `[name]: object` 新增的节点信息
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 新增节点提交时触发 | +| edit(不推荐) | `[name]: object` 编辑的节点信息
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 编辑节点提交时触发 | +| delete(不推荐) | `[name]: object` 删除的节点信息
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 删除节点提交时触发 | + +### change + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "select", + "name": "tree", + "label": "Tree", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.tree|json}" + } + } + ] + } + }, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +### focus + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "select", + "name": "tree", + "label": "Tree", + "onEvent": { + "focus": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.tree|json}" + } + } + ] + } + }, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +### blur + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "select", + "name": "tree", + "label": "Tree", + "onEvent": { + "blur": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.tree|json}" + } + } + ] + } + }, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +### addConfirm + +配置 `creatable`后,可监听确认新增操作。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "select", + "name": "tree", + "label": "Tree", + "creatable": true, + "removable": true, + "editable": true, + "onEvent": { + "addConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + }, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +### editConfirm + +配置 `editable`后,可监听确认编辑操作。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "select", + "name": "tree", + "label": "Tree", + "creatable": true, + "removable": true, + "editable": true, + "onEvent": { + "editConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + }, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +### deleteConfirm + +配置 `removable`后,可监听确认删除操作。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "select", + "name": "tree", + "label": "Tree", + "creatable": true, + "removable": true, + "editable": true, + "onEvent": { + "deleteConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + }, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` ## 动作表 @@ -1294,7 +1570,6 @@ leftOptions 动态加载,默认 source 接口是返回 options 部分,而 le | reload | - | 重新加载,调用 `source`,刷新数据域数据刷新(重新加载) | | setValue | `value: string` \| `string[]` 更新的值 | 更新数据,开启`multiple`支持设置多项,开启`joinValues`时,多值用`,`分隔,否则多值用数组 | - ### 刷新数据源 reload ```schema: scope="body" diff --git a/docs/zh-CN/components/form/tabs-transfer.md b/docs/zh-CN/components/form/tabs-transfer.md index 8dc3584737b..e55ebdabe60 100644 --- a/docs/zh-CN/components/form/tabs-transfer.md +++ b/docs/zh-CN/components/form/tabs-transfer.md @@ -378,6 +378,252 @@ icon: | change | `[name]: string` 组件的值
`items: Option[]` 选项集合 | 选中值变化时触发 | | tab-change | `key: number` 当前激活的选项卡索引 | 选项卡切换时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "label": "组合穿梭器", + "type": "tabs-transfer", + "name": "a", + "sortable": true, + "selectMode": "tree", + "options": [ + { + "label": "成员", + "selectMode": "tree", + "searchable": true, + "children": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ] + }, + { + "label": "用户", + "selectMode": "chained", + "children": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang2" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao2" + }, + { + "label": "钟无艳", + "value": "zhongwuyan2" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai2" + }, + { + "label": "韩信", + "value": "hanxin2" + }, + { + "label": "云中君", + "value": "yunzhongjun2" + } + ] + } + ] + } + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### tab-change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "label": "组合穿梭器", + "type": "tabs-transfer", + "name": "a", + "sortable": true, + "selectMode": "tree", + "options": [ + { + "label": "成员", + "selectMode": "tree", + "searchable": true, + "children": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ] + }, + { + "label": "用户", + "selectMode": "chained", + "children": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang2" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao2" + }, + { + "label": "钟无艳", + "value": "zhongwuyan2" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai2" + }, + { + "label": "韩信", + "value": "hanxin2" + }, + { + "label": "云中君", + "value": "yunzhongjun2" + } + ] + } + ] + } + ], + "onEvent": { + "tab-change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.key}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/form/transfer.md b/docs/zh-CN/components/form/transfer.md index dfaa00e195d..ddcef8fa951 100644 --- a/docs/zh-CN/components/form/transfer.md +++ b/docs/zh-CN/components/form/transfer.md @@ -611,7 +611,6 @@ icon: 默认 GET,携带 term 变量,值为搜索框输入的文字,可从上下文中取数据设置进去。 - ```schema: scope="body" { "type": "page", @@ -694,14 +693,13 @@ icon: "label": "描述2", "value": "值2" } - ], + ] } } ``` 适用于需选择的数据/信息源较多时,用户可直观的知道自己所选择的数据/信息的场景,一般左侧框为数据/信息源,右侧为已选数据/信息,被选中信息同时存在于 2 个框内。 - ### 结果面板跟随模式 `resultListModeFollowSelect` 开启结果面板跟随模式。 @@ -882,9 +880,9 @@ icon: > `3.6.0`及以上版本 -当数据量庞大时,可以开启数据源分页,此时左侧列表底部会出现分页控件,相关配置参考属性表。通常在提交表单中使用分页场景,处理数据量较大的数据源。如果需要在表单中回显已选值,建议同时设置`{"joinValues": false, "extractValue": false}`,因为已选数据可能位于不同的分页,如果仅使用value值作为提交值,可能会导致右侧结果区无法正确渲染。 +当数据量庞大时,可以开启数据源分页,此时左侧列表底部会出现分页控件,相关配置参考属性表。通常在提交表单中使用分页场景,处理数据量较大的数据源。如果需要在表单中回显已选值,建议同时设置`{"joinValues": false, "extractValue": false}`,因为已选数据可能位于不同的分页,如果仅使用 value 值作为提交值,可能会导致右侧结果区无法正确渲染。 -> 仅列表(list)和表格(table)展示模式支持分页,接口的数据结构参考[CRUD数据源接口格式](../crud#数据结构) +> 仅列表(list)和表格(table)展示模式支持分页,接口的数据结构参考[CRUD 数据源接口格式](../crud#数据结构) ```schema: scope="body" { @@ -960,45 +958,44 @@ icon: } ``` - ## 属性表 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置 -| 属性名 | 类型 | 默认值 | 说明 | 版本 | -| -------------------------- | ----------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -| options | `Array`或`Array` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) | -| source | `string`或 [API](../../../docs/types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) | -| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | -| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) | -| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) | -| searchApi | [API](../../../docs/types/api) | | 如果想通过接口检索,可以设置这个 api。 | -| resultListModeFollowSelect | `boolean` | `false` | 结果面板跟随模式,目前只支持`list`、`table`、`tree`(tree 目前只支持非延时加载的`tree`) | -| statistics | `boolean` | `true` | 是否显示统计数据 | -| selectTitle | `string` | `"请选择"` | 左侧的标题文字 | -| resultTitle | `string` | `"当前选择"` | 右侧结果的标题文字 | -| sortable | `boolean` | `false` | 结果可以进行拖拽排序(结果列表为树时,不支持排序) | -| selectMode | `string` | `list` | 可选:`list`、`table`、`tree`、`chained`、`associated`。分别为:列表形式、表格形式、树形选择形式、级联选择形式,关联选择形式(与级联选择的区别在于,级联是无限极,而关联只有一级,关联左边可以是个 tree)。 | -| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值,可以单独配置,参考 `selectMode`,决定搜索结果的展示形式。 | -| searchable | `boolean` | `false` | 左侧列表搜索功能,当设置为  true  时表示可以通过输入部分内容检索出选项项。 | -| searchPlaceholder | `string` | | 左侧列表搜索框提示 | -| columns | `Array` | | 当展示形式为 `table` 可以用来配置展示哪些列,跟 table 中的 columns 配置相似,只是只有展示功能。 | -| leftOptions | `Array` | | 当展示形式为 `associated` 时用来配置左边的选项集。 | -| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式,支持 `list` 或者 `tree`。默认为 `list`。 | -| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式,可选:`list`、`table`、`tree`、`chained`。 | -| resultSearchable | `boolean` | `false` | 结果(右则)列表的检索功能,当设置为 true 时,可以通过输入检索模糊匹配检索内容(目前树的延时加载不支持结果搜索功能) | -| resultSearchPlaceholder | `string` | | 右侧列表搜索框提示 | -| menuTpl | `string` \| [SchemaNode](../../docs/types/schemanode) | | 用来自定义选项展示 | -| valueTpl | `string` \| [SchemaNode](../../docs/types/schemanode) | | 用来自定义值的展示 | -| itemHeight | `number` | `32` | 每个选项的高度,用于虚拟渲染 | -| virtualThreshold | `number` | `100` | 在选项数量超过多少时开启虚拟渲染 | -| pagination | `object` | | 分页配置 | `3.6.0` | -| pagination.className | `string` | | 分页控件CSS类名 | `3.6.0` | -| pagination.enable | `boolean` | | 是否开启分页 | `3.6.0` | -| pagination.layout | `string` \| `string[]` | `["pager"]` | 通过控制 layout 属性的顺序,调整分页结构布局 | `3.6.0` | -| pagination.perPageAvailable | `number[]` | `[10, 20, 50, 100]` | 指定每页可以显示多少条 | `3.6.0` | -| pagination.maxButtons | `number` | `5` | 最多显示多少个分页按钮,最小为 5 | `3.6.0` | -| pagination.popOverContainerSelector | `string` | | 切换每页条数的控件挂载点 | `3.6.0` | +| 属性名 | 类型 | 默认值 | 说明 | 版本 | +| ----------------------------------- | ----------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| options | `Array`或`Array` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) | +| source | `string`或 [API](../../../docs/types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) | +| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) | +| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) | +| searchApi | [API](../../../docs/types/api) | | 如果想通过接口检索,可以设置这个 api。 | +| resultListModeFollowSelect | `boolean` | `false` | 结果面板跟随模式,目前只支持`list`、`table`、`tree`(tree 目前只支持非延时加载的`tree`) | +| statistics | `boolean` | `true` | 是否显示统计数据 | +| selectTitle | `string` | `"请选择"` | 左侧的标题文字 | +| resultTitle | `string` | `"当前选择"` | 右侧结果的标题文字 | +| sortable | `boolean` | `false` | 结果可以进行拖拽排序(结果列表为树时,不支持排序) | +| selectMode | `string` | `list` | 可选:`list`、`table`、`tree`、`chained`、`associated`。分别为:列表形式、表格形式、树形选择形式、级联选择形式,关联选择形式(与级联选择的区别在于,级联是无限极,而关联只有一级,关联左边可以是个 tree)。 | +| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值,可以单独配置,参考 `selectMode`,决定搜索结果的展示形式。 | +| searchable | `boolean` | `false` | 左侧列表搜索功能,当设置为  true  时表示可以通过输入部分内容检索出选项项。 | +| searchPlaceholder | `string` | | 左侧列表搜索框提示 | +| columns | `Array` | | 当展示形式为 `table` 可以用来配置展示哪些列,跟 table 中的 columns 配置相似,只是只有展示功能。 | +| leftOptions | `Array` | | 当展示形式为 `associated` 时用来配置左边的选项集。 | +| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式,支持 `list` 或者 `tree`。默认为 `list`。 | +| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式,可选:`list`、`table`、`tree`、`chained`。 | +| resultSearchable | `boolean` | `false` | 结果(右则)列表的检索功能,当设置为 true 时,可以通过输入检索模糊匹配检索内容(目前树的延时加载不支持结果搜索功能) | +| resultSearchPlaceholder | `string` | | 右侧列表搜索框提示 | +| menuTpl | `string` \| [SchemaNode](../../docs/types/schemanode) | | 用来自定义选项展示 | +| valueTpl | `string` \| [SchemaNode](../../docs/types/schemanode) | | 用来自定义值的展示 | +| itemHeight | `number` | `32` | 每个选项的高度,用于虚拟渲染 | +| virtualThreshold | `number` | `100` | 在选项数量超过多少时开启虚拟渲染 | +| pagination | `object` | | 分页配置 | `3.6.0` | +| pagination.className | `string` | | 分页控件 CSS 类名 | `3.6.0` | +| pagination.enable | `boolean` | | 是否开启分页 | `3.6.0` | +| pagination.layout | `string` \| `string[]` | `["pager"]` | 通过控制 layout 属性的顺序,调整分页结构布局 | `3.6.0` | +| pagination.perPageAvailable | `number[]` | `[10, 20, 50, 100]` | 指定每页可以显示多少条 | `3.6.0` | +| pagination.maxButtons | `number` | `5` | 最多显示多少个分页按钮,最小为 5 | `3.6.0` | +| pagination.popOverContainerSelector | `string` | | 切换每页条数的控件挂载点 | `3.6.0` | ## 事件表 @@ -1011,14 +1008,100 @@ icon: | change | `[name]: string` 组件的值
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 选中值变化时触发 | | selectAll | `items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 全选时触发 | +### change + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "label": "默认", + "type": "transfer", + "name": "transfer", + "value": "zhugeliang", + "options": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + }, + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ], + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.value|json}" + } + } + ] + } + } + } + ] + } +``` + +### selectAll + +```schema: scope="body" +{ + "type": "form", + "debug": true, + "body": [ + { + "label": "默认", + "type": "transfer", + "name": "transfer", + "value": "zhugeliang", + "options": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + }, + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ], + "onEvent": { + "selectAll": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.items|json}" + } + } + ] + } + } + } + ] + } +``` + ## 动作表 当前组件对外暴露以下特性动作,其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作,动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数,详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。 -| 动作名称 | 动作配置 | 说明 | -| --------- | -------------------------------------- | --------------------------------------------------------------------------------------- | -| clear | - | 清空 | -| reset | - | 将值重置为`resetValue`,若没有配置`resetValue`,则清空 | -| clearSearch | `left: boolean` 左侧搜索、`right:boolean`右侧搜索 | 默认清除所有搜索态,可以单独配置`left`、`right`为`true`来清空对应左侧或者右侧面板(`3.4.0`及以上版本支持) | -| selectAll | - | 全选 | -| setValue | `value: string` \| `string[]` 更新的值 | 更新数据,开启`multiple`支持设置多项,开启`joinValues`时,多值用`,`分隔,否则多值用数组 | +| 动作名称 | 动作配置 | 说明 | +| ----------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | +| clear | - | 清空 | +| reset | - | 将值重置为`resetValue`,若没有配置`resetValue`,则清空 | +| clearSearch | `left: boolean` 左侧搜索、`right:boolean`右侧搜索 | 默认清除所有搜索态,可以单独配置`left`、`right`为`true`来清空对应左侧或者右侧面板(`3.4.0`及以上版本支持) | +| selectAll | - | 全选 | +| setValue | `value: string` \| `string[]` 更新的值 | 更新数据,开启`multiple`支持设置多项,开启`joinValues`时,多值用`,`分隔,否则多值用数组 | diff --git a/docs/zh-CN/components/form/treeselect.md b/docs/zh-CN/components/form/treeselect.md index f3b49666c88..abc77b4d662 100755 --- a/docs/zh-CN/components/form/treeselect.md +++ b/docs/zh-CN/components/form/treeselect.md @@ -409,15 +409,408 @@ order: 60 > `[name]`表示当前组件绑定的名称,即`name`属性,如果没有配置`name`属性,则通过`value`取值。 -| 事件名称 | 事件参数 | 说明 | -| ------------ | ------------------------------------------------------------------------------------------------ | ---------------------------- | -| change | `[name]: string` 组件的值
`items: object[]`选项集合(< 3.6.0 及以下版本 不支持该参数) | 选中值变化时触发 | -| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 | -| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 | -| add | `[name]: object` 新增的节点信息
``items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 新增节点提交时触发 | -| edit | `[name]: object` 编辑的节点信息
``items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 编辑节点提交时触发 | -| delete | `[name]: object` 删除的节点信息
``items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 删除节点提交时触发 | -| loadFinished | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 | +| 事件名称 | 事件参数 | 说明 | +| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ---------------------------- | +| change | `[name]: string` 组件的值
`items: object[]`选项集合(< 3.6.0 及以下版本 不支持该参数) | 选中值变化时触发 | +| blur | `[name]: string` 组件的值
`items: object[]`选项集合(< 3.6.4 及以下版本 不支持该参数) | 输入框失去焦点时触发 | +| focus | `[name]: string` 组件的值
`items: object[]`选项集合(< 3.6.4 及以下版本 不支持该参数) | 输入框获取焦点时触发 | +| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值
`item: object` 新增的节点信息
`items: object[]`选项集合 | 新增节点提交时触发 | +| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值
`item: object` 编辑的节点信息
`items: object[]`选项集合 | 编辑节点提交时触发 | +| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值
`item: object` 删除的节点信息
`items: object[]`选项集合 | 删除节点提交时触发 | +| deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值
`result: object` deferApi 懒加载远程请求成功后返回的数据
`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 | +| add(不推荐) | `[name]: object` 新增的节点信息
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 新增节点提交时触发 | +| edit(不推荐) | `[name]: object` 编辑的节点信息
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 编辑节点提交时触发 | +| delete(不推荐) | `[name]: object` 删除的节点信息
`items: object[]`选项集合(< 2.3.2 及以下版本 为`options`) | 删除节点提交时触发 | +| loadFinished(不推荐) | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 | + +### change + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "tree-select", + "name": "tree", + "label": "Tree", + "onEvent": { + "change": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.tree|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### focus + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "tree-select", + "name": "tree", + "label": "Tree", + "onEvent": { + "focus": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.tree|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### blur + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "tree-select", + "name": "tree", + "label": "Tree", + "onEvent": { + "blur": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.tree|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### addConfirm + +配置 `creatable`后,可监听确认新增操作。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "tree-select", + "name": "tree", + "label": "Tree", + "creatable": true, + "removable": true, + "editable": true, + "onEvent": { + "addConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### editConfirm + +配置 `editable`后,可监听确认编辑操作。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "tree-select", + "name": "tree", + "label": "Tree", + "creatable": true, + "removable": true, + "editable": true, + "onEvent": { + "editConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### deleteConfirm + +配置 `removable`后,可监听确认删除操作。 + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "tree-select", + "name": "tree", + "label": "Tree", + "creatable": true, + "removable": true, + "editable": true, + "onEvent": { + "deleteConfirm": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.item|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +### deferLoadFinished + +```schema: scope="body" +{ + "type": "form", + "api": "/api/mock2/form/saveForm", + "debug": true, + "body": [ + { + "type": "tree-select", + "name": "tree", + "label": "Tree", + "deferApi": "/api/mock2/form/deferOptions?label=${label}&waitSeconds=2", + "onEvent": { + "deferLoadFinished": { + "actions": [ + { + "actionType": "toast", + "args": { + "msg": "${event.data.result|json}" + } + } + ] + } + }, + "options": [ + { + "label": "Folder A", + "value": 1, + "collapsed": true, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "这下面是懒加载的", + "value": 4, + "defer": true + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` ## 动作表 diff --git a/packages/amis-core/src/renderers/Form.tsx b/packages/amis-core/src/renderers/Form.tsx index 3881f68d34d..82fe220a687 100644 --- a/packages/amis-core/src/renderers/Form.tsx +++ b/packages/amis-core/src/renderers/Form.tsx @@ -1190,10 +1190,14 @@ export default class Form extends React.Component { store.clear(this.handleReset(action)); } - return this.submit((values): any => { - if (onSubmit && onSubmit(values, action) === false) { - return Promise.resolve(false); + return this.submit(async values => { + if (onSubmit) { + const result = await onSubmit(values, action); + if (result === false) { + return Promise.resolve(false); + } } + // 走到这里代表校验成功了 dispatchEvent('validateSucc', this.props.data); diff --git a/packages/amis-core/src/renderers/Options.tsx b/packages/amis-core/src/renderers/Options.tsx index c9c87a73839..a216fe0a73d 100644 --- a/packages/amis-core/src/renderers/Options.tsx +++ b/packages/amis-core/src/renderers/Options.tsx @@ -492,7 +492,8 @@ export function registerOptionsControl(config: OptionsConfig) { this.toDispose = []; } - async dispatchOptionEvent(eventName: string, eventData: any = '') { + // 不推荐使用,缺少组件值 + async oldDispatchOptionEvent(eventName: string, eventData: any = '') { const {dispatchEvent, options} = this.props; const rendererEvent = await dispatchEvent( eventName, @@ -505,6 +506,19 @@ export function registerOptionsControl(config: OptionsConfig) { return !!rendererEvent?.prevented; } + async dispatchOptionEvent(eventName: string, eventData: any = '') { + const {dispatchEvent, options, value} = this.props; + const rendererEvent = await dispatchEvent( + eventName, + resolveEventData( + this.props, + {value, options, items: options, ...eventData} // 为了保持名字统一 + ) + ); + // 返回阻塞标识 + return !!rendererEvent?.prevented; + } + doAction(action: ActionObject, data: object, throwErrors: boolean) { const {resetValue, onChange} = this.props; const actionType = action?.actionType as string; @@ -653,7 +667,9 @@ export function registerOptionsControl(config: OptionsConfig) { value ); - const isPrevented = await this.dispatchOptionEvent('change', newValue); + const isPrevented = await this.dispatchOptionEvent('change', { + value: newValue + }); isPrevented || (onChange && onChange(newValue, submitOnChange, changeImmediately)); } @@ -729,7 +745,9 @@ export function registerOptionsControl(config: OptionsConfig) { ? [] : formItem.filteredOptions.concat(); const newValue = this.formatValueArray(valueArray); - const isPrevented = await this.dispatchOptionEvent('change', newValue); + const isPrevented = await this.dispatchOptionEvent('change', { + value: newValue + }); isPrevented || (onChange && onChange(newValue)); } @@ -844,8 +862,13 @@ export function registerOptionsControl(config: OptionsConfig) { api, createObject(data, option) ); + // 触发事件通知,加载完成 - this.dispatchOptionEvent('loadFinished', json); + // 废弃,不推荐使用 + this.oldDispatchOptionEvent('loadFinished', json); + + // 避免产生breakchange,增加新事件名,用来更正之前的设计问题 + this.dispatchOptionEvent('deferLoadFinished', {result: json}); } @autobind @@ -1002,6 +1025,7 @@ export function registerOptionsControl(config: OptionsConfig) { : value ); + let customAddPrevent = false; let result: any = skipForm ? ctx : await onOpenDialog( @@ -1024,12 +1048,42 @@ export function registerOptionsControl(config: OptionsConfig) { value: parent }, ...(addControls || []) - ] + ], + onSubmit: async (payload: any) => { + const labelKey = labelField || 'label'; + const valueKey = valueField || 'value'; + // 派发确认添加事件 + customAddPrevent = await this.dispatchOptionEvent( + 'addConfirm', + { + item: { + [labelKey]: payload[labelKey], + [valueKey]: payload[valueKey] ?? payload[labelKey] + } + } + ); + + return !customAddPrevent; + } } }, ctx ); + // 派发确认添加事件 + if (skipForm) { + // 避免产生breakchange,增加新事件名,用来更正之前的设计问题 + const prevent = await this.dispatchOptionEvent('addConfirm', { + item: result + }); + + if (prevent) { + return; + } + } else if (customAddPrevent) { + return; + } + // 单独发请求 if (skipForm && addApi) { try { @@ -1068,10 +1122,12 @@ export function registerOptionsControl(config: OptionsConfig) { }; } // 触发事件通知 - const isPrevented = await this.dispatchOptionEvent('add', { + // 废弃,不推荐使用 + const isPrevented = await this.oldDispatchOptionEvent('add', { ...result, idx }); + if (isPrevented) { return; } @@ -1111,6 +1167,7 @@ export function registerOptionsControl(config: OptionsConfig) { editDialog, disabled, labelField, + valueField, onOpenDialog, editApi, editInitApi, @@ -1137,6 +1194,7 @@ export function registerOptionsControl(config: OptionsConfig) { ]; } + let customEditPrevent = false; let result = skipForm ? value : await onOpenDialog( @@ -1150,12 +1208,41 @@ export function registerOptionsControl(config: OptionsConfig) { type: 'form', initApi: editInitApi, api: editApi, - controls: editControls + controls: editControls, + onSubmit: async (payload: any) => { + const labelKey = labelField || 'label'; + const valueKey = valueField || 'value'; + // 避免产生breakchange,增加新事件名,用来更正之前的设计问题 + customEditPrevent = await this.dispatchOptionEvent( + 'editConfirm', + { + item: { + [labelKey]: payload[labelKey], + [valueKey]: payload[valueKey] ?? payload[labelKey] + } + } + ); + + return !customEditPrevent; + } } }, createObject(data, value) ); + if (skipForm) { + // 避免产生breakchange,增加新事件名,用来更正之前的设计问题 + const prevent = await this.dispatchOptionEvent('editConfirm', { + item: result + }); + + if (prevent) { + return; + } + } else if (customEditPrevent) { + return; + } + // 单独发请求 if (skipForm && editApi) { try { @@ -1189,9 +1276,10 @@ export function registerOptionsControl(config: OptionsConfig) { if (!result) { return; } - // 触发事件通知 - const isPrevented = await this.dispatchOptionEvent('edit', result); + // 废弃,不推荐使用 + const isPrevented = await this.oldDispatchOptionEvent('edit', result); + if (isPrevented) { return; } @@ -1244,11 +1332,23 @@ export function registerOptionsControl(config: OptionsConfig) { } // 触发事件通知 - const isPrevented = await this.dispatchOptionEvent('delete', ctx); + // 废弃,不推荐使用 + const isPrevented = await this.oldDispatchOptionEvent('delete', ctx); if (isPrevented) { return; } + // 避免产生breakchange,增加新事件名,用来更正之前的设计问题 + const delConfirmPrevent = await this.dispatchOptionEvent( + 'deleteConfirm', + { + item: value + } + ); + if (delConfirmPrevent) { + return; + } + // 通过 deleteApi 删除。 try { if (deleteApi) { diff --git a/packages/amis-editor-core/src/plugin.ts b/packages/amis-editor-core/src/plugin.ts index d2db67b3303..5b0dc445d7f 100644 --- a/packages/amis-editor-core/src/plugin.ts +++ b/packages/amis-editor-core/src/plugin.ts @@ -971,7 +971,7 @@ export interface RendererPluginEvent { defaultShow?: boolean; // 是否默认展示 isBroadcast?: boolean; // 广播事件 owner?: string; // 标记来源,主要用于广播 - dataSchema?: any[]; // 上下文schema + dataSchema?: any[] | ((manager: EditorManager) => any[]); // 上下文schema strongDesc?: string; } diff --git a/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx b/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx index 070409206be..0e123ab98b8 100644 --- a/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx @@ -1,4 +1,8 @@ -import {EditorNodeType, registerEditorPlugin} from 'amis-editor-core'; +import { + EditorManager, + EditorNodeType, + registerEditorPlugin +} from 'amis-editor-core'; import {BasePlugin, BaseEventContext} from 'amis-editor-core'; import { @@ -9,7 +13,7 @@ import { import {getSchemaTpl, defaultValue} from 'amis-editor-core'; import {getEventControlConfig} from '../../renderer/event-control/helper'; import {ValidatorTag} from '../../validator'; -import {resolveOptionType} from '../../util'; +import {resolveOptionEventDataSchame, resolveOptionType} from '../../util'; import type {Schema} from 'amis'; export class ButtonGroupControlPlugin extends BasePlugin { @@ -65,23 +69,24 @@ export class ButtonGroupControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' + dataSchema: (manager: EditorManager) => { + const {value} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value } } } } - } - ] + ]; + } } ]; @@ -205,7 +210,7 @@ export class ButtonGroupControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx b/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx index 7452d42c8e6..6d8c3054570 100644 --- a/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx @@ -1,4 +1,8 @@ -import {EditorNodeType, registerEditorPlugin} from 'amis-editor-core'; +import { + EditorManager, + EditorNodeType, + registerEditorPlugin +} from 'amis-editor-core'; import { BasePlugin, BaseEventContext, @@ -14,6 +18,7 @@ import { import {ValidatorTag} from '../../validator'; import {getEventControlConfig} from '../../renderer/event-control/helper'; import type {Schema} from 'amis'; +import {resolveOptionEventDataSchame} from '../../util'; export class ChainedSelectControlPlugin extends BasePlugin { static id = 'ChainedSelectControlPlugin'; @@ -52,23 +57,24 @@ export class ChainedSelectControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' + dataSchema: (manager: EditorManager) => { + const {value} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value } } } } - } - ] + ]; + } } ]; diff --git a/packages/amis-editor/src/plugin/Form/Checkbox.tsx b/packages/amis-editor/src/plugin/Form/Checkbox.tsx index de98c833a4b..568153b651c 100644 --- a/packages/amis-editor/src/plugin/Form/Checkbox.tsx +++ b/packages/amis-editor/src/plugin/Form/Checkbox.tsx @@ -3,7 +3,8 @@ import { setSchemaTpl, getSchemaTpl, valuePipeOut, - EditorNodeType + EditorNodeType, + EditorManager } from 'amis-editor-core'; import {isPureVariable} from 'amis'; import {registerEditorPlugin} from 'amis-editor-core'; @@ -67,23 +68,33 @@ export class CheckboxControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中状态变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '状态值' + dataSchema: (manager: EditorManager) => { + const node = manager.store.getNodeById(manager.store.activeId); + const schemas = manager.dataSchema.current.schemas; + const dataSchema = schemas.find( + item => item.properties?.[node!.schema.name] + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'string', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? + {}), + title: '状态值' + } } } } } - } - ] + ]; + } } ]; // 动作定义 diff --git a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx index 019585de56b..fff1b32c9ac 100644 --- a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx +++ b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx @@ -3,7 +3,8 @@ import { setSchemaTpl, getSchemaTpl, valuePipeOut, - EditorNodeType + EditorNodeType, + EditorManager } from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import { @@ -18,7 +19,11 @@ import {ValidatorTag} from '../../validator'; import type {Schema} from 'amis'; import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; import {getEventControlConfig} from '../../renderer/event-control/helper'; -import {resolveOptionType} from '../../util'; +import { + OPTION_EDIT_EVENTS, + resolveOptionEventDataSchame, + resolveOptionType +} from '../../util'; export class CheckboxesControlPlugin extends BasePlugin { static id = 'CheckboxesControlPlugin'; @@ -75,24 +80,26 @@ export class CheckboxesControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' + dataSchema: (manager: EditorManager) => { + const {value} = resolveOptionEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value } } } } - } - ] - } + ]; + } + }, + ...OPTION_EDIT_EVENTS ]; // 动作定义 @@ -235,7 +242,7 @@ export class CheckboxesControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/Combo.tsx b/packages/amis-editor/src/plugin/Form/Combo.tsx index e6f4160d7dc..4c71aabea38 100644 --- a/packages/amis-editor/src/plugin/Form/Combo.tsx +++ b/packages/amis-editor/src/plugin/Form/Combo.tsx @@ -20,6 +20,7 @@ import { getArgsWrapper, getEventControlConfig } from '../../renderer/event-control/helper'; +import {resolveInputTableEventDataSchame} from '../../util'; export class ComboControlPlugin extends BasePlugin { static id = 'ComboControlPlugin'; @@ -52,7 +53,7 @@ export class ComboControlPlugin extends BasePlugin { items: [ { type: 'input-text', - name: 'input-text', + name: 'text', placeholder: '文本' }, { @@ -101,83 +102,100 @@ export class ComboControlPlugin extends BasePlugin { eventName: 'add', eventLabel: '添加', description: '添加组合项时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '组合项的值' + dataSchema: (manager: EditorManager) => { + const {value} = resolveInputTableEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'string', + ...value, + title: '组合项的值' + } } } } } - } - ] + ]; + } }, { eventName: 'delete', eventLabel: '删除', description: '删除组合项', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - key: { - type: 'string', - title: '被删除的索引' - }, - value: { - type: 'string', - title: '组合项的值' - }, - item: { - type: 'object', - title: '被删除的项' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + key: { + type: 'number', + title: '被删除的索引' + }, + value: { + type: 'string', + ...value, + title: '组合项的值' + }, + item: { + type: 'object', + ...item, + title: '被删除的项' + } } } } } - } - ] + ]; + } }, { eventName: 'tabsChange', eventLabel: '切换tab', description: '当设置 tabsMode 为 true 时,切换选项卡时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - key: { - type: 'string', - title: '选项卡索引' - }, - value: { - type: 'string', - title: '组合项的值' - }, - item: { - type: 'object', - title: '被激活的项' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + key: { + type: 'number', + title: '选项卡索引' + }, + value: { + type: 'string', + ...value, + title: '组合项的值' + }, + item: { + type: 'object', + ...item, + title: '被激活的项' + } } } } } - } - ] + ]; + } } ]; diff --git a/packages/amis-editor/src/plugin/Form/InputCity.tsx b/packages/amis-editor/src/plugin/Form/InputCity.tsx index 0f6fe618c87..209e397deec 100644 --- a/packages/amis-editor/src/plugin/Form/InputCity.tsx +++ b/packages/amis-editor/src/plugin/Form/InputCity.tsx @@ -1,4 +1,5 @@ import { + EditorManager, EditorNodeType, defaultValue, getSchemaTpl, @@ -66,23 +67,33 @@ export class CityControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '当前城市' + dataSchema: (manager: EditorManager) => { + const node = manager.store.getNodeById(manager.store.activeId); + const schemas = manager.dataSchema.current.schemas; + const dataSchema = schemas.find( + item => item.properties?.[node!.schema.name] + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'string', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? + {}), + title: '当前城市' + } } } } } - } - ] + ]; + } } ]; diff --git a/packages/amis-editor/src/plugin/Form/InputKV.tsx b/packages/amis-editor/src/plugin/Form/InputKV.tsx index ed4a45af598..36e7ab00771 100644 --- a/packages/amis-editor/src/plugin/Form/InputKV.tsx +++ b/packages/amis-editor/src/plugin/Form/InputKV.tsx @@ -43,7 +43,7 @@ export class KVControlPlugin extends BasePlugin { ] }; - // 事件定义 + // 事件定义,定义了而已,配置面板还没升级,未暴露入口 events: RendererPluginEvent[] = [ { eventName: 'add', diff --git a/packages/amis-editor/src/plugin/Form/InputRange.tsx b/packages/amis-editor/src/plugin/Form/InputRange.tsx index 7fd49e03aad..56446ad7cc0 100644 --- a/packages/amis-editor/src/plugin/Form/InputRange.tsx +++ b/packages/amis-editor/src/plugin/Form/InputRange.tsx @@ -14,7 +14,8 @@ import type { EditorNodeType, RendererPluginAction, RendererPluginEvent, - BaseEventContext + BaseEventContext, + EditorManager } from 'amis-editor-core'; export class RangeControlPlugin extends BasePlugin { @@ -55,67 +56,97 @@ export class RangeControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '滑块值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'number', - title: '当前滑块值' + dataSchema: (manager: EditorManager) => { + const node = manager.store.getNodeById(manager.store.activeId); + const schemas = manager.dataSchema.current.schemas; + const dataSchema = schemas.find( + item => item.properties?.[node!.schema.name] + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'number', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? + {}), + title: '当前滑块值' + } } } } } - } - ] + ]; + } }, { eventName: 'focus', eventLabel: '获取焦点', description: '当设置 showInput 为 true 时,输入框获取焦点时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'number', - title: '当前数值' + dataSchema: (manager: EditorManager) => { + const node = manager.store.getNodeById(manager.store.activeId); + const schemas = manager.dataSchema.current.schemas; + const dataSchema = schemas.find( + item => item.properties?.[node!.schema.name] + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'number', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? + {}), + title: '当前数值' + } } } } } - } - ] + ]; + } }, { eventName: 'blur', eventLabel: '失去焦点', description: '当设置 showInput 为 true 时,输入框失去焦点时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'number', - title: '当前数值' + dataSchema: (manager: EditorManager) => { + const node = manager.store.getNodeById(manager.store.activeId); + const schemas = manager.dataSchema.current.schemas; + const dataSchema = schemas.find( + item => item.properties?.[node!.schema.name] + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'number', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? + {}), + title: '当前数值' + } } } } } - } - ] + ]; + } } ]; @@ -340,7 +371,7 @@ export class RangeControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - if (node.schema?.multiple) { + if (node.schema?.multiple && node.schema?.joinValues === false) { return { type: 'object', title: node.schema?.label || node.schema?.name, diff --git a/packages/amis-editor/src/plugin/Form/InputTable.tsx b/packages/amis-editor/src/plugin/Form/InputTable.tsx index 6abcb109fa0..5788303fbbc 100644 --- a/packages/amis-editor/src/plugin/Form/InputTable.tsx +++ b/packages/amis-editor/src/plugin/Form/InputTable.tsx @@ -25,7 +25,10 @@ import { getArgsWrapper } from '../../renderer/event-control/helper'; import cloneDeep from 'lodash/cloneDeep'; -import {resolveArrayDatasource} from '../../util'; +import { + resolveArrayDatasource, + resolveInputTableEventDataSchame +} from '../../util'; export class TableControlPlugin extends BasePlugin { static id = 'TableControlPlugin'; @@ -292,493 +295,588 @@ export class TableControlPlugin extends BasePlugin { eventName: 'add', eventLabel: '添加行', description: '点击左下角添加按钮 或 某一行右侧操作栏添加按钮时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - index: { - type: 'array', - title: '新增索引' + dataSchema: (manager: EditorManager) => { + const {value} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + index: { + type: 'number', + title: '新增索引' + } } } } } - } - ] + ]; + } }, { eventName: 'addConfirm', eventLabel: '确认添加', description: '开启”确认模式“,点击添加按钮,填入数据后点击“保存”按钮后触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '新增行记录' - }, - index: { - type: 'number', - title: '新增索引' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '新增行记录' + }, + index: { + type: 'number', + title: '新增索引' + } } } } } - } - ] + ]; + } }, { eventName: 'addSuccess', eventLabel: '添加成功', description: '开启”确认模式“并且配置”新增接口“,点击“保存”后成功添加时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '新增行记录' - }, - index: { - type: 'number', - title: '新增索引' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '新增行记录' + }, + index: { + type: 'number', + title: '新增索引' + } } } } } - } - ] + ]; + } }, { eventName: 'addFail', eventLabel: '添加失败', description: '开启”确认模式“并且配置”新增接口“,点击“保存”后调用接口失败时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '新增行记录' - }, - index: { - type: 'number', - title: '新增索引' - }, - error: { - type: 'object', - title: '请求失败后接口返回的错误信息' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '新增行记录' + }, + index: { + type: 'number', + title: '新增索引' + }, + error: { + type: 'object', + title: '请求失败后接口返回的错误信息' + } } } } } - } - ] + ]; + } }, { eventName: 'edit', eventLabel: '编辑行', description: '点击某一行右侧操作栏“编辑”按钮时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '所在行记录' - }, - index: { - type: 'number', - title: '所在行记录索引' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '所在行记录' + }, + index: { + type: 'number', + title: '所在行记录索引' + } } } } } - } - ] + ]; + } }, { eventName: 'editConfirm', eventLabel: '确认编辑', description: '开启”确认模式“,点击“编辑”按钮,填入数据后点击“保存”按钮后触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '所在行记录' - }, - index: { - type: 'number', - title: '所在行记录索引' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '所在行记录' + }, + index: { + type: 'number', + title: '所在行记录索引' + } } } } } - } - ] + ]; + } }, { eventName: 'editSuccess', eventLabel: '编辑成功', description: '开启”确认模式“并且配置”编辑接口“,点击“保存”后成功编辑时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '所在行记录' - }, - index: { - type: 'number', - title: '所在行记录索引' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '所在行记录' + }, + index: { + type: 'number', + title: '所在行记录索引' + } } } } } - } - ] + ]; + } }, { eventName: 'editFail', eventLabel: '编辑失败', description: '开启”确认模式“并且配置”编辑接口“,点击“保存”后调用接口失败时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '所在行记录' - }, - index: { - type: 'number', - title: '所在行记录索引' - }, - error: { - type: 'object', - title: '请求错误后返回的错误信息' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '所在行记录' + }, + index: { + type: 'number', + title: '所在行记录索引' + }, + error: { + type: 'object', + title: '请求错误后返回的错误信息' + } } } } } - } - ] + ]; + } }, { eventName: 'delete', eventLabel: '删除行', description: '点击某一行右侧操作栏“删除”按钮时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '所在行记录' - }, - index: { - type: 'object', - title: '所在行记录索引' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '所在行记录' + }, + index: { + type: 'object', + title: '所在行记录索引' + } } } } } - } - ] + ]; + } }, { eventName: 'deleteSuccess', eventLabel: '删除成功', description: '配置了“删除接口”,调用接口成功时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '所在行记录' - }, - index: { - type: 'object', - title: '所在行记录索引' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '所在行记录' + }, + index: { + type: 'object', + title: '所在行记录索引' + } } } } } - } - ] + ]; + } }, { eventName: 'deleteFail', eventLabel: '删除失败', description: '配置了“删除接口”,调用接口失败时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' - }, - item: { - type: 'object', - title: '所在行记录' - }, - index: { - type: 'object', - title: '所在行记录索引' - }, - error: { - type: 'object', - title: '请求失败后接口返回的错误信息' + dataSchema: (manager: EditorManager) => { + const {value, item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + }, + item: { + type: 'object', + ...item, + title: '所在行记录' + }, + index: { + type: 'number', + title: '所在行记录索引' + }, + error: { + type: 'object', + title: '请求失败后接口返回的错误信息' + } } } } } - } - ] + ]; + } }, { eventName: 'change', eventLabel: '值变化', description: '表格数据发生改变时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '列表记录' + dataSchema: (manager: EditorManager) => { + const {value} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'array', + ...value, + title: '列表记录' + } } } } } - } - ] + ]; + } }, { eventName: 'orderChange', eventLabel: '行排序', description: '手动拖拽行排序事件', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - movedItems: { - type: 'array', - title: '已排序记录' + dataSchema: (manager: EditorManager) => { + const {item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + movedItems: { + type: 'array', + items: item, + title: '已排序记录' + } } } } } - } - ] + ]; + } }, { eventName: 'rowClick', eventLabel: '行单击', description: '点击整行事件', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - item: { - type: 'object', - title: '当前行记录' - }, - index: { - type: 'number', - title: '当前行索引' + dataSchema: (manager: EditorManager) => { + const {item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + item: { + type: 'object', + ...item, + title: '当前行记录' + }, + index: { + type: 'number', + title: '当前行索引' + } } } } } - } - ] + ]; + } }, { eventName: 'rowDbClick', eventLabel: '行双击', description: '双击整行事件', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - item: { - type: 'object', - title: '当前行记录' - }, - index: { - type: 'number', - title: '当前行索引' + dataSchema: (manager: EditorManager) => { + const {item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + item: { + type: 'object', + ...item, + title: '当前行记录' + }, + index: { + type: 'number', + title: '当前行索引' + } } } } } - } - ] + ]; + } }, { eventName: 'rowMouseEnter', eventLabel: '鼠标移入行事件', description: '移入整行时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - item: { - type: 'object', - title: '当前行记录' - }, - index: { - type: 'number', - title: '当前行索引' + dataSchema: (manager: EditorManager) => { + const {item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + item: { + type: 'object', + ...item, + title: '当前行记录' + }, + index: { + type: 'number', + title: '当前行索引' + } } } } } - } - ] + ]; + } }, { eventName: 'rowMouseLeave', eventLabel: '鼠标移出行事件', description: '移出整行时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - item: { - type: 'object', - title: '当前行记录' - }, - index: { - type: 'number', - title: '当前行索引' + dataSchema: (manager: EditorManager) => { + const {item} = resolveInputTableEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + item: { + type: 'object', + ...item, + title: '当前行记录' + }, + index: { + type: 'number', + title: '当前行索引' + } } } } } - } - ] + ]; + } } ]; diff --git a/packages/amis-editor/src/plugin/Form/InputTag.tsx b/packages/amis-editor/src/plugin/Form/InputTag.tsx index bb52149f4fc..241ad6eaf9c 100644 --- a/packages/amis-editor/src/plugin/Form/InputTag.tsx +++ b/packages/amis-editor/src/plugin/Form/InputTag.tsx @@ -1,4 +1,4 @@ -import {EditorNodeType, getSchemaTpl} from 'amis-editor-core'; +import {EditorManager, EditorNodeType, getSchemaTpl} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import { BasePlugin, @@ -10,7 +10,7 @@ import { import {formItemControl} from '../../component/BaseControl'; import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; -import {resolveOptionType} from '../../util'; +import {resolveOptionEventDataSchame, resolveOptionType} from '../../util'; import type {Schema} from 'amis'; export class TagControlPlugin extends BasePlugin { @@ -61,83 +61,85 @@ export class TagControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'array', - title: '当前标签值' + dataSchema: (manager: EditorManager) => { + const {value, selectedItems, items} = resolveOptionEventDataSchame( + manager, + true + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + selectedItems, + items } } } } - } - ] + ]; + } }, { eventName: 'focus', eventLabel: '获取焦点', description: '获取焦点', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '当前标签值' - }, - selectedItems: { - type: 'array', - title: '选中的标签' - }, - items: { - type: 'array', - title: '标签列表' + dataSchema: (manager: EditorManager) => { + const {value, selectedItems, items} = resolveOptionEventDataSchame( + manager, + true + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + selectedItems, + items } } } } - } - ] + ]; + } }, { eventName: 'blur', eventLabel: '失去焦点', description: '失去焦点', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '当前标签值' - }, - selectedItems: { - type: 'array', - title: '选中的标签' - }, - items: { - type: 'array', - title: '标签列表' + dataSchema: (manager: EditorManager) => { + const {value, selectedItems, items} = resolveOptionEventDataSchame( + manager, + true + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + selectedItems, + items } } } } - } - ] + ]; + } } ]; @@ -204,7 +206,7 @@ export class TagControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/InputText.tsx b/packages/amis-editor/src/plugin/Form/InputText.tsx index 8ab46bab4ff..69002e7b230 100644 --- a/packages/amis-editor/src/plugin/Form/InputText.tsx +++ b/packages/amis-editor/src/plugin/Form/InputText.tsx @@ -1,4 +1,8 @@ -import {EditorNodeType, registerEditorPlugin} from 'amis-editor-core'; +import { + EditorManager, + EditorNodeType, + registerEditorPlugin +} from 'amis-editor-core'; import { BasePlugin, BasicSubRenderInfo, @@ -77,67 +81,97 @@ export class TextControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '输入框内容变化', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '当前文本内容' + dataSchema: (manager: EditorManager) => { + const node = manager.store.getNodeById(manager.store.activeId); + const schemas = manager.dataSchema.current.schemas; + const dataSchema = schemas.find( + item => item.properties?.[node!.schema.name] + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'string', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? + {}), + title: '当前文本内容' + } } } } } - } - ] + ]; + } }, { eventName: 'focus', eventLabel: '获取焦点', description: '输入框获取焦点', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '当前文本内容' + dataSchema: (manager: EditorManager) => { + const node = manager.store.getNodeById(manager.store.activeId); + const schemas = manager.dataSchema.current.schemas; + const dataSchema = schemas.find( + item => item.properties?.[node!.schema.name] + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'string', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? + {}), + title: '当前文本内容' + } } } } } - } - ] + ]; + } }, { eventName: 'blur', eventLabel: '失去焦点', description: '输入框失去焦点', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '当前文本内容' + dataSchema: (manager: EditorManager) => { + const node = manager.store.getNodeById(manager.store.activeId); + const schemas = manager.dataSchema.current.schemas; + const dataSchema = schemas.find( + item => item.properties?.[node!.schema.name] + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'string', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? + {}), + title: '当前文本内容' + } } } } } - } - ] + ]; + } } // 貌似无效,先下掉 // { @@ -441,7 +475,7 @@ export class TextControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx index 05e24cd22fe..6475f7a7215 100644 --- a/packages/amis-editor/src/plugin/Form/InputTree.tsx +++ b/packages/amis-editor/src/plugin/Form/InputTree.tsx @@ -15,7 +15,7 @@ import { } from '../../renderer/event-control/helper'; import {tipedLabel} from 'amis-editor-core'; import {ValidatorTag} from '../../validator'; -import {resolveOptionType} from '../../util'; +import {resolveOptionType, TREE_BASE_EVENTS} from '../../util'; import type {Schema} from 'amis'; // 树组件公共动作 @@ -177,134 +177,7 @@ export class TreeControlPlugin extends BasePlugin { panelTitle = '树选择'; // 事件定义 - events: RendererPluginEvent[] = [ - { - eventName: 'change', - eventLabel: '值变化', - description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '变化的节点值' - }, - items: { - type: 'array', - title: '选项集合' - } - } - } - } - } - ] - }, - { - eventName: 'add', - eventLabel: '新增选项', - description: '新增节点提交时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: '新增的节点信息' - }, - items: { - type: 'array', - title: '选项集合' - } - } - } - } - } - ] - }, - { - eventName: 'edit', - eventLabel: '编辑选项', - description: '编辑选项', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: '编辑的节点信息' - }, - items: { - type: 'array', - title: '选项集合' - } - } - } - } - } - ] - }, - { - eventName: 'delete', - eventLabel: '删除选项', - description: '删除选项', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: '删除的节点信息' - }, - items: { - type: 'array', - title: '选项集合' - } - } - } - } - } - ] - }, - { - eventName: 'loadFinished', - eventLabel: '懒加载完成', - description: '懒加载接口远程请求成功时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: 'deferApi 懒加载远程请求成功后返回的数据' - } - } - } - } - } - ] - } - ]; + events: RendererPluginEvent[] = TREE_BASE_EVENTS; // 动作定义 actions: RendererPluginAction[] = [ @@ -778,7 +651,7 @@ export class TreeControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/ListSelect.tsx b/packages/amis-editor/src/plugin/Form/ListSelect.tsx index a18193d6026..4efd30e779d 100644 --- a/packages/amis-editor/src/plugin/Form/ListSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/ListSelect.tsx @@ -7,9 +7,18 @@ import { import {registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin, BaseEventContext, diff} from 'amis-editor-core'; import {formItemControl} from '../../component/BaseControl'; -import type {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; +import type { + EditorManager, + RendererPluginAction, + RendererPluginEvent +} from 'amis-editor-core'; import type {Schema} from 'amis'; -import {resolveOptionType, schemaArrayFormat, schemaToArray} from '../../util'; +import { + resolveOptionEventDataSchame, + resolveOptionType, + schemaArrayFormat, + schemaToArray +} from '../../util'; export class ListControlPlugin extends BasePlugin { static id = 'ListControlPlugin'; @@ -67,23 +76,24 @@ export class ListControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' + dataSchema: (manager: EditorManager) => { + const {value} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value } } } } - } - ] + ]; + } } ]; @@ -226,7 +236,7 @@ export class ListControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx b/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx index 1896cf4ae78..c5a17a5f6f4 100644 --- a/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx +++ b/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx @@ -6,7 +6,8 @@ import { RendererPluginEvent, tipedLabel, defaultValue, - getSchemaTpl + getSchemaTpl, + EditorNodeType } from 'amis-editor-core'; import {ValidatorTag} from '../../validator'; import {getEventControlConfig} from '../../renderer/event-control/helper'; @@ -78,7 +79,7 @@ export class MatrixControlPlugin extends BasePlugin { title: '数据', properties: { value: { - type: 'string', + type: 'array', title: '选中的值' } } @@ -255,6 +256,15 @@ export class MatrixControlPlugin extends BasePlugin { } ]); }; + + buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { + // 先简单处理了 + return { + type: 'array', + title: node.schema?.label || node.schema?.name, + riginalValue: node.schema?.value // 记录原始值,循环引用检测需要 + }; + } } registerEditorPlugin(MatrixControlPlugin); diff --git a/packages/amis-editor/src/plugin/Form/NestedSelect.tsx b/packages/amis-editor/src/plugin/Form/NestedSelect.tsx index f299f7877aa..74f77a68c2b 100644 --- a/packages/amis-editor/src/plugin/Form/NestedSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/NestedSelect.tsx @@ -1,4 +1,5 @@ import { + EditorManager, EditorNodeType, RendererPluginAction, RendererPluginEvent @@ -8,7 +9,7 @@ import {registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin, BaseEventContext, tipedLabel} from 'amis-editor-core'; import {ValidatorTag} from '../../validator'; import {getEventControlConfig} from '../../renderer/event-control/helper'; -import {resolveOptionType} from '../../util'; +import {resolveOptionEventDataSchame, resolveOptionType} from '../../util'; import type {Schema} from 'amis'; export class NestedSelectControlPlugin extends BasePlugin { @@ -123,67 +124,70 @@ export class NestedSelectControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' + dataSchema: (manager: EditorManager) => { + const {value} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value } } } } - } - ] + ]; + } }, { eventName: 'focus', eventLabel: '获取焦点', description: '输入框获取焦点时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' + dataSchema: (manager: EditorManager) => { + const {value} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value } } } } - } - ] + ]; + } }, { eventName: 'blur', eventLabel: '失去焦点', description: '输入框失去焦点时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' + dataSchema: (manager: EditorManager) => { + const {value} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value } } } } - } - ] + ]; + } } ]; @@ -370,7 +374,7 @@ export class NestedSelectControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/Picker.tsx b/packages/amis-editor/src/plugin/Form/Picker.tsx index a5d177e59c0..fef1e835b9f 100644 --- a/packages/amis-editor/src/plugin/Form/Picker.tsx +++ b/packages/amis-editor/src/plugin/Form/Picker.tsx @@ -5,6 +5,7 @@ import uniq from 'lodash/uniq'; import get from 'lodash/get'; import cloneDeep from 'lodash/cloneDeep'; import { + EditorManager, EditorNodeType, getSchemaTpl, RendererPluginAction, @@ -24,7 +25,7 @@ import {diff} from 'amis-editor-core'; import {isPureVariable} from 'amis-core'; import type {Schema} from 'amis'; import {getEventControlConfig} from '../../renderer/event-control/helper'; -import {resolveOptionType} from '../../util'; +import {resolveOptionEventDataSchame, resolveOptionType} from '../../util'; import {ValidatorTag} from '../../validator'; export class PickerControlPlugin extends BasePlugin { @@ -81,49 +82,52 @@ export class PickerControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中状态变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' - }, - selectedItems: { - type: 'string', - title: '选中的行记录' + dataSchema: (manager: EditorManager) => { + const {value, selectedItems} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + selectedItems } } } } - } - ] + ]; + } }, { eventName: 'itemClick', eventLabel: '点击选项', description: '选项被点击时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - item: { - type: 'object', - title: '所点击的选项' + dataSchema: (manager: EditorManager) => { + const {itemSchema} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + item: { + type: 'object', + title: '所点击的选项', + properties: itemSchema + } } } } } - } - ] + ]; + } } ]; panelJustify = true; @@ -675,7 +679,7 @@ export class PickerControlPlugin extends BasePlugin { } buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/Radios.tsx b/packages/amis-editor/src/plugin/Form/Radios.tsx index 8ab4897e0e8..90d904d9bbb 100644 --- a/packages/amis-editor/src/plugin/Form/Radios.tsx +++ b/packages/amis-editor/src/plugin/Form/Radios.tsx @@ -1,11 +1,16 @@ -import {EditorNodeType, defaultValue, getSchemaTpl} from 'amis-editor-core'; +import { + EditorManager, + EditorNodeType, + defaultValue, + getSchemaTpl +} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin, BaseEventContext} from 'amis-editor-core'; import {ValidatorTag} from '../../validator'; import {getEventControlConfig} from '../../renderer/event-control/helper'; import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; -import {resolveOptionType} from '../../util'; +import {resolveOptionEventDataSchame, resolveOptionType} from '../../util'; import type {Schema} from 'amis'; export class RadiosControlPlugin extends BasePlugin { @@ -62,31 +67,29 @@ export class RadiosControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' - }, - selectedItems: { - type: 'object', - title: '选中的项' - }, - items: { - type: 'array', - title: '选项列表' + dataSchema: (manager: EditorManager) => { + const {value, selectedItems, items} = resolveOptionEventDataSchame( + manager, + false + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + selectedItems, + items } } } } - } - ] + ]; + } } ]; @@ -198,7 +201,7 @@ export class RadiosControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/Select.tsx b/packages/amis-editor/src/plugin/Form/Select.tsx index fff4ee1ccce..a519b126762 100644 --- a/packages/amis-editor/src/plugin/Form/Select.tsx +++ b/packages/amis-editor/src/plugin/Form/Select.tsx @@ -12,14 +12,20 @@ import { import {ValidatorTag} from '../../validator'; import {getEventControlConfig} from '../../renderer/event-control/helper'; -import {resolveOptionType} from '../../util'; +import { + OPTION_EDIT_EVENTS, + OPTION_EDIT_EVENTS_OLD, + resolveOptionEventDataSchame, + resolveOptionType +} from '../../util'; import type {Schema} from 'amis'; import type { EditorNodeType, RendererPluginAction, RendererPluginEvent, - BaseEventContext + BaseEventContext, + EditorManager } from 'amis-editor-core'; export class SelectControlPlugin extends BasePlugin { @@ -83,162 +89,78 @@ export class SelectControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' - }, - selectedItems: { - type: 'object', - title: '选中的项' - }, - items: { - type: 'array', - title: '选项列表' + dataSchema: (manager: EditorManager) => { + const {value, selectedItems, items} = + resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + selectedItems, + items } } } } - } - ] + ]; + } }, { eventName: 'focus', eventLabel: '获取焦点', description: '输入框获取焦点时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' - }, - items: { - type: 'array', - title: '选项列表' + dataSchema: (manager: EditorManager) => { + const {value, items} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + items } } } } - } - ] + ]; + } }, { eventName: 'blur', eventLabel: '失去焦点', description: '输入框失去焦点时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' - }, - items: { - type: 'array', - title: '选项列表' - } - } - } - } - } - ] - }, - { - eventName: 'add', - eventLabel: '新增选项', - description: '新增选项', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: '新增的选项' - }, - items: { - type: 'array', - title: '选项列表' - } - } - } - } - } - ] - }, - { - eventName: 'edit', - eventLabel: '编辑选项', - description: '编辑选项', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: '编辑的选项' - }, - items: { - type: 'array', - title: '选项列表' + dataSchema: (manager: EditorManager) => { + const {value, items} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + items } } } } - } - ] + ]; + } }, - { - eventName: 'delete', - eventLabel: '删除选项', - description: '删除选项', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: '删除的选项' - }, - items: { - type: 'array', - title: '选项列表' - } - } - } - } - } - ] - } + ...OPTION_EDIT_EVENTS, + ...OPTION_EDIT_EVENTS_OLD ]; // 动作定义 @@ -376,7 +298,7 @@ export class SelectControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/Switch.tsx b/packages/amis-editor/src/plugin/Form/Switch.tsx index 6ffae58e7d2..d428cad6121 100644 --- a/packages/amis-editor/src/plugin/Form/Switch.tsx +++ b/packages/amis-editor/src/plugin/Form/Switch.tsx @@ -4,6 +4,7 @@ import {BasePlugin, BaseEventContext} from 'amis-editor-core'; import {ValidatorTag} from '../../validator'; import {getEventControlConfig} from '../../renderer/event-control/helper'; import type { + EditorManager, EditorNodeType, RendererPluginAction, RendererPluginEvent @@ -54,23 +55,33 @@ export class SwitchControlPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '开关值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '开关值' + dataSchema: (manager: EditorManager) => { + const node = manager.store.getNodeById(manager.store.activeId); + const schemas = manager.dataSchema.current.schemas; + const dataSchema = schemas.find( + item => item.properties?.[node!.schema.name] + ); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'string', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? + {}), + title: '开关值' + } } } } } - } - ] + ]; + } } ]; diff --git a/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx b/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx index 344de0cac9f..cd6401c5968 100644 --- a/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx +++ b/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx @@ -1,11 +1,16 @@ import React from 'react'; -import {EditorNodeType, getSchemaTpl, tipedLabel} from 'amis-editor-core'; +import { + EditorManager, + EditorNodeType, + getSchemaTpl, + tipedLabel +} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin, BaseEventContext} from 'amis-editor-core'; import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; import {getEventControlConfig} from '../../renderer/event-control/helper'; -import {resolveOptionType} from '../../util'; +import {resolveOptionEventDataSchame, resolveOptionType} from '../../util'; export class TabsTransferPlugin extends BasePlugin { static id = 'TabsTransferPlugin'; @@ -142,27 +147,25 @@ export class TabsTransferPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' - }, - items: { - type: 'array', - title: '选项列表' + dataSchema: (manager: EditorManager) => { + const {value, items} = resolveOptionEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + items } } } } - } - ] + ]; + } }, { eventName: 'tab-change', @@ -391,7 +394,7 @@ export class TabsTransferPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/Transfer.tsx b/packages/amis-editor/src/plugin/Form/Transfer.tsx index 70e897e1568..212634f6c47 100644 --- a/packages/amis-editor/src/plugin/Form/Transfer.tsx +++ b/packages/amis-editor/src/plugin/Form/Transfer.tsx @@ -1,4 +1,4 @@ -import {EditorNodeType, getSchemaTpl} from 'amis-editor-core'; +import {EditorManager, EditorNodeType, getSchemaTpl} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin, BaseEventContext} from 'amis-editor-core'; import {getEventControlConfig} from '../../renderer/event-control/helper'; @@ -6,7 +6,7 @@ import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core'; import {ValidatorTag} from '../../validator'; import {tipedLabel} from 'amis-editor-core'; -import {resolveOptionType} from '../../util'; +import {resolveOptionEventDataSchame, resolveOptionType} from '../../util'; import type {Schema} from 'amis'; export class TransferPlugin extends BasePlugin { @@ -59,49 +59,48 @@ export class TransferPlugin extends BasePlugin { eventName: 'change', eventLabel: '值变化', description: '输入框失去焦点时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的值' - }, - items: { - type: 'array', - title: '选项列表' + dataSchema: (manager: EditorManager) => { + const {value, items} = resolveOptionEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + items } } } } - } - ] + ]; + } }, { eventName: 'selectAll', eventLabel: '全选', description: '选中所有选项', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - items: { - type: 'array', - title: '选项列表' + dataSchema: (manager: EditorManager) => { + const {items} = resolveOptionEventDataSchame(manager, true); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + items } } } } - } - ] + ]; + } } ]; @@ -391,7 +390,7 @@ export class TransferPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx index 4f8f1534eb3..e3dac3df16d 100644 --- a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx @@ -1,4 +1,5 @@ import { + EditorManager, EditorNodeType, getI18nEnabled, RendererPluginAction, @@ -14,7 +15,11 @@ import { } from '../../renderer/event-control/helper'; import {ValidatorTag} from '../../validator'; import {tipedLabel} from 'amis-editor-core'; -import {resolveOptionType} from '../../util'; +import { + resolveOptionEventDataSchame, + resolveOptionType, + TREE_BASE_EVENTS +} from '../../util'; import {TreeCommonAction} from './InputTree'; export class TreeSelectControlPlugin extends BasePlugin { @@ -79,169 +84,54 @@ export class TreeSelectControlPlugin extends BasePlugin { // 事件定义 events: RendererPluginEvent[] = [ - { - eventName: 'change', - eventLabel: '值变化', - description: '选中值变化时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '选中的节点值' - }, - items: { - type: 'array', - title: '选项列表' - } - } - } - } - } - ] - }, - { - eventName: 'add', - eventLabel: '新增选项', - description: '新增选项提交时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: '新增的选项' - }, - items: { - type: 'array', - title: '选项列表' - } - } - } - } - } - ] - }, - { - eventName: 'edit', - eventLabel: '编辑选项', - description: '编辑选项提交时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: '编辑的选项' - }, - items: { - type: 'array', - title: '选项列表' - } - } - } - } - } - ] - }, - { - eventName: 'delete', - eventLabel: '删除节点', - description: '删除选项提交时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'object', - title: '删除的选项' - }, - items: { - type: 'array', - title: '选项列表' - } - } - } - } - } - ] - }, - { - eventName: 'loadFinished', - eventLabel: '懒加载完成', - description: '懒加载接口远程请求成功时触发', - dataSchema: [ - { - type: 'object', - properties: { - 'event.data.value': { - type: 'string', - title: 'deferApi 懒加载远程请求成功后返回的数据' - } - } - } - ] - }, + ...TREE_BASE_EVENTS, { eventName: 'focus', eventLabel: '获取焦点', description: '输入框获取焦点时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '当前选中的值' + dataSchema: (manager: EditorManager) => { + const {value, items} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + items } } } } - } - ] + ]; + } }, { eventName: 'blur', eventLabel: '失去焦点', description: '输入框失去焦点时触发', - dataSchema: [ - { - type: 'object', - properties: { - data: { - type: 'object', - title: '数据', - properties: { - value: { - type: 'string', - title: '当前选中的值' + dataSchema: (manager: EditorManager) => { + const {value, items} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + items } } } } - } - ] + ]; + } } ]; @@ -688,7 +578,7 @@ export class TreeSelectControlPlugin extends BasePlugin { }; buildDataSchemas(node: EditorNodeType, region: EditorNodeType) { - const type = resolveOptionType(node.schema?.options); + const type = resolveOptionType(node.schema); // todo:异步数据case let dataSchema: any = { type, diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx index 2b2926cd157..2702507d0a2 100644 --- a/packages/amis-editor/src/renderer/event-control/index.tsx +++ b/packages/amis-editor/src/renderer/event-control/index.tsx @@ -591,7 +591,14 @@ export class EventControl extends React.Component< ); } - let jsonSchema = {...(eventConfig?.dataSchema?.[0] ?? {})}; + let jsonSchema: any = {}; + + // 动态构建事件参数 + if (typeof eventConfig?.dataSchema === 'function') { + jsonSchema = eventConfig.dataSchema(manager)?.[0]; + } else { + jsonSchema = {...(eventConfig?.dataSchema?.[0] ?? {})}; + } actions ?.filter(item => item.outputVar) diff --git a/packages/amis-editor/src/util.ts b/packages/amis-editor/src/util.ts index 371dc27be33..8f22673f304 100644 --- a/packages/amis-editor/src/util.ts +++ b/packages/amis-editor/src/util.ts @@ -1,4 +1,5 @@ import {JSONValueMap, findTree, resolveVariableAndFilter} from 'amis'; +import {EditorManager} from 'amis-editor-core'; import isString from 'lodash/isString'; /** @@ -48,7 +49,8 @@ export const schemaArrayFormat = (value: any) => { * @param options * @returns */ -export const resolveOptionType = (options: any) => { +export const resolveOptionType = (schema: any) => { + const {options, valueField} = schema; if (!options) { return 'string'; } @@ -57,14 +59,349 @@ export const resolveOptionType = (options: any) => { let option = options[0]; if (typeof option === 'object') { - option = findTree(options, item => item.value !== undefined); + option = findTree( + options, + item => item[valueField || 'value'] !== undefined + ); } - const value = option?.value ?? option; + const value = option?.[valueField || 'value'] ?? option; return value !== undefined ? typeof value : 'string'; }; +/** + * 构建选择器事件参数 + * @param manager + * @returns + */ +export const resolveOptionEventDataSchame = ( + manager: EditorManager, + multiple?: boolean +) => { + const schemas = manager.dataSchema.current.schemas; + const node = manager.store.getNodeById(manager.store.activeId); + const dataSchema = schemas.find(item => item.properties?.[node!.schema.name]); + + const itemSchema = { + [node!.schema?.labelField || 'label']: { + type: 'string', + title: '文本' + }, + [node!.schema?.valueField || 'value']: { + type: resolveOptionType(node!.schema?.options), + title: '值' + } + }; + + const isMultiple = multiple ?? node!.schema?.multiple; + + return { + value: { + type: 'string', + ...((dataSchema?.properties?.[node!.schema.name] as any) ?? {}), + title: '选中的值' + }, + selectedItems: isMultiple + ? { + type: 'array', + title: '选中的项', + items: { + type: 'object', + title: '成员', + properties: itemSchema + } + } + : { + type: 'object', + title: '选中的项', + properties: itemSchema + }, + items: { + type: 'array', + title: '选项列表', + items: { + type: 'object', + title: '成员', + properties: itemSchema + } + }, + itemSchema + }; +}; + +/** + * 构建输入列表事件参数 + * @param manager + * @param multiple + * @returns + */ +export const resolveInputTableEventDataSchame = ( + manager: EditorManager, + multiple?: boolean +) => { + const schemas = manager.dataSchema.current.schemas; + const node = manager.store.getNodeById(manager.store.activeId); + const dataSchema = schemas.find(item => item.properties?.[node!.schema.name]); + const valDataSchema = dataSchema?.properties?.[node!.schema.name] as any; + const isMultiple = multiple ?? node!.schema?.multiple; + + return { + value: valDataSchema ?? {}, + item: isMultiple ? valDataSchema.items : valDataSchema ?? {} + }; +}; + +export const OPTION_EDIT_EVENTS = [ + { + eventName: 'addConfirm', + eventLabel: '确认新增', + description: '新增提交时触发', + dataSchema: (manager: EditorManager) => { + const {value, items, itemSchema} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + item: { + type: 'object', + title: '新增的选项', + properties: itemSchema + }, + value, + items + } + } + } + } + ]; + } + }, + { + eventName: 'editConfirm', + eventLabel: '确认编辑', + description: '编辑提交时触发', + dataSchema: (manager: EditorManager) => { + const {value, items, itemSchema} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + item: { + type: 'object', + title: '编辑的选项', + properties: itemSchema + }, + value, + items + } + } + } + } + ]; + } + }, + { + eventName: 'deleteConfirm', + eventLabel: '确认删除', + description: '删除提交时触发', + dataSchema: (manager: EditorManager) => { + const {value, items, itemSchema} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + item: { + type: 'object', + title: '删除的选项', + properties: itemSchema + }, + value, + items + } + } + } + } + ]; + } + } +]; + +export const OPTION_EDIT_EVENTS_OLD = [ + { + eventName: 'add', + eventLabel: '确认新增(不推荐)', + description: '新增提交时触发', + dataSchema: [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'object', + title: '新增的节点信息' + }, + items: { + type: 'array', + title: '选项集合' + } + } + } + } + } + ] + }, + { + eventName: 'edit', + eventLabel: '确认编辑(不推荐)', + description: '编辑提交时触发', + dataSchema: [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'object', + title: '编辑的节点信息' + }, + items: { + type: 'array', + title: '选项集合' + } + } + } + } + } + ] + }, + { + eventName: 'delete', + eventLabel: '确认删除(不推荐)', + description: '删除提交时触发', + dataSchema: [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'object', + title: '删除的节点信息' + }, + items: { + type: 'array', + title: '选项集合' + } + } + } + } + } + ] + } +]; + +export const TREE_BASE_EVENTS = [ + { + eventName: 'change', + eventLabel: '值变化', + description: '选中值变化时触发', + dataSchema: (manager: EditorManager) => { + const {value, items} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value, + items + } + } + } + } + ]; + } + }, + ...OPTION_EDIT_EVENTS, + { + eventName: 'deferLoadFinished', + eventLabel: '懒加载完成', + description: '懒加载接口远程请求成功时触发', + dataSchema: (manager: EditorManager) => { + const {value, items} = resolveOptionEventDataSchame(manager); + + return [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + result: { + type: 'object', + title: 'deferApi 懒加载远程请求成功后返回的结果' + }, + value, + items + } + } + } + } + ]; + } + }, + ...OPTION_EDIT_EVENTS_OLD, + { + eventName: 'loadFinished', + eventLabel: '懒加载完成(不推荐)', + description: '懒加载接口远程请求成功时触发', + dataSchema: [ + { + type: 'object', + properties: { + data: { + type: 'object', + title: '数据', + properties: { + value: { + type: 'object', + title: 'deferApi 懒加载远程请求成功后返回的数据' + } + } + } + } + } + ] + } +]; + /** * 将组件配置里面的公式进行转义,一般是文本组件编辑器里直接显示公式所用 * diff --git a/packages/amis/src/renderers/Form/Select.tsx b/packages/amis/src/renderers/Form/Select.tsx index 61bb8116170..d1803b314c8 100644 --- a/packages/amis/src/renderers/Form/Select.tsx +++ b/packages/amis/src/renderers/Form/Select.tsx @@ -274,18 +274,15 @@ export default class SelectControl extends React.Component { async dispatchEvent(eventName: SelectRendererEvent, eventData: any = {}) { const event = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1); - const {dispatchEvent, options, data, multiple, selectedOptions} = + const {dispatchEvent, options, value, multiple, selectedOptions} = this.props; - // 触发渲染器事件 const rendererEvent = await dispatchEvent( eventName, resolveEventData(this.props, { options, items: options, // 为了保持名字统一 - value: ['onEdit', 'onDelete'].includes(event) - ? eventData - : eventData && eventData.value, + value, selectedItems: multiple ? selectedOptions : selectedOptions[0] }) ); @@ -521,9 +518,6 @@ export default class SelectControl extends React.Component { onChange={this.changeValue} onBlur={(e: any) => this.dispatchEvent('blur', e)} onFocus={(e: any) => this.dispatchEvent('focus', e)} - onAdd={() => this.dispatchEvent('add')} - onEdit={(item: any) => this.dispatchEvent('edit', item)} - onDelete={(item: any) => this.dispatchEvent('delete', item)} loading={loading} noResultsText={noResultsText} renderMenu={menuTpl ? this.renderMenu : undefined} diff --git a/packages/amis/src/renderers/Form/TreeSelect.tsx b/packages/amis/src/renderers/Form/TreeSelect.tsx index 44b3d12abe7..0d12b7ba19c 100644 --- a/packages/amis/src/renderers/Form/TreeSelect.tsx +++ b/packages/amis/src/renderers/Form/TreeSelect.tsx @@ -249,14 +249,30 @@ export default class TreeSelectControl extends React.Component< ); } + resolveOptions() { + const {options, searchable, autoComplete} = this.props; + + return !isEffectiveApi(autoComplete) && searchable && this.state.inputValue + ? this.filterOptions(options, this.state.inputValue) + : options; + } + handleFocus(e: any) { const {dispatchEvent, value} = this.props; - dispatchEvent('focus', resolveEventData(this.props, {value})); + + dispatchEvent( + 'focus', + resolveEventData(this.props, {value, items: this.resolveOptions()}) + ); } handleBlur(e: any) { - const {dispatchEvent, value, data} = this.props; - dispatchEvent('blur', resolveEventData(this.props, {value})); + const {dispatchEvent, value} = this.props; + + dispatchEvent( + 'blur', + resolveEventData(this.props, {value, items: this.resolveOptions()}) + ); } handleKeyPress(e: React.KeyboardEvent) { @@ -557,19 +573,13 @@ export default class TreeSelectControl extends React.Component< @autobind async resultChangeEvent(value: any) { - const {onChange, options, dispatchEvent, searchable, autoComplete} = - this.props; - - const filteredOptions = - !isEffectiveApi(autoComplete) && searchable && this.state.inputValue - ? this.filterOptions(options, this.state.inputValue) - : options; + const {onChange, dispatchEvent} = this.props; const rendererEvent = await dispatchEvent( 'change', resolveEventData(this.props, { value, - items: filteredOptions + items: this.resolveOptions() }) );