diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx index 48c92f001..224b5d65c 100644 --- a/packages/amis-editor/src/plugin/Form/InputTree.tsx +++ b/packages/amis-editor/src/plugin/Form/InputTree.tsx @@ -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: '数值是否携带子节点', diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx index 811dd08c3..688b7a0e9 100644 --- a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx @@ -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' }) ]