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

amis-saas-8885 Merge remote-tracking branch 'origin/feat-optimize-6' into pre-release

Browse Source 
Change-Id: I9d5ebc1cc2fe7a612cc77b6c4bde192422d99c08
This commit is contained in:
igrowp 2023-01-05 22:25:42 +08:00
parent b336f08e06
commit d0eb88dd6f
28 changed files with 2786 additions and 1726 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/amis-editor/package.json
View File

@ -1,6 +1,6 @@
{
"name": "amis-editor",
"version": "5.2.3-beta.15",
"version": "5.2.4-beta.2",
"description": "amis 可视化编辑器",
"main": "lib/index.js",
"module": "esm/index.js",
@ -90,4 +90,4 @@
"react": ">=16.8.6",
"react-dom": ">=16.8.6"
}
}
}

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';
@ -146,6 +147,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';

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

@ -26,48 +26,45 @@ export class DatePlugin extends BasePlugin {
};
panelTitle = '日期展示';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
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')
])
];
};

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

@ -21,48 +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: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
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')
])
];
};

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

File diff suppressed because it is too large Load Diff

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 = '通过公式计算指定的变量值，并将其结果作用到指定的变量中';

64
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',
@ -105,23 +109,63 @@ 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('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
]
},
getSchemaTpl('status', {isFormItem: true}),

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

@ -408,7 +408,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

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

109
packages/amis-editor/src/plugin/Form/InputGroup.tsx
View File

@ -1,8 +1,13 @@
import React from 'react';
import {Button} from 'amis';
import {getSchemaTpl} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin} from 'amis-editor-core';
import {
defaultValue,
getSchemaTpl,
registerEditorPlugin,
BasePlugin,
BaseEventContext,
tipedLabel
} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
export class InputGroupControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -47,51 +52,59 @@ export class InputGroupControlPlugin extends BasePlugin {
};
panelTitle = 'Input 组合';
panelBody = [
[
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
{
name: 'body',
type: 'combo',
// label: '子按钮',
multiple: true,
addable: false,
draggable: true,
draggableTip: '可排序、可移除、如要编辑请在预览区选中编辑',
editable: false,
visibleOn: 'this.body && this.body.length',
items: [
{
type: 'tpl',
inline: false,
className: 'p-t-xs',
tpl: '<%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%>'
}
]
},
{
children: (
<Button
className="m-b"
// TODO：需要限制一下 body 的类型，之前是这些 'text', 'url', 'email', 'password', 'select', 'date', 'time', 'date-time', 'date-range', 'formula', 'color', 'city', 'icon', 'plain', 'tpl', 'button', 'submit', 'reset'
onClick={() => {
// this.manager.showInsertPanel('body')
this.manager.showRendererPanel('表单项'); // '请从左侧组件面板中点击添加表单项'
}}
level="danger"
tooltip="插入一个新的元素"
size="sm"
block
>
新增元素
</Button>
)
},
getSchemaTpl('formItemName', {
required: true
})
]
regions = [
{
key: 'body',
label: '内容区',
preferTag: '内容区',
renderMethod: 'render',
matchRegion: (elem: JSX.Element) => !!elem
}
];
notRenderFormZone = true;
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('label'),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect})
])
},
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {
renderer: context.info.renderer,
schema: [
getSchemaTpl('switch', {
label: '内联模式',
name: 'inline',
pipeIn: defaultValue(false)
})
]
}),
getSchemaTpl('style:classNames')
])
]
}
]);
};
}
registerEditorPlugin(InputGroupControlPlugin);

