amis/examples/components/EventAction/cmpt-event-action/SelectEvent.jsx
hsm-lv 4acfbb99ce
feat:优化动作数据域 (#5544)
* feat:优化事件数据域

* feat:优化事件数据域

* feat:优化事件数据域(option->item,options->items)

* feat:优化事件数据域(version)

* feat:优化事件数据域(修复弹窗事件多次触发&并行数据获取问题)

* feat:优化事件数据域(删除多余代码)

* feat:优化事件数据域(更新文档)

* feat:优化事件数据域(更新文档)

* feat:优化动作数据域

* feat:优化动作数据域
2022-10-12 15:09:03 +08:00

636 lines
15 KiB
JavaScript

const change = name => ({
actions: [
{
actionType: 'toast',
args: {
msgType: 'info',
msg: `派发change事件\${${name}|json\}`
}
}
]
});
const add = {
actions: [
{
actionType: 'toast',
args: {
msgType: 'info',
msg: 'clear-select: ${clear-select|json},items: ${items|json}'
}
}
]
};
const edit = {
actions: [
{
actionType: 'toast',
args: {
msgType: 'info',
msg: 'clear-select: ${clear-select|json},items: ${items|json}'
}
}
]
};
const del = {
actions: [
{
actionType: 'toast',
args: {
msgType: 'info',
msg: 'clear-select: ${clear-select|json},items: ${items|json}'
}
}
]
};
const blur = {
actions: [
{
actionType: 'toast',
args: {
msgType: 'info',
msg: '派发blur事件'
}
}
]
};
const focus = {
actions: [
{
actionType: 'toast',
args: {
msgType: 'info',
msg: '派发focus事件'
}
}
]
};
const options = [
{
label: '选项A',
value: 'A'
},
{
label: '选项B',
value: 'B'
},
{
label: '选项C',
value: 'C'
}
];
export default {
type: 'page',
title: '下拉框组件事件',
regions: ['body', 'toolbar', 'header'],
body: [
{
type: 'tpl',
tpl: 'Select下拉框',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
name: 'trigger1',
id: 'trigger1',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-select',
description: '点击清空指定下拉框选中值'
}
]
}
}
},
{
name: 'clear-select',
id: 'clear-select',
type: 'select',
label: 'clear动作测试',
mode: 'row',
value: 'A,B,C',
multiple: true,
checkAll: true,
creatable: true,
editable: true,
removable: true,
options,
onEvent: {
change: change('clear-select'),
blur,
focus,
add,
edit,
delete: del
}
}
]
}
]
},
{
type: 'tpl',
tpl: 'inputTag标签选择器',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
name: 'trigger2',
id: 'trigger2',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-input-tag',
description: '点击清空指定下拉框选中值'
}
]
}
}
},
{
name: 'clear-input-tag',
id: 'clear-input-tag',
type: 'input-tag',
label: 'clear动作测试',
mode: 'row',
value: 'A,B',
multiple: true,
options,
onEvent: {
change: change('clear-input-tag'),
blur,
focus
}
}
]
}
]
},
{
type: 'tpl',
tpl: 'matrix-checkboxes矩阵勾选',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
name: 'trigger3',
id: 'trigger3',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-matrix-checkboxes',
description: '点击清空指定下拉框选中值'
}
]
}
}
},
{
name: 'clear-matrix-checkboxes',
id: 'clear-matrix-checkboxes',
type: 'matrix-checkboxes',
rowLabel: '行标题说明',
columns: [
{
label: '列1'
},
{
label: '列2'
}
],
rows: [
{
label: '行1'
},
{
label: '行2'
}
],
onEvent: {
change: change('clear-matrix-checkboxes')
}
}
]
}
]
},
{
type: 'tpl',
tpl: 'radios单选框',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
name: 'trigger4',
id: 'trigger4',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-radios',
description: '点击清空指定下拉框选中值'
}
]
}
}
},
{
name: 'clear-radios',
id: 'clear-radios',
type: 'radios',
options,
onEvent: {
change: change('clear-radios')
}
}
]
}
]
},
{
type: 'tpl',
tpl: 'nested-select嵌套下拉框',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
name: 'trigger6',
id: 'trigger6',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-nested-select',
description: '点击清空指定嵌套下拉框选中值'
}
]
}
}
},
{
name: 'clear-nested-select',
id: 'clear-nested-select',
type: 'nested-select',
label: 'clear动作测试',
mode: 'row',
options: [
{
label: '选项A',
value: 'A',
children: []
},
{
label: '选项B',
value: 'B',
children: [
{
label: '选项C',
value: 'C'
},
{
label: '选项D',
value: 'D'
}
]
}
],
multiple: false,
hideNodePathLabel: false,
onlyChildren: false,
joinValues: true,
delimiter: '。',
onEvent: {
change: change('clear-nested-select'),
blur,
focus
}
}
]
}
]
},
{
type: 'tpl',
tpl: 'chained-select级联下拉框',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
name: 'trigger11',
id: 'trigger11',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-chained-select',
description: '点击清空指定级联下拉框选中值'
}
]
}
}
},
{
name: 'clear-chained-select',
id: 'clear-chained-select',
label: 'clear动作测试',
mode: 'row',
type: 'chained-select',
source:
'/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4',
value: 'a,b',
onEvent: {
change: change('clear-chained-select'),
blur,
focus
}
}
]
}
]
},
{
type: 'tpl',
tpl: 'input-city城市选择器',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
name: 'trigger10',
id: 'trigger10',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-input-city',
description: '点击清空城市选择器选中值'
}
]
}
}
},
{
name: 'clear-input-city',
id: 'clear-input-city',
type: 'input-city',
label: 'clear动作测试',
mode: 'row',
onEvent: {
change: change('clear-input-city')
}
}
]
}
]
},
{
type: 'tpl',
tpl: '单选框/复选框',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
name: 'trigger8',
id: 'trigger8',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-checkbox',
description: '点击清空指定单选框选中值'
}
]
}
}
},
{
name: 'clear-checkbox',
id: 'clear-checkbox',
type: 'checkbox',
label: 'clear动作测试',
mode: 'row',
option: '勾选框',
onEvent: {
change: change('clear-checkbox')
}
}
]
},
{
type: 'group',
body: [
{
name: 'trigger9',
id: 'trigger9',
type: 'action',
mode: 'row',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-checkboxes',
description: '点击清空指定浮选框选中值'
}
]
}
}
},
{
name: 'clear-checkboxes',
id: 'clear-checkboxes',
type: 'checkboxes',
mode: 'row',
label: 'clear动作测试',
options,
onEvent: {
change: change('clear-checkboxes')
}
}
]
}
]
},
{
type: 'tpl',
tpl: 'options类',
inline: false,
wrapperComponent: 'h2'
},
{
type: 'form',
debug: true,
body: [
{
type: 'group',
body: [
{
type: 'group',
body: [
{
name: 'trigger5',
id: 'trigger5',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-options_001',
description: '点击清空指定下拉框选中值'
}
]
}
}
},
{
name: 'clear-options_001',
id: 'clear-options_001',
type: 'button-group-select',
options,
onEvent: {
change: change('clear-options_001')
}
}
]
}
]
},
{
type: 'group',
body: [
{
name: 'trigger5',
id: 'trigger5',
type: 'action',
label: 'clear触发器',
level: 'primary',
onEvent: {
click: {
actions: [
{
actionType: 'clear',
componentId: 'clear-options_002',
description: '点击清空指定下拉框选中值'
}
]
}
}
},
{
name: 'clear-options_002',
id: 'clear-options_002',
type: 'list-select',
options,
onEvent: {
change: change('clear-options_002')
}
}
]
}
]
}
]
};