mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:39:05 +08:00
fix:修复事件动作对禁用状态控制失效问题&更新文档示例 (#4278)
* fix:修复事件动作对禁用状态控制失效问题&更新文档示例 * fix:修复事件动作对禁用状态控制失效问题 * fix:修复事件动作对禁用状态控制失效问题
This commit is contained in:
hsm-lv
GitHub
parent
dd5200ce18
commit
f1b383608b
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,45 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
body: {
|
||||
type: 'form',
|
||||
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/saveForm',
|
||||
title: '登录',
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '阻止表单提交后的默认提示。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'name',
|
||||
label: '姓名'
|
||||
},
|
||||
{
|
||||
type: 'input-email',
|
||||
name: 'email',
|
||||
label: '邮箱'
|
||||
}
|
||||
],
|
||||
onEvent: {
|
||||
submitFail: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'drawer',
|
||||
drawer: {
|
||||
title: '请求失败',
|
||||
body: {
|
||||
type: 'alert',
|
||||
level: 'warning',
|
||||
icon: 'fa fa-cloud',
|
||||
body: '请求失败，若给您造成不便，敬请谅解。'
|
||||
}
|
||||
},
|
||||
preventDefault: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,47 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '刷新图表，使图表重新加载',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '刷新',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'reload',
|
||||
componentId: 'chart_reload'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
id: 'chart_reload',
|
||||
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/chart/chartData',
|
||||
config: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: '${line}',
|
||||
type: 'line'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
43
examples/components/EventAction/reload-action/ReloadForm.jsx
Normal file
43
examples/components/EventAction/reload-action/ReloadForm.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '刷新表单，使表单重新加载，这样可以触发表单的远程数据重新请求',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '刷新',
|
||||
className: 'mt-2 mb-2',
|
||||
level: 'primary',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'reload',
|
||||
componentId: 'form-reload'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
id: 'form-reload',
|
||||
name: 'form-reload',
|
||||
initApi:
|
||||
'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData',
|
||||
title: '表单',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
id: 'date-input-01',
|
||||
name: 'date',
|
||||
label: '时间戳'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,37 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '刷新下拉框，使下拉框重新加载，这样可以触发下拉框的远程数据重新请求',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '刷新',
|
||||
className: 'mt-2 mb-2',
|
||||
level: 'primary',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'reload',
|
||||
componentId: 'select-reload'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '下拉框',
|
||||
type: 'select',
|
||||
id: 'select-reload',
|
||||
mode: 'horizontal',
|
||||
className: 'mt-2',
|
||||
name: 'select',
|
||||
source:
|
||||
'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/getOptions?waitSeconds=1'
|
||||
}
|
||||
]
|
||||
};
|
||||
179
examples/components/EventAction/update-data/DataAutoFill.jsx
Normal file
179
examples/components/EventAction/update-data/DataAutoFill.jsx
Normal file
@ -0,0 +1,179 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
data: {
|
||||
globalData: {
|
||||
website: 'http://www.baidu.com',
|
||||
email: 'amis!@baidu.com'
|
||||
}
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '远程请求后、表单提交后，将数据回填给另一个组件。请求返回的数据可以指定存储在`outputVar`变量里，其他动作可以通过`event.data.{{outputVar}}`直接获取该数据。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'alert',
|
||||
body: 'http请求后的数据回填给表单',
|
||||
level: 'info',
|
||||
className: 'mt-2 mb-1'
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
id: 'form_data_3',
|
||||
title: '用户信息',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '作者',
|
||||
name: 'author',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '去获取表单数据',
|
||||
primary: true,
|
||||
wrapWithPanel: false,
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'ajax',
|
||||
args: {
|
||||
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/initData'
|
||||
},
|
||||
outputVar: 'myResult'
|
||||
},
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'form_data_3',
|
||||
args: {
|
||||
value: '${event.data.myResult}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'alert',
|
||||
body: '弹窗提交后的数据回填给表单',
|
||||
level: 'info',
|
||||
className: 'mt-2 mb-1'
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
id: 'form_data_3',
|
||||
title: '用户信息',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '作者',
|
||||
name: 'author',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '去获取表单数据',
|
||||
primary: true,
|
||||
wrapWithPanel: false,
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: '登录',
|
||||
id: 'dialog_004',
|
||||
data: {
|
||||
username: 'amis'
|
||||
},
|
||||
body: {
|
||||
type: 'form',
|
||||
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=2',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'username',
|
||||
required: true,
|
||||
placeholder: '请输入用户名',
|
||||
label: '用户名'
|
||||
},
|
||||
{
|
||||
type: 'input-password',
|
||||
name: 'password',
|
||||
label: '密码',
|
||||
required: true,
|
||||
placeholder: '请输入密码'
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住登录'
|
||||
}
|
||||
]
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '提交',
|
||||
className: 'm',
|
||||
primary: true,
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'ajax',
|
||||
args: {
|
||||
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/initData'
|
||||
},
|
||||
outputVar: 'myResult'
|
||||
},
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'form_data_3',
|
||||
args: {
|
||||
value: '${event.data.myResult}'
|
||||
}
|
||||
},
|
||||
{
|
||||
actionType: 'closeDialog'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
214
examples/components/EventAction/update-data/SyncUpdate.jsx
Normal file
214
examples/components/EventAction/update-data/SyncUpdate.jsx
Normal file
@ -0,0 +1,214 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '当某组件的值发生变化时，联动去更新另一个组件的数据，可以通过event.data来获取事件产生的数据，例如输入框change事件的参数是value: string | string[]，则可以通过event.data.value来获取输入的值。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'alert',
|
||||
body: '输入框同步输入框：上面输入框输入时同步更新表单内的输入框。',
|
||||
level: 'info',
|
||||
className: 'mt-2 mb-1'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '输入角色',
|
||||
mode: 'horizontal',
|
||||
onEvent: {
|
||||
change: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'form_data_2',
|
||||
args: {
|
||||
value: {
|
||||
myrole: '${event.data.value}'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '输入年龄',
|
||||
mode: 'horizontal',
|
||||
onEvent: {
|
||||
change: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'form_data_2',
|
||||
args: {
|
||||
value: {
|
||||
age: '${event.data.value}'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
id: 'form_data_2',
|
||||
title: '表单',
|
||||
initApi: '/api/mock2/form/initData',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '角色',
|
||||
name: 'myrole',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '年龄',
|
||||
name: 'age',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'alert',
|
||||
body: '下拉框与输入框联动：选择消息后，将选中值同步给消息输入框。',
|
||||
level: 'info',
|
||||
className: 'mt-2 mb-1'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '选择消息',
|
||||
name: 'message',
|
||||
mode: 'horizontal',
|
||||
options: [
|
||||
{
|
||||
label: 'Hi',
|
||||
value: 'Hi!'
|
||||
},
|
||||
{
|
||||
label: 'Hello',
|
||||
value: 'Hello!'
|
||||
},
|
||||
{
|
||||
label: 'Hey',
|
||||
value: 'Hey!'
|
||||
}
|
||||
],
|
||||
onEvent: {
|
||||
change: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'input_data_msg2',
|
||||
args: {
|
||||
value: '${event.data.value}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '消息',
|
||||
id: 'input_data_msg2',
|
||||
mode: 'horizontal',
|
||||
name: 'mymsg'
|
||||
},
|
||||
{
|
||||
type: 'alert',
|
||||
body: '动态更新下拉框的数据源： 选项1的选中值更新后同步更新选项2的数据源。',
|
||||
level: 'info',
|
||||
className: 'mt-2 mb-1'
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
title: '表单',
|
||||
body: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '选项1',
|
||||
name: 'select1',
|
||||
options: [
|
||||
{
|
||||
label: '选项A',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '选项B',
|
||||
value: 'B'
|
||||
}
|
||||
],
|
||||
id: 'u:af1ad4e2f8db',
|
||||
multiple: false,
|
||||
mode: 'inline',
|
||||
onEvent: {
|
||||
change: {
|
||||
weight: 0,
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
args: {
|
||||
value: {
|
||||
opts: '${optList[event.data.value]}'
|
||||
}
|
||||
},
|
||||
componentId: 'u:d731760b321e'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '选项2',
|
||||
name: 'select2',
|
||||
id: 'u:d731760b321d',
|
||||
multiple: false,
|
||||
mode: 'inline',
|
||||
source: '${opts}'
|
||||
}
|
||||
],
|
||||
id: 'u:d731760b321e',
|
||||
data: {
|
||||
optList: {
|
||||
A: [
|
||||
{
|
||||
label: 'A',
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
label: 'B',
|
||||
value: 'b'
|
||||
},
|
||||
{
|
||||
label: 'C',
|
||||
value: 'c'
|
||||
}
|
||||
],
|
||||
B: [
|
||||
{
|
||||
label: 'A2',
|
||||
value: 'a2'
|
||||
},
|
||||
{
|
||||
label: 'B2',
|
||||
value: 'b2'
|
||||
},
|
||||
{
|
||||
label: 'C2',
|
||||
value: 'c2'
|
||||
}
|
||||
]
|
||||
},
|
||||
opts: []
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -0,0 +1,54 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
id: 'mypage',
|
||||
data: {
|
||||
btnData: 'c'
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '直接更新指定点选按钮的选中值。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'button-group-select_setvalue',
|
||||
args: {
|
||||
value: '${btnData}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button-group-select',
|
||||
id: 'button-group-select_setvalue',
|
||||
label: '选项',
|
||||
name: 'type',
|
||||
options: [
|
||||
{
|
||||
label: 'Option A',
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
label: 'Option B',
|
||||
value: 'b'
|
||||
},
|
||||
{
|
||||
label: 'Option C',
|
||||
value: 'c'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
55
examples/components/EventAction/update-data/UpdateChart.jsx
Normal file
55
examples/components/EventAction/update-data/UpdateChart.jsx
Normal file
@ -0,0 +1,55 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
data: {
|
||||
lineData: {
|
||||
line: [65, 63, 10, 73, 42, 21]
|
||||
}
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '直接更新图表的数据等于更新图表所依赖数据域中的变量，例如下面的例子，`setValue`等于更新绑定的变量`${line}`。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新',
|
||||
level: 'primary',
|
||||
className: 'mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'chart_setvalue',
|
||||
args: {
|
||||
value: '${lineData}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
id: 'chart_setvalue',
|
||||
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/chart/chartData',
|
||||
config: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: '${line}',
|
||||
type: 'line'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
103
examples/components/EventAction/update-data/UpdateCombo.jsx
Normal file
103
examples/components/EventAction/update-data/UpdateCombo.jsx
Normal file
@ -0,0 +1,103 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
id: 'mypage',
|
||||
data: {
|
||||
objData: {
|
||||
name: '路飞',
|
||||
role: '海贼王'
|
||||
},
|
||||
arrayData: [
|
||||
{
|
||||
name: '苹果',
|
||||
count: 10
|
||||
},
|
||||
{
|
||||
name: '黄瓜',
|
||||
count: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '直接更新指定输入组合的值，支持对象和数组。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新对象类型数据',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'userinfo',
|
||||
args: {
|
||||
value: '${objData}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'userinfo',
|
||||
id: 'userinfo',
|
||||
label: '用户信息',
|
||||
items: [
|
||||
{
|
||||
name: 'name',
|
||||
label: '姓名',
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
name: 'role',
|
||||
label: '角色',
|
||||
type: 'input-text'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新数组类型数据',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'shoppingcart',
|
||||
args: {
|
||||
value: '${arrayData}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'combo',
|
||||
name: 'shoppingcart',
|
||||
id: 'shoppingcart',
|
||||
label: '购物车',
|
||||
multiple: true,
|
||||
items: [
|
||||
{
|
||||
name: 'name',
|
||||
label: '商品名称',
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
name: 'count',
|
||||
label: '购买数量',
|
||||
type: 'input-text'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
96
examples/components/EventAction/update-data/UpdateDialog.jsx
Normal file
96
examples/components/EventAction/update-data/UpdateDialog.jsx
Normal file
@ -0,0 +1,96 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
data: {
|
||||
globalData: {
|
||||
website: 'http://www.baidu.com',
|
||||
email: 'amis!@baidu.com',
|
||||
rememberMe: true
|
||||
}
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '这种场景一般用在弹窗内某个异步操作后，数据的回填。请求返回的数据可以指定存储在`outputVar`变量里，其他动作可以通过event.data.{{outputVar}}直接获取该数据。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '打开弹窗',
|
||||
level: 'primary',
|
||||
className: 'mt-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: '在弹框中的表单',
|
||||
id: 'dialog_003',
|
||||
data: {
|
||||
username: 'amis',
|
||||
rememberMe: '${globalData.rememberMe}'
|
||||
},
|
||||
body: {
|
||||
type: 'form',
|
||||
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=2',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'username',
|
||||
required: true,
|
||||
placeholder: '请输入用户名',
|
||||
label: '用户名'
|
||||
},
|
||||
{
|
||||
type: 'input-password',
|
||||
name: 'password',
|
||||
label: '密码',
|
||||
required: true,
|
||||
placeholder: '请输入密码'
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
name: 'rememberMe',
|
||||
label: '记住登录'
|
||||
}
|
||||
]
|
||||
},
|
||||
actions: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '确认',
|
||||
className: 'm',
|
||||
primary: true,
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'ajax',
|
||||
args: {
|
||||
api: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/initData'
|
||||
},
|
||||
outputVar: 'myResult'
|
||||
},
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'dialog_003',
|
||||
args: {
|
||||
value: {
|
||||
username: '${event.data.myResult.name}'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
63
examples/components/EventAction/update-data/UpdateForm.jsx
Normal file
63
examples/components/EventAction/update-data/UpdateForm.jsx
Normal file
@ -0,0 +1,63 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
data: {
|
||||
globalData: {
|
||||
myrole: '法官',
|
||||
mymsg: '该吃饭了!'
|
||||
}
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '直接更新指定的表单组件的数据。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'form_data',
|
||||
args: {
|
||||
value: '${globalData}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
id: 'form_data',
|
||||
title: '表单',
|
||||
debug: true,
|
||||
data: {
|
||||
myrole: '预言家',
|
||||
age: '18'
|
||||
},
|
||||
initApi: '/api/mock2/form/initData',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '角色',
|
||||
name: 'myrole',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '年龄',
|
||||
name: 'age',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
90
examples/components/EventAction/update-data/UpdateInput.jsx
Normal file
90
examples/components/EventAction/update-data/UpdateInput.jsx
Normal file
@ -0,0 +1,90 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
id: 'mypage',
|
||||
data: {
|
||||
globalData: {
|
||||
myrole: '法官',
|
||||
mymsg: '该吃饭了!',
|
||||
title: 'beijing time'
|
||||
}
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '直接更新指定输入框的值。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新输入框',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'input_data_msg',
|
||||
args: {
|
||||
value: '我是amis!'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '消息',
|
||||
id: 'input_data_msg',
|
||||
mode: 'horizontal',
|
||||
name: 'mymsg'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新表单内输入框',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'input_data_role',
|
||||
args: {
|
||||
value: '预言家'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
title: '表单',
|
||||
data: {
|
||||
myrole: '杀手',
|
||||
age: '18'
|
||||
},
|
||||
initApi: '/api/mock2/form/initData',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
id: 'input_data_role',
|
||||
label: '角色',
|
||||
name: 'myrole',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '年龄',
|
||||
name: 'age',
|
||||
disabled: false,
|
||||
mode: 'horizontal'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
123
examples/components/EventAction/update-data/UpdateSelect.jsx
Normal file
123
examples/components/EventAction/update-data/UpdateSelect.jsx
Normal file
@ -0,0 +1,123 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
id: 'mypage',
|
||||
data: {
|
||||
singleData: 'a',
|
||||
multipleData: 'caocao,libai'
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '直接更新指定下拉框的选中值。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新单选数据',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'single-select',
|
||||
args: {
|
||||
value: '${singleData}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '选项',
|
||||
type: 'select',
|
||||
name: 'single-select',
|
||||
id: 'single-select',
|
||||
options: [
|
||||
{
|
||||
label: 'A',
|
||||
value: 'a'
|
||||
},
|
||||
{
|
||||
label: 'B',
|
||||
value: 'b'
|
||||
},
|
||||
{
|
||||
label: 'C',
|
||||
value: 'c'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新多选数据',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'multiple-select',
|
||||
args: {
|
||||
value: '${multipleData}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '分组',
|
||||
type: 'select',
|
||||
name: 'multiple-select',
|
||||
id: 'multiple-select',
|
||||
multiple: true,
|
||||
selectMode: 'group',
|
||||
options: [
|
||||
{
|
||||
label: '法师',
|
||||
children: [
|
||||
{
|
||||
label: '诸葛亮',
|
||||
value: 'zhugeliang'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '战士',
|
||||
children: [
|
||||
{
|
||||
label: '曹操',
|
||||
value: 'caocao'
|
||||
},
|
||||
{
|
||||
label: '钟无艳',
|
||||
value: 'zhongwuyan'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '打野',
|
||||
children: [
|
||||
{
|
||||
label: '李白',
|
||||
value: 'libai'
|
||||
},
|
||||
{
|
||||
label: '韩信',
|
||||
value: 'hanxin'
|
||||
},
|
||||
{
|
||||
label: '云中君',
|
||||
value: 'yunzhongjun'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
68
examples/components/EventAction/update-data/UpdateWizard.jsx
Normal file
68
examples/components/EventAction/update-data/UpdateWizard.jsx
Normal file
@ -0,0 +1,68 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
data: {
|
||||
globalData: {
|
||||
website: 'http://www.baidu.com',
|
||||
email: 'amis!@baidu.com'
|
||||
}
|
||||
},
|
||||
body: [
|
||||
{
|
||||
type: 'alert',
|
||||
body: '直接更新指定的向导组件的数据。',
|
||||
level: 'info',
|
||||
className: 'mb-1'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '更新',
|
||||
level: 'primary',
|
||||
className: 'mt-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'setValue',
|
||||
componentId: 'wizard_data',
|
||||
args: {
|
||||
value: '${globalData}'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'wizard',
|
||||
id: 'wizard_data',
|
||||
mode: 'vertical',
|
||||
data: {
|
||||
website: 'test',
|
||||
email: 'test'
|
||||
},
|
||||
steps: [
|
||||
{
|
||||
title: '第一步',
|
||||
body: [
|
||||
{
|
||||
name: 'website',
|
||||
label: '网址',
|
||||
type: 'input-url'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Step 2',
|
||||
body: [
|
||||
{
|
||||
name: 'email',
|
||||
label: '邮箱',
|
||||
type: 'input-email',
|
||||
required: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -66,22 +66,36 @@ import CRUDLinkPageSchema from './Linkage/CRUD';
|
||||
import OptionsPageSchema from './Linkage/Options';
|
||||
import OptionsLocalPageSchema from './Linkage/OptionsLocal';
|
||||
import FormSubmitSchema from './Linkage/FormSubmit';
|
||||
import InputEventSchema from './EventAction/InputEvent';
|
||||
import DateEventSchema from './EventAction/DateEvent';
|
||||
import SwitchEventSchema from './EventAction/SwitchEvent';
|
||||
import TabsEventSchema from './EventAction/TabsEvent';
|
||||
import UploadEventSchema from './EventAction/UploadEvent';
|
||||
import SelectEventActionSchema from './EventAction/SelectEvent';
|
||||
import ButtonEventActionSchema from './EventAction/ButtonEvent';
|
||||
import InputRatingEventSchema from './EventAction/InputRatingEvent';
|
||||
import ExcelEventSchema from './EventAction/ExcelEvent';
|
||||
import WizardEventSchema from './EventAction/WizardEvent';
|
||||
import InputTreeEventSchema from './EventAction/InputTreeEvent';
|
||||
import treeSelectEventSchema from './EventAction/treeSelectEvent';
|
||||
import FormEventActionSchema from './EventAction/FormEvent';
|
||||
import TransferEventSchema from './EventAction/TransferEvent';
|
||||
import ServiceEventSchema from './EventAction/ServiceEvent';
|
||||
import CarouselEventSchema from './EventAction/CarouselEvent';
|
||||
import InputEventSchema from './EventAction/cmpt-event-action/InputEvent';
|
||||
import DateEventSchema from './EventAction/cmpt-event-action/DateEvent';
|
||||
import SwitchEventSchema from './EventAction/cmpt-event-action/SwitchEvent';
|
||||
import TabsEventSchema from './EventAction/cmpt-event-action/TabsEvent';
|
||||
import UploadEventSchema from './EventAction/cmpt-event-action/UploadEvent';
|
||||
import SelectEventActionSchema from './EventAction/cmpt-event-action/SelectEvent';
|
||||
import ButtonEventActionSchema from './EventAction/cmpt-event-action/ButtonEvent';
|
||||
import InputRatingEventSchema from './EventAction/cmpt-event-action/InputRatingEvent';
|
||||
import ExcelEventSchema from './EventAction/cmpt-event-action/ExcelEvent';
|
||||
import WizardEventSchema from './EventAction/cmpt-event-action/WizardEvent';
|
||||
import InputTreeEventSchema from './EventAction/cmpt-event-action/InputTreeEvent';
|
||||
import treeSelectEventSchema from './EventAction/cmpt-event-action/treeSelectEvent';
|
||||
import FormEventActionSchema from './EventAction/cmpt-event-action/FormEvent';
|
||||
import TransferEventSchema from './EventAction/cmpt-event-action/TransferEvent';
|
||||
import ServiceEventSchema from './EventAction/cmpt-event-action/ServiceEvent';
|
||||
import CarouselEventSchema from './EventAction/cmpt-event-action/CarouselEvent';
|
||||
import ReloadFormActionSchema from './EventAction/reload-action/ReloadForm';
|
||||
import ReloadSelectActionSchema from './EventAction/reload-action/ReloadSelect';
|
||||
import ReloadChartActionSchema from './EventAction/reload-action/ReloadChart';
|
||||
import UpdateFormActionSchema from './EventAction/update-data/UpdateForm';
|
||||
import UpdateDialogActionSchema from './EventAction/update-data/UpdateDialog';
|
||||
import UpdateWizardActionSchema from './EventAction/update-data/UpdateWizard';
|
||||
import UpdateChartActionSchema from './EventAction/update-data/UpdateChart';
|
||||
import UpdateInputActionSchema from './EventAction/update-data/UpdateInput';
|
||||
import UpdateSelectActionSchema from './EventAction/update-data/UpdateSelect';
|
||||
import UpdateButtonGroupSelectActionSchema from './EventAction/update-data/UpdateButtonGroupSelect';
|
||||
import UpdateComboActionSchema from './EventAction/update-data/UpdateCombo';
|
||||
import SyncUpdateActionSchema from './EventAction/update-data/SyncUpdate';
|
||||
import DataAutoFillActionSchema from './EventAction/update-data/DataAutoFill';
|
||||
import PreventFormActionSchema from './EventAction/prevent-defalut/PreventForm';
|
||||
import WizardSchema from './Wizard';
|
||||
import ChartSchema from './Chart';
|
||||
import EChartsEditorSchema from './ECharts';
|
||||
@ -522,6 +536,83 @@ export const examples = [
|
||||
label: '事件动作机制',
|
||||
icon: 'fa fa-bullhorn',
|
||||
children: [
|
||||
{
|
||||
label: '刷新',
|
||||
children: [
|
||||
{
|
||||
label: '刷新表单',
|
||||
path: '/examples/action/reload/form',
|
||||
component: makeSchemaRenderer(ReloadFormActionSchema)
|
||||
},
|
||||
{
|
||||
label: '刷新图表',
|
||||
path: '/examples/action/reload/chart',
|
||||
component: makeSchemaRenderer(ReloadChartActionSchema)
|
||||
},
|
||||
{
|
||||
label: '刷新下拉框',
|
||||
path: '/examples/action/reload/select',
|
||||
component: makeSchemaRenderer(ReloadSelectActionSchema)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '更新数据',
|
||||
children: [
|
||||
{
|
||||
label: '更新表单数据',
|
||||
path: '/examples/action/setdata/form',
|
||||
component: makeSchemaRenderer(UpdateFormActionSchema)
|
||||
},
|
||||
{
|
||||
label: '更新弹窗数据',
|
||||
path: '/examples/action/setdata/dialog',
|
||||
component: makeSchemaRenderer(UpdateDialogActionSchema)
|
||||
},
|
||||
{
|
||||
label: '更新向导数据',
|
||||
path: '/examples/action/setdata/wizard',
|
||||
component: makeSchemaRenderer(UpdateWizardActionSchema)
|
||||
},
|
||||
{
|
||||
label: '更新图表数据',
|
||||
path: '/examples/action/setdata/chart',
|
||||
component: makeSchemaRenderer(UpdateChartActionSchema)
|
||||
},
|
||||
{
|
||||
label: '更新输入框的值',
|
||||
path: '/examples/action/setdata/input',
|
||||
component: makeSchemaRenderer(UpdateInputActionSchema)
|
||||
},
|
||||
{
|
||||
label: '更新下拉框的值',
|
||||
path: '/examples/action/setdata/select',
|
||||
component: makeSchemaRenderer(UpdateSelectActionSchema)
|
||||
},
|
||||
{
|
||||
label: '更新点选按钮的值',
|
||||
path: '/examples/action/setdata/button-group-select',
|
||||
component: makeSchemaRenderer(
|
||||
UpdateButtonGroupSelectActionSchema
|
||||
)
|
||||
},
|
||||
{
|
||||
label: '更新输入组合的值',
|
||||
path: '/examples/action/setdata/combo',
|
||||
component: makeSchemaRenderer(UpdateComboActionSchema)
|
||||
},
|
||||
{
|
||||
label: '联动更新',
|
||||
path: '/examples/action/setdata/sync',
|
||||
component: makeSchemaRenderer(SyncUpdateActionSchema)
|
||||
},
|
||||
{
|
||||
label: '数据回填',
|
||||
path: '/examples/action/setdata/autofill',
|
||||
component: makeSchemaRenderer(DataAutoFillActionSchema)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '执行其他组件动作',
|
||||
children: [
|
||||
@ -606,6 +697,16 @@ export const examples = [
|
||||
component: makeSchemaRenderer(ServiceEventSchema)
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '阻止组件默认行为',
|
||||
children: [
|
||||
{
|
||||
label: '阻止表单默认行为',
|
||||
path: '/examples/action/prevent/form',
|
||||
component: makeSchemaRenderer(PreventFormActionSchema)
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -391,13 +391,10 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
|
||||
ref: this.refFn,
|
||||
render: this.renderChild,
|
||||
rootStore: rootStore,
|
||||
disabled: disable ?? rest.disabled ?? restSchema.disabled,
|
||||
dispatchEvent: this.dispatchEvent
|
||||
};
|
||||
|
||||
if (disable) {
|
||||
(props as any).disabled = true;
|
||||
}
|
||||
|
||||
// 自动解析变量模式，主要是方便直接引入第三方组件库，无需为了支持变量封装一层
|
||||
if (renderer.autoVar) {
|
||||
for (const key of Object.keys($schema)) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user