62
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;
@ -281,6 +285,36 @@ 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('switch', {
label: '可检索',
name: 'searchable',
visibleOn: 'data.type === "tree-select"'
}),
getSchemaTpl('multiple', {
body: [
{
@ -405,7 +439,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',
@ -446,8 +481,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',
@ -461,6 +505,10 @@ export class TreeControlPlugin extends BasePlugin {
name: 'showRadio',
hiddenOn: 'data.multiple'
}),
getSchemaTpl('switch', {
label: tipedLabel('显示层级展开线', '显示树层级展开线'),
name: 'showOutline'
}),
getSchemaTpl('switch', {
name: 'withChildren',
label: '数值是否携带子节点',

517
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,11 +298,17 @@ export class StaticControlPlugin extends BasePlugin {
{
title: '基本',
body: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
{
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', {
@ -65,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
@ -322,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: [

103
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[] = [
@ -266,16 +267,36 @@ 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('switch', {
label: '可检索',
name: 'searchable',
visibleOn: 'data.type === "tree-select"'
}),
getSchemaTpl('searchable'),
getSchemaTpl('multiple', {
body: [
{
@ -398,6 +419,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',
@ -419,34 +446,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',
@ -464,6 +492,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',
@ -506,7 +547,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
getSchemaTpl('style:classNames', {
schema: [
getSchemaTpl('className', {
label: 'tree容器',
label: '外层容器',
name: 'treeContainerClassName'
})
]

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

@ -6,7 +6,7 @@ import {
PluginEvent,
ResizeMoveEventContext
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {mockValue} from 'amis-editor-core';
export class ImagePlugin extends BasePlugin {
@ -32,166 +32,190 @@ 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: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
{
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: 'title',
type: 'input-text',
label: '图片标题'
},
{
name: 'imageCaption',
type: 'input-text',
label: '图片描述'
},
{
name: 'imageMode',
label: '展示模式',
type: 'select',
pipeIn: defaultValue('thumb'),
options: [
{
label: '缩率图',
value: 'thumb'
},
{
label: '原图',
value: 'original'
}
]
},
{
name: 'width',
label: '宽度',
type: 'input-number'
},
{
name: 'height',
label: '高度',
type: 'input-number'
},
isUnderField
? null
: getSchemaTpl('imageUrl', {
name: 'src',
type: 'input-text',
label: '缩略图地址',
description: '如果已绑定字段名，可以不用设置，支持用变量。'
}),
{
type: 'ae-switch-more',
mode: 'normal',
name: 'enlargeAble',
label: tipedLabel(
'图片放大功能',
'放大功能和打开外部链接功能是冲突的，若要点击时打开外部链接请先关闭此功能'
),
value: false,
hiddenOnDefault: false,
formType: 'extend',
pipeIn: (value: any) => !!value,
form: {
body: [
getSchemaTpl('imageUrl', {
name: 'originalSrc',
label: '原图地址',
description: '如果不配置将默认使用缩略图地址。'
})
]
}
]
},
getSchemaTpl('title', {
label: '图片标题'
}),
getSchemaTpl('imageCaption'),
{
name: 'width',
label: '宽度',
type: 'input-number'
},
{
name: 'height',
label: '高度',
type: 'input-number'
},
},
{
type: 'input-text',
label: '打开外部链接',
name: 'href',
hiddenOn: 'this.enlargeAble',
clearValueOnHidden: true
},
getSchemaTpl('imageUrl', {
name: 'defaultImage',
label: tipedLabel('占位图', '无数据时显示的图片')
})
]
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
// amis 已废弃
// 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: '开启图片放大功能'
}),
getSchemaTpl('imageUrl', {
name: 'originalSrc',
visibleOn: 'this.enlargeAble',
label: '原图地址',
description: '如果不配置将默认使用缩略图地址。'
}),
getSchemaTpl('switch', {
name: 'showDimensions',
label: '是否显示图片尺寸'
}),
{
name: 'thumbMode',
type: 'button-group-select',
label: '缩略图展示模式',
size: 'sm',
pipeIn: defaultValue('contain'),
options: [
{
label: '宽度占满',
value: 'w-full'
{
name: 'thumbMode',
type: 'select',
label: '缩略图展示模式',
mode: 'horizontal',
labelAlign: 'left',
horizontal: {
left: 5,
right: 7
},
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', {
label: '外层'
}),
{
label: '16:9',
value: '16:9'
}
]
},
getSchemaTpl('className', {
name: 'imageClassName',
label: '图片'
}),
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>) {

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

@ -1,6 +1,6 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {mockValue} from 'amis-editor-core';
export class ImagesPlugin extends BasePlugin {
@ -37,185 +37,194 @@ 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
? [getSchemaTpl('layout:originPosition', {value: 'left-top'})]
: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
{
type: 'formula',
name: '__mode',
autoSet: false,
formula:
'!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
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: 'sm',
options: [
{
label: '关联字段',
value: 1
},
{
label: '静态设置',
value: 2
}
],
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,
value: [{}],
items: [
getSchemaTpl('imageUrl', {
name: 'image',
label: '缩略图'
}),
getSchemaTpl('imageUrl', {
name: 'src',
label: '原图'
}),
{
type: 'input-text',
label: '图片标题',
name: 'title'
},
{
type: 'textarea',
label: '图片描述',
name: 'caption'
}
]
},
getSchemaTpl('switch', {
name: 'enlargeAble',
label: '图片放大功能'
})
]
).concat([
getSchemaTpl('imageUrl', {
name: 'defaultImage',
label: tipedLabel('占位图', '无数据时显示的图片')
})
])
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
// 已废弃
// getSchemaTpl('switch', {
// name: 'showDimensions',
// label: '显示图片尺寸'
// }),
{
name: 'thumbMode',
type: 'select',
label: '缩略图展示模式',
mode: 'horizontal',
labelAlign: 'left',
horizontal: {
left: 5,
right: 7
},
{
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');
}
pipeIn: defaultValue('contain'),
options: [
{
label: '宽度占满',
value: 'w-full'
},
{
label: '高度占满',
value: 'h-full'
},
{
label: '包含',
value: 'contain'
},
{
label: '铺满',
value: 'cover'
}
},
{
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: '原图'
}),
getSchemaTpl('title', {
label: '图片标题'
}),
getSchemaTpl('imgCaption')
]
}
]
).concat([
getSchemaTpl('imageUrl', {
name: 'defaultImage',
label: '无数据时显示的图片'
})
])
},
{
title: '外观',
body: [
getSchemaTpl('switch', {
name: 'enlargeAble',
label: '开启图片放大功能'
}),
]
},
{
name: 'originalSrc',
visibleOn: 'this.enlargeAble',
type: 'input-text',
label: '原图地址',
description: '如果不配置将默认使用缩略图地址。'
},
{
name: 'thumbRatio',
type: 'button-group-select',
label: '缩略图比率',
size: 'sm',
pipeIn: defaultValue('1:1'),
options: [
{
label: '1:1',
value: '1:1'
},
getSchemaTpl('switch', {
name: 'showDimensions',
label: '是否显示图片尺寸'
}),
{
label: '4:3',
value: '4:3'
},
{
name: 'thumbMode',
type: 'button-group-select',
label: '缩略图展示模式',
size: 'sm',
pipeIn: defaultValue('contain'),
options: [
{
label: '宽度占满',
value: 'w-full'
},
{
label: '16:9',
value: '16:9'
}
]
}
]
},
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {
autoComplete: false,
label: '外层'
}),
{
label: '高度占满',
value: 'h-full'
},
{
label: '包含',
value: 'contain'
},
{
label: '铺满',
value: 'cover'
}
]
},
{
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: '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,
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
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')
])
];
};

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

@ -55,82 +55,126 @@ export class ListPlugin extends BasePlugin {
};
panelTitle = '列表';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isCRUDBody = context.schema.type === 'crud';
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
children: (
<Button
level="danger"
size="sm"
block
onClick={this.editDetail.bind(this, context.id)}
>
配置成员详情
</Button>
)
},
{
type: 'divider'
},
getSchemaTpl('title'),
isCRUDBody
? null
: {
name: 'source',
type: 'input-text',
label: '数据源',
pipeIn: defaultValue('${items}'),
description: '绑定当前环境变量'
title: '基本',
body: [
{
children: (
<Button
level="primary"
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: '无数据提示'
},
{
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
label: '头部',
name: 'showHeader',
form: {
body: [
{
children: (
<Button
level="primary"
size="sm"
block
onClick={this.editHeaderDetail.bind(this, context.id)}
>
配置头部
</Button>
)
}
]
}
},
{
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
label: '底部',
name: 'showFooter',
form: {
body: [
{
children: (
<Button
level="primary"
size="sm"
block
onClick={this.editFooterDetail.bind(this, context.id)}
>
配置底部
</Button>
)
}
]
}
}
]
},
getSchemaTpl('status')
])
},
{
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')]
body: getSchemaTpl('collapseGroup', [
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {
label: '外层'
}),
getSchemaTpl('className', {
name: 'listClassName',
label: 'List'
}),
getSchemaTpl('className', {
name: 'headerClassName',
label: '头部'
}),
getSchemaTpl('className', {
name: 'footerClassName',
label: '底部'
})
]
}
])
}
]);
};
@ -177,6 +221,50 @@ export class ListPlugin extends BasePlugin {
};
}
editHeaderDetail(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.header,
slot: {
type: 'container',
body: '$$'
},
onChange: newValue => {
newValue = {...value, header: newValue};
manager.panelChangeValue(newValue, diff(value, newValue));
}
});
}
editFooterDetail(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.footer,
slot: {
type: 'container',
body: '$$'
},
onChange: newValue => {
newValue = {...value, footer: newValue};
manager.panelChangeValue(newValue, diff(value, newValue));
}
});
}
editDetail(id: string) {
const manager = this.manager;
const store = manager.store;

140
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,32 +20,138 @@ 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('layout:originPosition', {value: 'left-top'}),
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
})
])
}
]);
};

