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

lhtuling · Feb 29, 2024 · 09bca38 · 09bca38
1 parent e2db651
commit 09bca38
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 68 deletions.
diff --git a/docs/zh-CN/components/form/input-tree.md b/docs/zh-CN/components/form/input-tree.md
@@ -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
 

diff --git a/docs/zh-CN/components/form/treeselect.md b/docs/zh-CN/components/form/treeselect.md
@@ -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
 

diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
@@ -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
                 }
               }

diff --git a/packages/amis-editor/src/util.ts b/packages/amis-editor/src/util.ts
@@ -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
                 }
               }

diff --git a/packages/amis/src/renderers/Form/InputTree.tsx b/packages/amis/src/renderers/Form/InputTree.tsx
@@ -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
       })
     );
 

diff --git a/packages/amis/src/renderers/Form/TreeSelect.tsx b/packages/amis/src/renderers/Form/TreeSelect.tsx
@@ -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()
       })
     );