test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-15 17:31:18 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge changes Ifbc9342c,I68883845,I3dad6252,I0253c53c,Iff01c432, ... into amis-saas-7944

Browse Source 
* changes:
  Merge remote-tracking branch 'origin/feature-new-combo' into amis-saas-7944
  amis-saas-7978 Merge remote-tracking branch 'origin/amis-saas-7978' into amis-saas-7944
  amis-saas-7945 Merge remote-tracking branch 'origin/feat_input-city-improve' into amis-saas-7944
  amis-saas-7948 Merge remote-tracking branch 'origin/feat-log' into amis-saas-7944
  amis-saas-7974 Merge remote-tracking branch 'origin/amis-saas-7974' into amis-saas-7944
  amis-saas-7944 Merge remote-tracking branch 'origin/feat-tree-merge' into amis-saas-7944
This commit is contained in:
wutong25 2022-12-21 10:41:36 +08:00 committed by iCode
commit 00d330d73a
25 changed files with 2459 additions and 1614 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/amis-editor/src/index.tsx
View File

@ -128,6 +128,7 @@ import './plugin/Tasks';
import './plugin/Time';
import './plugin/Timeline';
import './plugin/Tpl';
import './plugin/Tag';
import './plugin/AnchorNav';
import './plugin/Video';
import './plugin/Wizard';
@ -149,6 +150,7 @@ import './plugin/Layout/Layout_free_container';
import {GridPlugin} from './plugin/Grid';
import './renderer/OptionControl';
import './renderer/MapSourceControl';
import './renderer/TimelineItemControl';
import './renderer/APIControl';
import './renderer/ValidationControl';

66
packages/amis-editor/src/plugin/Date.tsx
View File

@ -26,47 +26,45 @@ export class DatePlugin extends BasePlugin {
};
panelTitle = '日期展示';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
type: 'input-date',
name: 'value',
label: '日期数值'
title: '基本',
body: [
{
type: 'input-date',
name: 'value',
label: '日期数值'
},
{
type: 'input-text',
name: 'format',
label: '显示日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('YYYY-MM-DD')
},
{
type: 'input-text',
name: 'valueFormat',
label: '数据日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('X')
},
getSchemaTpl('placeholder', {
pipeIn: defaultValue('-'),
label: '占位符'
})
]
},
{
type: 'input-text',
name: 'format',
label: '显示日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('YYYY-MM-DD')
},
{
type: 'input-text',
name: 'valueFormat',
label: '数据日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('X')
},
{
name: 'placeholder',
type: 'input-text',
pipeIn: defaultValue('-'),
label: '占位符'
}
]
getSchemaTpl('status')
])
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
getSchemaTpl('onlyClassNameTab')
])
];
};

66
packages/amis-editor/src/plugin/Datetime.tsx
View File

@ -21,47 +21,45 @@ export class DatetimePlugin extends DatePlugin {
format: 'YYYY-MM-DD HH:mm:ss',
value: Math.round(Date.now() / 1000)
};
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
type: 'input-datetime',
name: 'value',
label: '日期时间数值'
title: '基本',
body: [
{
type: 'input-datetime',
name: 'value',
label: '日期时间数值'
},
{
type: 'input-text',
name: 'format',
label: '显示日期时间格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('YYYY-MM-DD HH:mm:ss')
},
{
type: 'input-text',
name: 'valueFormat',
label: '数据日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('X')
},
getSchemaTpl('placeholder', {
pipeIn: defaultValue('-'),
label: '占位符'
})
]
},
{
type: 'input-text',
name: 'format',
label: '显示日期时间格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('YYYY-MM-DD HH:mm:ss')
},
{
type: 'input-text',
name: 'valueFormat',
label: '数据日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('X')
},
{
name: 'placeholder',
type: 'input-text',
pipeIn: defaultValue('-'),
label: '占位符'
}
]
getSchemaTpl('status')
])
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
getSchemaTpl('onlyClassNameTab')
])
];
};

909
packages/amis-editor/src/plugin/Form/Combo.tsx
View File