266
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,115 +45,168 @@ 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: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
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}`);
: null,
getSchemaTpl('mapSourceControl'),
{
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: `\${${this.getDisplayField(
data
)} | default: "-"}`
};
}
return value ? value : undefined;
}
try {
value = JSON.parse(value);
} catch (e) {}
obj[key] = value;
});
return obj;
},
items: [
{
placeholder: 'Key',
type: 'input-text',
unique: true,
name: 'key',
required: true,
columnClassName: 'w-xs'
},
{
placeholder: '内容',
type: 'input-text',
name: 'value'
}
getSchemaTpl('valueFormula', {
pipeOut: (value: any) => {
return value == null || value === '' ? undefined : value;
}
}),
getSchemaTpl('placeholder', {
pipeIn: defaultValue('-'),
label: '占位符'
})
]
},
getSchemaTpl('placeholder', {
label: '占位符',
pipeIn: defaultValue('-'),
})
]
getSchemaTpl('status')
])
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
body: getSchemaTpl('collapseGroup', [
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {
label: '外层'
})
]
}
])
}
])
];
};
getDisplayField(data: any) {
if (
data.source ||
(data.map &&
Array.isArray(data.map) &&
data.map[0] &&
Object.keys(data.map[0]).length > 1)
) {
return data.labelField ?? 'label';
}
return 'item';
}
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: `\${${this.getDisplayField(value)}}`
},
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);

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

@ -34,120 +34,59 @@ export class PlainPlugin extends BasePlugin {
};
panelTitle = '纯文本';
// 事件定义
events: RendererPluginEvent[] = [
{
eventName: 'click',
eventLabel: '点击',
description: '点击时触发',
dataSchema: [
{
type: 'object',
properties: {
nativeEvent: {
type: 'object',
title: '鼠标事件对象'
}
}
}
]
},
{
eventName: 'mouseenter',
eventLabel: '鼠标移入',
description: '鼠标移入时触发',
dataSchema: [
{
type: 'object',
properties: {
nativeEvent: {
type: 'object',
title: '鼠标事件对象'
}
}
}
]
},
{
eventName: 'mouseleave',
eventLabel: '鼠标移出',
description: '鼠标移出时触发',
dataSchema: [
{
type: 'object',
properties: {
nativeEvent: {
type: 'object',
title: '鼠标事件对象'
}
}
}
]
}
];
// 动作定义
actions: RendererPluginAction[] = [];
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isTableCell = context.info.renderer.name === 'table-cell';
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
{
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')]
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
]);
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')]
}
])
}
])
];
};
}

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

@ -1,8 +1,8 @@
import {resolveVariable} from 'amis';
import {Button, resolveVariable} from 'amis';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {findTree, setVariable, someTree} from 'amis-core';
import {registerEditorPlugin, repeatArray} from 'amis-editor-core';
import {registerEditorPlugin, repeatArray, diff} from 'amis-editor-core';
import {
BasePlugin,
BaseEventContext,
@ -14,7 +14,7 @@ import {
InsertEventContext,
ScaffoldForm
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {mockValue} from 'amis-editor-core';
import {EditorNodeType} from 'amis-editor-core';
import {SchemaObject} from 'amis/lib/Schema';
@ -337,191 +337,249 @@ export class TablePlugin extends BasePlugin {
description: '开启表格拖拽排序功能'
}
];
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isCRUDBody = context.schema.type === 'crud';
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
getSchemaTpl('title'),
isCRUDBody
? null
: {
name: 'source',
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
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: tipedLabel(
'自动合并单元格',
'设置从左到右多少列内启用自动合并单元格，根据字段值是否相同来决定是否合并。'
),
type: 'input-number',
labelAlign: 'left',
horizontal: {
left: 5,
right: 7
},
placeholder: '设置列数'
},
{
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
label: '头部',
name: 'showHeader',
form: {
body: [
{
children: (
<Button
level="primary"
size="sm"
block
onClick={this.editHeaderDetail.bind(this, context.id)}
>
配置头部
</Button>
)
}
]
}
},
{
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
label: '底部',
name: 'showFooter',
form: {
body: [
{
children: (
<Button
level="primary"
size="sm"
block
onClick={this.editFooterDetail.bind(this, context.id)}
>
配置底部
</Button>
)
}
]
}
}
// {
// 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'),
size: 'sm',
labelAlign: 'left',
horizontal: {
left: 5,
right: 7
},
options: [
{
label: '自动',
value: 'auto'
},
{
label: '开启',
value: true
},
{
label: '关闭',
value: false
}
],
description: '自动即列数量大于5个时自动开启'
},
getSchemaTpl('switch', {
name: 'affixHeader',
label: '是否固顶表头',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'footable',
label: tipedLabel(
'是否开启单条底部展示',
'如果列太多显示会很臃肿，可以考虑把部分列放在当前行的底部展示'
),
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' : '' %>`
}
]
},
getSchemaTpl('tablePlaceholder'),
{
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
@ -668,6 +726,50 @@ export class TablePlugin extends BasePlugin {
}
};
}
editHeaderDetail(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.header,
slot: {
type: 'container',
body: '$$'
},
onChange: newValue => {
newValue = {...value, header: newValue};
manager.panelChangeValue(newValue, diff(value, newValue));
}
});
}
editFooterDetail(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.footer,
slot: {
type: 'container',
body: '$$'
},
onChange: newValue => {
newValue = {...value, footer: newValue};
manager.panelChangeValue(newValue, diff(value, newValue));
}
});
}
}
registerEditorPlugin(TablePlugin);

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);

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

