test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat:树组件事件支持选中项获取

Browse Source
This commit is contained in:
lvxiaojiao 2024-02-29 15:02:57 +08:00
parent e2db651475
commit 09bca38880
6 changed files with 86 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/zh-CN/components/form/input-tree.md
View File

@ -1144,17 +1144,17 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。 > `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
| 事件名称 | 事件参数 | 说明 | | 事件名称 | 事件参数 | 说明 |
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ---------------------------- | | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| change | `items: object[]`选项集合（< 3.6.0 及以下版本 不支持该参数）<br/>`[name]: string` 组件的值 | 选中值变化时触发 | | 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[]`选项集合 | 新增节点提交时触发 | | addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |
| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<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[]`选项集合 | 删除节点提交时触发 | | 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[]`选项集合 | 懒加载接口远程请求成功时触发 | | deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 |
| add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 | | add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |
| edit（不推荐） | `[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`） | 删除节点提交时触发 | | delete（不推荐） | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 删除节点提交时触发 |
| loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 | | loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |
### change ### change

26
docs/zh-CN/components/form/treeselect.md
View File

@ -409,19 +409,19 @@ order: 60
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。 > `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
| 事件名称 | 事件参数 | 说明 | | 事件名称 | 事件参数 | 说明 |
| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | ---------------------------- | | ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| change | `[name]: string` 组件的值 <br/>`items: object[]`选项集合（< 3.6.0 及以下版本 不支持该参数） | 选中值变化时触发 | | change | `[name]: string` 组件的值 <br/>`item: object`选中的节点（6.2.0 及以上版本）<br/>`items: object[]`选项集合（3.6.0 及以上版本） | 选中值变化时触发 |
| blur | `[name]: string` 组件的值 <br/>`items: object[]`选项集合（< 3.6.4 及以下版本 不支持该参数） | 输入框失去焦点时触发 | | blur | `[name]: string` 组件的值 <br/>``item: object`选中的节点（6.2.0 及以上版本）<br/>items: object[]`选项集合（3.6.4 及以上版本） | 输入框失去焦点时触发 |
| focus | `[name]: string` 组件的值 <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[]`选项集合 | 新增节点提交时触发 | | addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |
| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<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[]`选项集合 | 删除节点提交时触发 | | 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[]`选项集合 | 懒加载接口远程请求成功时触发 | | deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 |
| add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 | | add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |
| edit（不推荐） | `[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`） | 删除节点提交时触发 | | delete（不推荐） | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 删除节点提交时触发 |
| loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 | | loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |
### change ### change

16
packages/amis-editor/src/plugin/Form/TreeSelect.tsx
View File