@ -1,23 +1,21 @@
import {Button} from 'amis';
import {registerEditorPlugin} from 'amis-editor-core';
import {
BaseEventContext,
BasePlugin,
BasicSubRenderInfo,
BasicToolbarItem,
ContextMenuEventContext,
ContextMenuItem,
RendererEventContext,
SubRendererInfo
registerEditorPlugin,
defaultValue,
getSchemaTpl,
RendererPluginEvent,
RendererPluginAction,
tipedLabel,
mockValue,
RegionConfig
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, valuePipeOut} from 'amis-editor-core';
import React from 'react';
import {diff, JSONPipeIn} from 'amis-editor-core';
import {JSONPipeOut} from 'amis-editor-core';
import {mockValue} from 'amis-editor-core';
import {RendererPluginEvent, RendererPluginAction} from 'amis-editor-core';
import {setVariable} from 'amis-core';
import {ValidatorTag} from '../../validator';
import {getArgsWrapper, getEventControlConfig} from '../../renderer/event-control/helper';
export class ComboControlPlugin extends BasePlugin {
// 关联渲染器名字
rendererName = 'combo';
@ -36,13 +34,21 @@ export class ComboControlPlugin extends BasePlugin {
label: '组合输入',
name: 'combo',
multiple: true,
addable: true,
removable: true,
removableMode: 'icon',
addBtn: {
label: '新增',
icon: 'fa fa-plus',
level: 'primary',
size: 'sm'
},
items: [
{
type: 'input-text',
name: 'input-text',
placeholder: '文本'
},
{
type: 'select',
name: 'select',
@ -153,6 +159,42 @@ export class ComboControlPlugin extends BasePlugin {
actionLabel: '重置',
description: '将值重置为resetValue，若没有配置resetValue，则清空'
},
{
actionType: 'addItem',
actionLabel: '添加项',
description: '添加新的项',
innerArgs: ['item'],
schema: getArgsWrapper({
type: 'combo',
label: '添加项',
name: 'item',
draggable: false,
multiple: true,
removable: true,
required: true,
addable: true,
strictMode: false,
canAccessSuperData: true,
mode: 'horizontal',
items: [
{
name: 'key',
type: 'input-text',
required: true,
placeholder: '变量名',
source: '${__setValueDs}',
},
{
name: 'val',
type: 'input-formula',
variables: '${variables}',
evalMode: false,
variableMode: 'tabs',
inputMode: 'input-group'
}
]
})
},
{
actionType: 'setValue',
actionLabel: '赋值',
@ -161,488 +203,417 @@ export class ComboControlPlugin extends BasePlugin {
];
panelTitle = '组合输入';
panelBodyCreator = (context: BaseEventContext) => {
return [
{
name: 'conditions',
type: 'button-group-select',
size: 'sm',
mode: 'inline',
className: 'block',
options: [
{
label: '固定成员类型',
value: '1'
},
{
label: '多分支',
value: '2'
}
],
pipeIn: (value: any) => (value ? '2' : '1'),
pipeOut: (value: any) =>
value == 2
? [
notRenderFormZone = true;
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return getSchemaTpl('tabs', [
{
title: '属性',
body: [
getSchemaTpl('collapseGroup', [
{
className: 'p-none',
title: '常用',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('valueFormula', {
rendererSchema: {
...context?.schema,
type: 'input-text'
},
label: tipedLabel(
'默认值',
'支持 <code>now、+1day、-2weeks、+1hours、+2years</code>等这种相对值用法'
),
pipeOut: (value: any) => {
try {
return JSON.parse(value);
}
catch (err) {
return value;
}
}
}),
// 多选模式和条数绑定了，所以设定了多选，条数开启
getSchemaTpl('multiple', {
body: [
{
label: '最多条数',
name: 'maxLength',
type: 'input-number',
visibleOn: 'data.multiple',
},
{
label: '最少条数',
name: 'minLength',
type: 'input-number',
visibleOn: 'data.multiple',
}
]
}),
// 可排序，排序和新增无关，和多选模式有关
getSchemaTpl('switch', {
name: 'draggable',
label: '可排序',
pipeIn: defaultValue(false),
visibleOn: 'data.multiple'
}),
{
label: '类型名称',
test: '',
items: [
type: 'container',
className: 'ae-ExtendMore mb-3',
visibleOn: 'data.draggable',
body: [
{
type: 'input-text',
label: '文本',
name: 'text'
name: 'draggableTip',
label: tipedLabel(
'提示文字',
'拖拽排序的提示文字'
)
}
]
},
// 可新增
getSchemaTpl('switch', {
name: 'addable',
label: tipedLabel(
'可新增',
'如需要拓展自定义的新增功能，可通过配置组件-新增项来拓展'
),
visibleOn: 'data.multiple',
pipeIn: defaultValue(false),
onChange: (value: any, oldValue: any, model: any, form: any) => {
if (value) {
form.setValueByName('addBtn', {
label: '新增',
icon: 'fa fa-plus',
level: 'primary',
size: 'sm'
});
}
],
scaffold: {}
}
]
: undefined
},
{
name: 'conditions',
visibleOn: 'this.conditions',
type: 'combo',
label: '分支管理',
multiple: true,
multiLine: true,
minLength: 1,
items: [
{
label: '名称',
name: 'label',
type: 'input-text',
required: true
},
{
label: '命中条件',
name: 'test',
required: true,
type: 'input-text',
placeholder: '比如: this.type === "text"',
description: '根据成员数据判断是否使用此分支'
},
{
name: 'items',
asFormItem: true,
children: ({value, onChange}: any) => {
return (
<Button
size="sm"
level="danger"
className="m-b"
block
onClick={() =>
this.manager.openSubEditor({
title: '配置子表单项',
value: value,
slot: {
type: 'form',
mode: 'normal',
body: '$$',
wrapWithPanel: false,
className: 'wrapper'
},
onChange: onChange
})
}
>
配置子表单集合
</Button>
);
}
},
{
type: 'textarea',
name: 'scaffold',
required: true,
label: '新增初始值',
pipeOut: valuePipeOut
}
],
scaffold: {
label: '类型名称',
test: '',
items: [
{
type: 'input-text',
label: '文本',
name: 'text'
}
],
scaffold: {}
}
},
}),
{
type: 'container',
className: 'ae-ExtendMore mb-3',
visibleOn: 'data.addable',
body: [
{
label: '文案',
name: 'addBtn.label',
type: 'input-text'
},
getSchemaTpl('icon', {
name: 'addBtn.icon',
label: '左侧图标'
}),
getSchemaTpl('buttonLevel', {
label: '样式',
name: 'addBtn.level'
}),
getSchemaTpl('switch', {
name: 'typeSwitchable',
visibleOn: 'this.conditions',
label: '是否可切换类型',
pipeIn: defaultValue(true)
}),
getSchemaTpl('size', {
name: 'addBtn.size',
label: '尺寸'
})
]
},
{
name: 'items',
visibleOn: '!this.conditions',
asFormItem: true,
children: ({value, onChange}: any) => {
return (
<Button
size="sm"
level="danger"
className="m-b"
block
onClick={() => {
this.manager.openSubEditor({
title: '配置子表单集合',
value: value,
slot: {
type: 'form',
// 可删除
getSchemaTpl('switch', {
name: 'removable',
label: '可删除',
pipeIn: defaultValue(false),
visibleOn: 'data.multiple',
onChange: (value: any, oldValue: any, model: any, form: any) => {
if (value) {
form.setValueByName('removableMode', 'icon');
form.setValueByName('deleteIcon', 'fa fa-status-close');
}
}
}),
{
type: 'container',
className: 'ae-ExtendMore mb-3',
visibleOn: 'data.removable',
body: [
// 自定义新增按钮开关
{
type: 'button-group-select',
name: 'removableMode',
label: '按钮模式',
options: [
{
label: '图标',
value: 'icon'
},
{
label: '按钮',
value: 'button'
}
],
onChange: (value: any, oldValue: any, model: any, form: any) => {
if (!value) {
form.setValueByName('deleteBtn', undefined);
}
}
},
getSchemaTpl('icon', {
name: 'deleteIcon',
label: '图标',
visibleOn: 'data.removableMode === "icon"'
}),
{
label: '文案',
name: 'deleteBtn.label',
type: 'input-text',
visibleOn: 'data.removableMode === "button"'
},
getSchemaTpl('buttonLevel', {
label: '样式',
name: 'deleteBtn.level',
visibleOn: 'data.removableMode === "button"'
}),
getSchemaTpl('apiControl', {
name: 'deleteApi',
label: '删除',
renderLabel: false,
mode: 'normal'
}),
{
label: tipedLabel(
'确认文案',
'删除确认文案，当配置删除接口生效'
),
name: 'deleteConfirmText',
type: 'input-text',
pipeIn: defaultValue('确认要删除吗？')
}
]
},
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description'),
{
type: 'container',
className: 'ae-ExtendMore mb-3',
visibleOn: 'data.tabsMode',
body: [
{
type: 'ae-formulaControl',
name: 'tabsLabelTpl',
label: '标题模版'
}
]
},
]
},
getSchemaTpl('status', {
isFormItem: true,
readonly: true
}),
getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect}),
getSchemaTpl('collapseGroup', [
{
className: 'p-none',
title: '高级',
body: [
getSchemaTpl('switch', {
name: 'canAccessSuperData',
label: '自动填充父级变量',
pipeIn: defaultValue(false)
}),
getSchemaTpl('switch', {
name: 'strictMode',
label: tipedLabel(
'严格模式',
'如果你希望环境变量的值实时透传到 Combo 中，请关闭此选项。'
),
value: true
}),
getSchemaTpl('combo-container', {
name: 'syncFields',
visibleOn: '!data.strictMode',
label: tipedLabel(
'同步字段',
'如果 Combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。'
),
type: 'combo',
mode: 'normal',
body: '$$',
wrapWithPanel: false,
className: 'wrapper'
multiple: true,
canAccessSuperData: true,
items: [
{
name: 'field',
type: 'input-text'
}
],
value: [],
pipeIn(value?: Array<string>) {
return (value ?? []).map(item => ({field: item}));
},
pipeOut(value?: Array<{field: string}>) {
return (value ?? [])
.map(item => {
const keys = Object.keys(item);
return keys.length > 0 ? item.field : '';
});
}
}),
getSchemaTpl('switch', {
name: 'lazyLoad',
label: tipedLabel(
'懒加载',
'如果数据比较多，比较卡顿时，可开启此配置项'
),
pipeIn: defaultValue(false),
visibleOn: 'data.multiple && !data.tabsMode',
})
]
}]
),
])
]
},
{
title: '外观',
className: 'p-none',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
visibleOn: 'data.multiple',
body: [
{
name: 'tabsMode',
label: '展示形式',
type: 'button-group-select',
inputClassName: 'items-center',
size: 'sm',
options: [
{label: '表单', value: false},
{label: '选项卡', value: true}
],
pipeIn: defaultValue(false),
onChange: (value: any, oldValue: any, model: any, form: any) => {
if (value) {
form.setValueByName('lazyLoad', undefined);
}
},
},
{
type: 'container',
className: 'ae-ExtendMore mb-3',
visibleOn: 'data.tabsMode',
body: [
{
type: 'button-group-select',
name: 'tabsStyle',
label: '展示形式',
options: [
{
value: 'normal',
label: '正常'
},
{
value: 'horizontal',
label: '水平'
},
{
value: 'inline',
label: '内联'
},
]
},
onChange: value => onChange(value)
});
}}
>
配置子表单集合
</Button>
);
}
},
getSchemaTpl('switchDefaultValue', {
visibleOn: '!this.defaultCheckAll'
}),
{
type: 'textarea',
name: 'value',
label: '默认值',
pipeOut: valuePipeOut,
visibleOn: 'typeof this.value !== "undefined"'
},
getSchemaTpl('switch', {
label: '多行模式',
name: 'multiLine',
value: false,
description: '即是否要换行'
}),
getSchemaTpl('multiple'),
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('switch', {
name: 'flat',
label: '是否将值打平',
visibleOn:
'Array.isArray(data.items) && data.items.length === 1 && data.multiple',
description:
'默认数组内的数据结构为对象，如果只有一个表单项，可以配置将值打平，那么数组内放置的就是那个表单项的值'
}),
getSchemaTpl('switch', {
label: '是否可新增',
name: 'addable',
visibleOn: 'this.multiple',
pipeIn: defaultValue(true)
}),
{
type: 'textarea',
name: 'scaffold',
label: '新增初始值',
visibleOn: 'this.multiple && this.addable !== false',
pipeOut: valuePipeOut,
pipeIn: defaultValue({})
},
{
label: '新增按钮文字',
name: 'addButtonText',
type: 'input-text',
visibleOn: 'data.addable',
pipeIn: defaultValue('新增')
},
getSchemaTpl('switch', {
label: '是否可删除',
name: 'removable',
visibleOn: 'this.multiple',
pipeIn: defaultValue(true)
}),
getSchemaTpl('api', {
name: 'deleteApi',
label: '删除前的请求',
hiddenOn: '!data.removable'
}),
{
label: '删除确认提示',
name: 'deleteConfirmText',
type: 'input-text',
visibleOn: 'data.deleteApi',
pipeIn: defaultValue('确认要删除')
},
getSchemaTpl('switch', {
name: 'draggable',
label: '是否可拖拽排序',
visibleOn: 'this.multiple'
}),
{
label: '拖拽排序的提示文字',
name: 'draggableTip',
type: 'input-text',
visibleOn: 'data.draggable',
pipeIn: defaultValue('可通过拖动每行中的【交换】按钮进行顺序调整')
},
getSchemaTpl('switch', {
name: 'noBorder',
label: '去掉边框',
visibleOn: 'this.multiLine'
}),
{
name: 'minLength',
type: 'input-number',
label: '限制最小数量'
},
{
name: 'maxLength',
type: 'input-number',
label: '限制最大数量'
},
{
label: '默认消息提示',
type: 'combo',
name: 'messages',
multiLine: true,
description: '',
items: [
{
label: '有子表单项限制失败时提示',
type: 'input-text',
name: 'validateFailed'
{
type: 'ae-formulaControl',
label: '标题模版',
name: 'tabsLabelTpl'
}
]
},
// 表单多行展示
getSchemaTpl('switch', {
name: 'multiLine',
label: '多行展示',
pipeIn: defaultValue(false),
onChange: (value: boolean, oldValue: any, model: any, form: any) => {
if (!value) {
form.setValueByName('subFormMode', undefined);
form.setValueByName('noBorder', undefined);
}
}
}),
getSchemaTpl('switch', {
visibleOn: 'data.multiLine',
name: 'noBorder',
label: '去掉边框',
pipeIn: defaultValue(false)
}),
getSchemaTpl('subFormItemMode', {
visibleOn: 'data.multiLine',
label: '展示模式'
}),
]
},
{
label: '最小长度验证失败时提示',
type: 'input-text',
name: 'minLengthValidateFailed'
},
{
label: '最大长度验证失败时提示',
type: 'input-text',
name: 'maxLengthValidateFailed'
}
getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
getSchemaTpl('style:classNames'),
])
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
},
getSchemaTpl('switch', {
name: 'canAccessSuperData',
label: '是否自动填充父级同名变量',
pipeIn: defaultValue(false)
}),
getSchemaTpl('switch', {
name: 'tabsMode',
label: '采用 Tabs 展示方式',
pipeIn: defaultValue(false)
}),
{
name: 'tabsStyle',
label: 'Tabs 的展示模式',
visibleOn: 'data.tabsMode',
type: 'list-select',
options: [
{
label: '正常',
value: 'normal'
},
{
label: '水平',
value: 'horizontal'
},
{
label: '内联',
value: 'inline'
}
],
mode: 'inline',
className: 'w-full'
},
{
name: 'tabsLabelTpl',
label: '选项卡标题的生成模板',
visibleOn: 'data.tabsMode',
type: 'input-text',
mode: 'inline',
className: 'w-full'
},
getSchemaTpl('switch', {
name: 'lazyLoad',
label: '懒加载',
pipeIn: defaultValue(false),
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
placement: 'left',
content: '如果数据比较多，比较卡顿时，可开启此配置项。'
}
}),
getSchemaTpl('switch', {
name: 'strictMode',
label: '严格模式',
pipeIn: defaultValue(true),
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
placement: 'left',
content: '如果你希望环境变量的值实时透传到 Combo 中，请关闭此选项。'
}
}),
{
name: 'syncFields',
visibleOn: '!data.strictMode',
label: '配置同步字段',
type: 'input-text',
multiple: true,
joinValues: false,
extractValue: true,
description:
'如果 Combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。'
},
getSchemaTpl('switch', {
name: 'nullable',
label: '允许为空',
pipeIn: defaultValue(false),
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
placement: 'left',
content:
'如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。'
}
}),
{
name: 'items',
label: '各列 CSS 配置',
hiddenOn: 'this.multiLine',
type: 'combo',
addable: false,
removable: false,
multiple: true,
items: [
{
name: 'columnClassName',
placeholder: 'CSS 类名',
type: 'input-text'
}
]
},
getSchemaTpl('subFormItemMode', {
visibleOn: 'this.multiLine'
}),
getSchemaTpl('subFormHorizontalMode'),
getSchemaTpl('subFormHorizontal')
];
}
]);
};
filterProps(props: any) {
props = JSONPipeOut(props);
// 至少显示一个成员，否则啥都不显示。
if (props.multiple && !props.value && !props.$ref) {
if (props.multiple && !props.value && !props.$schema.value && !props.$ref) {
const mockedData = {};
if (Array.isArray(props.items)) {
if (Array.isArray(props.items) && props.items.length === 0) {
props.items.forEach((control: any) => {
control.name &&
setVariable(mockedData, control.name, mockValue(control));
});
}
props.value = [mockedData];
return props;
}
return props;
}
buildEditorToolbar(
{id, info, schema}: BaseEventContext,
toolbars: Array<BasicToolbarItem>
) {
if (info.renderer.name === 'combo' && !Array.isArray(schema.conditions)) {
toolbars.push({
icon: 'fa fa-expand',
order: 100,
tooltip: '配置子表单项',
onClick: this.editDetail.bind(this, id)
});
// 容器配置
regions: Array<RegionConfig> = [
{
key: 'items',
label: '内容区',
preferTag: '内容区',
renderMethod: 'renderItems'
}
}
buildEditorContextMenu(
{id, schema, region, info}: ContextMenuEventContext,
menus: Array<ContextMenuItem>
) {
if (info.renderer.name === 'combo' && !Array.isArray(schema.conditions)) {
menus.push('|', {
label: '配置成员渲染器',
onSelect: this.editDetail.bind(this, id)
});
}
}
editDetail(id: string) {
const manager = this.manager;
const store = manager.store;
const node = store.getNodeById(id);
const value = store.getValueOf(id);
node &&
value &&
this.manager.openSubEditor({
title: '配置子表单项',
value: value.items,
slot: {
type: 'form',
mode: 'normal',
body: '$$',
wrapWithPanel: false,
className: 'wrapper'
},
onChange: newValue => {
newValue = {
...value,
items: newValue
};
manager.panelChangeValue(newValue, diff(value, newValue));
}
});
}
];
}
registerEditorPlugin(ComboControlPlugin);

1
packages/amis-editor/src/plugin/Form/Formula.tsx
View File

@ -10,6 +10,7 @@ export class FormulaControlPlugin extends BasePlugin {
// 组件名称
name = '公式';
isBaseComponent = true;
disabledRendererPlugin = true;
icon = 'fa fa-calculator';
pluginIcon = 'formula-plugin';
description = '通过公式计算指定的变量值，并将其结果作用到指定的变量中';

63
packages/amis-editor/src/plugin/Form/InputCity.tsx
View File

@ -7,6 +7,7 @@ import {
SubRendererInfo,
BaseEventContext
} from 'amis-editor-core';
import cloneDeep from 'lodash/cloneDeep';
import {formItemControl} from '../../component/BaseControl';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
@ -29,7 +30,10 @@ export class CityControlPlugin extends BasePlugin {
scaffold = {
type: 'input-city',
label: '城市选择',
name: 'city'
name: 'city',
allowCity: true,
allowDistrict: true,
extractValue: true
};
previewSchema: any = {
type: 'form',
@ -104,25 +108,64 @@ export class CityControlPlugin extends BasePlugin {
rendererWrapper: true,
mode: 'vertical' // 改成上下展示模式
}),
getSchemaTpl('switch', {
name: 'allowDistrict',
label: '允许选择区域',
pipeIn: defaultValue(true)
}),
{
name: 'extractValue',
label: '值格式',
type: 'button-group-select',
size: 'sm',
options: [
{label: '行政编码', value: true},
{label: '对象结构', value: false}
]
},
getSchemaTpl('switch', {
name: 'allowCity',
label: '允许选择城市',
pipeIn: defaultValue(true)
label: '可选城市',
pipeIn: defaultValue(true),
onChange: (
value: string,
oldValue: string,
item: any,
form: any
) => {
if (!value) {
const schema = cloneDeep(form.data);
form.setValueByName('allowDistrict', undefined);
form.setValueByName('value', schema.extractValue ? '' : {});
}
}
}),
getSchemaTpl('switch', {
name: 'allowDistrict',
label: '可选区域',
visibleOn: 'data.allowCity',
pipeIn: defaultValue(true),
onChange: (
value: string,
oldValue: string,
item: any,
form: any
) => {
if (!value) {
const schema = cloneDeep(form.data);
form.setValueByName('value', schema.extractValue ? '' : {});
}
}
}),
getSchemaTpl('switch', {
name: 'searchable',
label: '是否出搜索框',
label: '可搜索',
pipeIn: defaultValue(false)
}),
getSchemaTpl('loadingConfig', {}, {context})
getSchemaTpl('loadingConfig', {}, {context}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {isFormItem: true}),

2
packages/amis-editor/src/plugin/Form/InputDate.tsx
View File

@ -407,7 +407,7 @@ export class DateControlPlugin extends BasePlugin {
size: 'md',
label: '模式',
mode: 'row',
value: false,
pipeIn: defaultValue(false),
options: [
{
label: '浮层',

2
packages/amis-editor/src/plugin/Form/InputDateRange.tsx
View File

@ -416,7 +416,7 @@ export class DateRangeControlPlugin extends BasePlugin {
size: 'md',
label: '模式',
mode: 'row',
value: false,
pipeIn: defaultValue(false),
options: [
{
label: '浮层',

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;
@ -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: '数值是否携带子节点',

516
packages/amis-editor/src/plugin/Form/Static.tsx
View File

@ -1,11 +1,258 @@
import React from 'react';
import {Button} from 'amis';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {
defaultValue,
getSchemaTpl,
setSchemaTpl,
tipedLabel
} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {EditorNodeType} from 'amis-editor-core';
import {mockValue} from 'amis-editor-core';
// 快速编辑
setSchemaTpl('quickEdit', {
type: 'ae-switch-more',
mode: 'normal',
name: 'quickEdit',
label: '可快速编辑',
value: false,
hiddenOnDefault: true,
formType: 'extend',
pipeIn: (value: any) => !!value,
form: {
body: [
{
label: '编辑模式',
name: 'quickEdit.mode',
type: 'button-group-select',
inputClassName: 'items-center',
visibleOn: 'data.quickEdit',
pipeIn: defaultValue('popOver'),
options: [
{
label: '下拉',
value: 'popOver'
},
{
label: '内嵌',
value: 'inline'
}
]
},
getSchemaTpl('switch', {
name: 'quickEdit.saveImmediately',
label: tipedLabel(
'立即保存',
'开启后修改即提交，而不是标记修改批量提交。'
),
visibleOn: 'data.quickEdit',
pipeIn: (value: any) => !!value
}),
getSchemaTpl('apiControl', {
name: 'quickEdit.saveImmediately.api',
label: '保存接口',
mode: 'row',
description:
'单独给立即保存配置接口，如果不配置，则默认使用quickSaveItemApi。',
visibleOn: 'this.quickEdit && this.quickEdit.saveImmediately'
}),
{
name: 'quickEdit',
asFormItem: true,
visibleOn: 'data.quickEdit',
mode: 'row',
children: ({value, onChange, data}: any) => {
if (value === true) {
value = {};
}
const originMode = value.mode;
value = {
type: 'input-text',
name: data.name,
...value
};
delete value.mode;
// todo 多个快速编辑表单模式看来只能代码模式编辑了。
return (
<Button
block
level="primary"
onClick={() => {
this.manager.openSubEditor({
title: '配置快速编辑类型',
value: value,
slot: {
type: 'form',
mode: 'normal',
body: ['$$'],
wrapWithPanel: false
},
onChange: value =>
onChange(
{
...value,
mode: originMode
},
'quickEdit'
)
});
}}
>
配置快速编辑
</Button>
);
}
}
]
}
});
// 查看更多
setSchemaTpl('morePopOver', {
type: 'ae-switch-more',
mode: 'normal',
name: 'popOver',
label: '查看更多展示',
value: false,
hiddenOnDefault: true,
formType: 'extend',
pipeIn: (value: any) => !!value,
form: {
body: [
{
label: '弹出模式',
name: 'popOver.mode',
type: 'button-group-select',
visibleOn: 'data.popOver',
pipeIn: defaultValue('popOver'),
options: [
{
label: '浮层',
value: 'popOver'
},
{
label: '弹框',
value: 'dialog'
},
{
label: '抽屉',
value: 'drawer'
}
]
},
{
name: 'popOver.position',
label: '浮层位置',
type: 'select',
visibleOn:
'data.popOver && (data.popOver.mode === "popOver" || !data.popOver.mode)',
pipeIn: defaultValue('center'),
options: [
{
label: '目标左上角',
value: 'left-top'
},
{
label: '目标右上角',
value: 'right-top'
},
{
label: '目标中部',
value: 'center'
},
{
label: '目标左下角',
value: 'left-bottom'
},
{
label: '目标右下角',
value: 'right-bottom'
},
{
label: '页面左上角',
value: 'fixed-left-top'
},
{
label: '页面右上角',
value: 'fixed-right-top'
},
{
label: '页面左下角',
value: 'fixed-left-bottom'
},
{
label: '页面右下角',
value: 'fixed-right-bottom'
}
]
},
{
visibleOn: 'data.popOver',
name: 'popOver',
mode: 'row',
asFormItem: true,
children: ({value, onChange}: any) => {
value = {
type: 'panel',
title: '查看详情',
body: '内容详情',
...value
};
return (
<Button
block
level="primary"
onClick={() => {
this.manager.openSubEditor({
title: '配置查看更多展示内容',
value: value,
onChange: value => onChange(value, 'quickEdit')
});
}}
>
查看更多内容配置
</Button>
);
}
}
]
}
});
// 可复制
setSchemaTpl('copyable', {
type: 'ae-switch-more',
mode: 'normal',
name: 'copyable',
label: '可复制',
value: false,
hiddenOnDefault: true,
formType: 'extend',
pipeIn: (value: any) => !!value,
form: {
body: [
{
label: '复制内容模板',
name: 'copyable.content',
type: 'textarea',
mode: 'row',
maxRow: 2,
visibleOn: 'data.copyable',
description: '默认为当前字段值，可定制。'
}
]
}
});
export class StaticControlPlugin extends BasePlugin {
// 关联渲染器名字
rendererName = 'static';
@ -15,7 +262,7 @@ export class StaticControlPlugin extends BasePlugin {
// 组件名称
name = '静态展示框';
isBaseComponent = true;
isBaseComponent = false;
icon = 'fa fa-info';
pluginIcon = 'static-plugin';
description = '纯用来展示数据，可用来展示 json、date、image、progress 等数据';
@ -38,10 +285,9 @@ export class StaticControlPlugin extends BasePlugin {
]
};
multifactor = true;
notRenderFormZone = true;
panelTitle = '静态展示';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const renderer: any = context.info.renderer;
@ -52,10 +298,17 @@ export class StaticControlPlugin extends BasePlugin {
{
title: '基本',
body: [
{
type: 'alert',
inline: false,
level: 'warning',
className: 'text-sm',
body: '<p>当前组件已停止维护，建议您使用<a href="https://baidu.gitee.io/amis/zh-CN/components/form/formitem#%E9%85%8D%E7%BD%AE%E9%9D%99%E6%80%81%E5%B1%95%E7%A4%BA" target="_blank">静态展示</a>新特性实现表单项的静态展示。</p>'
},
getSchemaTpl('formItemName', {
required: false
}),
getSchemaTpl('label'),
getSchemaTpl('label')
// getSchemaTpl('value'),
/*
getSchemaTpl('valueFormula', {
@ -64,248 +317,15 @@ export class StaticControlPlugin extends BasePlugin {
// ...context?.schema,
// type: 'textarea', // 改用多行文本编辑
// value: context?.schema.tpl // 避免默认值丢失
// },
mode: 'vertical' // 改成上下展示模式
// }
}),
*/
{
type: 'ae-textareaFormulaControl',
label: '默认值',
name: 'tpl',
mode: 'normal'
},
getSchemaTpl('switch', {
name: 'quickEdit',
label: '可快速编辑',
pipeIn: (value: any) => !!value
}),
{
label: '快速编辑模式',
name: 'quickEdit.mode',
type: 'button-group-select',
size: 'sm',
mode: 'row',
className: 'ae-buttonGroupSelect--justify',
visibleOn: 'data.quickEdit',
pipeIn: defaultValue('popOver'),
options: [
{
label: '下拉',
value: 'popOver'
},
{
label: '内嵌',
value: 'inline'
}
]
},
getSchemaTpl('switch', {
name: 'quickEdit.saveImmediately',
label: '立即保存',
visibleOn: 'data.quickEdit',
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
placement: 'left',
content: '开启后修改即提交，而不是标记修改批量提交。'
},
pipeIn: (value: any) => !!value
}),
getSchemaTpl('apiControl', {
name: 'quickEdit.saveImmediately.api',
label: '立即保存接口',
description:
'是否单独给立即保存配置接口，如果不配置，则默认使用quickSaveItemApi。',
visibleOn: 'this.quickEdit && this.quickEdit.saveImmediately'
}),
{
name: 'quickEdit',
asFormItem: true,
visibleOn: 'data.quickEdit',
children: ({value, onChange, data}: any) => {
if (value === true) {
value = {};
}
const originMode = value.mode;
value = {
type: 'input-text',
name: data.name,
...value
};
delete value.mode;
// todo 多个快速编辑表单模式看来只能代码模式编辑了。
return (
<Button
className="m-b ae-Button--enhance"
size="sm"
block
onClick={() => {
this.manager.openSubEditor({
title: '配置快速编辑类型',
value: value,
slot: {
type: 'form',
mode: 'normal',
body: ['$$'],
wrapWithPanel: false
},
onChange: value =>
onChange(
{
...value,
mode: originMode
},
'quickEdit'
)
});
}}
>
配置快速编辑
</Button>
);
}
},
getSchemaTpl('switch', {
name: 'popOver',
label: '查看更多展示',
pipeIn: (value: any) => !!value
}),
{
label: '弹出模式',
name: 'popOver.mode',
type: 'button-group-select',
size: 'sm',
mode: 'row',
className: 'ae-buttonGroupSelect--justify',
visibleOn: 'data.popOver',
pipeIn: defaultValue('popOver'),
options: [
{
label: '浮层',
value: 'popOver'
},
{
label: '弹框',
value: 'dialog'
},
{
label: '抽屉',
value: 'drawer'
}
]
},
{
name: 'popOver.position',
label: '浮层位置',
type: 'select',
mode: 'row',
visibleOn: 'data.popOver && data.popOver.mode === "popOver"',
pipeIn: defaultValue('center'),
options: [
{
label: '目标中部',
value: 'center'
},
{
label: '目标左上角',
value: 'left-top'
},
{
label: '目标右上角',
value: 'right-top'
},
{
label: '目标左下角',
value: 'left-bottom'
},
{
label: '目标右下角',
value: 'right-bottom'
},
{
label: '页面左上角',
value: 'fixed-left-top'
},
{
label: '页面右上角',
value: 'fixed-right-top'
},
{
label: '页面左下角',
value: 'fixed-left-bottom'
},
{
label: '页面右下角',
value: 'fixed-right-bottom'
}
]
},
{
visibleOn: 'data.popOver',
name: 'popOver',
asFormItem: true,
children: ({value, onChange}: any) => {
value = {
type: 'panel',
title: '查看详情',
body: '内容详情',
...value
};
return (
<Button
className="m-b ae-Button--enhance"
size="sm"
block
onClick={() => {
this.manager.openSubEditor({
title: '配置查看更多展示内容',
value: value,
onChange: value => onChange(value, 'quickEdit')
});
}}
>
查看更多内容配置
</Button>
);
}
},
getSchemaTpl('borderMode'),
getSchemaTpl('switch', {
name: 'copyable',
label: '可复制',
pipeIn: (value: any) => !!value
}),
{
label: '复制内容模板',
name: 'copyable.content',
type: 'textarea',
mode: 'row',
maxRow: 2,
visibleOn: 'data.copyable',
description: '默认为当前字段值，可定制。'
},
getSchemaTpl('quickEdit'),
getSchemaTpl('morePopOver'),
getSchemaTpl('copyable'),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
getSchemaTpl('description')
/*{
children: (
<Button
@ -321,14 +341,20 @@ export class StaticControlPlugin extends BasePlugin {
},*/
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {tag: '1'})
getSchemaTpl('status', {
isFormItem: true,
unsupportStatic: true
})
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {renderer}),
{
title: '控件',
body: [getSchemaTpl('borderMode')]
},
{
title: 'CSS类名',
body: [

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: [
{
@ -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'
})
]

316
packages/amis-editor/src/plugin/Image.tsx
View File

@ -32,172 +32,180 @@ export class ImagePlugin extends BasePlugin {
};
panelTitle = '图片';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isUnderField = /\/field\/\w+$/.test(context.path as string);
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
name: 'imageMode',
label: '展示模式',
type: 'select',
pipeIn: defaultValue('thumb'),
options: [
{
label: '缩率图',
value: 'thumb'
},
{
label: '原图',
value: 'original'
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
name: 'imageMode',
label: '展示模式',
type: 'select',
pipeIn: defaultValue('thumb'),
options: [
{
label: '缩率图',
value: 'thumb'
},
{
label: '原图',
value: 'original'
}
]
},
{
name: 'title',
type: 'input-text',
label: '图片标题'
},
{
name: 'imageCaption',
type: 'input-text',
label: '图片描述'
},
{
name: 'width',
label: '宽度',
type: 'input-number'
},
{
name: 'height',
label: '高度',
type: 'input-number'
},
isUnderField
? null
: getSchemaTpl('imageUrl', {
name: 'src',
type: 'input-text',
label: '缩略图地址',
description: '如果已绑定字段名，可以不用设置，支持用变量。'
}),
{
type: 'input-text',
label: '打开外部链接',
name: 'href'
},
getSchemaTpl('imageUrl', {
name: 'defaultImage',
label: '无数据时显示的图片'
})
]
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
type: 'ae-switch-more',
mode: 'normal',
name: 'enlargeAble',
label: '图片放大功能',
value: false,
hiddenOnDefault: false,
formType: 'extend',
pipeIn: (value: any) => !!value,
form: {
body: [
getSchemaTpl('imageUrl', {
name: 'originalSrc',
label: '原图地址',
description: '如果不配置将默认使用缩略图地址。'
})
]
}
]
},
{
name: 'title',
type: 'input-text',
label: '图片标题'
},
{
name: 'imageCaption',
type: 'input-text',
label: '图片描述'
},
},
{
name: 'width',
label: '宽度',
type: 'input-number'
},
{
name: 'height',
label: '高度',
type: 'input-number'
},
getSchemaTpl('switch', {
name: 'showDimensions',
label: '显示图片尺寸'
}),
isUnderField
? null
: getSchemaTpl('imageUrl', {
name: 'src',
type: 'input-text',
label: '缩略图地址',
description: '如果已绑定字段名，可以不用设置，支持用变量。'
}),
{
type: 'input-text',
label: '打开外部链接',
name: 'href'
},
getSchemaTpl('imageUrl', {
name: 'defaultImage',
label: '无数据时显示的图片'
})
]
},
{
title: '外观',
body: [
getSchemaTpl('switch', {
name: 'enlargeAble',
label: '开启图片放大功能'
}),
{
name: 'thumbMode',
type: 'select',
label: '缩略图展示模式',
pipeIn: defaultValue('contain'),
options: [
{
label: '宽度占满',
value: 'w-full'
},
getSchemaTpl('imageUrl', {
name: 'originalSrc',
visibleOn: 'this.enlargeAble',
label: '原图地址',
description: '如果不配置将默认使用缩略图地址。'
}),
{
label: '高度占满',
value: 'h-full'
},
getSchemaTpl('switch', {
name: 'showDimensions',
label: '是否显示图片尺寸'
}),
{
label: '包含',
value: 'contain'
},
{
name: 'thumbMode',
type: 'button-group-select',
label: '缩略图展示模式',
size: 'sm',
pipeIn: defaultValue('contain'),
options: [
{
label: '宽度占满',
value: 'w-full'
},
{
label: '铺满',
value: 'cover'
}
]
},
{
name: 'thumbRatio',
type: 'button-group-select',
label: '缩略图比率',
size: 'sm',
pipeIn: defaultValue('1:1'),
options: [
{
label: '1:1',
value: '1:1'
},
{
label: '高度占满',
value: 'h-full'
},
{
label: '4:3',
value: '4:3'
},
{
label: '包含',
value: 'contain'
},
{
label: '16:9',
value: '16:9'
}
]
}
]
},
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {
label: '外层'
}),
{
label: '铺满',
value: 'cover'
}
]
},
getSchemaTpl('className', {
name: 'imageClassName',
label: '图片'
}),
{
name: 'thumbRatio',
type: 'button-group-select',
label: '缩略图比率',
size: 'sm',
pipeIn: defaultValue('1:1'),
options: [
{
label: '1:1',
value: '1:1'
},
{
label: '4:3',
value: '4:3'
},
{
label: '16:9',
value: '16:9'
}
]
},
getSchemaTpl('className', {
autoComplete: false
}),
getSchemaTpl('className', {
name: 'innerClassName',
label: '组件内层 CSS 类名'
}),
getSchemaTpl('className', {
name: 'imageClassName',
label: '图片 CSS 类名'
}),
getSchemaTpl('className', {
name: 'thumbClassName',
label: '缩略图 CSS 类名'
})
]
},
{
title: '显隐',
body: [
// getSchemaTpl('ref'),
getSchemaTpl('visible')
]
}
])
];
getSchemaTpl('className', {
name: 'thumbClassName',
label: '缩略图'
})
]
}
])
}
]);
};
onActive(event: PluginEvent<ActiveEventContext>) {

347
packages/amis-editor/src/plugin/Images.tsx
View File

@ -37,190 +37,203 @@ export class ImagesPlugin extends BasePlugin {
};
panelTitle = '图片集';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isUnderField = /\/field\/\w+$/.test(context.path as string);
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: (isUnderField
? []
: [
{
type: 'formula',
name: '__mode',
autoSet: false,
formula:
'!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
},
{
label: '数据源',
name: '__mode',
type: 'button-group-select',
size: 'xs',
mode: 'inline',
className: 'w-full',
options: [
{
label: '关联字段',
value: 1
},
{
label: '静态设置',
value: 2
}
],
onChange: (
value: any,
oldValue: any,
model: any,
form: any
) => {
if (value !== oldValue && value == 1) {
form.deleteValueByName('options');
}
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: (isUnderField ? [] : [
{
type: 'formula',
name: '__mode',
autoSet: false,
formula:
'!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
},
{
label: '数据源',
name: '__mode',
type: 'button-group-select',
size: 'xs',
mode: 'inline',
className: 'w-full',
options: [
{
label: '关联字段',
value: 1
},
{
label: '静态设置',
value: 2
}
},
{
name: 'source',
type: 'input-text',
label: '关联数据',
description:
'比如：\\${listVar}，用来关联作用域中的已有数据。',
visibleOn: 'this.__mode == 1'
},
{
type: 'combo',
name: 'options',
visibleOn: 'this.__mode == 2',
minLength: 1,
label: '图片集数据',
multiple: true,
multiLine: true,
addable: true,
removable: true,
items: [
getSchemaTpl('imageUrl', {
name: 'image',
label: '缩略图'
}),
getSchemaTpl('imageUrl', {
name: 'src',
label: '原图'
}),
],
onChange: (
value: any,
oldValue: any,
model: any,
form: any
) => {
if (value !== oldValue && value == 1) {
form.deleteValueByName('options');
}
}
},
{
name: 'source',
type: 'input-text',
label: '关联数据',
description:
'比如：\\${listVar}，用来关联作用域中的已有数据。',
visibleOn: 'this.__mode == 1'
},
{
type: 'combo',
name: 'options',
visibleOn: 'this.__mode == 2',
minLength: 1,
label: '图片集数据',
multiple: true,
multiLine: true,
addable: true,
removable: true,
items: [
getSchemaTpl('imageUrl', {
name: 'image',
label: '缩略图'
}),
getSchemaTpl('imageUrl', {
name: 'src',
label: '原图'
}),
{
type: 'input-text',
label: '图片标题',
name: 'title'
},
{
type: 'textarea',
label: '图片描述',
name: 'caption'
}
]
}
]).concat([
getSchemaTpl('imageUrl', {
name: 'defaultImage',
label: '无数据时显示的图片'
})
])
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
type: 'ae-switch-more',
mode: 'normal',
name: 'enlargeAble',
label: '图片放大功能',
value: false,
hiddenOnDefault: false,
formType: 'extend',
pipeIn: (value: any) => !!value,
form: {
body: [
{
name: 'originalSrc',
visibleOn: 'this.enlargeAble',
type: 'input-text',
label: '图片标题',
name: 'title'
},
{
type: 'textarea',
label: '图片描述',
name: 'caption'
label: '原图地址',
description: '如果不配置将默认使用缩略图地址。'
}
]
}
]
).concat([
getSchemaTpl('imageUrl', {
name: 'defaultImage',
label: '无数据时显示的图片'
})
])
},
{
title: '外观',
body: [
getSchemaTpl('switch', {
name: 'enlargeAble',
label: '开启图片放大功能'
}),
},
{
name: 'originalSrc',
visibleOn: 'this.enlargeAble',
type: 'input-text',
label: '原图地址',
description: '如果不配置将默认使用缩略图地址。'
},
getSchemaTpl('switch', {
name: 'showDimensions',
label: '显示图片尺寸'
}),
getSchemaTpl('switch', {
name: 'showDimensions',
label: '是否显示图片尺寸'
}),
{
name: 'thumbMode',
type: 'select',
label: '缩略图展示模式',
pipeIn: defaultValue('contain'),
options: [
{
label: '宽度占满',
value: 'w-full'
},
{
name: 'thumbMode',
type: 'button-group-select',
label: '缩略图展示模式',
size: 'sm',
pipeIn: defaultValue('contain'),
options: [
{
label: '宽度占满',
value: 'w-full'
},
{
label: '高度占满',
value: 'h-full'
},
{
label: '高度占满',
value: 'h-full'
},
{
label: '包含',
value: 'contain'
},
{
label: '包含',
value: 'contain'
},
{
label: '铺满',
value: 'cover'
}
]
},
{
label: '铺满',
value: 'cover'
}
]
},
{
name: 'thumbRatio',
type: 'button-group-select',
label: '缩略图比率',
size: 'sm',
pipeIn: defaultValue('1:1'),
options: [
{
label: '1:1',
value: '1:1'
},
{
name: 'thumbRatio',
type: 'button-group-select',
label: '缩略图比率',
size: 'sm',
pipeIn: defaultValue('1:1'),
options: [
{
label: '1:1',
value: '1:1'
},
{
label: '4:3',
value: '4:3'
},
{
label: '4:3',
value: '4:3'
},
{
label: '16:9',
value: '16:9'
}
]
}
]
},
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {
autoComplete: false,
label: '外层'
}),
{
label: '16:9',
value: '16:9'
}
]
},
getSchemaTpl('className', {
autoComplete: false
}),
getSchemaTpl('className', {
name: 'listClassName',
label: '图片列表 CSS 类名'
})
]
},
{
title: '显隐',
body: [
// getSchemaTpl('ref'),
getSchemaTpl('visible')
]
}
])
];
getSchemaTpl('className', {
name: 'listClassName',
label: '图片列表'
})
]
}
])
}
]);
};
}

