Skip to content

Commit

Permalink
feat: 树组件优化
Browse files Browse the repository at this point in the history
  • Loading branch information
zhouqiqi01 committed Aug 29, 2023
1 parent 3c87ba1 commit 2cab6f2
Show file tree
Hide file tree
Showing 8 changed files with 483 additions and 44 deletions.
56 changes: 48 additions & 8 deletions docs/zh-CN/components/form/input-tree.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1047,6 +1047,41 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
}
```

## searchApi

**发送**

默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。

**响应**

格式要求如下：

```json
{
"status": 0,
"msg": "",
"data": {
"options": [
{
"label": "描述",
"value": "值" // ,
// "children": [] // 可以嵌套
},

{
"label": "描述2",
"value": "值2"
}
],

"value": "值" // 默认值，可以获取列表的同时设置默认值。
}
}
```

适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景。

## 属性表

当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
Expand All @@ -1061,6 +1096,7 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
| iconField | `string` | `"icon"` | 图标值字段 |
| deferField | `string` | `"defer"` | 懒加载字段 |
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
Expand Down Expand Up @@ -1106,7 +1142,7 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
| 事件名称 | 事件参数 | 说明 |
| ------------ | ----------------------------------------------------------------------------------------------- | ---------------------------- |
| change | `[name]: string` 组件的值 | 选中值变化时触发 |
| change | `items: object[]`选项集合（< 3.4.0 及以下版本 不支持该参数）<br/>`[name]: string` 组件的值 | 选中值变化时触发 |
| add | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）<br/>`[name]: object` 新增的节点信息 | 新增节点提交时触发 |
| edit | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）<br/>`[name]: object` 编辑的节点信息 | 编辑节点提交时触发 |
| delete | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）<br/>`[name]: object` 删除的节点信息 | 删除节点提交时触发 |
Expand All @@ -1116,10 +1152,14 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A

当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。

| 动作名称 | 动作配置 | 说明 |
| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |
| expand | openLevel: `number` | 展开指定层级 |
| collapse | - | 收起 |
| clear | - | 清空 |
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |
| 动作名称 | 动作配置 | 说明 |
| -------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| expand | openLevel: `number` | 展开指定层级 |
| collapse | - | 收起 |
| add | `item: Option, parentValue?: any` | item 新增的数据项；parentValue 父级数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） |
| edit | `item: Option, originValue: any` | item 编辑后的数据项；originValue 编辑前数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） |
| delete | value: ` any` | 删除数据项的 value，（如果配置了 valueField，以 valueField 的字段值为准） |
| reload | - | 刷新 |
| clear | - | 清空 |
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |
16 changes: 10 additions & 6 deletions docs/zh-CN/components/form/treeselect.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@ order: 60
| 事件名称 | 事件参数 | 说明 |
| ------------ | ------------------------------------------------------------------------------------------------ | ---------------------------- |
| change | `[name]: string` 组件的值 | 选中值变化时触发 |
| change | `[name]: string` 组件的值 <br/>`items: object[]`选项集合（< 3.4.0 及以下版本 不支持该参数） | 选中值变化时触发 |
| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |
| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |
| add | `[name]: object` 新增的节点信息<br/>``items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |
Expand All @@ -423,8 +423,12 @@ order: 60

当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。

| 动作名称 | 动作配置 | 说明 |
| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |
| clear | - | 清空 |
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |
| 动作名称 | 动作配置 | 说明 |
| -------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| add | `item: Option, parentValue?: any` | item 新增的数据项；parentValue 父级数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） |
| edit | `item: Option, originValue: any` | item 编辑后的数据项；originValue 编辑前数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） |
| delete | value: ` any` | 删除数据项的 value，（如果配置了 valueField，以 valueField 的字段值为准） |
| reload | - | 刷新 |
| clear | - | 清空 |
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
| setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |
126 changes: 119 additions & 7 deletions packages/amis-editor/src/plugin/Form/InputTree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,18 @@ export class TreeControlPlugin extends BasePlugin {
$schema = '/schemas/TreeControlSchema.json';

// 组件名称
name = '树选择框';
name = '树组件';
isBaseComponent = true;
icon = 'fa fa-list-alt';
pluginIcon = 'input-tree-plugin';
description = '树型结构选择，支持 [内嵌模式] 与 [浮层模式] 的外观切换';
searchKeywords = 'tree、树下拉、树下拉框、tree-select';
docLink = '/amis/zh-CN/components/form/input-tree';
// docLink = '/amis/zh-CN/components/form/input-tree'; // 内嵌模式
docLink = '/amis/zh-CN/components/form/treeselect'; // 浮层模式
tags = ['表单项'];
scaffold = {
type: 'input-tree',
label: '树选择框',
type: 'tree-select', // 默认使用浮层模式
label: '树组件',
name: 'tree',
options: [
{
Expand Down Expand Up @@ -66,7 +67,7 @@ export class TreeControlPlugin extends BasePlugin {
body: [
{
...this.scaffold,
label: '树选择框 - 内嵌模式',
label: '树组件 - 浮层模式',
mode: 'normal'
}
]
Expand All @@ -93,6 +94,10 @@ export class TreeControlPlugin extends BasePlugin {
value: {
type: 'string',
title: '变化的节点值'
},
items: {
type: 'array',
title: '选项集合'
}
}
}
Expand Down Expand Up @@ -236,6 +241,102 @@ export class TreeControlPlugin extends BasePlugin {
actionLabel: '收起',
description: '收起树节点'
},
{
actionType: 'add',
actionLabel: '新增',
description: '新增数据项',
innerArgs: ['item', 'parentValue'],
schema: getArgsWrapper({
type: 'container',
body: [
{
type: 'input-kv',
label: '数据项',
name: 'item',
mode: 'horizontal',
inputClassName: 'ml-2',
size: 'lg',
required: true,
draggable: false,
valueType: 'ae-formulaControl',
value: {
label: '',
value: ''
}
},
getSchemaTpl('formulaControl', {
label: '父级数据项的值',
name: 'parentValue',
mode: 'horizontal',
inputClassName: 'ml-2',
size: 'lg',
variables: '${variables}',
inputMode: 'input-group',
placeholder: '请输入父级数据项的值，为空则在头部插入'
})
]
})
},
{
actionType: 'edit',
actionLabel: '编辑',
description: '编辑数据项',
innerArgs: ['item', 'originValue'],
schema: getArgsWrapper({
type: 'container',
body: [
{
type: 'input-kv',
label: '数据项',
name: 'item',
mode: 'horizontal',
inputClassName: 'ml-2',
size: 'lg',
required: true,
draggable: false,
valueType: 'ae-formulaControl',
value: {
label: '',
value: ''
}
},
getSchemaTpl('formulaControl', {
label: '数据编辑项的值',
name: 'originValue',
mode: 'horizontal',
inputClassName: 'ml-2',
required: true,
size: 'lg',
variables: '${variables}',
inputMode: 'input-group',
placeholder: '请输入数据项编辑前的值'
})
]
})
},
{
actionType: 'delete',
actionLabel: '删除',
description: '删除数据项',
innerArgs: ['value'],
schema: getArgsWrapper([
getSchemaTpl('formulaControl', {
label: '数据删除项的值',
name: 'value',
mode: 'horizontal',
inputClassName: 'ml-2',
required: true,
size: 'lg',
variables: '${variables}',
inputMode: 'input-group'
})
])
},
{
actionType: 'reload',
actionLabel: '刷新',
description: '刷新数据'
},
{
actionType: 'clear',
actionLabel: '清空',
Expand Down Expand Up @@ -361,8 +462,13 @@ export class TreeControlPlugin extends BasePlugin {
}),
getSchemaTpl('switch', {
label: '可检索',
name: 'searchable',
visibleOn: 'data.type === "tree-select"'
name: 'searchable'
}),
getSchemaTpl('apiControl', {
name: 'searchApi',
label: '选项搜索接口',
labelClassName: 'none',
visibleOn: 'data.type === "input-tree" && data.searchable'
}),
getSchemaTpl('multiple', {
body: [
Expand Down Expand Up @@ -433,6 +539,12 @@ export class TreeControlPlugin extends BasePlugin {
label: '数据',
showIconField: true
}),
getSchemaTpl('apiControl', {
name: 'deferApi',
label: '懒加载接口',
labelClassName: 'none'
}),
getSchemaTpl('deferField'),
getSchemaTpl(
'loadingConfig',
{
Expand Down
Loading

0 comments on commit 2cab6f2

Please sign in to comment.