Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 树组件优化 #7946

Merged
merged 4 commits into from
Nov 27, 2023
Merged

feat: 树组件优化 #7946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4112f4e
feat: 树组件优化
Aug 29, 2023
0bafe42
pref: option类型组件统一新增deferField字段
Aug 31, 2023
ecfefbf
pref: 树组件优化问题修复
Aug 31, 2023
406a0bc
fix: 树组件优化评审问题修复
Nov 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 50 additions & 8 deletions docs/zh-CN/components/form/input-tree.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1047,6 +1047,43 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
}
```

### searchApi

> `3.6.0` 及以上版本

**发送**

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

**响应**

格式要求如下：

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

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

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

适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景。未配置 searchApi 是前端检索，配置之后就只能通过后端检索。

## 属性表

当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
Expand All @@ -1061,6 +1098,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"` | 懒加载字段 | `3.6.0` |
| 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 +1144,7 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A

| 事件名称 | 事件参数 | 说明 |
| ------------ | ----------------------------------------------------------------------------------------------- | ---------------------------- |
| change | `[name]: string` 组件的值 | 选中值变化时触发 |
| change | `items: object[]`选项集合（< 3.6.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 +1154,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`时，多值用`,`分隔，否则多值用数组 |
1 change: 1 addition & 0 deletions docs/zh-CN/components/form/options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1593,6 +1593,7 @@ order: 2
| multiple | `boolean` | `false` | 是否支持多选 |
| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 |
| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 |
| deferField | `string` | `"defer"` | 标识选项中哪个字段是`defer`值 |
| joinValues | `boolean` | `true` | 是否拼接`value`值 |
| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |
| itemHeight | `number` | `32` | 每个选项的高度，用于虚拟渲染 |
Expand Down
16 changes: 10 additions & 6 deletions docs/zh-CN/components/form/treeselect.md
View file
Open in desktop
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.6.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`时，多值用`,`分隔，否则多值用数组 |
11 changes: 10 additions & 1 deletion packages/amis-core/src/renderers/Options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,11 @@ export interface FormOptionsControl extends FormBaseControl {
*/
resetValue?: string;

/**
* 懒加载字段
*/
deferField?: string;

/**
* 延时加载的 API，当选项中有 defer: true 的选项时，点开会通过此接口扩充。
*/
Expand Down Expand Up @@ -960,6 +965,7 @@ export function registerOptionsControl(config: OptionsConfig) {
source,
data,
valueField,
deferField,
formItem: model,
createBtnLabel,
env,
Expand Down Expand Up @@ -1072,7 +1078,10 @@ export function registerOptionsControl(config: OptionsConfig) {
}

// 如果是懒加载的，只懒加载当前节点。
if (parent?.defer) {
if (
(parent?.hasOwnProperty(deferField) && parent[deferField]) ||
parent?.defer
) {
await this.deferLoad(parent);
} else if (source && addApi) {
// 如果配置了 source 且配置了 addApi 直接重新拉取接口就够了
Expand Down
131 changes: 126 additions & 5 deletions packages/amis-editor/src/plugin/Form/InputTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,119 @@ import {ValidatorTag} from '../../validator';
import {resolveOptionType} from '../../util';
import type {Schema} from 'amis';

// 树组件公共动作
export const TreeCommonAction: RendererPluginAction[] = [
{
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',
keyPlaceholder: 'Option中属性的Key',
value: {
label: '',
value: ''
}
},
getSchemaTpl('formulaControl', {
label: '父级数据项的值',
name: 'parentValue',
mode: 'horizontal',
inputClassName: 'ml-2',
size: 'lg',
variables: '${variables}',
inputMode: 'input-group',
placeholder: '请输入父级数据项 valueField 的值'
})
]
})
},
{
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',
keyPlaceholder: 'Option中属性的Key',
value: {
label: '',
value: ''
}
},
getSchemaTpl('formulaControl', {
label: '数据编辑项的值',
name: 'originValue',
mode: 'horizontal',
inputClassName: 'ml-2',
required: true,
size: 'lg',
variables: '${variables}',
inputMode: 'input-group',
placeholder: '请输入数据项编辑前 valueField 的值'
})
]
})
},
{
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',
placeholder: '请输入删除项 valueField 的值'
})
])
},
{
actionType: 'reload',
actionLabel: '刷新',
description: '刷新数据'
}
];

export class TreeControlPlugin extends BasePlugin {
static id = 'TreeControlPlugin';
// 关联渲染器名字
rendererName = 'input-tree';
$schema = '/schemas/TreeControlSchema.json';

// 组件名称
name = '树选择框';
name = '树组件';
isBaseComponent = true;
disabledRendererPlugin = true;
icon = 'fa fa-list-alt';
pluginIcon = 'input-tree-plugin';
description = '树型结构选择，支持 [内嵌模式] 与 [浮层模式] 的外观切换';
Expand All @@ -36,7 +140,7 @@ export class TreeControlPlugin extends BasePlugin {
tags = ['表单项'];
scaffold = {
type: 'input-tree',
label: '树选择框',
label: '树组件',
name: 'tree',
options: [
{
Expand Down Expand Up @@ -68,7 +172,7 @@ export class TreeControlPlugin extends BasePlugin {
body: [
{
...this.scaffold,
label: '树选择框 - 内嵌模式',
label: '树组件 - 内嵌模式',
mode: 'normal'
}
]
Expand All @@ -95,6 +199,10 @@ export class TreeControlPlugin extends BasePlugin {
value: {
type: 'string',
title: '变化的节点值'
},
items: {
type: 'array',
title: '选项集合'
}
}
}
Expand Down Expand Up @@ -238,6 +346,8 @@ export class TreeControlPlugin extends BasePlugin {
actionLabel: '收起',
description: '收起树节点'
},
/** 新增、编辑、删除、刷新 */
...TreeCommonAction,
{
actionType: 'clear',
actionLabel: '清空',
Expand Down Expand Up @@ -368,8 +478,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 @@ -444,6 +559,12 @@ export class TreeControlPlugin extends BasePlugin {
getSchemaTpl('optionsMenuTpl', {
manager: this.manager
}),
getSchemaTpl('apiControl', {
name: 'deferApi',
label: '懒加载接口',
labelClassName: 'none'
}),
getSchemaTpl('deferField'),
getSchemaTpl(
'loadingConfig',
{
Expand Down
Loading
Loading