48
packages/amis-editor/src/plugin/Json.tsx
View File

@ -30,38 +30,38 @@ export class JsonPlugin extends BasePlugin {
};
panelTitle = 'JSON';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isUnderField = /\/field\/\w+$/.test(context.path as string);
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: flatten([
isUnderField
? {
type: 'tpl',
inline: false,
className: 'text-info text-sm',
tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
}
: null,
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
name: 'levelExpand',
type: 'input-number',
label: '默认展开级别',
pipeIn: defaultValue(1)
}
title: '基本',
body: [
isUnderField
? {
type: 'tpl',
inline: false,
className: 'text-info text-sm',
tpl: '<p>当前为字段内容节点配置，选择上层还有更多配置</p>'
}
: null,
{
name: 'levelExpand',
type: 'input-number',
label: '默认展开级别',
pipeIn: defaultValue(1)
}
]
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: flatten([getSchemaTpl('className')])
},
{
title: '显隐',
body: flatten([getSchemaTpl('ref'), getSchemaTpl('visible')])
}
getSchemaTpl('onlyClassNameTab')
])
];
};

149
packages/amis-editor/src/plugin/List.tsx
View File

@ -55,85 +55,96 @@ export class ListPlugin extends BasePlugin {
};
panelTitle = '列表';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isCRUDBody = context.schema.type === 'crud';
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
children: (
<Button
level="danger"
size="sm"
block
onClick={this.editDetail.bind(this, context.id)}
>
配置成员详情
</Button>
)
},
{
type: 'divider'
},
{
name: 'title',
type: 'input-text',
label: '标题'
},
isCRUDBody
? null
: {
name: 'source',
type: 'input-text',
label: '数据源',
pipeIn: defaultValue('${items}'),
description: '绑定当前环境变量'
title: '基本',
body: [
{
children: (
<Button
level="danger"
size="sm"
block
onClick={this.editDetail.bind(this, context.id)}
>
配置成员详情
</Button>
)
},
{
name: 'placeholder',
pipeIn: defaultValue('没有数据'),
type: 'input-text',
label: '无数据提示'
}
]
{
type: 'divider'
},
{
name: 'title',
type: 'input-text',
label: '标题'
},
isCRUDBody
? null
: {
name: 'source',
type: 'input-text',
label: '数据源',
pipeIn: defaultValue('${items}'),
description: '绑定当前环境变量'
},
{
name: 'placeholder',
pipeIn: defaultValue('没有数据'),
type: 'input-text',
label: '无数据提示'
}
]
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: [
getSchemaTpl('switch', {
name: 'showHeader',
label: '是否显示头部',
pipeIn: defaultValue(true)
}),
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('switch', {
name: 'showHeader',
label: '是否显示头部',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'showFooter',
label: '是否显示底部',
pipeIn: defaultValue(true)
}),
getSchemaTpl('className', {
label: 'CSS 类名'
}),
getSchemaTpl('className', {
name: 'listClassName',
label: 'List div CSS 类名'
}),
getSchemaTpl('className', {
name: 'headerClassName',
label: '头部 CSS 类名'
}),
getSchemaTpl('className', {
name: 'footerClassName',
label: '底部 CSS 类名'
})
]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
getSchemaTpl('switch', {
name: 'showFooter',
label: '是否显示底部',
pipeIn: defaultValue(true)
})
]
},
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {
label: '外层'
}),
getSchemaTpl('className', {
name: 'listClassName',
label: 'List'
}),
getSchemaTpl('className', {
name: 'headerClassName',
label: '头部'
}),
getSchemaTpl('className', {
name: 'footerClassName',
label: '底部'
})
]
}
])
}
]);
};

