mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat:树组件事件支持选中项获取
This commit is contained in:
lvxiaojiao
parent
e2db651475
commit
09bca38880
@ -1144,17 +1144,17 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
|
||||
| change | `items: object[]`选项集合（< 3.6.0 及以下版本 不支持该参数）<br/>`[name]: string` 组件的值 | 选中值变化时触发 |
|
||||
| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |
|
||||
| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合 | 编辑节点提交时触发 |
|
||||
| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合 | 删除节点提交时触发 |
|
||||
| deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 |
|
||||
| add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |
|
||||
| edit（不推荐） | `[name]: object` 编辑的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 编辑节点提交时触发 |
|
||||
| delete（不推荐） | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 删除节点提交时触发 |
|
||||
| loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
|
||||
| change | `items: object[]`选项集合（3.6.0 及以上版本）<br/>`item: object`选中的节点（6.2.0 及以上版本）<br/>`[name]: string` 组件的值 | 选中值变化时触发 |
|
||||
| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |
|
||||
| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合 | 编辑节点提交时触发 |
|
||||
| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合 | 删除节点提交时触发 |
|
||||
| deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 |
|
||||
| add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |
|
||||
| edit（不推荐） | `[name]: object` 编辑的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 编辑节点提交时触发 |
|
||||
| delete（不推荐） | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 删除节点提交时触发 |
|
||||
| loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |
|
||||
|
||||
### change
|
||||
|
||||
|
||||
@ -409,19 +409,19 @@ order: 60
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
|
||||
| change | `[name]: string` 组件的值 <br/>`items: object[]`选项集合（< 3.6.0 及以下版本 不支持该参数） | 选中值变化时触发 |
|
||||
| blur | `[name]: string` 组件的值 <br/>`items: object[]`选项集合（< 3.6.4 及以下版本 不支持该参数） | 输入框失去焦点时触发 |
|
||||
| focus | `[name]: string` 组件的值 <br/>`items: object[]`选项集合（< 3.6.4 及以下版本 不支持该参数） | 输入框获取焦点时触发 |
|
||||
| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |
|
||||
| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合 | 编辑节点提交时触发 |
|
||||
| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合 | 删除节点提交时触发 |
|
||||
| deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 |
|
||||
| add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |
|
||||
| edit（不推荐） | `[name]: object` 编辑的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 编辑节点提交时触发 |
|
||||
| delete（不推荐） | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 删除节点提交时触发 |
|
||||
| loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
|
||||
| change | `[name]: string` 组件的值 <br/>`item: object`选中的节点（6.2.0 及以上版本）<br/>`items: object[]`选项集合（3.6.0 及以上版本） | 选中值变化时触发 |
|
||||
| blur | `[name]: string` 组件的值 <br/>``item: object`选中的节点（6.2.0 及以上版本）<br/>items: object[]`选项集合（3.6.4 及以上版本） | 输入框失去焦点时触发 |
|
||||
| focus | `[name]: string` 组件的值 <br/>`item: object`选中的节点（6.2.0 及以上版本）<br/>`items: object[]`选项集合（3.6.4 及以上版本） | 输入框获取焦点时触发 |
|
||||
| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |
|
||||
| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合 | 编辑节点提交时触发 |
|
||||
| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合 | 删除节点提交时触发 |
|
||||
| deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 |
|
||||
| add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |
|
||||
| edit（不推荐） | `[name]: object` 编辑的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 编辑节点提交时触发 |
|
||||
| delete（不推荐） | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 删除节点提交时触发 |
|
||||
| loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |
|
||||
|
||||
### change
|
||||
|
||||
|
||||
@ -90,7 +90,8 @@ export class TreeSelectControlPlugin extends BasePlugin {
|
||||
eventLabel: '获取焦点',
|
||||
description: '输入框获取焦点时触发',
|
||||
dataSchema: (manager: EditorManager) => {
|
||||
const {value, items} = resolveOptionEventDataSchame(manager);
|
||||
const {value, items, itemSchema} =
|
||||
resolveOptionEventDataSchame(manager);
|
||||
|
||||
return [
|
||||
{
|
||||
@ -101,6 +102,11 @@ export class TreeSelectControlPlugin extends BasePlugin {
|
||||
title: '数据',
|
||||
properties: {
|
||||
value,
|
||||
item: {
|
||||
type: 'object',
|
||||
title: '选中的项',
|
||||
properties: itemSchema
|
||||
},
|
||||
items
|
||||
}
|
||||
}
|
||||
@ -114,7 +120,8 @@ export class TreeSelectControlPlugin extends BasePlugin {
|
||||
eventLabel: '失去焦点',
|
||||
description: '输入框失去焦点时触发',
|
||||
dataSchema: (manager: EditorManager) => {
|
||||
const {value, items} = resolveOptionEventDataSchame(manager);
|
||||
const {value, items, itemSchema} =
|
||||
resolveOptionEventDataSchame(manager);
|
||||
|
||||
return [
|
||||
{
|
||||
@ -125,6 +132,11 @@ export class TreeSelectControlPlugin extends BasePlugin {
|
||||
title: '数据',
|
||||
properties: {
|
||||
value,
|
||||
item: {
|
||||
type: 'object',
|
||||
title: '选中的项',
|
||||
properties: itemSchema
|
||||
},
|
||||
items
|
||||
}
|
||||
}
|
||||
|
||||
@ -341,7 +341,8 @@ export const TREE_BASE_EVENTS = (schema: any) => {
|
||||
eventLabel: '值变化',
|
||||
description: '选中值变化时触发',
|
||||
dataSchema: (manager: EditorManager) => {
|
||||
const {value, items} = resolveOptionEventDataSchame(manager);
|
||||
const {value, items, itemSchema} =
|
||||
resolveOptionEventDataSchame(manager);
|
||||
|
||||
return [
|
||||
{
|
||||
@ -352,6 +353,11 @@ export const TREE_BASE_EVENTS = (schema: any) => {
|
||||
title: '数据',
|
||||
properties: {
|
||||
value,
|
||||
item: {
|
||||
type: 'object',
|
||||
title: '选中的项',
|
||||
properties: itemSchema
|
||||
},
|
||||
items
|
||||
}
|
||||
}
|
||||
|
||||
@ -263,6 +263,16 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
|
||||
}
|
||||
}
|
||||
|
||||
resolveOption(options: Array<Option>, value: any) {
|
||||
return findTree(options, item => {
|
||||
const valueAbility = this.props.valueField || 'value';
|
||||
const itemValue = hasAbility(item, valueAbility)
|
||||
? item[valueAbility]
|
||||
: '';
|
||||
return itemValue === value;
|
||||
});
|
||||
}
|
||||
|
||||
@autobind
|
||||
addItemFromAction(item: Option, parentValue?: any) {
|
||||
const {onAdd, options, valueField} = this.props;
|
||||
@ -277,25 +287,15 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
|
||||
|
||||
@autobind
|
||||
editItemFromAction(item: Option, originValue: any) {
|
||||
const {onEdit, options, valueField} = this.props;
|
||||
const editItem = findTree(options, item => {
|
||||
const valueAbility = valueField || 'value';
|
||||
const value = hasAbility(item, valueAbility) ? item[valueAbility] : '';
|
||||
return value === originValue;
|
||||
});
|
||||
const {onEdit, options} = this.props;
|
||||
const editItem = this.resolveOption(options, originValue);
|
||||
onEdit && editItem && onEdit({...item, originValue}, editItem, true);
|
||||
}
|
||||
|
||||
@autobind
|
||||
deleteItemFromAction(value: any) {
|
||||
const {onDelete, options, valueField} = this.props;
|
||||
const deleteItem = findTree(options, item => {
|
||||
const valueAbility = valueField || 'value';
|
||||
const itemValue = hasAbility(item, valueAbility)
|
||||
? item[valueAbility]
|
||||
: '';
|
||||
return itemValue === value;
|
||||
});
|
||||
const {onDelete, options} = this.props;
|
||||
const deleteItem = this.resolveOption(options, value);
|
||||
onDelete && deleteItem && onDelete(deleteItem);
|
||||
}
|
||||
|
||||
@ -328,12 +328,14 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
|
||||
async handleChange(value: any) {
|
||||
const {onChange, searchable, options, dispatchEvent} = this.props;
|
||||
const {filteredOptions} = this.state;
|
||||
|
||||
const items = searchable ? filteredOptions : options;
|
||||
const item = this.resolveOption(items, value);
|
||||
const rendererEvent = await dispatchEvent(
|
||||
'change',
|
||||
resolveEventData(this.props, {
|
||||
value,
|
||||
items: searchable ? filteredOptions : options
|
||||
item,
|
||||
items
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
@ -257,22 +257,28 @@ export default class TreeSelectControl extends React.Component<
|
||||
: options;
|
||||
}
|
||||
|
||||
resolveOption(options: any, value: string) {
|
||||
return findTree(options, item => {
|
||||
const valueAbility = this.props.valueField || 'value';
|
||||
const itemValue = hasAbility(item, valueAbility)
|
||||
? item[valueAbility]
|
||||
: '';
|
||||
return itemValue === value;
|
||||
});
|
||||
}
|
||||
|
||||
handleFocus(e: any) {
|
||||
const {dispatchEvent, value} = this.props;
|
||||
|
||||
dispatchEvent(
|
||||
'focus',
|
||||
resolveEventData(this.props, {value, items: this.resolveOptions()})
|
||||
);
|
||||
const items = this.resolveOptions();
|
||||
const item = this.resolveOption(items, value);
|
||||
dispatchEvent('focus', resolveEventData(this.props, {value, item, items}));
|
||||
}
|
||||
|
||||
handleBlur(e: any) {
|
||||
const {dispatchEvent, value} = this.props;
|
||||
|
||||
dispatchEvent(
|
||||
'blur',
|
||||
resolveEventData(this.props, {value, items: this.resolveOptions()})
|
||||
);
|
||||
const items = this.resolveOptions();
|
||||
const item = this.resolveOption(items, value);
|
||||
dispatchEvent('blur', resolveEventData(this.props, {value, item, items}));
|
||||
}
|
||||
|
||||
handleKeyPress(e: React.KeyboardEvent) {
|
||||
@ -549,36 +555,28 @@ export default class TreeSelectControl extends React.Component<
|
||||
|
||||
@autobind
|
||||
editItemFromAction(item: Option, originValue: any) {
|
||||
const {onEdit, options, valueField} = this.props;
|
||||
const editItem = findTree(options, item => {
|
||||
const valueAbility = valueField || 'value';
|
||||
const value = hasAbility(item, valueAbility) ? item[valueAbility] : '';
|
||||
return value === originValue;
|
||||
});
|
||||
const {onEdit, options} = this.props;
|
||||
const editItem = this.resolveOption(options, originValue);
|
||||
onEdit && editItem && onEdit({...item, originValue}, editItem, true);
|
||||
}
|
||||
|
||||
@autobind
|
||||
deleteItemFromAction(value: any) {
|
||||
const {onDelete, options, valueField} = this.props;
|
||||
const deleteItem = findTree(options, item => {
|
||||
const valueAbility = valueField || 'value';
|
||||
const itemValue = hasAbility(item, valueAbility)
|
||||
? item[valueAbility]
|
||||
: '';
|
||||
return itemValue === value;
|
||||
});
|
||||
const {onDelete, options} = this.props;
|
||||
const deleteItem = this.resolveOption(options, value);
|
||||
onDelete && deleteItem && onDelete(deleteItem);
|
||||
}
|
||||
|
||||
@autobind
|
||||
async resultChangeEvent(value: any) {
|
||||
const {onChange, dispatchEvent} = this.props;
|
||||
|
||||
const items = this.resolveOptions();
|
||||
const item = this.resolveOption(items, value);
|
||||
const rendererEvent = await dispatchEvent(
|
||||
'change',
|
||||
resolveEventData(this.props, {
|
||||
value,
|
||||
item,
|
||||
items: this.resolveOptions()
|
||||
})
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user