@ -14,7 +14,7 @@ export class TimePlugin extends DatePlugin {
scaffold = {
type: 'time',
value: Math.round(Date.now() / 1000),
format: 'HH:mm:ss',
format: 'HH:mm:ss'
};
previewSchema = {
@ -22,50 +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: [
getSchemaTpl('layout:originPosition', {value: 'left-top'}),
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')}>

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

@ -0,0 +1,393 @@
/**
* @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
};
}
componentDidUpdate(prevProps: Readonly<MapSourceControlProps>, prevState: Readonly<MapSourceControlState>, snapshot?: any): void {
const isArrayOld = Array.isArray(prevProps.data?.map);
const isArrayNew = Array.isArray(this.props.data?.map);
// map 类型改变了
if (isArrayOld !== isArrayNew) {
this.setState({
map: this.props.data?.map
});
}
}
/**
* 更新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时，用来匹配值的字段, 默认为value'
),
type: 'input-text',
name: 'valueField',
placeholder: '匹配字段，默认为value',
onChange: this.handleValueFieldChange,
},
{
label: tipedLabel(
'显示字段',
'映射表是数组对象时，用作显示的字段，显示多字段请使用自定义显示模板，默认为label'
),
type: 'input-text',
name: 'labelField',
placeholder: '显示字段，默认为label',
onChange: this.handleLabelFieldChange,
visibleOn: '${!itemSchema}'
}]
}
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 {}

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

@ -2786,6 +2786,14 @@ 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) {
@ -2949,6 +2957,13 @@ export const getEventControlConfig = (
}
}
if (action.actionType === 'addItem' && action.__rendererName === 'combo') {
action.args = {
...action.args,
item: comboArrayToObject(config.args?.item!)
};
}
// 转换下格式
if (['visibility', 'usability'].includes(config.actionType)) {
action.args =

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

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

10
packages/amis-editor/src/tpl/options.tsx
View File

@ -310,6 +310,16 @@ setSchemaTpl('optionControlV2', {
closeDefaultCheck: true // 关闭默认值设置
});
/**
* mapping组件映射源
*/
setSchemaTpl('mapSourceControl', {
type: 'ae-mapSourceControl',
label: '映射表',
mode: 'normal',
name: 'source'
});
/**
* 时间轴组件选项控件
*/