124
packages/amis-editor/src/plugin/Log.tsx
View File

@ -3,7 +3,7 @@
*/
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {getSchemaTpl} from 'amis-editor-core';
import {getSchemaTpl, tipedLabel} from 'amis-editor-core';
export class LogPlugin extends BasePlugin {
// 关联渲染器名字
@ -20,31 +20,123 @@ export class LogPlugin extends BasePlugin {
tags = ['展示'];
previewSchema = {
type: 'log',
height: 120
height: 120,
autoScroll: true
};
scaffold: any = {
type: 'log'
type: 'log',
autoScroll: true,
height: 500,
encoding: 'utf-8'
};
panelJustify = true;
panelTitle = '日志';
panelBodyCreator = (context: BaseEventContext) => {
const renderer: any = context.info.renderer;
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
getSchemaTpl('api', {
label: '日志数据源',
name: 'source'
})
]
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('apiControl', {
required: true,
name: 'source',
renderLabel: true,
label: tipedLabel('数据源', `返回日志信息的服务，后端需要通过流的方式返回结果。
可参考<a target="_blank" href="https://baidu.github.io/amis/zh-CN/components/log#%E5%90%8E%E7%AB%AF%E5%AE%9E%E7%8E%B0%E5%8F%82%E8%80%83">示例</a>`)
}),
{
type: 'input-text',
label: tipedLabel('文本编码', '返回内容的字符编码，例如 UTF-8、ISO-8859-2、KOI8-R、GBK等等。默认UTF-8'),
name: 'encoding'
},
getSchemaTpl('placeholder', {
label: '加载提示',
placeholder: '加载中'
}),
{
type: 'switch',
label: tipedLabel('跟随底部', '自动滚动到底部，方便查看最新日志内容'),
name: 'autoScroll',
value: true,
inputClassName: 'is-inline'
},
{
label: tipedLabel('操作', '可在日志顶部添加以下操作按钮'),
type: 'checkboxes',
name: 'operation',
inline: false,
options: [
{
label: '停止',
value: 'stop'
},
{
label: '刷新',
value: 'restart'
},
{
label: '清空',
value: 'clear'
},
{
label: '隐藏行号',
value: 'showLineNumber'
},
{
label: '查询',
value: 'filter'
}
]
}
]
},
{
title: '性能优化',
body: [
{
type: 'input-number',
label: tipedLabel('每行高度', `设置每行高度，这时就会默认启用虚拟渲染，避免渲染卡顿。
<ul><li>优点：仍然可以查看所有日志</li>
<li>缺点：如果某一行日志很长也不会自动折行，会出现水平滚动条</li></ul>
`),
name: 'rowHeight',
min: 1
},
{
type: 'input-number',
label: tipedLabel('显示行数', `限制最大显示行数，避免渲染卡顿，默认不限制。
<ul><li>优点：某一行日志很长的时候会自动折行</li>
<li>缺点：无法查看之前的日志</li></ul>
`),
name: 'maxLength',
min: 1
}
]
},
getSchemaTpl('status', {isFormItem: false})
])
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
type: 'input-number',
label: tipedLabel('高度', '展示区域高度'),
name: 'height',
min: 1
}
]
},
getSchemaTpl('style:classNames', {
isFormItem: false
})
])
}
]);
};