@ -90,7 +90,8 @@ export class TreeSelectControlPlugin extends BasePlugin {
eventLabel: '获取焦点', eventLabel: '获取焦点',
description: '输入框获取焦点时触发', description: '输入框获取焦点时触发',
dataSchema: (manager: EditorManager) => { dataSchema: (manager: EditorManager) => {
const {value, items} = resolveOptionEventDataSchame(manager); const {value, items, itemSchema} =
resolveOptionEventDataSchame(manager);
return [ return [
{ {
@ -101,6 +102,11 @@ export class TreeSelectControlPlugin extends BasePlugin {
title: '数据', title: '数据',
properties: { properties: {
value, value,
item: {
type: 'object',
title: '选中的项',
properties: itemSchema
},
items items
} }
} }
@ -114,7 +120,8 @@ export class TreeSelectControlPlugin extends BasePlugin {
eventLabel: '失去焦点', eventLabel: '失去焦点',
description: '输入框失去焦点时触发', description: '输入框失去焦点时触发',
dataSchema: (manager: EditorManager) => { dataSchema: (manager: EditorManager) => {
const {value, items} = resolveOptionEventDataSchame(manager); const {value, items, itemSchema} =
resolveOptionEventDataSchame(manager);
return [ return [
{ {
@ -125,6 +132,11 @@ export class TreeSelectControlPlugin extends BasePlugin {
title: '数据', title: '数据',
properties: { properties: {
value, value,
item: {
type: 'object',
title: '选中的项',
properties: itemSchema
},
items items
} }
} }

8
packages/amis-editor/src/util.ts
View File

@ -341,7 +341,8 @@ export const TREE_BASE_EVENTS = (schema: any) => {
eventLabel: '值变化', eventLabel: '值变化',
description: '选中值变化时触发', description: '选中值变化时触发',
dataSchema: (manager: EditorManager) => { dataSchema: (manager: EditorManager) => {
const {value, items} = resolveOptionEventDataSchame(manager); const {value, items, itemSchema} =
resolveOptionEventDataSchame(manager);
return [ return [
{ {
@ -352,6 +353,11 @@ export const TREE_BASE_EVENTS = (schema: any) => {
title: '数据', title: '数据',
properties: { properties: {
value, value,
item: {
type: 'object',
title: '选中的项',
properties: itemSchema
},
items items
} }
} }

34
packages/amis/src/renderers/Form/InputTree.tsx
View File

@ -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 @autobind
addItemFromAction(item: Option, parentValue?: any) { addItemFromAction(item: Option, parentValue?: any) {
const {onAdd, options, valueField} = this.props; const {onAdd, options, valueField} = this.props;
@ -277,25 +287,15 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
@autobind @autobind
editItemFromAction(item: Option, originValue: any) { editItemFromAction(item: Option, originValue: any) {
const {onEdit, options, valueField} = this.props; const {onEdit, options} = this.props;
const editItem = findTree(options, item => { const editItem = this.resolveOption(options, originValue);
const valueAbility = valueField || 'value';
const value = hasAbility(item, valueAbility) ? item[valueAbility] : '';
return value === originValue;
});
onEdit && editItem && onEdit({...item, originValue}, editItem, true); onEdit && editItem && onEdit({...item, originValue}, editItem, true);
} }
@autobind @autobind
deleteItemFromAction(value: any) { deleteItemFromAction(value: any) {
const {onDelete, options, valueField} = this.props; const {onDelete, options} = this.props;
const deleteItem = findTree(options, item => { const deleteItem = this.resolveOption(options, value);
const valueAbility = valueField || 'value';
const itemValue = hasAbility(item, valueAbility)
? item[valueAbility]
: '';
return itemValue === value;
});
onDelete && deleteItem && onDelete(deleteItem); onDelete && deleteItem && onDelete(deleteItem);
} }
@ -328,12 +328,14 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
async handleChange(value: any) { async handleChange(value: any) {
const {onChange, searchable, options, dispatchEvent} = this.props; const {onChange, searchable, options, dispatchEvent} = this.props;
const {filteredOptions} = this.state; const {filteredOptions} = this.state;
const items = searchable ? filteredOptions : options;
const item = this.resolveOption(items, value);
const rendererEvent = await dispatchEvent( const rendererEvent = await dispatchEvent(
'change', 'change',
resolveEventData(this.props, { resolveEventData(this.props, {
value, value,
items: searchable ? filteredOptions : options item,
items
}) })
); );

48
packages/amis/src/renderers/Form/TreeSelect.tsx
View File

@ -257,22 +257,28 @@ export default class TreeSelectControl extends React.Component<
: options; : 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) { handleFocus(e: any) {
const {dispatchEvent, value} = this.props; const {dispatchEvent, value} = this.props;
const items = this.resolveOptions();
dispatchEvent( const item = this.resolveOption(items, value);
'focus', dispatchEvent('focus', resolveEventData(this.props, {value, item, items}));
resolveEventData(this.props, {value, items: this.resolveOptions()})
);
} }
handleBlur(e: any) { handleBlur(e: any) {
const {dispatchEvent, value} = this.props; const {dispatchEvent, value} = this.props;
const items = this.resolveOptions();
dispatchEvent( const item = this.resolveOption(items, value);
'blur', dispatchEvent('blur', resolveEventData(this.props, {value, item, items}));
resolveEventData(this.props, {value, items: this.resolveOptions()})
);
} }
handleKeyPress(e: React.KeyboardEvent) { handleKeyPress(e: React.KeyboardEvent) {
@ -549,36 +555,28 @@ export default class TreeSelectControl extends React.Component<
@autobind @autobind
editItemFromAction(item: Option, originValue: any) { editItemFromAction(item: Option, originValue: any) {
const {onEdit, options, valueField} = this.props; const {onEdit, options} = this.props;
const editItem = findTree(options, item => { const editItem = this.resolveOption(options, originValue);
const valueAbility = valueField || 'value';
const value = hasAbility(item, valueAbility) ? item[valueAbility] : '';
return value === originValue;
});
onEdit && editItem && onEdit({...item, originValue}, editItem, true); onEdit && editItem && onEdit({...item, originValue}, editItem, true);
} }
@autobind @autobind
deleteItemFromAction(value: any) { deleteItemFromAction(value: any) {
const {onDelete, options, valueField} = this.props; const {onDelete, options} = this.props;
const deleteItem = findTree(options, item => { const deleteItem = this.resolveOption(options, value);
const valueAbility = valueField || 'value';
const itemValue = hasAbility(item, valueAbility)
? item[valueAbility]
: '';
return itemValue === value;
});
onDelete && deleteItem && onDelete(deleteItem); onDelete && deleteItem && onDelete(deleteItem);
} }
@autobind @autobind
async resultChangeEvent(value: any) { async resultChangeEvent(value: any) {
const {onChange, dispatchEvent} = this.props; const {onChange, dispatchEvent} = this.props;
const items = this.resolveOptions();
const item = this.resolveOption(items, value);
const rendererEvent = await dispatchEvent( const rendererEvent = await dispatchEvent(
'change', 'change',
resolveEventData(this.props, { resolveEventData(this.props, {
value, value,
item,
items: this.resolveOptions() items: this.resolveOptions()
}) })
); );