test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +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

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

@ -1145,8 +1145,8 @@ 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` 组件的值 | 选中值变化时触发 |
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| 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[]`选项集合 | 删除节点提交时触发 |

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

@ -410,10 +410,10 @@ 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 及以下版本 不支持该参数） | 输入框获取焦点时触发 |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| 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[]`选项集合 | 删除节点提交时触发 |

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

@ -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
}
}

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

@ -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
}
}

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
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
})
);

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

@ -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()
})
);