256
packages/amis-editor/src/plugin/Mapping.tsx
View File

@ -1,7 +1,15 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {isObject} from 'amis-editor-core';
import {
registerEditorPlugin,
BaseEventContext,
BasePlugin,
defaultValue,
getSchemaTpl,
diff,
JSONPipeOut,
BasicToolbarItem,
ContextMenuEventContext,
ContextMenuItem
} from 'amis-editor-core';
export class MappingPlugin extends BasePlugin {
// 关联渲染器名字
@ -21,12 +29,15 @@ export class MappingPlugin extends BasePlugin {
type: 'mapping',
value: 2,
map: {
0: '<span class="label label-info">一</span>',
1: '<span class="label label-success">二</span>',
2: '<span class="label label-danger">三</span>',
3: '<span class="label label-warning">四</span>',
4: '<span class="label label-primary">五</span>',
'*': '<span class="label label-default">-</span>'
1: '开心',
2: '愤怒',
3: '伤心',
4: '冷漠',
'*': '一般'
},
itemSchema: {
type: 'tag',
label: '${item}'
}
};
previewSchema = {
@ -34,117 +45,158 @@ export class MappingPlugin extends BasePlugin {
};
panelTitle = '映射';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isUnderField = /\/field\/\w+$/.test(context.path as string);
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
isUnderField
? {
type: 'tpl',
inline: false,
className: 'text-info text-sm',
tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
}
: null,
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
label: '映射表',
type: 'combo',
scaffold: {
key: 'key-{index}',
value: 'value-{index}'
},
required: true,
name: 'map',
descriptionClassName: 'help-block text-xs m-b-none',
description:
'<p>当值命中左侧 Key 时，展示右侧内容，当没有命中时，默认实现 Key 为 <code>*</code>的内容</div>(请确保key值唯一)',
multiple: true,
pipeIn: (value: any) => {
if (!isObject(value)) {
return [
{
key: '*',
value: '通配值'
title: '基本',
body: [
isUnderField
? {
type: 'tpl',
inline: false,
className: 'text-info text-sm',
tpl: '<p>当前为字段内容节点配置，选择上层还有更多配置</p>'
}
];
}
let arr: Array<any> = [];
Object.keys(value).forEach(key => {
arr.push({
key: key || '',
value:
typeof value[key] === 'string'
? value[key]
: JSON.stringify(value[key])
});
});
return arr;
},
pipeOut: (value: any) => {
if (!Array.isArray(value)) {
return value;
}
let obj: any = {};
value.forEach((item: any, idx: number) => {
let key: string = item.key || '';
let value: any = item.value;
if (key === 'key-{index}' && value === 'value-{index}') {
key = key.replace('-{index}', `${idx}`);
value = value.replace('-{index}', `${idx}`);
}
try {
value = JSON.parse(value);
} catch (e) {}
obj[key] = value;
});
return obj;
},
items: [
: null,
{
placeholder: 'Key',
type: 'input-text',
unique: true,
name: 'key',
required: true,
columnClassName: 'w-xs'
type: 'ae-mapSourceControl',
label: '映射表',
mode: 'normal',
name: 'source'
},
{
placeholder: '内容',
type: 'input-text',
name: 'value'
}
type: 'ae-switch-more',
mode: 'normal',
label: '自定义显示模板',
bulk: false,
name: 'itemSchema',
formType: 'extend',
form: {
body: [
{
type: 'button',
level: 'primary',
size: 'sm',
block: true,
onClick: this.editDetail.bind(this, context.id),
label: '配置显示模板'
}
]
},
pipeIn: (value: any) => {
return value !== undefined;
},
pipeOut: (value: any, originValue: any, data: any) => {
if (value === true) {
return {
type: 'tag',
label: `\${${data.labelField || 'item'} | default: "-"}`
};
}
return value ? value : undefined;
}
},
getSchemaTpl('valueFormula', {
pipeOut: (value: any) => {
return value == null || value === '' ? undefined : value;
}
}),
getSchemaTpl('placeholder', {
pipeIn: defaultValue('-'),
label: '占位符'
})
]
},
{
name: 'placeholder',
type: 'input-text',
pipeIn: defaultValue('-'),
label: '占位符'
}
]
getSchemaTpl('status')
])
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
body: getSchemaTpl('collapseGroup', [
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {
label: '外层'
})
]
}
])
}
])
];
};
filterProps(props: any) {
// 禁止选中子节点
props = JSONPipeOut(props);
return props;
}
buildEditorToolbar(
{id, info, schema}: BaseEventContext,
toolbars: Array<BasicToolbarItem>
) {
if (info.renderer.name === 'mapping') {
toolbars.push({
icon: 'fa fa-expand',
order: 100,
tooltip: '配置显示模板',
onClick: this.editDetail.bind(this, id)
});
}
}
buildEditorContextMenu(
{id, schema, region, info, selections}: ContextMenuEventContext,
menus: Array<ContextMenuItem>
) {
if (selections.length || info?.plugin !== this) {
return;
}
if (info.renderer.name === 'mapping') {
menus.push('|', {
label: '配置显示模板',
onSelect: this.editDetail.bind(this, id)
});
}
}
editDetail(id: string) {
const manager = this.manager;
const store = manager.store;
const node = store.getNodeById(id);
const value = store.getValueOf(id);
node &&
value &&
this.manager.openSubEditor({
title: '配置显示模板',
value: value.itemSchema || {
type: 'tag',
label: `\${${value.labelField ?? 'item'}}`
},
slot: {
type: 'container',
body: '$$'
},
onChange: (newValue: any) => {
newValue = {...value, itemSchema: newValue};
manager.panelChangeValue(newValue, diff(value, newValue));
},
data: {
[value.labelField || 'label']: '假数据',
[value.valueField || 'value']: '假数据',
item: '假数据'
}
});
}
}
registerEditorPlugin(MappingPlugin);

