diff --git a/packages/amis-editor/src/plugin/Form/Formula.tsx b/packages/amis-editor/src/plugin/Form/Formula.tsx index e44344e93..b61e21a74 100644 --- a/packages/amis-editor/src/plugin/Form/Formula.tsx +++ b/packages/amis-editor/src/plugin/Form/Formula.tsx @@ -10,6 +10,7 @@ export class FormulaControlPlugin extends BasePlugin { // 组件名称 name = '公式'; isBaseComponent = true; + disabledRendererPlugin = true; icon = 'fa fa-calculator'; pluginIcon = 'formula-plugin'; description = '通过公式计算指定的变量值，并将其结果作用到指定的变量中'; diff --git a/packages/amis-editor/src/plugin/Form/InputDate.tsx b/packages/amis-editor/src/plugin/Form/InputDate.tsx index 2db66c167..47996c553 100644 --- a/packages/amis-editor/src/plugin/Form/InputDate.tsx +++ b/packages/amis-editor/src/plugin/Form/InputDate.tsx @@ -407,7 +407,7 @@ export class DateControlPlugin extends BasePlugin { size: 'md', label: '模式', mode: 'row', - value: false, + pipeIn: defaultValue(false), options: [ { label: '浮层', diff --git a/packages/amis-editor/src/plugin/Form/InputDateRange.tsx b/packages/amis-editor/src/plugin/Form/InputDateRange.tsx index 72876da53..7271cd378 100644 --- a/packages/amis-editor/src/plugin/Form/InputDateRange.tsx +++ b/packages/amis-editor/src/plugin/Form/InputDateRange.tsx @@ -416,7 +416,7 @@ export class DateRangeControlPlugin extends BasePlugin { size: 'md', label: '模式', mode: 'row', - value: false, + pipeIn: defaultValue(false), options: [ { label: '浮层', diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx index e3533f295..b053ab5eb 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; @@ -280,6 +284,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: [ { @@ -404,7 +436,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', @@ -445,8 +478,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', @@ -460,6 +502,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 dd8954322..5458fca77 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: [ { @@ -397,6 +416,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', @@ -418,34 +443,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', @@ -463,6 +489,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', @@ -505,7 +544,7 @@ export class TreeSelectControlPlugin extends BasePlugin { getSchemaTpl('style:classNames', { schema: [ getSchemaTpl('className', { - label: 'tree容器', + label: '外层容器', name: 'treeContainerClassName' }) ]