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

amis-saas-7980 [研发任务] 树选择、树下拉要合并优化

Browse Source 
Change-Id: I89c304d57e8df94b60b1a105f2be16ad3457e047
This commit is contained in:
jiatianqi 2022-11-14 15:50:06 +08:00
parent b7b8779828
commit 1aafb7b1a6
2 changed files with 123 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/amis-editor/src/plugin/Form/InputTree.tsx
View File

@ -20,8 +20,8 @@ export class TreeControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-list-alt';
pluginIcon = 'input-tree-plugin';
description =
'树型结构来选择，可通过 options 来配置选项，也可通过 source 拉取选项';
description = '树型结构选择，支持 [内嵌模式] 与 [浮层模式] 的外观切换';
searchKeywords = 'tree、树下拉、树下拉框、tree-select';
docLink = '/amis/zh-CN/components/form/input-tree';
tags = ['表单项'];
scaffold = {
@ -55,9 +55,13 @@ export class TreeControlPlugin extends BasePlugin {
className: 'text-left',
mode: 'horizontal',
wrapWithPanel: false,
body: {
...this.scaffold
}
body: [
{
...this.scaffold,
label: '树选择框 - 内嵌模式',
mode: 'normal'
}
]
};
notRenderFormZone = true;
@ -268,6 +272,34 @@ export class TreeControlPlugin extends BasePlugin {
required: true
}),
getSchemaTpl('label'),
{
type: 'button-group-select',
name: 'type',
label: '模式',
pipeIn: defaultValue('input-tree'),
options: [
{
label: '内嵌',
value: 'input-tree'
},
{
label: '浮层',
value: 'tree-select'
}
]
},
getSchemaTpl('clearable', {
mode: 'horizontal',
horizontal: {
justify: true,
left: 8
},
inputClassName: 'is-inline ',
visibleOn: 'data.type === "tree-select"'
}),
getSchemaTpl('searchable', {
visibleOn: 'data.type === "tree-select"'
}),
getSchemaTpl('multiple', {
body: [
{
@ -385,7 +417,8 @@ export class TreeControlPlugin extends BasePlugin {
getSchemaTpl('valueFormula', {
name: 'highlightTxt',
label: '高亮节点字符',
type: 'input-text'
type: 'input-text',
visibleOn: 'data.type === "input-tree"'
}),
{
type: 'ae-Switch-More',
@ -426,8 +459,17 @@ export class TreeControlPlugin extends BasePlugin {
name: 'rootLabel'
}
]
}
},
visibleOn: 'data.type === "input-tree"'
},
getSchemaTpl('switch', {
label: tipedLabel(
'选项文本仅显示选中节点',
'隐藏选择框中已选中节点的祖先节点的文本信息'
),
name: 'hideNodePathLabel',
visibleOn: 'data.type==="tree-select"'
}),
getSchemaTpl('switch', {
label: '显示节点图标',
name: 'showIcon',
@ -441,6 +483,10 @@ export class TreeControlPlugin extends BasePlugin {
name: 'showRadio',
hiddenOn: 'data.multiple'
}),
getSchemaTpl('switch', {
label: tipedLabel('显示层级展开线', '显示树层级展开线'),
name: 'showOutline'
}),
getSchemaTpl('switch', {
name: 'withChildren',
label: '数值是否携带子节点',

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

@ -12,17 +12,18 @@ export class TreeSelectControlPlugin extends BasePlugin {
$schema = '/schemas/TreeSelectControlSchema.json';
// 组件名称
name = '树下拉框';
name = '树选择框';
isBaseComponent = true;
icon = 'fa fa-chevron-down';
disabledRendererPlugin = true;
icon = 'fa fa-list-alt';
pluginIcon = 'tree-select-plugin';
description = '点击输入框，弹出树型选择框进行选择';
description = '树型结构选择，支持 [内嵌模式] 与 [浮层模式] 的外观切换';
docLink = '/amis/zh-CN/components/form/treeselect';
tags = ['表单项'];
scaffold = {
type: 'tree-select',
label: '树下拉框',
name: 'tree-select',
name: 'tree',
clearable: false,
options: [
{
@ -58,7 +59,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
notRenderFormZone = true;
panelTitle = '树下拉';
panelTitle = '树选择';
// 事件定义
events: RendererPluginEvent[] = [
@ -265,16 +266,34 @@ export class TreeSelectControlPlugin extends BasePlugin {
required: true
}),
getSchemaTpl('label'),
{
type: 'button-group-select',
name: 'type',
label: '模式',
pipeIn: defaultValue('tree-select'),
options: [
{
label: '内嵌',
value: 'input-tree'
},
{
label: '浮层',
value: 'tree-select'
}
]
},
getSchemaTpl('clearable', {
mode: 'horizontal',
horizontal: {
justify: true,
left: 8
},
inputClassName: 'is-inline '
inputClassName: 'is-inline ',
visibleOn: 'data.type === "tree-select"'
}),
getSchemaTpl('searchable', {
visibleOn: 'data.type === "tree-select"'
}),
getSchemaTpl('searchable'),
getSchemaTpl('multiple', {
body: [
{
@ -390,6 +409,12 @@ export class TreeSelectControlPlugin extends BasePlugin {
{
title: '高级',
body: [
getSchemaTpl('valueFormula', {
name: 'highlightTxt',
label: '高亮节点字符',
type: 'input-text',
visibleOn: 'data.type === "input-tree"'
}),
{
type: 'ae-Switch-More',
mode: 'normal',
@ -411,34 +436,35 @@ export class TreeSelectControlPlugin extends BasePlugin {
]
}
},
{
type: 'ae-Switch-More',
mode: 'normal',
name: 'hideRoot',
label: '显示顶级节点',
value: true,
trueValue: false,
falseValue: true,
formType: 'extend',
form: {
body: [
{
type: 'input-text',
label: '节点文案',
value: '顶级',
name: 'rootLabel'
}
]
},
visibleOn: 'data.type === "input-tree"'
},
getSchemaTpl('switch', {
label: tipedLabel(
'选项文本仅显示选中节点',
'隐藏选择框中已选中节点的祖先节点的文本信息'
),
name: 'hideNodePathLabel'
name: 'hideNodePathLabel',
visibleOn: 'data.type==="tree-select"'
}),
// tree-select 该组件目前无此配置
// {
// type: 'ae-Switch-More',
// mode: 'normal',
// name: 'hideRoot',
// label: '显示顶级节点',
// value: true,
// trueValue: false,
// falseValue: true,
// formType: 'extend',
// form: {
// body: [
// {
// type: 'input-text',
// label: '节点文案',
// value: '顶级',
// name: 'rootLabel'
// }
// ]
// }
// },
getSchemaTpl('switch', {
label: '显示节点图标',
name: 'showIcon',
@ -456,6 +482,19 @@ export class TreeSelectControlPlugin extends BasePlugin {
label: tipedLabel('显示层级展开线', '显示树层级展开线'),
name: 'showOutline'
}),
getSchemaTpl('switch', {
name: 'withChildren',
label: '数值是否携带子节点',
visibleOn: 'data.cascade !== true && data.multiple',
disabledOn: 'data.onlyChildren'
}),
getSchemaTpl('switch', {
name: 'onlyChildren',
label: '数值是否只包含子节点',
visibleOn: 'data.cascade !== true && data.multiple',
disabledOn: 'data.withChildren'
}),
{
type: 'ae-Switch-More',
mode: 'normal',
@ -496,7 +535,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
getSchemaTpl('style:classNames', {
schema: [
getSchemaTpl('className', {
label: 'tree容器',
label: '外层容器',
name: 'treeContainerClassName'
})
]