95
packages/amis-editor/src/plugin/Plain.tsx
View File

@ -29,53 +29,58 @@ export class PlainPlugin extends BasePlugin {
};
panelTitle = '纯文本';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isTableCell = context.info.renderer.name === 'table-cell';
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
label: '内容',
type: 'textarea',
pipeIn: (value: any, data: any) => value || (data && data.text),
name: 'tpl',
description:
'如果当前字段有值，请不要设置，否则覆盖。支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
},
{
name: 'placeholder',
label: '占位符',
type: 'input-text',
pipeIn: defaultValue('-')
}
]
},
isTableCell
? null
: {
title: '外观',
body: [
getSchemaTpl('switch', {
name: 'inline',
label: '内联模式',
value: true
}),
getSchemaTpl('className')
]
},
isTableCell
? null
: {
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
]);
return [
getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
label: '内容',
type: 'textarea',
mode: 'col',
pipeIn: (value: any, data: any) => value || (data && data.text),
name: 'tpl',
description:
'如果当前字段有值，请不要设置，否则覆盖。支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
},
getSchemaTpl('placeholder', {
pipeIn: defaultValue('-'),
label: '占位符'
})
]
},
isTableCell ? null : getSchemaTpl('status')
])
},
isTableCell ? null : {
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('switch', {
name: 'inline',
label: '内联模式',
value: true
})
]
},
{
title: 'CSS类名',
body: [
getSchemaTpl('className')
]
}
])
}
])
];
};
}

333
packages/amis-editor/src/plugin/Table.tsx
View File

@ -333,200 +333,205 @@ export class TablePlugin extends BasePlugin {
description: '开启表格拖拽排序功能'
}
];
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isCRUDBody = context.schema.type === 'crud';
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
name: 'title',
type: 'input-text',
label: '标题'
},
isCRUDBody
? null
: {
name: 'source',
title: '基本',
body: [
{
name: 'title',
type: 'input-text',
label: '数据源',
pipeIn: defaultValue('${items}'),
description: '绑定当前环境变量'
label: '标题'
},
{
name: 'combineNum',
label: '自动合并单元格',
type: 'input-number',
placeholder: '设置列数',
description:
'设置从左到右多少列内启用自动合并单元格，根据字段值是否相同来决定是否合并。'
},
isCRUDBody
? null
: {
name: 'source',
type: 'input-text',
label: '数据源',
pipeIn: defaultValue('${items}'),
description: '绑定当前环境变量'
},
isCRUDBody
? null
: {
type: 'divider'
{
name: 'combineNum',
label: '自动合并单元格',
type: 'input-number',
placeholder: '设置列数',
description:
'设置从左到右多少列内启用自动合并单元格，根据字段值是否相同来决定是否合并。'
}
// {
// children: (
// <div>
// <Button
// level="info"
// size="sm"
// className="m-b-sm"
// block
// onClick={this.handleAdd}
// >
// 新增一列
// </Button>
// </div>
// )
// },
// {
// children: (
// <div>
// <Button
// level="info"
// size="sm"
// className="m-b-sm"
// block
// onClick={this.handleAdd}
// >
// 新增一列
// </Button>
// </div>
// )
// },
// {
// children: (
// <div>
// <Button
// level="success"
// size="sm"
// block
// onClick={this.handleColumnsQuickEdit.bind(this)}
// >
// 快速编辑列信息
// </Button>
// </div>
// )
// }
]
// {
// children: (
// <div>
// <Button
// level="success"
// size="sm"
// block
// onClick={this.handleColumnsQuickEdit.bind(this)}
// >
// 快速编辑列信息
// </Button>
// </div>
// )
// }
]
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: [
body: getSchemaTpl('collapseGroup', [
{
name: 'columnsTogglable',
label: '展示列显示开关',
type: 'button-group-select',
pipeIn: defaultValue('auto'),
mode: 'inline',
className: 'w-full',
size: 'xs',
options: [
title: '基本',
body: [
{
label: '自动',
value: 'auto'
name: 'columnsTogglable',
label: '展示列显示开关',
type: 'button-group-select',
pipeIn: defaultValue('auto'),
mode: 'inline',
className: 'w-full',
size: 'xs',
options: [
{
label: '自动',
value: 'auto'
},
{
label: '开启',
value: true
},
{
label: '关闭',
value: false
}
],
description: '自动即列数量大于5个时自动开启'
},
getSchemaTpl('switch', {
name: 'affixHeader',
label: '是否固顶表头',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'showHeader',
label: '是否显示头部',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'showFooter',
label: '是否显示底部',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'footable',
label: '是否开启单条底部展示',
description:
'如果列太多显示会很臃肿，可以考虑把部分列放在当前行的底部展示',
pipeIn: (value: any) => !!value
}),
{
name: 'footable.expand',
type: 'button-group-select',
size: 'xs',
visibleOn: 'data.footable',
label: '底部默认展开',
pipeIn: defaultValue('none'),
mode: 'inline',
className: 'w-full',
options: [
{
label: '第一条',
value: 'first'
},
{
label: '所有',
value: 'all'
},
{
label: '不展开',
value: 'none'
}
]
},
{
label: '开启',
value: true
name: 'placeholder',
pipeIn: defaultValue('暂无数据'),
type: 'input-text',
label: '无数据提示'
},
{
label: '关闭',
value: false
}
],
description: '自动即列数量大于5个时自动开启'
},
getSchemaTpl('switch', {
name: 'affixHeader',
label: '是否固顶表头',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'showHeader',
label: '是否显示头部',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'showFooter',
label: '是否显示底部',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'footable',
label: '是否开启单条底部展示',
description:
'如果列太多显示会很臃肿，可以考虑把部分列放在当前行的底部展示',
pipeIn: (value: any) => !!value
}),
{
name: 'footable.expand',
type: 'button-group-select',
size: 'xs',
visibleOn: 'data.footable',
label: '底部默认展开',
pipeIn: defaultValue('none'),
mode: 'inline',
className: 'w-full',
options: [
{
label: '第一条',
value: 'first'
},
{
label: '所有',
value: 'all'
},
{
label: '不展开',
value: 'none'
name: 'rowClassNameExpr',
type: 'input-text',
label: '行高亮规则',
placeholder: `支持模板语法，如 <%= data.id % 2 ? 'bg-success' : '' %>`
}
]
},
{
name: 'placeholder',
pipeIn: defaultValue('暂无数据'),
type: 'input-text',
label: '无数据提示'
},
{
name: 'rowClassNameExpr',
type: 'input-text',
label: '行高亮规则',
placeholder: `支持模板语法，如 <%= data.id % 2 ? 'bg-success' : '' %>`
},
getSchemaTpl('className', {
label: '外层 CSS 类名'
}),
title: 'CSS类名',
body: [
getSchemaTpl('className', {
label: '外层'
}),
getSchemaTpl('className', {
name: 'tableClassName',
label: '表格 CSS 类名'
}),
getSchemaTpl('className', {
name: 'tableClassName',
label: '表格'
}),
getSchemaTpl('className', {
name: 'headerClassName',
label: '顶部外层 CSS 类名'
}),
getSchemaTpl('className', {
name: 'headerClassName',
label: '顶部外层'
}),
getSchemaTpl('className', {
name: 'footerClassName',
label: '底部外层 CSS 类名'
}),
getSchemaTpl('className', {
name: 'footerClassName',
label: '底部外层'
}),
getSchemaTpl('className', {
name: 'toolbarClassName',
label: '工具栏 CSS 类名'
})
]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
getSchemaTpl('className', {
name: 'toolbarClassName',
label: '工具栏'
})
]
}
])
},
isCRUDBody
? null

127
packages/amis-editor/src/plugin/Tag.tsx Normal file
View File

@ -0,0 +1,127 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {undefinedPipeOut, getSchemaTpl} from 'amis-editor-core';
const presetColors = [
'#2468f2',
'#b8babf',
'#528eff',
'#30bf13',
'#f33e3e',
'#ff9326',
'#fff',
'#000',
]
export class TagPlugin extends BasePlugin {
// 关联渲染器名字
rendererName = 'tag';
$schema = '/schemas/TagSchema.json';
// 组件名称
name = '标签';
isBaseComponent = true;
icon = 'fa fa-tag';
pluginIcon = 'tag-plugin';
description = '用于标记和选择的标签';
docLink = '/amis/zh-CN/components/tag';
tags = ['展示'];
previewSchema = {
type: 'tag',
label: '普通标签',
color: 'processing'
};
scaffold: any = {
type: 'tag',
label: '普通标签',
color: 'processing'
};
panelTitle = '标签';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('label'),
{
type: 'button-group-select',
label: '模式',
name: 'displayMode',
value: 'normal',
size: 'md',
options: [
{
label: '普通',
value:'normal'
},
{
label: '圆角',
value:'rounded'
},
{
label: '状态',
value:'status'
}
]
},
getSchemaTpl('icon', {
visibleOn: 'data.displayMode === "status"',
label: '前置图标'
})
]
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '颜色',
body: [
{
type:'input-color',
label: '主题',
name: 'color',
presetColors,
pipeOut: undefinedPipeOut
},
{
type:'input-color',
label: '背景色',
name: 'style.backgroundColor',
presetColors,
pipeOut: undefinedPipeOut
},
{
type:'input-color',
label: '边框',
name: 'style.borderColor',
presetColors,
pipeOut: undefinedPipeOut
},
{
type:'input-color',
label: '文字',
name: 'style.color',
presetColors,
pipeOut: undefinedPipeOut
}
]
},
getSchemaTpl('style:classNames', {
isFormItem: false
})
])
}
]);
};
}
registerEditorPlugin(TagPlugin);

70
packages/amis-editor/src/plugin/Time.tsx
View File

@ -22,49 +22,47 @@ export class TimePlugin extends DatePlugin {
format: 'HH:mm:ss',
value: Math.round(Date.now() / 1000)
};
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
type: 'input-time',
name: 'value',
inputFormat: 'HH:mm:ss',
timeFormat: 'HH:mm:ss',
label: '时间数值'
title: '基本',
body: [
{
type: 'input-time',
name: 'value',
inputFormat: 'HH:mm:ss',
timeFormat: 'HH:mm:ss',
label: '时间数值'
},
{
type: 'input-text',
name: 'format',
label: '显示时间格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('HH:mm:ss')
},
{
type: 'input-text',
name: 'valueFormat',
label: '数据日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('X')
},
getSchemaTpl('placeholder', {
pipeIn: defaultValue('-'),
label: '占位符'
})
]
},
{
type: 'input-text',
name: 'format',
label: '显示时间格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('HH:mm:ss')
},
{
type: 'input-text',
name: 'valueFormat',
label: '数据日期格式',
description: '请参考 moment 中的格式用法。',
pipeIn: defaultValue('X')
},
{
name: 'placeholder',
type: 'input-text',
pipeIn: defaultValue('-'),
label: '占位符'
}
]
getSchemaTpl('status')
])
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
getSchemaTpl('onlyClassNameTab')
])
];
};

5
packages/amis-editor/src/renderer/APIControl.tsx
View File

@ -985,7 +985,8 @@ export default class APIControl extends React.Component<
labelField = 'label',
useMobileUI,
popOverContainer,
env
env,
renderLabel
} = this.props;
let {apiStr, selectedItem, loading} = this.state;
selectedItem =
@ -1003,7 +1004,7 @@ export default class APIControl extends React.Component<
})
) : (
<>
{this.renderHeader()}
{!renderLabel && this.renderHeader()}
<div className="ae-ApiControl-content" key="content">
<div className={cx('ae-ApiControl-input')}>

381
packages/amis-editor/src/renderer/MapSourceControl.tsx Normal file
View File

@ -0,0 +1,381 @@
/**
* @file mapping 映射源配置
*/
import React from 'react';
import cx from 'classnames';
import {FormItem} from 'amis';
import {autobind, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {FormControlProps, isObject} from 'amis-core';
import {SchemaApi} from 'amis/lib/Schema';
import debounce from 'lodash/debounce';
enum MapType {
CUSTOM = 'custom',
API = 'api'
}
export interface MapSourceControlProps extends FormControlProps {
className?: string;
}
export interface MapSourceControlState {
map: Object | Array<Object>;
source: SchemaApi;
labelField?: string;
valueField?: string;
mapType: MapType;
}
export default class MapSourceControl extends React.Component<
MapSourceControlProps,
MapSourceControlState
> {
$comp: string; // 记录一下路径，不再从外部同步内部，只从内部同步外部
constructor(props: MapSourceControlProps) {
super(props);
let mapType: MapType = MapType.CUSTOM;
if (props.data.hasOwnProperty('source') && props.data.source) {
mapType = MapType.API;
}
this.state = {
map: props.data.map,
source: props.data.source,
labelField: props.data.labelField,
valueField: props.data.valueField,
mapType
};
}
/**
* 更新map字段的统一出口
*/
onChange() {
let {mapType, source, map, labelField, valueField} = this.state;
const {onBulkChange} = this.props;
labelField = labelField === '' ? undefined : labelField;
valueField = valueField === '' ? undefined : valueField;
if (mapType === MapType.CUSTOM) {
onBulkChange && onBulkChange({
map,
source: undefined,
labelField,
valueField
});
return;
}
if (mapType === MapType.API) {
onBulkChange && onBulkChange({
source,
map: undefined,
labelField,
valueField
});
return;
}
}
/**
* 切换选项类型
*/
@autobind
handleMapTypeChange(mapType: MapType) {
this.setState({
mapType,
labelField: undefined,
valueField: undefined
}, this.onChange);
}
renderHeader() {
const {
render,
label,
labelRemark,
useMobileUI,
env,
popOverContainer,
} = this.props;
const classPrefix = env?.theme?.classPrefix;
const {mapType} = this.state;
const optionSourceList = (
[
{
label: '自定义选项',
value: MapType.CUSTOM
},
{
label: '外部接口',
value: MapType.API
},
] as Array<{
label: string;
value: MapType;
}>
).map(item => ({
...item,
onClick: () => this.handleMapTypeChange(item.value)
}));
return (
<header className="ae-OptionControl-header">
<label className={cx(`${classPrefix}Form-label`)} style={{marginBottom:0}}>
{label || ''}
{labelRemark
? render('label-remark', {
type: 'remark',
icon: labelRemark.icon || 'warning-mark',
tooltip: labelRemark,
className: cx(`Form-lableRemark`, labelRemark?.className),
useMobileUI,
container: popOverContainer
? popOverContainer
: env && env.getModalContainer
? env.getModalContainer
: undefined
})
: null}
</label>
<div>
{render(
'validation-control-addBtn',
{
type: 'dropdown-button',
level: 'link',
size: 'sm',
label: '${selected}',
align: 'right',
closeOnClick: true,
closeOnOutside: true,
buttons: optionSourceList
},
{
popOverContainer: null,
data: {
selected: optionSourceList.find(item => item.value === mapType)!
.label
}
}
)}
</div>
</header>
);
}
@autobind
handleMapChange(map: any) {
this.setState({map}, this.onChange);
}
@autobind
handleAPIChange(source: SchemaApi) {
this.setState({source}, this.onChange);
}
@autobind
handleLabelFieldChange(labelField: string) {
this.setState({labelField}, this.onChange);
}
@autobind
handleValueFieldChange(valueField: string) {
this.setState({valueField}, this.onChange);
}
renderOtherFields() {
return [{
label: tipedLabel(
'值字段',
'映射表是数组对象，且对象有多个key时，用来匹配值的字段'
),
type: 'input-text',
name: 'valueField',
placeholder: '匹配值的字段',
onChange: this.handleValueFieldChange,
},
{
label: tipedLabel(
'显示字段',
'映射表是数组对象时，用作显示的字段，显示多字段请使用自定义显示模板'
),
type: 'input-text',
name: 'labelField',
placeholder: '用作显示的字段',
onChange: this.handleLabelFieldChange
}]
}
renderApiPanel() {
const {render} = this.props;
const {mapType, source, labelField, valueField} = this.state;
if (mapType === MapType.CUSTOM) {
return null;
}
return render(
'api',
getSchemaTpl('apiControl', {
label: '接口',
name: 'source',
mode: 'normal',
className: 'ae-ExtendMore',
visibleOn: 'data.autoComplete !== false',
value: source,
onChange: this.handleAPIChange,
sourceType: mapType,
footer: this.renderOtherFields()
})
);
}
renderObjectMap() {
const {render} = this.props;
return render('objectMap', getSchemaTpl('combo-container', {
label: '',
type: 'combo',
mode: 'normal',
scaffold: {
key: 'key-{index}',
value: 'value-{index}'
},
required: true,
name: 'map',
descriptionClassName: 'help-block text-xs m-b-none',
description:
'<p>当值命中左侧 Key 时，展示右侧内容<br />当没有命中时，默认展示 Key 为 <code>*</code>的内容</div><br />(请确保key值唯一)',
multiple: true,
pipeIn: (value: any) => {
if (!isObject(value)) {
return [
{
key: 'key0',
value: 'value1'
}
];
}
let arr: Array<any> = [];
Object.keys(value).forEach(key => {
arr.push({
key: key || '',
value:
typeof value[key] === 'string'
? value[key]
: JSON.stringify(value[key])
});
});
return arr;
},
pipeOut: (value: any) => {
if (!Array.isArray(value)) {
return value;
}
let obj: any = {};
value.forEach((item: any, idx: number) => {
let key: string = item.key || '';
let value: any = item.value;
if (key === 'key-{index}' && value === 'value-{index}') {
key = key.replace('-{index}', `${idx}`);
value = value.replace('-{index}', `${idx}`);
}
try {
value = JSON.parse(value);
} catch (e) {}
obj[key] = value;
});
return obj;
},
onChange: (value: any) => {
this.handleMapChange(value || {'*': '通配值'});
},
items: [
{
placeholder: 'Key',
type: 'input-text',
unique: true,
name: 'key',
required: true,
columnClassName: 'w-xs'
},
{
placeholder: '内容',
type: 'input-text',
name: 'value'
}
]
}));
}
handleMapItemChange(index: number, item: any) {
const {map = []} = this.state;
const newMap = (map as object[]).slice();
try {
item = JSON.parse(item);
} catch (e) {}
newMap.splice(index, 1, item);
this.handleMapChange(newMap);
}
renderArrayMap() {
const {render} = this.props;
return <div className='ae-ExtendMore'>
{render('arrayMap', [
{
type: 'json-editor',
name: 'map',
label: false,
placeholder: '请保持数组成员结构相同',
onChange: (value: any, ...args: any[]) => {
try {
const map = JSON.parse(value);
this.debounceMapChange(map)
}
catch (e) {
console.error();
}
}
},
...this.renderOtherFields()
])}
</div>;
}
debounceMapChange = debounce(this.handleMapChange, 250);
renderMap() {
const {map} = this.state;
if (map && Array.isArray(map)) {
return this.renderArrayMap();
}
return this.renderObjectMap();
}
render() {
const {mapType} = this.state;
const {className} = this.props;
return (
<div className={cx('ae-OptionControl', className)}>
{this.renderHeader()}
{mapType === MapType.CUSTOM ? this.renderMap() : this.renderApiPanel()}
</div>
);
}
}
@FormItem({
type: 'ae-mapSourceControl',
renderLabel: false
})
export class MapSourceControlRenderer extends MapSourceControl {}

20
packages/amis-editor/src/renderer/event-control/helper.tsx
View File

@ -1200,7 +1200,9 @@ export const getEventControlConfig = (
}
}
if (['show', 'hidden', 'enabled', 'disabled'].includes(action.actionType)) {
if (
['show', 'hidden', 'enabled', 'disabled'].includes(action.actionType)
) {
// 兼容老逻辑，初始化actionType
config.__statusType = action.actionType;
config.__actionType = 'static';
@ -1263,6 +1265,17 @@ export const getEventControlConfig = (
delete config.data;
// 处理下 combo - addItem 的初始化
if (
action.actionType === 'addItem' &&
typeof action.args?.item === 'object'
) {
config.args = {
...config.args,
item: objectToComboArray(action.args?.item)
};
}
// 还原args为可视化配置结构(args + addOnArgs)
if (config.args) {
if (innerArgs) {
@ -1434,10 +1447,11 @@ export const getEventControlConfig = (
value: action.__actionExpression
}
: undefined;
action.actionType === 'static' && (action.actionType = config.__statusType);
action.actionType === 'static' &&
(action.actionType = config.__statusType);
delete action.__actionExpression;
delete action.__statusType;
};
}
delete action.config;

14
packages/amis-editor/src/tpl/common.tsx
View File

@ -664,6 +664,20 @@ setSchemaTpl('className', (schema: any) => {
};
});
setSchemaTpl('onlyClassNameTab', (label = '外层') => {
return {
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {label})
]
}
])
}
});
/**
* combo 组件样式包装调整
*/