test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: 同步主干最新代码

Browse Source 
Change-Id: I1be20cd91bf2bad336df84de8c60ec435027401a
This commit is contained in:
wibetter 2022-10-31 17:04:02 +08:00
commit 436cb76f3a
142 changed files with 17746 additions and 4593 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
packages/amis-editor/README.md
View File

@ -1,74 +0,0 @@
# amis Editor
amis 可视化编辑工具
## 如何使用
```jsx
import {Editor} from 'amis-editor';
render() {
return (
<Editor
{...props}
/>
)
}
```
属性说明：
- `value: any` 值，amis 的 json 配置。
- `onChange: (value: any) => void`。 当编辑器修改的时候会触发。
- `preview?: boolean` 是否为预览状态。
- `autoFocus?: boolean` 是否自动聚焦第一个可编辑的组件。
## 开发相关
```
# 设置 @fex npm 包走 内部 registry
npm config set @fex:registry http://registry.efe.tech
# 安装项目 npm 依赖。
npm i
# 启动项目，请通过 http://127.0.0.1:8888/examples/pages/simple 访问。
npm start
```
## 测试
目前还没有集成测试用例，请在 exmples 目录添加相应的示例。
## 编辑 npm 版本
```
npm run build
```
## 使用本地 amis
在 amis 目录运行
```
./node_modules/.bin/fis3 release publish -cwd ../editor/node_modules/amis/lib/
```
## 内网版本发版
1. 注册帐号并登陆，内网仓库是没帐号密码的
npm adduser --registry=http://registry.npm.baidu-int.com
npm login --registry=http://registry.npm.baidu-int.com
2. 查看最新版本号
npm view @fex/amis-editor versions --registry=http://registry.npm.baidu-int.com
3. 修改 package.json 里的版本号
4. 运行 `npm run publish-to-internal`
如果要发外网版本，需要使用 `npm login --registry=npm login --registry=http://registry.npmjs.com`，帐号是 fis-dev，密码问群里.
然后使用 `npm publish --registry=http://registry.npmjs.com` 发版

37
packages/amis-editor/i18nConfig.js Normal file
View File

@ -0,0 +1,37 @@
module.exports = {
entry: {
dir: './src'
},
file: {
test: /.*(ts|tsx|js|jsx)$/
},
ignore: {
list: ['src/icons', 'src/locale']
},
importInfo: {
source: 'i18n-runtime',
imported: 'i18n',
local: '_i18n'
},
i18nModule: 'i18n-runtime',
languages: [
{
name: 'en-US',
path: './src/locale'
},
{
name: 'zh-CN',
path: './src/locale'
}
],
output: {
fileName: 'editor-i18n',
fileExtension: 'xlsx',
path: './'
},
translate: {
appId: '20220902001329332',
key: 'pVS96QbIzVROBSOarU4R',
host: 'http://api.fanyi.baidu.com'
}
};

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

@ -1,6 +1,6 @@
{
"name": "amis-editor",
"version": "5.2.0-beta.19",
"version": "5.2.1",
"description": "amis 可视化编辑器",
"main": "lib/index.js",
"module": "esm/index.js",
@ -8,8 +8,10 @@
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npm run clean-dist && NODE_ENV=production rollup -c ",
"build-webpack": "npm run clean-dist && webpack",
"clean-dist": "rimraf lib/* esm/*"
"clean-dist": "rimraf lib/* esm/*",
"i18n:update": "npx i18n update --config=./i18nConfig.js",
"i18n:translate": "npx i18n translate --config=./i18nConfig.js --l=en-US",
"i18n:merge": "npx i18n merge --config=./i18nConfig.js --l=en-US"
},
"keywords": [
"amis",
@ -18,16 +20,21 @@
"author": "@fex",
"license": "ISC",
"files": [
"lib"
"lib",
"esm"
],
"lint-staged": {
"{src,scss,examples}/**/**/*.{js,jsx,ts,tsx,scss,json}": [
"prettier --write"
],
"{src,scss,examples}/**/**/*.scss": [
"stylelint"
]
},
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.6.0",
"amis-editor-core": "*",
"i18n-runtime": "*",
"lodash": "^4.17.15"
},
"devDependencies": {
@ -54,10 +61,10 @@
"@types/sortablejs": "^1.10.7",
"@types/tinycolor2": "^1.4.3",
"ajv": "^8.8.2",
"amis": "^2.0.2",
"amis-core": "^2.0.2",
"amis-formula": "^2.0.2",
"amis-ui": "^2.0.2",
"amis": "2.3.2-beta.1",
"amis-core": "2.3.2-beta.1",
"amis-formula": "2.3.2-beta.1",
"amis-ui": "2.3.2-beta.1",
"axios": "0.21.1",
"concurrently": "^6.2.0",
"css-loader": "^6.2.0",
@ -88,6 +95,7 @@
"sass": "^1.49.7",
"sass-loader": "^12.5.0",
"style-loader": "^3.2.1",
"stylelint": "^14.11.0",
"ts-jest": "^28.0.3",
"ts-json-schema-generator": "0.96.0",
"ts-loader": "^9.2.5",
@ -103,6 +111,7 @@
"amis": "*",
"amis-core": "*",
"amis-formula": "*",
"amis-ui": "*"
"amis-ui": "*",
"i18n-runtime": "*"
}
}

20
packages/amis-editor/rollup.config.js
View File

@ -16,6 +16,9 @@ import {
import path from 'path';
import svgr from '@svgr/rollup';
import fs from 'fs';
import i18nPlugin from 'plugin-react-i18n';
const i18nConfig = require('./i18nConfig');
const settings = {
globals: {}
@ -48,6 +51,22 @@ export default [
],
external,
plugins: getPlugins('cjs')
},
{
input,
output: [
{
...settings,
dir: path.dirname(module),
format: 'esm',
exports: 'named',
preserveModulesRoot: './src',
preserveModules: true // Keep directory structure and files
}
],
external,
plugins: getPlugins('esm')
}
];
@ -98,6 +117,7 @@ function getPlugins(format = 'esm') {
};
return [
i18nPlugin(i18nConfig),
typescript(typeScriptOptions),
svgr({
svgProps: {

49
packages/amis-editor/src/component/BaseControl.ts
View File

@ -3,8 +3,8 @@
*/
import flatten from 'lodash/flatten';
import {getEventControlConfig} from '../renderer/event-control/helper';
import {getSchemaTpl, isObject} from 'amis-editor-core';
import {getEventControlConfig, SUPPORT_STATIC_FORMITEM_CMPTS} from '../renderer/event-control/helper';
import {getSchemaTpl, isObject, tipedLabel} from 'amis-editor-core';
import type {BaseEventContext} from 'amis-editor-core';
import {SchemaObject} from 'amis/lib/Schema';
@ -143,7 +143,7 @@ const normalizeBodySchema = (
* @param {Object=} panels
* @param {string=} key
* `property` 属性
* `common` 常用
* `common` 基本
* `status` 状态
* `validation` 校验
* `style` 样式
@ -196,6 +196,8 @@ export const formItemControl: (
>,
context?: BaseEventContext
) => Array<any> = (panels, context) => {
const type = context?.schema?.type || '';
const supportStatic = SUPPORT_STATIC_FORMITEM_CMPTS.includes(type);
const collapseProps = {
type: 'collapse',
headingClassName: 'ae-formItemControl-header',
@ -215,7 +217,7 @@ export const formItemControl: (
: [
{
...collapseProps,
header: '常用',
header: '基本',
key: 'common',
body: normalizeBodySchema(
[
@ -250,6 +252,7 @@ export const formItemControl: (
body: normalizeBodySchema(
[
getSchemaTpl('hidden'),
supportStatic ? getSchemaTpl('static') : null,
// TODO: 下面的部分表单项才有，是不是判断一下是否是表单项
getSchemaTpl('disabled'),
getSchemaTpl('clearValueOnHidden')
@ -283,7 +286,6 @@ export const formItemControl: (
// }
// ])
];
return [
{
type: 'tabs',
@ -337,7 +339,13 @@ export const formItemControl: (
label: '描述 CSS 类名',
name: 'descriptionClassName',
visibleOn: 'this.description'
})
}),
...!supportStatic ? [] : [
getSchemaTpl('className', {
label: '静态 CSS 类名',
name: 'staticClassName'
})
]
],
panels?.style?.body,
panels?.style?.replace,
@ -370,25 +378,6 @@ export const formItemControl: (
];
};
export function tipedLabel(
body: string | Array<SchemaObject>,
tip: string,
style?: React.CSSProperties
) {
return {
type: 'tooltip-wrapper',
tooltip: tip,
tooltipTheme: 'dark',
placement: 'top',
tooltipStyle: {
fontSize: '12px',
...(style || {})
},
className: 'ae-formItemControl-label-tip',
body
};
}
/**
* 信息提示组件模版
*/
@ -400,7 +389,7 @@ export function remarkTpl(config: {
return {
type: 'ae-switch-more',
formType: 'dialog',
className:'ae-switch-more-flex',
className: 'ae-switch-more-flex',
label: config.labelRemark
? tipedLabel(config.label, config.labelRemark)
: config.label,
@ -482,12 +471,10 @@ export function remarkTpl(config: {
}
]
},
{
getSchemaTpl('icon', {
name: 'icon',
label: '图标',
type: 'icon-picker',
className: 'fix-icon-picker-overflow'
},
label: '图标'
}),
{
name: 'className',
label: 'CSS 类名',

5
packages/amis-editor/src/component/InputComponentName.tsx
View File

@ -7,7 +7,7 @@ interface InputComponentNameProps extends RendererProps {
}
export function InputComponentName(props: InputComponentNameProps) {
const {value, onChange, render, name, node} = props;
const {value, onChange, render, name, node, placeholder} = props;
const [options, setOptions] = useState<Array<any>>([]);
useEffect(() => {
@ -37,7 +37,8 @@ export function InputComponentName(props: InputComponentNameProps) {
'inner',
{
type: 'input-text',
name
name,
placeholder
},
{
value,

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

@ -1,3 +1,5 @@
import 'amis';
import './locale/index';
export * from 'amis-editor-core';
import './tpl/index';
@ -71,9 +73,9 @@ import './plugin/Audio';
import './plugin/Avatar';
import './plugin/Button';
import './plugin/ButtonGroup';
import './plugin/ButtonToolbar';
import './plugin/Breadcrumb';
import './plugin/Card';
import './plugin/Card2';
import './plugin/Cards';
import './plugin/Carousel';
import './plugin/Chart';
@ -119,9 +121,12 @@ import './plugin/Steps';
import './plugin/Sparkline';
import './plugin/Submit';
import './plugin/Table';
import './plugin/Table2';
import './plugin/TableCell2';
import './plugin/Tabs';
import './plugin/Tasks';
import './plugin/Time';
import './plugin/Timeline';
import './plugin/Tpl';
import './plugin/AnchorNav';
import './plugin/Video';
@ -131,6 +136,8 @@ import './plugin/TooltipWrapper';
import './plugin/TableView';
import './plugin/CodeView';
import './plugin/WebComponent';
import './plugin/CRUD2';
import './plugin/ColumnToggler';
// 常见布局
import './plugin/Layout/Layout1_1';
@ -154,6 +161,7 @@ import './plugin/Layout/Layout_scroll_y';
import {GridPlugin} from './plugin/Grid';
import './renderer/OptionControl';
import './renderer/TimelineItemControl';
import './renderer/APIControl';
import './renderer/ValidationControl';
import './renderer/ValidationItem';
@ -173,8 +181,10 @@ import './renderer/RangePartsControl';
import './renderer/DataBindingControl';
import './renderer/DataMappingControl';
import './renderer/DataPickerControl';
import './renderer/FeatureControl';
import './renderer/event-control/index';
import './renderer/TreeOptionControl';
import './renderer/TransferTableControl';
export * from './component/BaseControl';
export * from './icons/index';

3335
packages/amis-editor/src/locale/en-US.ts Normal file
View File

File diff suppressed because it is too large Load Diff

2
packages/amis-editor/src/locale/index.ts Normal file
View File

@ -0,0 +1,2 @@
import './en-US';
import './zh-CN';

2949
packages/amis-editor/src/locale/zh-CN.ts Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -78,7 +78,7 @@ export class AlertPlugin extends BasePlugin {
name: 'showCloseButton'
}),
{
type: 'ae-Switch-More',
type: 'ae-switch-more',
mode: 'normal',
name: 'showIcon',
label: '图标',

6
packages/amis-editor/src/plugin/AnchorNav.tsx
View File

@ -84,6 +84,9 @@ export class AnchorNavPlugin extends BasePlugin {
draggable: true,
minLength: 1,
addButtonText: '添加锚点',
deleteBtn: {
icon: 'fa fa-trash'
},
items: [
{
type: 'input-text',
@ -150,7 +153,8 @@ export class AnchorNavPlugin extends BasePlugin {
value: '1'
}
]
}
},
getSchemaTpl('status')
])
},
{

4
packages/amis-editor/src/plugin/Audio.tsx
View File

@ -39,12 +39,12 @@ export class AudioPlugin extends BasePlugin {
tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
}
: null,
{
getSchemaTpl('audioUrl',{
name: 'src',
type: 'input-text',
label: '音频地址',
description: '支持获取变量如：<code>\\${audioSrc}</code>'
},
}),
{
type: 'select',
name: 'rates',

12
packages/amis-editor/src/plugin/Avatar.tsx
View File

@ -4,7 +4,7 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {getSchemaTpl, defaultValue} from 'amis-editor-core';
import {tipedLabel} from '../component/BaseControl';
import {tipedLabel} from 'amis-editor-core';
const DefaultSize = 40;
const DefaultBorderRadius = 20;
@ -54,7 +54,7 @@ export class AvatarPlugin extends BasePlugin {
getSchemaTpl('collapseGroup', [
{
className: 'p-none',
title: '常用',
title: '基本',
body: [
// 如果同时存在 src、text 和 icon，会优先用 src、接着 text、最后 icon
{
@ -96,13 +96,11 @@ export class AvatarPlugin extends BasePlugin {
className: 'ae-ExtendMore mb-3',
body: [
// 图标
{
label: '图标',
getSchemaTpl('icon', {
name: 'icon',
type: 'icon-picker',
className: 'fix-icon-picker-overflow',
label: '图标',
visibleOn: 'data.showtype === "icon"'
},
}),
// 图片
getSchemaTpl('valueFormula', {
rendererSchema: {

8
packages/amis-editor/src/plugin/Breadcrumb.tsx
View File

@ -73,12 +73,10 @@ export class BreadcrumbPlugin extends BasePlugin {
name: 'href',
placeholder: '链接'
},
{
getSchemaTpl('icon', {
name: 'icon',
label: '图标',
type: 'icon-picker',
className: 'fix-icon-picker-overflow'
}
label: '图标'
})
]
}
]

11
packages/amis-editor/src/plugin/Button.tsx
View File

@ -4,10 +4,11 @@ import {
BasePlugin,
BasicRendererInfo,
PluginInterface,
RendererInfoResolveEventContext
RendererInfoResolveEventContext,
tipedLabel
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {BUTTON_DEFAULT_ACTION, tipedLabel} from '../component/BaseControl';
import {BUTTON_DEFAULT_ACTION} from '../component/BaseControl';
import {getEventControlConfig} from '../renderer/event-control/helper';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {SchemaObject} from 'amis/lib/Schema';
@ -95,6 +96,7 @@ export class ButtonPlugin extends BasePlugin {
type: 'button-group-select',
name: 'type',
size: 'sm',
visibleOn: 'type === "submit" || type === "reset" ',
options: [
{
label: '按钮',
@ -284,9 +286,8 @@ export class ButtonPlugin extends BasePlugin {
title: '事件',
className: 'p-none',
body:
this.manager?.config.actionOptions?.showOldEntry !== false &&
(!!context.schema.actionType ||
['submit', 'reset'].includes(context.schema.type))
!!context.schema.actionType ||
['submit', 'reset'].includes(context.schema.type)
? [
getSchemaTpl('eventControl', {
name: 'onEvent',

19
packages/amis-editor/src/plugin/ButtonGroup.tsx
View File

@ -1,12 +1,13 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
import {
BUTTON_DEFAULT_ACTION,
formItemControl,
tipedLabel
} from '../component/BaseControl';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {RegionWrapper as Region} from 'amis-editor-core';
BasePlugin,
RegionConfig,
BaseEventContext,
tipedLabel,
defaultValue,
getSchemaTpl,
registerEditorPlugin
} from 'amis-editor-core';
import {BUTTON_DEFAULT_ACTION} from '../component/BaseControl';
export class ButtonGroupPlugin extends BasePlugin {
// 关联渲染器名字
@ -93,7 +94,7 @@ export class ButtonGroupPlugin extends BasePlugin {
type: 'tpl',
inline: false,
className: 'p-t-xs',
tpl: '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
tpl: `<span class="label label-default"><% if (data.type === "button-group") { %> ${'按钮组'} <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>`
}
],
addButtonText: '新增按钮',

82
packages/amis-editor/src/plugin/ButtonToolbar.tsx
View File

@ -1,82 +0,0 @@
import {BasePlugin} from 'amis-editor-core';
import {getSchemaTpl} from 'amis-editor-core';
export class ButtonToolbarPlugin extends BasePlugin {
// 关联渲染器名字
rendererName = 'button-toolbar';
$schema = '/schemas/ButtonToolbarSchema.json';
// 组件名称
name = '按钮工具栏';
isBaseComponent = true;
description = '可以用来放置多个按钮或者按钮组，按钮之间会存在一定的间隔';
tags = ['按钮'];
icon = 'fa fa-ellipsis-h';
pluginIcon = 'btn-toolbar-plugin';
/**
* 组件选择面板中隐藏，和ButtonGroup合并
*/
disabledRendererPlugin = true;
scaffold = {
type: 'button-toolbar',
buttons: [
{
type: 'button',
label: '按钮1'
},
{
type: 'button',
label: '按钮2'
}
]
};
previewSchema = {
...this.scaffold
};
panelTitle = '按钮工具栏';
panelBody = [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
{
name: 'buttons',
type: 'combo',
label: '按钮管理',
multiple: true,
addable: true,
draggable: true,
draggableTip: '可排序、可移除、如要编辑请在预览区选中编辑',
editable: false,
visibleOn: 'this.buttons && this.buttons.length',
items: [
{
type: 'tpl',
inline: false,
className: 'p-t-xs',
tpl:
'<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
}
],
addButtonText: '新增按钮',
scaffold: {
type: 'button',
label: '按钮'
}
}
]
},
{
title: '外观',
body: [getSchemaTpl('className')]
},
{
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
}
])
];
}
// 和plugin/Form/ButtonToolbar.tsx的重复了
// registerEditorPlugin(ButtonToolbarPlugin);

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

@ -85,34 +85,6 @@ export class CRUDPlugin extends BasePlugin {
}
];
sampleBuilder = (schema: any) => {
const data: any = {
items: [],
total: 0
};
if (Array.isArray(schema?.columns)) {
const item = {};
schema.columns.forEach((control: any) => {
if (control?.name) {
setVariable(item, control.name, 'sample');
}
});
data.items.push(item);
}
return JSON.stringify(
{
status: 0,
msg: '',
data: data
},
null,
2
);
};
btnSchemas = {
create: {
label: '新增',
@ -216,7 +188,7 @@ export class CRUDPlugin extends BasePlugin {
scaffoldForm: ScaffoldForm = {
title: '增删改查快速开始-CRUD',
body: [
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
label: '接口地址',
sampleBuilder: (schema: any) =>
JSON.stringify(
@ -270,7 +242,7 @@ export class CRUDPlugin extends BasePlugin {
});
} else {
toast.warning(
`API返回格式不正确，请点击接口地址右侧示例的问号查看示例`
'API返回格式不正确，请点击接口地址右侧示例的问号查看示例'
);
}
}
@ -392,7 +364,10 @@ export class CRUDPlugin extends BasePlugin {
valueSchema.bulkActions = [];
/** 统一api格式 */
valueSchema.api = normalizeApi(valueSchema.api);
valueSchema.api =
typeof valueSchema.api === 'string'
? normalizeApi(valueSchema.api)
: valueSchema.api;
hasFeatures &&
features.forEach((item: string) => {
if (itemBtns.includes(item)) {
@ -418,7 +393,7 @@ export class CRUDPlugin extends BasePlugin {
);
} else if (item === 'delete') {
schema = cloneDeep(this.btnSchemas.delete);
schema.api = valueSchema.api?.method.match(/^(post|delete)$/i)
schema.api = valueSchema.api?.method?.match(/^(post|delete)$/i)
? valueSchema.api
: {...valueSchema.api, method: 'post'};
}
@ -446,7 +421,7 @@ export class CRUDPlugin extends BasePlugin {
const createSchemaBase = this.btnSchemas.create;
createSchemaBase.dialog.body = {
type: 'form',
api: valueSchema.api?.method.match(/^(post|put)$/i)
api: valueSchema.api?.method?.match(/^(post|put)$/i)
? valueSchema.api
: {...valueSchema.api, method: 'post'},
body: valueSchema.columns.map((column: ColumnItem) => {
@ -552,6 +527,7 @@ export class CRUDPlugin extends BasePlugin {
getSchemaTpl('switch', {
name: 'filter',
label: '启用查询条件',
visibleOn: 'data.api && data.api.url',
pipeIn: (value: any) => !!value,
pipeOut: (value: any, originValue: any) => {
if (value) {
@ -577,10 +553,11 @@ export class CRUDPlugin extends BasePlugin {
}),
{
type: 'divider'
type: 'divider',
visibleOn: 'data.api && data.api.url'
},
{
getSchemaTpl('combo-container', {
label: '批量操作',
name: 'bulkActions',
type: 'combo',
@ -622,7 +599,7 @@ export class CRUDPlugin extends BasePlugin {
)
}
]
},
}),
// getSchemaTpl('switch', {
// name: 'defaultChecked',
@ -635,7 +612,7 @@ export class CRUDPlugin extends BasePlugin {
type: 'divider'
},
{
getSchemaTpl('combo-container', {
label: '单条操作',
name: 'itemActions',
type: 'combo',
@ -683,7 +660,7 @@ export class CRUDPlugin extends BasePlugin {
)
}
]
},
}),
{
type: 'divider',
@ -704,7 +681,7 @@ export class CRUDPlugin extends BasePlugin {
}
}),
{
getSchemaTpl('combo-container', {
label: '默认参数',
type: 'input-kv',
name: 'defaultParams',
@ -715,7 +692,7 @@ export class CRUDPlugin extends BasePlugin {
content: '可以用来设置默认参数，比如 <code>perPage:20</code>',
placement: 'left'
}
},
}),
{
type: 'divider'
@ -764,7 +741,7 @@ export class CRUDPlugin extends BasePlugin {
{
title: '接口',
body: [
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
label: '数据拉取接口',
sampleBuilder: () => {
const data: any = {
@ -890,7 +867,7 @@ export class CRUDPlugin extends BasePlugin {
label: '是否可拖拽排序'
}),
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
label: '顺序保存接口',
name: 'saveOrderApi',
visibleOn: 'data.draggable'
@ -900,7 +877,7 @@ export class CRUDPlugin extends BasePlugin {
type: 'divider'
},
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
label: '快速保存接口',
name: 'quickSaveApi',
description:
@ -911,7 +888,7 @@ export class CRUDPlugin extends BasePlugin {
type: 'divider'
},
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
label: '快速保存单条接口',
name: 'quickSaveItemApi',
description:
@ -1115,7 +1092,7 @@ export class CRUDPlugin extends BasePlugin {
]
},
{
getSchemaTpl('combo-container', {
name: 'headerToolbar',
type: 'combo',
draggable: true,
@ -1289,9 +1266,9 @@ export class CRUDPlugin extends BasePlugin {
// className: 'm-l-none'
// }
]
},
}),
{
getSchemaTpl('combo-container', {
name: 'footerToolbar',
type: 'combo',
draggable: true,
@ -1467,7 +1444,7 @@ export class CRUDPlugin extends BasePlugin {
className: 'm-l-none'
}
]
},
}),
getSchemaTpl('switch', {
name: 'filterTogglable',

1776
packages/amis-editor/src/plugin/CRUD2.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

5
packages/amis-editor/src/plugin/Card.tsx
View File

@ -4,10 +4,13 @@ import {registerEditorPlugin} from 'amis-editor-core';
import {
BaseEventContext,
BasePlugin,
BasicRendererInfo,
InsertEventContext,
PluginEvent,
PluginInterface,
RegionConfig,
RendererInfo,
RendererInfoResolveEventContext,
VRendererConfig
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
@ -204,6 +207,8 @@ export class CardPlugin extends BasePlugin {
}*/
fieldWrapperResolve = (dom: HTMLElement) => dom;
overrides = {
renderFeild: function (
this: any,

105
packages/amis-editor/src/plugin/Card2.tsx Normal file
View File

@ -0,0 +1,105 @@
import {
BaseEventContext,
BasePlugin,
RegionConfig,
defaultValue,
getSchemaTpl,
tipedLabel,
registerEditorPlugin
} from 'amis-editor-core';
export class Card2Plugin extends BasePlugin {
// 关联渲染器名字
rendererName = 'card2';
$schema = '/schemas/Card2Schema.json';
// 组件名称
name = '卡片';
isBaseComponent = true;
disabledRendererPlugin = true;
description = '展示单个卡片。';
tags = ['展示'];
icon = '';
scaffold = {
type: 'card2',
body: '内容'
};
previewSchema = {
...this.scaffold
};
regions: Array<RegionConfig> = [
{
key: 'body',
label: '内容区',
renderMethod: 'renderBody',
preferTag: '展示'
}
];
panelTitle = '卡片';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return [
getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
type: 'button-group-select',
label: tipedLabel(
'选择区域',
'点击触发选中或取消选中的区域'
),
name: 'checkOnItemClick',
options: [
{label: '整个', value: true},
{label: '选框', value: false}
],
pipeIn: defaultValue(false)
},
getSchemaTpl('switch', {
label: tipedLabel(
'隐藏选框',
'不再显示选择框，可以通过自定义选中态外观实现选中样式'
),
name: 'hideCheckToggler',
visibleOn: 'this.checkOnItemClick'
})
]
},
getSchemaTpl('status', {isFormItem: false})
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:classNames', {
isFormItem: false,
schema: [
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容区',
visibleOn: 'this.icon'
}),
// TODO
getSchemaTpl('className', {
name: 'selectedClassName',
label: '选中态',
visibleOn: 'this.icon'
})
]
})
])
}
])
];
};
}
registerEditorPlugin(Card2Plugin);

15
packages/amis-editor/src/plugin/Chart.tsx
View File

@ -1,21 +1,20 @@
import {Button} from 'amis';
import React from 'react';
import {registerEditorPlugin} from 'amis-editor-core';
import {
registerEditorPlugin,
BaseEventContext,
BasePlugin,
RegionConfig,
RendererInfo
RendererPluginAction,
diff,
defaultValue,
getSchemaTpl,
CodeEditor as AmisCodeEditor
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, } from 'amis-editor-core';
import {diff} from 'amis-editor-core';
import AMisCodeEditor from 'amis-editor-core';
import {RendererPluginAction} from 'amis-editor-core';
const ChartConfigEditor = ({value, onChange}: any) => {
return (
<div className="ae-JsonEditor">
<AMisCodeEditor value={value} onChange={onChange} />
<AmisCodeEditor value={value} onChange={onChange} />
</div>
);
};

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

@ -1,7 +1,7 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {tipedLabel} from '../component/BaseControl';
import {tipedLabel} from 'amis-editor-core';
export class CollapsePlugin extends BasePlugin {
// 关联渲染器名字

10
packages/amis-editor/src/plugin/CollapseGroup.tsx
View File

@ -2,7 +2,7 @@ import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {tipedLabel} from '../component/BaseControl';
import {tipedLabel} from 'amis-editor-core';
import {isObject} from 'amis-editor-core';
export class CollapseGroupPlugin extends BasePlugin {
@ -96,18 +96,16 @@ export class CollapseGroupPlugin extends BasePlugin {
autoFocus: false,
form: {
body: [
{
label: '图标',
getSchemaTpl('icon', {
name: 'expandIcon',
type: 'icon-picker',
className: 'fix-icon-picker-overflow',
label: '图标',
pipeIn: (value: any) => value?.icon,
pipeOut: (value: any) => ({
type: 'icon',
vendor: '',
icon: value
})
}
})
]
},
pipeIn: (value: string) => {

129
packages/amis-editor/src/plugin/ColumnToggler.tsx Normal file
View File

@ -0,0 +1,129 @@
import {
BaseEventContext,
BasePlugin,
BasicRendererInfo,
PluginInterface,
RendererInfoResolveEventContext,
getSchemaTpl,
registerEditorPlugin
} from 'amis-editor-core';
export class ColumnToggler extends BasePlugin {
// 关联渲染器名字
rendererName = 'column-toggler';
$schema = '/schemas/ColumnToggler.json';
// 组件名称
name = '自定义显示列';
isBaseComponent = true;
disabledRendererPlugin = true;
description = '用来展示表格的自定义显示列按钮，你可以配置不同的展示样式。';
tags = ['自定义显示列'];
icon = 'fa fa-square';
panelTitle = '自定义显示列';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
label: '按钮文字',
type: 'input-text',
name: 'label'
},
{
label: '按钮提示',
type: 'input-text',
name: 'tooltip'
},
getSchemaTpl('switch', {
name: 'defaultIsOpened',
label: '是否默认展开'
}),
getSchemaTpl('icon', {
label: '按钮图标'
})
]
}
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('size', {
label: '按钮尺寸'
})
]
},
{
title: 'CSS 类名',
body: [
getSchemaTpl('className', {
name: 'className',
label: '显示列样式'
}),
getSchemaTpl('className', {
name: 'btnClassName',
label: '按钮样式'
})
]
}
])
}
]);
};
/**
* 如果禁用了没办法编辑
*/
filterProps(props: any) {
props.disabled = false;
return props;
}
/**
* 如果配置里面有 rendererName 自动返回渲染器信息。
* @param renderer
*/
getRendererInfo({
renderer,
schema
}: RendererInfoResolveEventContext): BasicRendererInfo | void {
const plugin: PluginInterface = this;
if (
schema.$$id &&
plugin.name &&
plugin.rendererName &&
plugin.rendererName === renderer.name
) {
// 复制部分信息出去
return {
name: schema.label ? schema.label : plugin.name,
regions: plugin.regions,
patchContainers: plugin.patchContainers,
// wrapper: plugin.wrapper,
vRendererConfig: plugin.vRendererConfig,
wrapperProps: plugin.wrapperProps,
wrapperResolve: plugin.wrapperResolve,
filterProps: plugin.filterProps,
$schema: plugin.$schema,
renderRenderer: plugin.renderRenderer
};
}
}
}
registerEditorPlugin(ColumnToggler);

8
packages/amis-editor/src/plugin/Container.tsx
View File

@ -13,11 +13,17 @@ export class ContainerPlugin extends BasePlugin {
isBaseComponent = true;
description = '一个简单的容器，可以将多个渲染器放置在一起。';
tags = ['容器'];
withDataSource = false;
icon = 'fa fa-square-o';
pluginIcon = 'container-plugin';
scaffold = {
type: 'container',
body: '内容'
body: [
{
type: 'tpl',
tpl: '内容'
}
]
};
previewSchema = {
...this.scaffold

204
packages/amis-editor/src/plugin/Dialog.tsx
View File

@ -1,13 +1,14 @@
import React from 'react';
import {registerEditorPlugin} from 'amis-editor-core';
import {
registerEditorPlugin,
BaseEventContext,
BasePlugin,
RegionConfig,
RendererInfo
RendererInfo,
getSchemaTpl,
noop,
defaultValue
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {noop} from 'amis-editor-core';
import {getEventControlConfig} from '../renderer/event-control/helper';
export class DialogPlugin extends BasePlugin {
@ -55,12 +56,34 @@ export class DialogPlugin extends BasePlugin {
{
eventName: 'confirm',
eventLabel: '确认',
description: '点击弹窗确认按钮时触发'
description: '点击弹窗确认按钮时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: '弹窗数据'
}
}
}
]
},
{
eventName: 'cancel',
eventLabel: '取消',
description: '点击弹窗取消按钮时触发'
description: '点击弹窗取消按钮时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: '弹窗数据'
}
}
}
]
}
];
@ -83,108 +106,97 @@ export class DialogPlugin extends BasePlugin {
];
panelTitle = '弹框';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
label: '标题',
type: 'input-text',
name: 'title'
},
getSchemaTpl('switch', {
label: '数据映射',
name: 'data',
className: 'block m-b-xs',
pipeIn: (value: any) => !!value,
pipeOut: (value: any) => (value ? {'&': '$$'} : null)
}),
{
type: 'tpl',
visibleOn: '!this.data',
tpl:
'<p class="text-sm text-muted">当没开启数据映射时，弹框中默认会拥有触发打开弹框按钮所在环境的所有数据。</p>'
},
{
type: 'input-kv',
syncDefaultValue: false,
name: 'data',
visibleOn: 'this.data',
descriptionClassName: 'help-block text-xs m-b-none',
description:
'<p>当开启数据映射时，弹框中的数据只会包含设置的部分，请绑定数据。如：<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制，请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时，表示删除对应的字段，可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>',
messages: {
validateFailed: '数据映射中存在错误，请仔细检查'
}
},
getSchemaTpl('switch', {
label: '按 Esc 关闭弹框',
name: 'closeOnEsc',
value: false
}),
getSchemaTpl('switch', {
label: '点击弹框外区域关闭弹框',
name: 'closeOnOutside',
value: false
})
]
title: '基本',
body: [
{
label: '标题',
type: 'input-text',
name: 'title'
},
getSchemaTpl('switch', {
label: '展示关闭按钮',
name: 'showCloseButton',
value: true
}),
getSchemaTpl('switch', {
label: '可按 Esc 关闭',
name: 'closeOnEsc',
value: false
}),
getSchemaTpl('switch', {
label: '左下角展示报错消息',
name: 'showErrorMsg',
value: true
}),
getSchemaTpl('switch', {
label: '左下角展示loading动画',
name: 'showLoading',
value: true
}),
getSchemaTpl('dataMap')
]
}
])
},
{
title: '外观',
body: [
body: getSchemaTpl('collapseGroup', [
{
label: '尺寸',
type: 'button-group-select',
name: 'size',
size: 'sm',
className: 'block',
pipeIn: defaultValue(''),
options: [
title: '基本',
body: [
{
label: '小',
value: 'sm'
},
{
label: '默认',
value: ''
},
{
label: '中',
value: 'md'
},
{
label: '大',
value: 'lg'
},
{
label: '超大',
value: 'xl'
label: '尺寸',
type: 'button-group-select',
name: 'size',
size: 'sm',
options: [
{
label: '标准',
value: ''
},
{
label: '小',
value: 'sm'
},
{
label: '中',
value: 'md'
},
{
label: '大',
value: 'lg'
},
{
label: '超大',
value: 'xl'
}
],
pipeIn: defaultValue(''),
pipeOut: (value: string) => (value ? value : undefined)
}
]
},
getSchemaTpl('switch', {
label: '是否显示关闭按钮',
name: 'showCloseButton',
value: true
}),
getSchemaTpl('className', {
name: 'headerClassName',
label: '顶部 CSS 类名'
}),
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容 CSS 类名'
})
]
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {
name: 'className',
label: '外层'
}),
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容区域'
})
]
}
])
},
{
title: '事件',

309
packages/amis-editor/src/plugin/Drawer.tsx
View File

@ -1,14 +1,16 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {
registerEditorPlugin,
BaseEventContext,
BasePlugin,
RegionConfig,
RendererInfo
RendererInfo,
defaultValue,
getSchemaTpl,
noop
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {noop} from 'amis-editor-core';
import {getEventControlConfig} from '../renderer/event-control/helper';
import {InlineModal} from './Dialog';
import {tipedLabel} from 'amis-editor-core';
export class DrawerPlugin extends BasePlugin {
// 关联渲染器名字
@ -55,12 +57,34 @@ export class DrawerPlugin extends BasePlugin {
{
eventName: 'confirm',
eventLabel: '确认',
description: '点击抽屉确认按钮时触发'
description: '点击抽屉确认按钮时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: '抽屉数据'
}
}
}
]
},
{
eventName: 'cancel',
eventLabel: '取消',
description: '点击抽屉取消按钮时触发'
description: '点击抽屉取消按钮时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data': {
type: 'object',
title: '抽屉数据'
}
}
}
]
}
];
@ -83,153 +107,164 @@ export class DrawerPlugin extends BasePlugin {
];
panelTitle = '弹框';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
label: '标题',
type: 'input-text',
name: 'title'
},
// {
// children: (
// <Button
// size="sm"
// className="m-b-sm"
// level="info"
// block
// onClick={() => this.manager.showInsertPanel('body')}
// >
// 新增内容
// </Button>
// )
// },
{
type: 'divider'
},
{
label: '位置',
type: 'button-group-select',
name: 'position',
value: 'right',
size: 'sm',
mode: 'inline',
className: 'block',
options: [
title: '基本',
body: [
{
label: '左',
value: 'left'
label: '标题',
type: 'input-text',
name: 'title'
},
{
label: '上',
value: 'top'
type: 'button-group-select',
name: 'position',
label: '位置',
mode: 'horizontal',
options: [
{
label: '左',
value: 'left'
},
{
label: '上',
value: 'top'
},
{
label: '右',
value: 'right'
},
{
label: '下',
value: 'bottom'
}
],
pipeIn: defaultValue('right'),
pipeOut: (value: any) => (value ? value : 'right'),
onChange: (
value: string,
oldValue: string,
model: any,
form: any
) => {
if (value === 'left' || value === 'right') {
form.deleteValueByName('height');
} else if (value === 'top' || value === 'bottom') {
form.deleteValueByName('width');
}
}
},
{
label: '右',
value: 'right'
},
{
label: '下',
value: 'bottom'
}
],
description: '定义弹框从什么位置呼出'
},
getSchemaTpl('switch', {
label: '数据映射',
name: 'data',
className: 'm-b-xs',
pipeIn: (value: any) => !!value,
pipeOut: (value: any) => (value ? {'&': '$$'} : null)
}),
{
type: 'tpl',
visibleOn: '!this.data',
tpl:
'<p class="text-sm text-muted">当没开启数据映射时，弹框中默认会拥有触发打开弹框按钮所在环境的所有数据。</p>'
},
{
type: 'input-kv',
syncDefaultValue: false,
name: 'data',
visibleOn: 'this.data',
descriptionClassName: 'help-block text-xs m-b-none',
description:
'<p>当开启数据映射时，弹框中的数据只会包含设置的部分，请绑定数据。如：<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制，请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时，表示删除对应的字段，可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>'
},
getSchemaTpl('switch', {
name: 'closeOnOutside',
label: '点击外部关闭弹框'
}),
getSchemaTpl('switch', {
label: '按 Esc 可关闭',
name: 'closeOnEsc'
})
]
getSchemaTpl('switch', {
name: 'overlay',
label: '显示蒙层',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'showCloseButton',
label: '展示关闭按钮',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'closeOnOutside',
label: '点击外部关闭'
}),
getSchemaTpl('switch', {
label: '可按 Esc 关闭',
name: 'closeOnEsc'
}),
getSchemaTpl('switch', {
name: 'resizable',
label: '可拖拽抽屉大小',
value: false
}),
getSchemaTpl('dataMap')
]
}
])
},
{
title: '外观',
body: [
body: getSchemaTpl('collapseGroup', [
{
label: '尺寸',
type: 'button-group-select',
name: 'size',
size: 'sm',
mode: 'inline',
className: 'block',
options: [
title: '基本',
body: [
{
label: '超小',
value: 'xs'
type: 'button-group-select',
name: 'size',
label: '尺寸',
size: 'sm',
mode: 'horizontal',
options: [
{
label: '标准',
value: ''
},
{
label: '小',
value: 'sm'
},
{
label: '中',
value: 'md'
},
{
label: '大',
value: 'lg'
},
{
label: '超大',
value: 'xl'
}
],
pipeIn: defaultValue(''),
pipeOut: (value: string) => (value ? value : undefined)
},
{
label: '小',
value: 'sm'
},
{
label: '中',
value: 'md'
},
{
label: '大',
value: 'lg'
},
{
label: '超大',
value: 'xl'
}
getSchemaTpl('style:widthHeight', {
widthSchema: {
label: tipedLabel(
'宽度',
'位置为 "左" 或 "右" 时生效。 默认宽度为"尺寸"字段配置的宽度，值单位默认为 px，也支持百分比等单位 ，如：100%'
),
disabledOn:
'this.position === "top" || this.position === "bottom"'
},
heightSchema: {
label: tipedLabel(
'高度',
'位置为 "上" 或 "下" 时生效。 默认宽度为"尺寸"字段配置的高度，值单位默认为 px，也支持百分比等单位 ，如：100%'
),
disabledOn:
'this.position === "left" || this.position === "right" || !this.position'
}
})
]
},
getSchemaTpl('switch', {
name: 'overlay',
label: '是否显示蒙层',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'resizable',
label: '可拉拽',
description: '定义弹框是否可拉拽调整大小',
pipeIn: defaultValue(false)
}),
getSchemaTpl('className'),
getSchemaTpl('className', {
label: 'bodyClassName 类名',
name: 'bodyClassName'
})
]
{
title: 'CSS类名',
body: [
getSchemaTpl('className', {
label: '外层'
}),
getSchemaTpl('className', {
label: '标题区域',
name: 'headClassName'
}),
getSchemaTpl('className', {
label: '内容区域',
name: 'bodyClassName'
}),
getSchemaTpl('className', {
label: '页脚区域',
name: 'footClassName'
})
]
}
])
},
{
title: '事件',

16
packages/amis-editor/src/plugin/DropDownButton.tsx
View File

@ -1,20 +1,18 @@
import {Button} from 'amis';
import React from 'react';
import {registerEditorPlugin} from 'amis-editor-core';
import {
BaseEventContext,
BasePlugin,
BasicToolbarItem,
ContextMenuEventContext,
ContextMenuItem
ContextMenuItem,
registerEditorPlugin,
tipedLabel,
defaultValue,
getSchemaTpl,
diff
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {diff} from 'amis-editor-core';
import {
BUTTON_DEFAULT_ACTION,
formItemControl,
tipedLabel
} from '../component/BaseControl';
import {BUTTON_DEFAULT_ACTION} from '../component/BaseControl';
export class DropDownButtonPlugin extends BasePlugin {
// 关联渲染器名字
rendererName = 'dropdown-button';

21
packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx
View File

@ -3,10 +3,10 @@ import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {
RendererPluginAction,
RendererPluginEvent
RendererPluginEvent,
tipedLabel
} from 'amis-editor-core';
import {getSchemaTpl, defaultValue} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {getEventControlConfig} from '../../renderer/event-control/helper';
export class ButtonGroupControlPlugin extends BasePlugin {
@ -25,7 +25,8 @@ export class ButtonGroupControlPlugin extends BasePlugin {
tags = ['按钮'];
scaffold = {
type: 'button-group-select',
name: 'a',
name: 'buttonGroupSelect',
label: '按钮点选',
inline: false,
options: [
{
@ -118,17 +119,15 @@ export class ButtonGroupControlPlugin extends BasePlugin {
rendererSchema: context?.schema,
useSelectMode: true, // 改用 Select 设置模式
visibleOn: 'this.options && this.options.length > 0'
}),
})
]
},
{
title: '按钮管理',
body: [
getSchemaTpl('optionControlV2'),
]
body: [getSchemaTpl('optionControlV2')]
},
getSchemaTpl('status', {
isFormItem: true,
isFormItem: true
})
])
]
@ -172,10 +171,10 @@ export class ButtonGroupControlPlugin extends BasePlugin {
getSchemaTpl('className', {
label: '按钮',
name: 'btnClassName'
}),
})
]
}),
]),
})
])
]
},
{

123
packages/amis-editor/src/plugin/Form/ButtonToolbar.tsx
View File

@ -22,6 +22,7 @@ export class ButtonToolbarControlPlugin extends BasePlugin {
tags = ['表单项', '按钮'];
scaffold = {
type: 'button-toolbar',
label: '按钮工具栏',
buttons: [
{
type: 'button',
@ -40,8 +41,7 @@ export class ButtonToolbarControlPlugin extends BasePlugin {
wrapWithPanel: false,
mode: 'horizontal',
body: {
...this.scaffold,
label: '按钮工具栏'
...this.scaffold
}
};
@ -59,58 +59,81 @@ export class ButtonToolbarControlPlugin extends BasePlugin {
panelTitle = '工具栏';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return formItemControl(
return getSchemaTpl('tabs', [
{
common: {
replace: true,
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('remark'),
getSchemaTpl('labelRemark'),
getSchemaTpl('description')
]
},
option: {
title: '按钮管理',
replace: true,
body: [
title: '属性',
body: [
getSchemaTpl('collapseGroup', [
{
name: 'buttons',
type: 'combo',
label: '',
multiple: true,
addable: true,
minLength: 1,
draggable: true,
draggableTip: '',
editable: false,
visibleOn: 'this.buttons && this.buttons.length',
items: [
{
type: 'tpl',
inline: false,
tpl:
'<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
}
],
addButtonText: '新增按钮',
scaffold: {
type: 'button',
label: '按钮'
}
}
]
},
event: {
hidden: false
}
title: '基本',
body: [
getSchemaTpl('label'),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description'),
getSchemaTpl('combo-container', {
type: 'combo',
label: '按钮管理',
name: 'buttons',
mode: 'normal',
multiple: true,
addable: true,
minLength: 1,
draggable: true,
editable: false,
items: [
{
type: 'tpl',
inline: false,
className: 'p-t-xs',
tpl: `<span class="label label-default"><% if (data.type === "button-group") { %> ${'按钮组'} <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>`
}
],
addButtonText: '新增按钮',
scaffold: {
type: 'button',
label: '按钮'
}
})
]
},
getSchemaTpl('status')
])
]
},
context
);
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemMode'),
getSchemaTpl('horizontal', {
label: '',
visibleOn:
'data.mode == "horizontal" && data.label !== false && data.horizontal'
})
]
},
getSchemaTpl('style:classNames', {
isFormItem: true,
unsupportStatic: true,
schema: [
getSchemaTpl('className', {
label: '描述',
name: 'descriptionClassName',
visibleOn: 'this.description'
})
]
})
])
]
}
]);
};
}

19
packages/amis-editor/src/plugin/Form/ChainedSelect.tsx
View File

@ -4,16 +4,15 @@ import {
BaseEventContext,
BasicSubRenderInfo,
RendererEventContext,
SubRendererInfo
} from 'amis-editor-core';
import {getSchemaTpl, defaultValue} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {tipedLabel} from '../../component/BaseControl';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
SubRendererInfo,
RendererPluginAction,
RendererPluginEvent
RendererPluginEvent,
tipedLabel,
getSchemaTpl,
defaultValue
} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
export class ChainedSelectControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -135,7 +134,8 @@ export class ChainedSelectControlPlugin extends BasePlugin {
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
{
@ -143,6 +143,7 @@ export class ChainedSelectControlPlugin extends BasePlugin {
body: [
getSchemaTpl('apiControl', {
name: 'source',
mode: 'normal',
label: tipedLabel(
'获取选项接口',
`<div>可用变量说明</div><ul>

9
packages/amis-editor/src/plugin/Form/Checkbox.tsx
View File

@ -10,10 +10,10 @@ import {
BasicSubRenderInfo,
RendererEventContext,
SubRendererInfo,
BaseEventContext
BaseEventContext,
tipedLabel
} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {tipedLabel} from '../../component/BaseControl';
import {
RendererPluginAction,
RendererPluginEvent
@ -110,7 +110,7 @@ export class CheckboxControlPlugin extends BasePlugin {
getSchemaTpl('label'),
getSchemaTpl('option'),
{
type: 'ae-Switch-More',
type: 'ae-switch-more',
hiddenOnDefault: false,
mode: 'normal',
label: '值格式',
@ -152,7 +152,8 @@ export class CheckboxControlPlugin extends BasePlugin {
}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {isFormItem: true}),

3
packages/amis-editor/src/plugin/Form/Checkboxes.tsx
View File

@ -168,7 +168,8 @@ export class CheckboxesControlPlugin extends BasePlugin {
getSchemaTpl('extractValue'),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
{

38
packages/amis-editor/src/plugin/Form/CodeEditor.tsx
View File

@ -5,10 +5,7 @@ import {BasePlugin} from 'amis-editor-core';
import type {BaseEventContext} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {
RendererPluginEvent,
RendererPluginAction
} from 'amis-editor-core';
import {RendererPluginEvent, RendererPluginAction} from 'amis-editor-core';
import {getEventControlConfig} from '../../renderer/event-control/helper';
export class CodeEditorControlPlugin extends BasePlugin {
@ -45,6 +42,22 @@ export class CodeEditorControlPlugin extends BasePlugin {
};
events: RendererPluginEvent[] = [
{
eventName: 'change',
eventLabel: '代码变化',
description: '代码变化时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '当前代码'
}
}
}
]
},
{
eventName: 'focus',
eventLabel: '获取焦点',
@ -140,10 +153,14 @@ export class CodeEditorControlPlugin extends BasePlugin {
}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('status', {
isFormItem: true,
unsupportStatic: true
}),
getSchemaTpl('validation', {
tag: ValidatorTag.Code
})
@ -190,7 +207,9 @@ export class CodeEditorControlPlugin extends BasePlugin {
}
]
}),
getSchemaTpl('style:classNames')
getSchemaTpl('style:classNames', {
unsupportStatic: true
})
])
},
{
@ -205,6 +224,11 @@ export class CodeEditorControlPlugin extends BasePlugin {
}
]);
};
filterProps(props: any) {
props.disabled = true;
return props;
}
}
registerEditorPlugin(CodeEditorControlPlugin);

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

@ -15,10 +15,7 @@ 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 {RendererPluginEvent, RendererPluginAction} from 'amis-editor-core';
import {setVariable} from 'amis-core';
export class ComboControlPlugin extends BasePlugin {
@ -109,6 +106,10 @@ export class ComboControlPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '现有组合项的值'
},
'event.data.item': {
type: 'object',
title: '被删除的项'
}
}
}
@ -125,6 +126,14 @@ export class ComboControlPlugin extends BasePlugin {
'event.data.key': {
type: 'string',
title: '选项卡索引'
},
'event.data.value': {
type: 'string',
title: '现有组合项的值'
},
'event.data.item': {
type: 'object',
title: '被激活的项'
}
}
}
@ -490,14 +499,26 @@ export class ComboControlPlugin extends BasePlugin {
name: 'lazyLoad',
label: '懒加载',
pipeIn: defaultValue(false),
description: '如果数据比较多，比较卡顿时，可开启此配置项'
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
placement: 'left',
content: '如果数据比较多，比较卡顿时，可开启此配置项。'
}
}),
getSchemaTpl('switch', {
name: 'strictMode',
label: '严格模式',
pipeIn: defaultValue(true),
description: '如果你希望环境变量的值实时透传到 Combo 中，请关闭此选项。'
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
placement: 'left',
content: '如果你希望环境变量的值实时透传到 Combo 中，请关闭此选项。'
}
}),
{
@ -515,8 +536,14 @@ export class ComboControlPlugin extends BasePlugin {
name: 'nullable',
label: '允许为空',
pipeIn: defaultValue(false),
description:
'如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。'
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
placement: 'left',
content:
'如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。'
}
}),
{

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

@ -15,7 +15,7 @@ export class ControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-object-group';
pluginIcon = 'form-group-plugin';
description = `表单项容器`;
description = '表单项容器';
docLink = '/amis/zh-CN/components/form/group';
tags = ['容器'];
/**

38
packages/amis-editor/src/plugin/Form/DiffEditor.tsx
View File

@ -11,10 +11,7 @@ import {BasePlugin} from 'amis-editor-core';
import type {BaseEventContext} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginEvent,
RendererPluginAction
} from 'amis-editor-core';
import {RendererPluginEvent, RendererPluginAction} from 'amis-editor-core';
export class DiffEditorControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -51,6 +48,22 @@ export class DiffEditorControlPlugin extends BasePlugin {
};
events: RendererPluginEvent[] = [
{
eventName: 'change',
eventLabel: '代码变化',
description: '代码变化时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '当前代码'
}
}
}
]
},
{
eventName: 'focus',
eventLabel: '获取焦点',
@ -149,10 +162,14 @@ export class DiffEditorControlPlugin extends BasePlugin {
},
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('status', {
isFormItem: true,
unsupportStatic: true
}),
getSchemaTpl('validation', {
tag: ValidatorTag.All
})
@ -199,7 +216,9 @@ export class DiffEditorControlPlugin extends BasePlugin {
}
]
}),
getSchemaTpl('style:classNames')
getSchemaTpl('style:classNames', {
unsupportStatic: true
})
])
},
{
@ -214,6 +233,11 @@ export class DiffEditorControlPlugin extends BasePlugin {
}
]);
};
filterProps(props: any) {
props.disabled = true;
return props;
}
}
registerEditorPlugin(DiffEditorControlPlugin);

3
packages/amis-editor/src/plugin/Form/FieldSet.tsx
View File

@ -8,13 +8,12 @@ export class FieldSetControlPlugin extends BasePlugin {
// 关联渲染器名字
rendererName = 'fieldset';
$schema = '/schemas/FieldSetControlSchema.json';
disabledRendererPlugin = true; // 组件面板不显示
// 组件名称
name = '字段集';
isBaseComponent = true;
icon = 'fa fa-toggle-down';
description = `多个表单项的组合，可配置是否折叠`;
description = '多个表单项的组合，可配置是否折叠';
docLink = '/amis/zh-CN/components/form/fieldset';
tags = ['表单项'];
scaffold = {

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

@ -10,10 +10,7 @@ import {
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {jsonToJsonSchema} from 'amis-editor-core';
import {EditorNodeType} from 'amis-editor-core';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {setVariable} from 'amis-core';
import {getEventControlConfig} from '../../renderer/event-control/helper';
@ -141,7 +138,7 @@ export class FormPlugin extends BasePlugin {
scaffoldForm: ScaffoldForm = {
title: '快速创建表单',
body: [
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
label: '提交地址'
}),
{
@ -217,7 +214,7 @@ export class FormPlugin extends BasePlugin {
events: RendererPluginEvent[] = [
{
eventName: 'inited',
eventLabel: '初始化完成',
eventLabel: '初始化接口请求成功',
description: '远程初始化接口请求成功时触发',
// 表单数据为表单变量
dataSchema: [
@ -226,7 +223,7 @@ export class FormPlugin extends BasePlugin {
properties: {
'event.data': {
type: 'object',
title: 'initApi 远程请求返回的初始化数据'
title: '初始化接口请求成功返回的数据'
}
}
}
@ -312,17 +309,34 @@ export class FormPlugin extends BasePlugin {
}
]
},
// {
// eventName: 'submit',
// eventLabel: '表单提交',
// strongDesc: '配置该事件后将不会触发表单提交时默认的校验、提交到api或者target等行为，所有行为需要自己配置',
// dataSchema: [
// {
// type: 'object',
// properties: {
// 'event.data': {
// type: 'object',
// title: '当前表单数据'
// }
// }
// }
// ]
// },
{
eventName: 'submitSucc',
eventLabel: '提交成功',
description: '表单提交请求成功后触发',
description:
'表单提交成功后触发，如果事件源是按钮，且按钮的类型为“提交”，那么即便当前表单没有配置“保存接口”也将触发提交成功事件',
dataSchema: [
{
type: 'object',
properties: {
'event.data.result': {
type: 'object',
title: '提交成功后返回的数据'
title: '保存接口请求成功后返回的数据'
}
}
}
@ -338,7 +352,7 @@ export class FormPlugin extends BasePlugin {
properties: {
'event.data.error': {
type: 'object',
title: '提交失败后返回的错误信息'
title: '保存接口请求失败后返回的错误信息'
}
}
}
@ -418,6 +432,18 @@ export class FormPlugin extends BasePlugin {
getSchemaTpl('submitOnChange'),
getSchemaTpl('switch', {
label: '禁用回车提交表单',
name: 'preventEnterSubmit',
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
content: '设置后无法通过键盘 “回车” 按键进行表单提交',
placement: 'left'
}
}),
getSchemaTpl('switch', {
label: '提交完后重置表单',
name: 'resetAfterSubmit',
@ -537,10 +563,10 @@ export class FormPlugin extends BasePlugin {
: {
title: '接口',
body: [
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
label: '保存接口',
description: '用来保存表单数据',
sampleBuilder: (schema: any) => `{
sampleBuilder: () => `{
"status": 0,
"msg": "",
@ -566,7 +592,7 @@ export class FormPlugin extends BasePlugin {
pipeOut: (value: any) => (value ? '' : undefined)
}),
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
name: 'asyncApi',
label: '异步检测接口',
visibleOn: 'data.asyncApi != null',
@ -578,14 +604,15 @@ export class FormPlugin extends BasePlugin {
type: 'divider'
},
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
name: 'initApi',
label: '初始化接口',
description: '用来初始化表单数据',
sampleBuilder: (schema: any) => {
sampleBuilder: () => {
const data = {};
const schema = context?.schema;
if (Array.isArray(schema.body)) {
if (Array.isArray(schema?.body)) {
schema.body.forEach((control: any) => {
if (
control.name &&
@ -659,7 +686,7 @@ export class FormPlugin extends BasePlugin {
pipeOut: (value: any) => (value ? '' : undefined)
}),
getSchemaTpl('api', {
getSchemaTpl('apiControl', {
name: 'initAsyncApi',
label: '异步检测接口',
visibleOn: 'data.initAsyncApi != null',
@ -784,6 +811,11 @@ export class FormPlugin extends BasePlugin {
getSchemaTpl('className'),
getSchemaTpl('className', {
name: 'staticClassName',
label: '静态展示时 的 CSS 类名'
}),
getSchemaTpl('className', {
name: 'panelClassName',
visibleOn: 'this.wrapWithPanel !== false',
@ -818,7 +850,8 @@ export class FormPlugin extends BasePlugin {
}),
getSchemaTpl('disabled'),
getSchemaTpl('visible')
getSchemaTpl('visible'),
getSchemaTpl('static')
]
}
])
@ -891,8 +924,8 @@ export class FormPlugin extends BasePlugin {
...jsonToJsonSchema(data)
};
scope.removeSchema(jsonschema.$id);
scope.addSchema(jsonschema);
scope?.removeSchema(jsonschema.$id);
scope?.addSchema(jsonschema);
}
}
}

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

@ -12,7 +12,7 @@ export class FormulaControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-calculator';
pluginIcon = 'formula-plugin';
description = `通过公式计算指定的变量值，并将其结果作用到指定的变量中`;
description = '通过公式计算指定的变量值，并将其结果作用到指定的变量中';
docLink = '/amis/zh-CN/components/form/formula';
tags = ['表单项'];
scaffold = {

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

@ -12,7 +12,7 @@ export class HiddenControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-eye-slash';
pluginIcon = 'hidden-plugin';
description = `隐藏表单项`;
description = '隐藏表单项';
docLink = '/amis/zh-CN/components/form/hidden';
tags = ['表单项'];
scaffold = {

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

@ -9,10 +9,9 @@ import {
} from 'amis-editor-core';
import {formItemControl} from '../../component/BaseControl';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
export class CityControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -87,66 +86,67 @@ export class CityControlPlugin extends BasePlugin {
}
];
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return formItemControl(
return getSchemaTpl('tabs', [
{
common: {
replace: true,
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
// getSchemaTpl('switchDefaultValue'),
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('valueFormula', {
rendererSchema: context?.schema,
rendererWrapper: true,
mode: 'vertical' // 改成上下展示模式
}),
getSchemaTpl('switch', {
name: 'allowDistrict',
label: '允许选择区域',
pipeIn: defaultValue(true)
}),
/*
{
name: 'value',
type: 'input-city',
label: '默认值',
visibleOn: 'typeof data.value !== "undefined"',
validations: 'isNumeric',
labelRemark: {
trigger: 'click',
className: 'm-l-xs',
rootClose: true,
content: '城市编码',
placement: 'left'
}
},
*/
getSchemaTpl('switch', {
name: 'allowCity',
label: '允许选择城市',
pipeIn: defaultValue(true)
}),
getSchemaTpl('valueFormula', {
rendererSchema: context?.schema,
rendererWrapper: true,
mode: 'vertical' // 改成上下展示模式
}),
getSchemaTpl('switch', {
name: 'allowDistrict',
label: '允许选择区域',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'allowCity',
label: '允许选择城市',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'searchable',
label: '是否出搜索框',
pipeIn: defaultValue(false)
}),
getSchemaTpl('extractValue')
]
},
status: {}
getSchemaTpl('switch', {
name: 'searchable',
label: '是否出搜索框',
pipeIn: defaultValue(false)
})
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect})
])
},
context
);
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
getSchemaTpl('style:classNames')
])
]
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
]);
};
}

236
packages/amis-editor/src/plugin/Form/InputColor.tsx
View File

@ -1,9 +1,8 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {getSchemaTpl} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {tipedLabel} from '../../component/BaseControl';
import tinyColor from 'tinycolor2';
function convertColor(value: string[], format: string): string[];
@ -171,124 +170,133 @@ export class ColorControlPlugin extends BasePlugin {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
{
type: 'select',
label: '值格式',
name: 'format',
value: 'hex',
options: formatOptions,
onChange: (
format: any,
oldFormat: any,
model: any,
form: any
) => {
const {value, presetColors} = form.data;
if (value) {
form.setValueByName('value', convertColor(value, format));
body: getSchemaTpl(
'collapseGroup',
[
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
{
type: 'select',
label: '值格式',
name: 'format',
value: 'hex',
options: formatOptions,
onChange: (
format: any,
oldFormat: any,
model: any,
form: any
) => {
const {value, presetColors} = form.data;
if (value) {
form.setValueByName('value', convertColor(value, format));
}
if (Array.isArray(presetColors)) {
form.setValueByName(
'presetColors',
convertColor(presetColors, format)
);
}
}
if (Array.isArray(presetColors)) {
form.setValueByName(
'presetColors',
convertColor(presetColors, format)
);
}
}
},
// todo: 待优化
[
...formatOptions.map(({value}) =>
this.getConditionalColorPanel(value)
)
],
// {
// label: '默认值',
// name: 'value',
// type: 'input-color',
// format: '${format}'
// },
getSchemaTpl('clearable'),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
]
},
{
title: '拾色器',
body: [
getSchemaTpl('switch', {
label: tipedLabel(
'隐藏调色盘',
'开启时，禁止手动输入颜色，只能从备选颜色中选择'
),
name: 'allowCustomColor',
disabledOn:
'Array.isArray(presetColors) && presetColors.length === 0',
pipeIn: (value: any) =>
typeof value === 'undefined' ? false : !value,
pipeOut: (value: boolean) => !value
}),
getSchemaTpl('switch', {
label: tipedLabel('备选色', '拾色器底部的备选颜色'),
name: 'presetColors',
onText: '自定义',
offText: '默认',
pipeIn: (value: any) =>
typeof value === 'undefined' ? false : true,
pipeOut: (
value: any,
originValue: any,
{format = 'hex'}: any
) => {
return !value ? undefined : presetColorsByFormat[format];
},
onChange: (
colors: any,
oldValue: any,
model: any,
form: any
) => {
if (Array.isArray(colors) && colors.length === 0) {
form.setValueByName('allowCustomColor', true);
// todo: 待优化
[
...formatOptions.map(({value}) =>
this.getConditionalColorPanel(value)
)
],
// {
// label: '默认值',
// name: 'value',
// type: 'input-color',
// format: '${format}'
// },
getSchemaTpl('clearable'),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
{
title: '拾色器',
body: [
getSchemaTpl('switch', {
label: tipedLabel(
'隐藏调色盘',
'开启时，禁止手动输入颜色，只能从备选颜色中选择'
),
name: 'allowCustomColor',
disabledOn:
'Array.isArray(presetColors) && presetColors.length === 0',
pipeIn: (value: any) =>
typeof value === 'undefined' ? false : !value,
pipeOut: (value: boolean) => !value
}),
getSchemaTpl('switch', {
label: tipedLabel('备选色', '拾色器底部的备选颜色'),
name: 'presetColors',
onText: '自定义',
offText: '默认',
pipeIn: (value: any) =>
typeof value === 'undefined' ? false : true,
pipeOut: (
value: any,
originValue: any,
{format = 'hex'}: any
) => {
return !value ? undefined : presetColorsByFormat[format];
},
onChange: (
colors: any,
oldValue: any,
model: any,
form: any
) => {
if (Array.isArray(colors) && colors.length === 0) {
form.setValueByName('allowCustomColor', true);
}
}
}
}),
...formatOptions.map(({value}) =>
this.getConditionalColorComb(value)
)
]
},
getSchemaTpl('status', {
isFormItem: true
}),
getSchemaTpl('validation', {
tag: ValidatorTag.MultiSelect
})
], {...context?.schema, configTitle: 'props'})
}),
...formatOptions.map(({value}) =>
this.getConditionalColorComb(value)
)
]
},
getSchemaTpl('status', {
isFormItem: true
}),
getSchemaTpl('validation', {
tag: ValidatorTag.MultiSelect
})
],
{...context?.schema, configTitle: 'props'}
)
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {renderer}),
getSchemaTpl('style:classNames', {
schema: [
getSchemaTpl('className', {
label: '描述',
name: 'descriptionClassName',
visibleOn: 'this.description'
})
]
})
], {...context?.schema, configTitle: 'style'})
body: getSchemaTpl(
'collapseGroup',
[
getSchemaTpl('style:formItem', {renderer}),
getSchemaTpl('style:classNames', {
schema: [
getSchemaTpl('className', {
label: '描述',
name: 'descriptionClassName',
visibleOn: 'this.description'
})
]
})
],
{...context?.schema, configTitle: 'style'}
)
},
{
title: '事件',

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

@ -1,14 +1,10 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {BasePlugin, BaseEventContext, tipedLabel} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
const formatX = [
{
@ -201,12 +197,34 @@ export class DateControlPlugin extends BasePlugin {
{
eventName: 'focus',
eventLabel: '获取焦点',
description: '输入框获取焦点(非内嵌模式)时触发'
description: '输入框获取焦点(非内嵌模式)时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '时间值'
}
}
}
]
},
{
eventName: 'blur',
eventLabel: '失去焦点',
description: '输入框失去焦点(非内嵌模式)时触发'
description: '输入框失去焦点(非内嵌模式)时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '时间值'
}
}
}
]
}
];
@ -237,157 +255,166 @@ export class DateControlPlugin extends BasePlugin {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('selectDateType', {
value: this.scaffold.type,
onChange: (
value: string,
oldValue: any,
model: any,
form: any
) => {
let type: string = value.split('-')[1];
body: getSchemaTpl(
'collapseGroup',
[
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('selectDateType', {
value: this.scaffold.type,
onChange: (
value: string,
oldValue: any,
model: any,
form: any
) => {
let type: string = value.split('-')[1];
form.setValues({
inputFormat: DateType[type]?.format,
placeholder: DateType[type]?.placeholder,
format: type === 'time' ? 'HH:mm' : 'X',
minDate: '',
maxDate: '',
value: ''
});
}
}),
{
type: 'input-text',
name: 'format',
label: tipedLabel(
'值格式',
'提交数据前将根据设定格式化数据，请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
),
pipeIn: defaultValue('X')
},
{
type: 'input-text',
name: 'inputFormat',
label: tipedLabel(
'显示格式',
'请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
),
pipeIn: defaultValue('YYYY-MM-DD'),
clearable: true,
onChange: (
value: string,
oldValue: any,
model: any,
form: any
) => {
const type = form.data.type.split('-')[1];
model.setOptions(DateType[type].formatOptions);
// 时间日期类组件 input-time 需要更加关注 timeFormat 和 inputFormat 属性区别
// inputFormat 表示输入框内的显示格式； timeFormat表示选择下拉弹窗中展示"HH、mm、ss"的组合
if (type === 'time') {
const timeFormatObj = DateType[type].formatOptions.find(
item => item.value === value
);
const timeFormat = timeFormatObj
? (timeFormatObj as any).timeFormat
: 'HH:mm:ss';
form.setValues({
timeFormat: timeFormat
inputFormat: DateType[type]?.format,
placeholder: DateType[type]?.placeholder,
format: type === 'time' ? 'HH:mm' : 'X',
minDate: '',
maxDate: '',
value: ''
});
}
}),
{
type: 'input-text',
name: 'format',
label: tipedLabel(
'值格式',
'提交数据前将根据设定格式化数据，请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
),
pipeIn: defaultValue('X')
},
options:
DateType[this.scaffold.type.split('-')[1]].formatOptions
},
getSchemaTpl('utc'),
getSchemaTpl('clearable', {
pipeIn: defaultValue(true)
}),
getSchemaTpl('valueFormula', {
rendererSchema: context?.schema,
label: tipedLabel(
'默认值',
'支持 <code>now、+1day、-2weeks、+1hours、+2years</code>等这种相对值用法'
)
}),
getSchemaTpl('valueFormula', {
name: 'minDate',
rendererSchema: {
...context?.schema,
value: context?.schema.minDate
{
type: 'input-text',
name: 'inputFormat',
label: tipedLabel(
'显示格式',
'请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
),
pipeIn: defaultValue('YYYY-MM-DD'),
clearable: true,
onChange: (
value: string,
oldValue: any,
model: any,
form: any
) => {
const type = form.data.type.split('-')[1];
model.setOptions(DateType[type].formatOptions);
// 时间日期类组件 input-time 需要更加关注 timeFormat 和 inputFormat 属性区别
// inputFormat 表示输入框内的显示格式； timeFormat表示选择下拉弹窗中展示"HH、mm、ss"的组合
if (type === 'time') {
const timeFormatObj = DateType[type].formatOptions.find(
item => item.value === value
);
const timeFormat = timeFormatObj
? (timeFormatObj as any).timeFormat
: 'HH:mm:ss';
form.setValues({
timeFormat: timeFormat
});
}
},
options:
DateType[this.scaffold.type.split('-')[1]].formatOptions
},
needDeleteProps: ['minDate'], // 避免自我限制
label: tipedLabel('最小值', tipedLabelText)
}),
getSchemaTpl('valueFormula', {
name: 'maxDate',
rendererSchema: {
...context?.schema,
value: context?.schema.maxDate
},
needDeleteProps: ['maxDate'], // 避免自我限制
label: tipedLabel('最大值', tipedLabelText)
}),
getSchemaTpl('placeholder', {
pipeIn: defaultValue('请选择日期')
}),
// getSchemaTpl('remark'),
// getSchemaTpl('labelRemark'),
getSchemaTpl('description')
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {
tag: ValidatorTag.Date
})
], {...context?.schema, configTitle: 'props'})
getSchemaTpl('utc'),
getSchemaTpl('clearable', {
pipeIn: defaultValue(true)
}),
getSchemaTpl('valueFormula', {
rendererSchema: context?.schema,
label: tipedLabel(
'默认值',
'支持 <code>now、+1day、-2weeks、+1hours、+2years</code>等这种相对值用法'
)
}),
getSchemaTpl('valueFormula', {
name: 'minDate',
rendererSchema: {
...context?.schema,
value: context?.schema.minDate
},
needDeleteProps: ['minDate'], // 避免自我限制
label: tipedLabel('最小值', tipedLabelText)
}),
getSchemaTpl('valueFormula', {
name: 'maxDate',
rendererSchema: {
...context?.schema,
value: context?.schema.maxDate
},
needDeleteProps: ['maxDate'], // 避免自我限制
label: tipedLabel('最大值', tipedLabelText)
}),
getSchemaTpl('placeholder', {
pipeIn: defaultValue('请选择日期')
}),
// getSchemaTpl('remark'),
// getSchemaTpl('labelRemark'),
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {
tag: ValidatorTag.Date
})
],
{...context?.schema, configTitle: 'props'}
)
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', renderer),
getSchemaTpl('style:classNames', [
getSchemaTpl('className', {
label: '描述',
name: 'descriptionClassName',
visibleOn: 'this.description'
}),
getSchemaTpl('className', {
name: 'addOn.className',
label: 'AddOn',
visibleOn: 'this.addOn && this.addOn.type === "text"'
})
]),
getSchemaTpl('style:others', [
{
name: 'embed',
type: 'button-group-select',
size: 'md',
label: '模式',
mode: 'row',
value: false,
options: [
{
label: '浮层',
value: false
},
{
label: '内嵌',
value: true
}
]
}
])
], {...context?.schema, configTitle: 'style'})
body: getSchemaTpl(
'collapseGroup',
[
getSchemaTpl('style:formItem', renderer),
getSchemaTpl('style:classNames', [
getSchemaTpl('className', {
label: '描述',
name: 'descriptionClassName',
visibleOn: 'this.description'
}),
getSchemaTpl('className', {
name: 'addOn.className',
label: 'AddOn',
visibleOn: 'this.addOn && this.addOn.type === "text"'
})
]),
getSchemaTpl('style:others', [
{
name: 'embed',
type: 'button-group-select',
size: 'md',
label: '模式',
mode: 'row',
value: false,
options: [
{
label: '浮层',
value: false
},
{
label: '内嵌',
value: true
}
]
}
])
],
{...context?.schema, configTitle: 'style'}
)
},
{
title: '事件',

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

@ -1,14 +1,10 @@
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
const DateType: {
[key: string]: {
@ -184,72 +180,74 @@ export class DateRangeControlPlugin extends BasePlugin {
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('selectDateRangeType', {
value: this.scaffold.type,
onChange: (
value: string,
oldValue: any,
model: any,
form: any
) => {
const type: string = value.split('-')[1];
form.setValues({
inputFormat: DateType[type]?.format,
placeholder: DateType[type]?.placeholder,
format: type === 'time' ? 'HH:mm' : 'X',
minDate: '',
maxDate: '',
value: '',
ranges: DateType[type]?.ranges
});
}
}),
{
type: 'input-text',
name: 'format',
label: tipedLabel(
'值格式',
'提交数据前将根据设定格式化数据，请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
),
pipeIn: defaultValue('X')
},
{
type: 'input-text',
name: 'inputFormat',
label: tipedLabel(
'显示格式',
'请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
),
pipeIn: defaultValue('YYYY-MM-DD'),
clearable: true
// onChange: (
// value: string,
// oldValue: any,
// model: any,
// form: any
// ) => {
// model.setOptions(
// DateType[form.data.type.split('-')[1]].formatOptions
// );
// },
// options:
// DateType[this.scaffold.type.split('-')[1]].formatOptions
},
getSchemaTpl('utc'),
getSchemaTpl('clearable', {
pipeIn: defaultValue(true)
}),
body: getSchemaTpl(
'collapseGroup',
[
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('selectDateRangeType', {
value: this.scaffold.type,
onChange: (
value: string,
oldValue: any,
model: any,
form: any
) => {
const type: string = value.split('-')[1];
form.setValues({
inputFormat: DateType[type]?.format,
placeholder: DateType[type]?.placeholder,
format: type === 'time' ? 'HH:mm' : 'X',
minDate: '',
maxDate: '',
value: '',
ranges: DateType[type]?.ranges
});
}
}),
{
type: 'input-text',
name: 'format',
label: tipedLabel(
'值格式',
'提交数据前将根据设定格式化数据，请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
),
pipeIn: defaultValue('X')
},
{
type: 'input-text',
name: 'inputFormat',
label: tipedLabel(
'显示格式',
'请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
),
pipeIn: defaultValue('YYYY-MM-DD'),
clearable: true
// onChange: (
// value: string,
// oldValue: any,
// model: any,
// form: any
// ) => {
// model.setOptions(
// DateType[form.data.type.split('-')[1]].formatOptions
// );
// },
// options:
// DateType[this.scaffold.type.split('-')[1]].formatOptions
},
getSchemaTpl('utc'),
getSchemaTpl('clearable', {
pipeIn: defaultValue(true)
}),
getSchemaTpl('valueFormula', {
/* 备注: 待 amis 日期组件优化
getSchemaTpl('valueFormula', {
/* 备注: 待 amis 日期组件优化
rendererSchema: {
...context?.schema,
size: 'full', // 备注：目前样式还有问题，需要在amis端进行优化
@ -257,120 +255,136 @@ export class DateRangeControlPlugin extends BasePlugin {
},
mode: 'vertical',
*/
rendererSchema: {
type: 'input-date'
},
label: tipedLabel(
'默认值',
'支持 <code>now、+1day、-2weeks、+1hours、+2years</code>等这种相对值用法'
)
}),
getSchemaTpl('valueFormula', {
name: 'minDate',
rendererSchema: {
...context?.schema,
value: context?.schema.minDate,
type: 'input-date'
},
needDeleteProps: ['minDate'], // 避免自我限制
label: tipedLabel('最小值', tipedLabelText)
}),
getSchemaTpl('valueFormula', {
name: 'maxDate',
rendererSchema: {
...context?.schema,
value: context?.schema.maxDate,
type: 'input-date'
},
needDeleteProps: ['maxDate'], // 避免自我限制
label: tipedLabel('最大值', tipedLabelText)
}),
rendererSchema: {
type: 'input-date'
},
label: tipedLabel(
'默认值',
'支持 <code>now、+1day、-2weeks、+1hours、+2years</code>等这种相对值用法'
)
}),
getSchemaTpl('valueFormula', {
name: 'minDate',
rendererSchema: {
...context?.schema,
value: context?.schema.minDate,
type: 'input-date'
},
needDeleteProps: ['minDate'], // 避免自我限制
label: tipedLabel('最小值', tipedLabelText)
}),
getSchemaTpl('valueFormula', {
name: 'maxDate',
rendererSchema: {
...context?.schema,
value: context?.schema.maxDate,
type: 'input-date'
},
needDeleteProps: ['maxDate'], // 避免自我限制
label: tipedLabel('最大值', tipedLabelText)
}),
getSchemaTpl('formulaControl', {
name: 'minDuration',
label: tipedLabel('最小跨度', '例如 2days'),
placeholder: '请输入最小跨度',
inputClassName: 'is-inline'
}),
getSchemaTpl('formulaControl', {
name: 'maxDuration',
label: tipedLabel('最大跨度', '例如 1year'),
placeholder: '请输入最大跨度',
inputClassName: 'is-inline'
}),
getSchemaTpl('dateShortCutControl', {
mode: 'normal',
dropDownOption: {
'yesterday': '昨天',
'thisweek': '这个周',
'prevweek': '上周',
'7daysago': '最近7天',
'thismonth': '这个月',
'prevmonth': '上个月',
'thisquarter': '这个季度',
'prevquarter': '上个季度',
'thisyear': '今年'
}
}),
// getSchemaTpl('remark'),
// getSchemaTpl('labelRemark'),
{
type: 'input-text',
name: 'startPlaceholder',
label: '前占位提示',
pipeIn: defaultValue('开始时间')
},
{
type: 'input-text',
name: 'endPlaceholder',
label: '后占位提示',
pipeIn: defaultValue('结束时间')
}
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {
tag: ValidatorTag.Date
})
], {...context?.schema, configTitle: 'props'})
getSchemaTpl('valueFormula', {
name: 'minDuration',
rendererSchema: {
...context?.schema,
value: context?.schema.minDuration,
type: 'input-text'
},
needDeleteProps: ['minDuration'], // 避免自我限制
label: tipedLabel('最小跨度', '例如 2days')
}),
getSchemaTpl('valueFormula', {
name: 'maxDuration',
rendererSchema: {
...context?.schema,
value: context?.schema.maxDuration,
type: 'input-text'
},
needDeleteProps: ['maxDuration'], // 避免自我限制
label: tipedLabel('最大跨度', '例如 1year')
}),
getSchemaTpl('dateShortCutControl', {
mode: 'normal',
dropDownOption: {
'yesterday': '昨天',
'thisweek': '这个周',
'prevweek': '上周',
'7daysago': '最近7天',
'thismonth': '这个月',
'prevmonth': '上个月',
'thisquarter': '这个季度',
'prevquarter': '上个季度',
'thisyear': '今年'
}
}),
// getSchemaTpl('remark'),
// getSchemaTpl('labelRemark'),
{
type: 'input-text',
name: 'startPlaceholder',
label: '前占位提示',
pipeIn: defaultValue('开始时间')
},
{
type: 'input-text',
name: 'endPlaceholder',
label: '后占位提示',
pipeIn: defaultValue('结束时间')
},
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {
tag: ValidatorTag.Date
})
],
{...context?.schema, configTitle: 'props'}
)
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', renderer),
getSchemaTpl('style:classNames', [
getSchemaTpl('className', {
label: '描述',
name: 'descriptionClassName',
visibleOn: 'this.description'
}),
getSchemaTpl('className', {
name: 'addOn.className',
label: 'AddOn',
visibleOn: 'this.addOn && this.addOn.type === "text"'
})
]),
getSchemaTpl('style:others', [
{
name: 'embed',
type: 'button-group-select',
size: 'md',
label: '模式',
mode: 'row',
value: false,
options: [
{
label: '浮层',
value: false
},
{
label: '内嵌',
value: true
}
]
}
])
], {...context?.schema, configTitle: 'style'})
body: getSchemaTpl(
'collapseGroup',
[
getSchemaTpl('style:formItem', renderer),
getSchemaTpl('style:classNames', [
getSchemaTpl('className', {
label: '描述',
name: 'descriptionClassName',
visibleOn: 'this.description'
}),
getSchemaTpl('className', {
name: 'addOn.className',
label: 'AddOn',
visibleOn: 'this.addOn && this.addOn.type === "text"'
})
]),
getSchemaTpl('style:others', [
{
name: 'embed',
type: 'button-group-select',
size: 'md',
label: '模式',
mode: 'row',
value: false,
options: [
{
label: '浮层',
value: false
},
{
label: '内嵌',
value: true
}
]
}
])
],
{...context?.schema, configTitle: 'style'}
)
},
{
title: '事件',

110
packages/amis-editor/src/plugin/Form/InputFile.tsx
View File

@ -1,13 +1,9 @@
import {defaultValue, getSchemaTpl, valuePipeOut} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {registerEditorPlugin, tipedLabel} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
export class FileControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -19,13 +15,20 @@ export class FileControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-upload';
pluginIcon = 'input-file-plugin';
description = `可上传多个文件，可配置是否自动上传以及大文件分片上传`;
description = '可上传多个文件，可配置是否自动上传以及大文件分片上传';
docLink = '/amis/zh-CN/components/form/input-file';
tags = ['表单项'];
scaffold = {
type: 'input-file',
label: '文件上传',
name: 'file'
autoUpload: true,
proxy: true,
uploadType: 'fileReceptor',
name: 'file',
receiver: {
url: 'object-upload://default',
method: 'post'
}
};
previewSchema: any = {
type: 'form',
@ -51,7 +54,7 @@ export class FileControlPlugin extends BasePlugin {
{
type: 'object',
properties: {
'event.data.value': {
'event.data.file': {
type: 'object',
title: '上传的文件'
}
@ -67,7 +70,7 @@ export class FileControlPlugin extends BasePlugin {
{
type: 'object',
properties: {
'event.data.value': {
'event.data.item': {
type: 'object',
title: '被移除的文件'
}
@ -83,7 +86,7 @@ export class FileControlPlugin extends BasePlugin {
{
type: 'object',
properties: {
'event.data.value': {
'event.data.item': {
type: 'object',
title: '远程上传请求成功后返回的结果数据'
}
@ -99,7 +102,7 @@ export class FileControlPlugin extends BasePlugin {
{
type: 'object',
properties: {
'event.data.file': {
'event.data.item': {
type: 'object',
title: '上传的文件'
},
@ -167,54 +170,47 @@ export class FileControlPlugin extends BasePlugin {
}
]
},
{
label: '提交方式',
name: 'submitType',
type: 'select',
tiled: true,
value: 'asUpload',
getSchemaTpl('uploadType', {
options: [
{
label: '随表单提交',
value: 'asForm'
},
{
label: '独立上传',
value: 'asUpload'
label: '文件接收器',
value: 'fileReceptor'
},
{
label: '对象存储',
value: 'bos'
}
],
pipeIn: (value: any, form: any) => value || 'asUpload',
pipeOut: (value: any, form: any) => value || 'asUpload',
pipeIn: (value: any, form: any) => value || 'fileReceptor',
pipeOut: (value: any, form: any) => value || 'fileReceptor',
onChange: (
value: any,
oldValue: boolean,
model: any,
form: any
) => {
if (value === 'asUpload') {
form.setValueByName('asBase64', false);
form.setValueByName('asBlob', false);
} else if (value === 'asForm') {
if (value === 'asForm') {
// 作为表单数据，自动上传开启
form.setValueByName('autoUpload', true);
const formType =
form.getValueByName('formType') || 'asBlob';
form.setValueByName(formType, true);
} else {
form.setValueByName('asBase64', false);
form.setValueByName('asBlob', false);
}
}
},
getSchemaTpl('uploadType', {
visibleOn: 'data.submitType === "asUpload" || !data.submitType',
pipeIn: (value: any, form: any) => value || 'fileReceptor',
pipeOut: (value: any, form: any) => value || 'fileReceptor'
}),
{
name: 'formType',
type: 'select',
tiled: true,
visibleOn: 'data.submitType === "asForm"',
visibleOn: 'data.uploadType === "asForm"',
value: 'asBlob',
label: tipedLabel(
'数据格式',
@ -243,20 +239,19 @@ export class FileControlPlugin extends BasePlugin {
},
getSchemaTpl('bos', {
visibleOn:
'(data.submitType === "asUpload" || !data.submitType) && data.uploadType === "bos"'
visibleOn: 'data.uploadType === "bos"'
}),
getSchemaTpl('proxy', {
value: false,
visibleOn: 'data.submitType === "asUpload" || !data.submitType'
value: true,
visibleOn: 'data.uploadType !== "asForm" || !data.uploadType'
}),
getSchemaTpl('switch', {
name: 'autoUpload',
label: '自动上传',
value: true,
visibleOn: 'data.submitType === "asUpload"'
visibleOn: 'data.uploadType !== "asForm"'
}),
getSchemaTpl('switch', {
@ -264,14 +259,14 @@ export class FileControlPlugin extends BasePlugin {
label: '开启分块',
value: false,
pipeIn: (value: any, form: any) => !!value, // 兼容auto
visibleOn: 'data.submitType == "asUpload"'
visibleOn: 'data.uploadType !== "asForm"'
}),
{
type: 'container',
className: 'ae-ExtendMore mb-3',
visibleOn:
'data.submitType === "asUpload" && data.useChunk != false',
'data.uploadType !== "asForm" && data.useChunk === true',
body: [
{
type: 'input-group',
@ -292,9 +287,10 @@ export class FileControlPlugin extends BasePlugin {
{
type: 'Container',
visibleOn:
'data.submitType === "asUpload" && data.uploadType == "fileReceptor" && data.useChunk != false',
'data.uploadType == "fileReceptor" && data.useChunk != false',
body: [
getSchemaTpl('apiControl', {
mode: 'row',
name: 'startChunkApi',
label: tipedLabel(
'分块准备接口',
@ -303,6 +299,7 @@ export class FileControlPlugin extends BasePlugin {
value: '/api/upload/startChunk'
}),
getSchemaTpl('apiControl', {
mode: 'row',
name: 'chunkApi',
label: tipedLabel(
'分块上传接口',
@ -311,6 +308,7 @@ export class FileControlPlugin extends BasePlugin {
value: '/api/upload/chunk'
}),
getSchemaTpl('apiControl', {
mode: 'row',
name: 'finishChunkApi',
label: tipedLabel(
'上传完成接口',
@ -329,11 +327,22 @@ export class FileControlPlugin extends BasePlugin {
'文件接收器',
'默认不填写将上传到 bos，可以在系统配置中设置为自己的 bos 地址。'
),
className: 'inputFile-apiControl',
renderLabel: true,
value: '/api/upload/file',
__isUpload: true,
visibleOn:
'data.submitType === "asUpload" && data.uploadType === "fileReceptor" && !data.useChunk'
'data.uploadType === "fileReceptor" && !data.useChunk'
}),
{
type: 'input-text',
value: '',
name: 'accept',
label: tipedLabel(
'文件类型',
'请填入文件的后缀，多个类型用<code>,</code>隔开'
)
},
getSchemaTpl('fileUrl', {
name: 'templateUrl',
label: tipedLabel(
@ -348,11 +357,21 @@ export class FileControlPlugin extends BasePlugin {
}),
getSchemaTpl('remark'),
getSchemaTpl('labelRemark'),
getSchemaTpl('description')
// getSchemaTpl('autoFill')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi', {
visibleOn:
'!this.autoFill || this.autoFill.scene && this.autoFill.action'
}),
getSchemaTpl('autoFill', {
visibleOn:
'!this.autoFill || !this.autoFill.scene && !this.autoFill.action'
})
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('status', {
isFormItem: true,
unsupportStatic: true
}),
getSchemaTpl('validation', {tag: ValidatorTag.File})
])
},
@ -361,6 +380,7 @@ export class FileControlPlugin extends BasePlugin {
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
getSchemaTpl('style:classNames', {
unsupportStatic: true,
schema: [
getSchemaTpl('className', {
name: 'descriptionClassName',

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

@ -14,7 +14,7 @@ export class InputGroupControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-object-group';
pluginIcon = 'input-group-plugin';
description = `输入组合，支持多种类型的控件组合`;
description = '输入组合，支持多种类型的控件组合';
docLink = '/amis/zh-CN/components/form/input-group';
tags = ['表单项'];
scaffold = {
@ -64,8 +64,7 @@ export class InputGroupControlPlugin extends BasePlugin {
type: 'tpl',
inline: false,
className: 'p-t-xs',
tpl:
'<%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%>'
tpl: '<%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%>'
}
]
},

556
packages/amis-editor/src/plugin/Form/InputImage.tsx
View File

@ -1,11 +1,16 @@
import {getSchemaTpl, valuePipeOut} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {formItemControl} from '../../component/BaseControl';
import {
getSchemaTpl,
valuePipeOut,
RendererPluginAction,
RendererPluginEvent
RendererPluginEvent,
BasePlugin,
BaseEventContext,
registerEditorPlugin
} from 'amis-editor-core';
import {tipedLabel} from 'amis-editor-core';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {ValidatorTag} from '../../validator';
export class ImageControlPlugin extends BasePlugin {
// 关联渲染器名字
rendererName = 'input-image';
@ -14,7 +19,8 @@ export class ImageControlPlugin extends BasePlugin {
// 组件名称
name = '图片上传';
isBaseComponent = true;
description = `可以对图片实现裁剪，限制图片的宽高以及大小，支持自动上传及上传多张图片`;
description =
'可以对图片实现裁剪，限制图片的宽高以及大小，支持自动上传及上传多张图片';
docLink = '/amis/zh-CN/components/form/input-image';
tags = ['表单项'];
icon = 'fa fa-crop';
@ -23,7 +29,14 @@ export class ImageControlPlugin extends BasePlugin {
type: 'input-image',
label: '图片上传',
name: 'image',
imageClassName: 'r w-full'
autoUpload: true,
proxy: true,
uploadType: 'fileReceptor',
imageClassName: 'r w-full',
receiver: {
url: 'object-upload://default',
method: 'post'
}
};
previewSchema: any = {
type: 'form',
@ -43,22 +56,70 @@ export class ImageControlPlugin extends BasePlugin {
{
eventName: 'change',
eventLabel: '值变化',
description: '文件值变化'
description: '上传文件值变化时触发（上传失败同样会触发）',
dataSchema: [
{
type: 'object',
properties: {
'event.data.file': {
type: 'object',
title: '上传的文件'
}
}
}
]
},
{
eventName: 'remove',
eventLabel: '移除文件',
description: '移除文件'
description: '移除文件时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.item': {
type: 'object',
title: '被移除的文件'
}
}
}
]
},
{
eventName: 'success',
eventLabel: '上传成功',
description: '上传成功'
description: '上传文件成功时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.item': {
type: 'object',
title: '远程上传请求成功后返回的结果数据'
}
}
}
]
},
{
eventName: 'fail',
eventLabel: '上传失败',
description: '上传失败'
description: '上传文件失败时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.item': {
type: 'object',
title: '上传的文件'
},
'event.data.error': {
type: 'object',
title: '远程上传请求失败后返回的错误信息'
}
}
}
]
}
];
@ -71,225 +132,314 @@ export class ImageControlPlugin extends BasePlugin {
}
];
panelTitle = '图片上传';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return formItemControl(
return getSchemaTpl('tabs', [
{
common: {
replace: true,
body: [
getSchemaTpl('switchDefaultValue'),
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
{
type: 'input-text',
name: 'value',
label: '默认值',
visibleOn: 'typeof this.value !== "undefined"'
},
{
type: 'input-text',
name: 'value',
label: '默认值',
visibleOn: 'typeof this.value !== "undefined"'
},
getSchemaTpl('multiple', {
value: false,
visibleOn: '!data.crop',
description: '开启后，不能同时开启裁剪功能'
}),
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('extractValue'),
{
name: 'maxSize',
type: 'input-number',
label: '图片最大体积',
description: '超出大小不允许上传，单位字节'
},
{
name: 'maxLength',
type: 'input-number',
label: '图片最大数量',
visibleOn: 'data.multiple',
description: '超出数量不允许上传'
},
getSchemaTpl('api', {
label: '文件接收接口',
name: 'receiver',
description: '文件接收接口，默认不填则上传到 hiphoto',
value: '/api/upload',
__isUpload: true
}),
{
type: 'input-text',
value: '.jpeg, .jpg, .png, .gif',
name: 'accept',
label: tipedLabel(
'图片类型',
'请填入图片的后缀或 <code>MimeType</code>，多个类型用<code>,</code>隔开'
)
},
getSchemaTpl('autoFill'),
{
type: 'input-text',
name: 'frameImage',
label: '占位图片地址'
},
{
type: 'input-text',
value: '.jpeg, .jpg, .png, .gif',
name: 'accept',
label: '图片类型',
description:
'请填入图片的后缀或 <code>MimeType</code>，多个类型用<code>,</code>隔开'
},
getSchemaTpl('uploadType', {
visibleOn: 'data.submitType === "asUpload" || !data.submitType',
pipeIn: (value: any, form: any) => value || 'fileReceptor',
pipeOut: (value: any, form: any) => value || 'fileReceptor'
}),
{
type: 'input-text',
name: 'defaultImage',
label: '占位图片地址'
},
getSchemaTpl('apiControl', {
mode: 'row',
name: 'receiver',
label: tipedLabel(
'文件接收器',
'文件接收接口，默认不填则上传到 hiphoto'
),
visibleOn: 'data.uploadType === "fileReceptor"',
value: '/api/upload',
__isUpload: true
}),
getSchemaTpl('switch', {
name: 'fixedSize',
label: '是否开启固定尺寸',
value: false
}),
getSchemaTpl('bos', {
visibleOn: 'data.uploadType === "bos"'
}),
getSchemaTpl('switch', {
name: 'hideUploadButton',
label: '隐藏上传按钮',
value: false
}),
getSchemaTpl('proxy', {
value: true
}),
// getSchemaTpl('autoFill'),
getSchemaTpl('switch', {
name: 'autoUpload',
label: '自动上传',
value: false
}),
getSchemaTpl('switch', {
name: 'compress',
label: '开启压缩',
value: true,
description: '由 hiphoto 实现，自定义接口将无效'
}),
{
type: 'combo',
name: 'compressOptions',
multiLine: true,
label: '压缩配置',
visibleOn: 'data.compress',
items: [
{
type: 'input-number',
label: '最大宽度',
name: 'maxWidth'
getSchemaTpl('multiple', {
patch: {
value: false,
visibleOn: '!data.crop',
label: tipedLabel('可多选', '开启后，不能同时开启裁剪功能')
},
body: [
{
name: 'maxLength',
label: '最大数量',
type: 'input-number'
}
]
}),
{
type: 'input-number',
label: '最大高度',
name: 'maxHeight'
}
]
},
getSchemaTpl('switch', {
name: 'hideUploadButton',
label: '隐藏上传按钮',
value: false
}),
getSchemaTpl('switch', {
name: 'showCompressOptions',
label: '是否显示压缩选项'
}),
getSchemaTpl('switch', {
name: 'autoUpload',
label: '自动上传',
value: false
}),
getSchemaTpl('switch', {
name: 'crop',
label: '是否开启裁剪',
visibleOn: '!data.multiple',
description: '开启后，不能同时开启多选模式',
pipeIn: (value: any) => !!value
}),
// getSchemaTpl('switch', {
// name: 'compress',
// value: true,
// label: tipedLabel(
// '开启压缩',
// '由 hiphoto 实现，自定义接口将无效'
// )
// }),
// {
// type: 'container',
// className: 'ae-ExtendMore mb-3',
// visibleOn: 'data.compress',
// name: 'compressOptions',
// body: [
// {
// type: 'input-number',
// label: '最大宽度',
// name: 'compressOptions.maxWidth'
// },
{
name: 'crop.aspectRatio',
type: 'input-text',
label: '裁剪比率',
visibleOn: 'data.crop',
pipeOut: valuePipeOut
},
// {
// type: 'input-number',
// label: '最大高度',
// name: 'compressOptions.maxHeight'
// }
// ]
// },
getSchemaTpl('switch', {
name: 'crop.rotatable',
label: '裁剪时是否可旋转',
visibleOn: 'data.crop',
pipeOut: valuePipeOut
}),
// getSchemaTpl('switch', {
// name: 'showCompressOptions',
// label: '显示压缩选项'
// }),
getSchemaTpl('switch', {
name: 'crop.scalable',
label: '裁剪时否可缩放',
visibleOn: 'data.crop',
pipeOut: valuePipeOut
}),
getSchemaTpl('switch', {
name: 'crop',
visibleOn: '!data.multiple',
label: tipedLabel('开启裁剪', '开启后，不能同时开启多选模式'),
pipeIn: (value: any) => !!value
}),
{
name: 'crop.viewMode',
type: 'select',
label: '裁剪区域限制',
value: 1,
options: [
{label: '无限制', value: 0},
{label: '绘图区域', value: 1}
],
visibleOn: 'data.crop',
pipeOut: valuePipeOut
},
{
type: 'container',
className: 'ae-ExtendMore mb-3',
visibleOn: 'data.crop',
body: [
{
name: 'crop.aspectRatio',
type: 'input-text',
label: '裁剪比率',
pipeOut: valuePipeOut
},
{
type: 'fieldSet',
title: '图片限制',
collapsed: true,
collapsable: true,
className: 'fieldset',
body: [
{
type: 'input-number',
name: 'limit.width',
label: '限制宽度'
},
getSchemaTpl('switch', {
name: 'crop.rotatable',
label: '裁剪时可旋转',
pipeOut: valuePipeOut
}),
{
type: 'input-number',
name: 'limit.height',
label: '限制高度'
},
getSchemaTpl('switch', {
name: 'crop.scalable',
label: '裁剪时可缩放',
pipeOut: valuePipeOut
}),
{
type: 'input-number',
name: 'limit.maxWidth',
label: '限制最大宽度'
},
{
name: 'crop.viewMode',
type: 'select',
label: '裁剪区域',
value: 1,
options: [
{label: '无限制', value: 0},
{label: '绘图区域', value: 1}
],
pipeOut: valuePipeOut
}
]
},
{
type: 'input-number',
name: 'limit.maxHeight',
label: '限制最大高度'
},
getSchemaTpl('switch', {
name: 'limit',
label: '图片限制',
pipeIn: (value: any) => !!value
}),
{
type: 'input-number',
name: 'limit.minWidth',
label: '限制最小宽度'
},
{
type: 'container',
className: 'ae-ExtendMore mb-3',
visibleOn: 'data.limit',
body: [
{
name: 'maxSize',
type: 'input-number',
suffix: 'B',
label: tipedLabel(
'最大体积',
'超出大小不允许上传，单位字节'
)
},
{
type: 'input-number',
name: 'limit.width',
label: tipedLabel(
'宽度',
'校验优先级比最大宽度和最大宽度高'
)
},
{
type: 'input-number',
name: 'limit.minHeight',
label: '限制最小高度'
},
{
type: 'input-number',
name: 'limit.height',
label: tipedLabel(
'高度',
'校验优先级比最大高度和最大高度高'
)
},
{
type: 'input-number',
name: 'limit.aspectRatio',
label: '限制宽高比率'
},
{
type: 'input-number',
name: 'limit.maxWidth',
label: '最大宽度'
},
{
type: 'input-text',
name: 'limit.限制最小高度',
label: '宽高比描述',
description:
'当宽高比没有满足条件时，此描述将作为提示信息显示'
}
]
}
]
}
{
type: 'input-number',
name: 'limit.maxHeight',
label: '最大高度'
},
{
type: 'input-number',
name: 'limit.minWidth',
label: '最小宽度'
},
{
type: 'input-number',
name: 'limit.minHeight',
label: '最小高度'
},
{
type: 'input-number',
name: 'limit.aspectRatio',
label: '宽高比率'
},
{
type: 'input-text',
name: 'limit.aspectRatioLabel',
label: tipedLabel(
'宽高比描述',
'当宽高比没有满足条件时，此描述将作为提示信息显示'
)
}
]
}
]
},
getSchemaTpl('status', {
isFormItem: true,
unsupportStatic: true
}),
getSchemaTpl('validation', {tag: ValidatorTag.File})
])
},
context
);
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
{
title: '尺寸',
body: [
getSchemaTpl('switch', {
name: 'fixedSize',
label: tipedLabel(
'固定尺寸',
'开启后需通过CSS类设置其高度、宽度'
),
value: false
}),
{
type: 'container',
className: 'ae-ExtendMore mb-3',
visibleOn: 'data.fixedSize',
body: [
{
type: 'input-text',
required: true,
name: 'fixedSizeClassName',
label: tipedLabel(
'CSS类名',
'开启固定尺寸时，根据此值控制展示尺寸'
)
}
]
}
]
},
getSchemaTpl('style:classNames', {
unsupportStatic: true,
schema: []
})
])
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
]);
};
}

9
packages/amis-editor/src/plugin/Form/InputKV.tsx
View File

@ -1,10 +1,7 @@
/**
* @file input-kv 组件的素项目部
*/
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, valuePipeOut} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {
@ -77,6 +74,10 @@ export class KVControlPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '当前组合项的值'
},
'event.data.item': {
type: 'object',
title: '被移除的项'
}
}
}

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

@ -12,7 +12,7 @@ export class MonthControlPlugin extends DateControlPlugin {
isBaseComponent = true;
pluginIcon = 'inputMonth-plugin';
icon = 'fa fa-calendar';
description = `月份选择`;
description = '月份选择';
docLink = '/amis/zh-CN/components/form/input-month';
tags = ['表单项'];
// @ts-ignore

11
packages/amis-editor/src/plugin/Form/InputNumber.tsx
View File

@ -1,7 +1,4 @@
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import flatten from 'lodash/flatten';
import {ContainerWrapper} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
@ -13,8 +10,7 @@ import {
SubRendererInfo,
BaseEventContext
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
@ -244,7 +240,8 @@ export class NumberControlPlugin extends BasePlugin {
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {isFormItem: true}),

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

@ -12,7 +12,7 @@ export class InputQuarterPlugin extends DateControlPlugin {
isBaseComponent = true;
icon = 'fa fa-calendar';
pluginIcon = 'input-quarter-plugin';
description = `季度选择`;
description = '季度选择';
docLink = '/amis/zh-CN/components/form/input-quarter';
tags = ['表单项'];
// @ts-ignore

26
packages/amis-editor/src/plugin/Form/InputRange.tsx
View File

@ -1,11 +1,7 @@
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
@ -19,7 +15,7 @@ export class RangeControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-sliders';
pluginIcon = 'input-range-plugin';
description = `选择某个值或者某个范围`;
description = '选择某个值或者某个范围';
docLink = '/amis/zh-CN/components/form/input-range';
tags = ['表单项'];
scaffold = {
@ -153,20 +149,20 @@ export class RangeControlPlugin extends BasePlugin {
name: 'value',
rendererSchema: {
...context?.schema,
value: context?.schema.min || 0,
type: 'input-number'
},
valueType: 'number', // 期望数值类型
visibleOn: '!data.multiple'
visibleOn: '!data.multiple',
pipeIn: defaultValue(0)
}),
getSchemaTpl('valueFormula', {
name: 'min',
rendererSchema: {
...context?.schema,
value: context?.schema.min || 0,
type: 'input-number'
},
pipeIn: defaultValue(0),
needDeleteProps: ['min'], // 避免自我限制
label: tipedLabel(
'最小值',
@ -179,9 +175,9 @@ export class RangeControlPlugin extends BasePlugin {
name: 'max',
rendererSchema: {
...context?.schema,
value: context?.schema.max || 100,
type: 'input-number'
},
pipeIn: defaultValue(100),
needDeleteProps: ['max'], // 避免自我限制
label: tipedLabel(
'最大值',
@ -204,8 +200,9 @@ export class RangeControlPlugin extends BasePlugin {
value: 0
},
{
type: 'tpl',
tpl: '-'
type: 'html',
html: '-',
className: 'inputGroup-split-line'
},
{
type: 'input-number',
@ -278,7 +275,8 @@ export class RangeControlPlugin extends BasePlugin {
label: '可重置',
value: false,
visibleOn: '!!data.showInput'
})
}),
getSchemaTpl('autoFillApi')
]
},
{

15
packages/amis-editor/src/plugin/Form/InputRating.tsx
View File

@ -5,14 +5,10 @@ import {
undefinedPipeOut
} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {BasePlugin, BaseEventContext, tipedLabel} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
export class RateControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -24,7 +20,7 @@ export class RateControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-star-o';
pluginIcon = 'input-rating-plugin';
description = `支持只读、半星选择`;
description = '支持只读、半星选择';
docLink = '/amis/zh-CN/components/form/input-rating';
tags = ['表单项'];
scaffold = {
@ -121,7 +117,6 @@ export class RateControlPlugin extends BasePlugin {
name: 'min',
rendererSchema: {
...context?.schema,
value: context?.schema.min,
type: 'input-number'
},
needDeleteProps: ['min'], // 避免自我限制
@ -136,7 +131,6 @@ export class RateControlPlugin extends BasePlugin {
name: 'max',
rendererSchema: {
...context?.schema,
value: context?.schema.max,
type: 'input-number'
},
needDeleteProps: ['max'], // 避免自我限制
@ -234,7 +228,8 @@ export class RateControlPlugin extends BasePlugin {
return res;
}
})
}),
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {isFormItem: true, readonly: true}),

9
packages/amis-editor/src/plugin/Form/InputRepeat.tsx
View File

@ -12,7 +12,7 @@ export class RepeatControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-repeat';
pluginIcon = 'input-repeat-plugin';
description = `选择重复的频率，如每时、每天、每周等`;
description = '选择重复的频率，如每时、每天、每周等';
docLink = '/amis/zh-CN/components/form/input-repeat';
tags = ['表单项'];
scaffold = {
@ -46,9 +46,10 @@ export class RepeatControlPlugin extends BasePlugin {
name: 'options',
type: 'select',
label: '启用单位',
options: 'secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly'.split(
','
),
options:
'secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly'.split(
','
),
value: 'hourly,daily,weekly,monthly',
multiple: true
}

338
packages/amis-editor/src/plugin/Form/InputRichText.tsx
View File

@ -1,4 +1,4 @@
import {getSchemaTpl} from 'amis-editor-core';
import {BaseEventContext, getSchemaTpl} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin} from 'amis-editor-core';
@ -12,13 +12,15 @@ export class RichTextControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-newspaper-o';
pluginIcon = 'input-rich-text-plugin';
description = `可自定义富文本的配置栏`;
description = '可自定义富文本的配置栏';
docLink = '/amis/zh-CN/components/form/input-rich-text';
tags = ['表单项'];
scaffold = {
type: 'input-rich-text',
label: '富文本',
name: 'rich-text'
name: 'rich-text',
receiver: '/api/upload/image',
vendor: 'tinymce'
};
previewSchema: any = {
type: 'form',
@ -33,154 +35,188 @@ export class RichTextControlPlugin extends BasePlugin {
};
panelTitle = '富文本';
panelBody = [
getSchemaTpl('switchDefaultValue'),
{
type: 'textarea',
name: 'value',
label: '默认值',
visibleOn: 'typeof this.value !== "undefined"'
},
getSchemaTpl('api', {
name: 'receiver',
label: '文件接收接口',
value: '/api/upload/image',
__isUpload: true
}),
{
type: 'select',
name: 'vendor',
label: '编辑器类型',
value: 'tinymce',
options: ['tinymce', 'froala']
},
getSchemaTpl('fieldSet', {
title: 'froala 设置项',
visibleOn: 'data.vendor === "froala"',
body: [
{
type: 'combo',
name: 'options',
noBorder: true,
multiLine: true,
items: [
{
type: 'select',
name: 'language',
label: '语言',
labelRemark: '鼠标覆盖配置栏中配置时显示的提示语言',
defaultValue: 'zh_cn',
options: [
{label: '中文', value: 'zh_cn'},
{label: '英文', value: 'en_us'}
]
},
{
type: 'textarea',
name: 'toolbarButtons',
label: '大屏时展示的配置项',
labelRemark: '屏幕宽度 ≥ 1200px',
description:
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
minRows: 5,
value: [
'paragraphFormat',
'quote',
'color',
'|',
'bold',
'italic',
'underline',
'strikeThrough',
'|',
'formatOL',
'formatUL',
'align',
'|',
'insertLink',
'insertImage',
'insertEmotion',
'insertTable',
'|',
'undo',
'redo',
'html'
],
pipeIn: (value: any) =>
Array.isArray(value) ? value.join(' ') : '',
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
},
{
type: 'textarea',
name: 'toolbarButtonsMD',
label: '中屏时展示的配置项',
labelRemark: '屏幕宽度 ≥ 992px',
description:
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
minRows: 5,
pipeIn: (value: any) =>
Array.isArray(value) ? value.join(' ') : '',
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
},
{
type: 'textarea',
name: 'toolbarButtonsSM',
label: '小屏时展示的配置项',
labelRemark: '屏幕宽度 ≥ 768px',
description:
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
minRows: 5,
pipeIn: (value: any) =>
Array.isArray(value) ? value.join(' ') : '',
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
}
]
}
]
}),
getSchemaTpl('fieldSet', {
title: 'tinymce 设置项',
visibleOn: 'data.vendor === "tinymce"',
body: [
{
type: 'combo',
name: 'options',
noBorder: true,
multiLine: true,
items: [
getSchemaTpl('switch', {
label: '是否显示菜单栏',
value: 'true',
name: 'menubar'
}),
{
type: 'input-number',
label: '高度',
min: 0,
value: 400,
name: 'height'
},
{
type: 'textarea',
name: 'plugins',
label: '启用的插件',
description:
'使用空格分开配置，<a target="_blank" href="https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/">参考文档</a>',
value:
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking table emoticons template paste help'
},
{
type: 'textarea',
name: 'toolbar',
label: '工具栏',
value:
'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons | help'
}
]
}
]
})
];
panelBodyCreator = (context: BaseEventContext) => {
// 有设置这个就默认使用 froala
const hasRichTextToken = this.manager.env?.richTextToken ? true : false;
return [
getSchemaTpl('switchDefaultValue'),
{
type: 'textarea',
name: 'value',
label: '默认值',
visibleOn: 'typeof this.value !== "undefined"'
},
getSchemaTpl('api', {
name: 'receiver',
label: '文件接收接口',
value: '/api/upload/image',
__isUpload: true
}),
{
type: 'select',
name: 'vendor',
label: '编辑器类型',
value: hasRichTextToken ? 'froala' : 'tinymce',
options: ['tinymce', 'froala']
},
getSchemaTpl('fieldSet', {
title: 'froala 设置项',
visibleOn: 'data.vendor === "froala"',
body: [
{
type: 'combo',
name: 'options',
noBorder: true,
multiLine: true,
items: [
{
type: 'select',
name: 'language',
label: '语言',
labelRemark: '鼠标覆盖配置栏中配置时显示的提示语言',
defaultValue: 'zh_cn',
options: [
{label: '中文', value: 'zh_cn'},
{label: '英文', value: 'en_us'}
]
},
{
type: 'textarea',
name: 'toolbarButtons',
label: '大屏时展示的配置项',
labelRemark: '屏幕宽度 ≥ 1200px',
description:
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
minRows: 5,
value: [
'paragraphFormat',
'quote',
'color',
'|',
'bold',
'italic',
'underline',
'strikeThrough',
'|',
'formatOL',
'formatUL',
'align',
'|',
'insertLink',
'insertImage',
'insertEmotion',
'insertTable',
'|',
'undo',
'redo',
'html'
],
pipeIn: (value: any) =>
Array.isArray(value) ? value.join(' ') : '',
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
},
{
type: 'textarea',
name: 'toolbarButtonsMD',
label: '中屏时展示的配置项',
labelRemark: '屏幕宽度 ≥ 992px',
description:
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
minRows: 5,
pipeIn: (value: any) =>
Array.isArray(value) ? value.join(' ') : '',
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
},
{
type: 'textarea',
name: 'toolbarButtonsSM',
label: '小屏时展示的配置项',
labelRemark: '屏幕宽度 ≥ 768px',
description:
'使用空格分开配置，使用<code>|</code>可将配置栏分组，<a target="_blank" href="https://www.froala.com/wysiwyg-editor/docs/options">参考文档</a>',
minRows: 5,
pipeIn: (value: any) =>
Array.isArray(value) ? value.join(' ') : '',
pipeOut: (value: any) => value.replace(/\s+/g, ' ').split(' ')
}
]
}
]
}),
getSchemaTpl('fieldSet', {
title: 'tinymce 设置项',
visibleOn: 'data.vendor === "tinymce"',
body: [
{
type: 'combo',
name: 'options',
noBorder: true,
multiLine: true,
items: [
getSchemaTpl('switch', {
label: '是否显示菜单栏',
value: 'true',
name: 'menubar'
}),
{
type: 'input-number',
label: '高度',
min: 0,
value: 400,
name: 'height'
},
{
name: 'plugins',
label: '启用的插件',
description:
'<a target="_blank" href="https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/">参考文档</a>',
type: 'input-array',
inline: true,
items: {
type: 'input-text',
clearable: true
},
value: [
'advlist',
'autolink',
'link',
'image',
'lists',
'charmap',
'preview',
'anchor',
'pagebreak',
'searchreplace',
'wordcount',
'visualblocks',
'visualchars',
'code',
'fullscreen',
'insertdatetime',
'media',
'nonbreaking',
'table',
'emoticons',
'template',
'help'
]
},
{
type: 'textarea',
name: 'toolbar',
label: '工具栏',
value:
'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help'
}
]
}
]
})
];
};
}
registerEditorPlugin(RichTextControlPlugin);

29
packages/amis-editor/src/plugin/Form/InputSubForm.tsx
View File

@ -1,4 +1,5 @@
import {Button} from 'amis';
import {SchemaCollection} from 'amis/lib/Schema';
import React from 'react';
import {registerEditorPlugin} from 'amis-editor-core';
import {
@ -20,7 +21,7 @@ export class SubFormControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-window-restore';
pluginIcon = 'sub-form-plugin';
description = `SubForm, 配置一个子<code>form</code>作为当前的表单项`;
description = 'SubForm, 配置一个子 form 作为当前的表单项';
docLink = '/amis/zh-CN/components/form/input-sub-form';
tags = ['表单项'];
scaffold = {
@ -94,7 +95,7 @@ export class SubFormControlPlugin extends BasePlugin {
label: '允许最多个数',
type: 'input-number'
}
];
] as SchemaCollection;
};
filterProps(props: any) {
@ -165,6 +166,7 @@ export class SubFormControlPlugin extends BasePlugin {
type: 'dialog',
body: {
type: 'form',
className: 'h-full pl-4 pr-4',
...rest
}
};
@ -174,10 +176,29 @@ export class SubFormControlPlugin extends BasePlugin {
value: schema,
memberImmutable: ['body'],
onChange: newValue => {
const form = newValue.body[0];
const {
title,
actions,
name,
size,
closeOnEsc,
showCloseButton,
bodyClassName,
body
} = newValue;
newValue = {
...value,
form
form: {
title,
actions,
name,
size,
closeOnEsc,
showCloseButton,
bodyClassName,
...body[0]
}
};
// delete newValue.form.body;
delete newValue.form.type;

3
packages/amis-editor/src/plugin/Form/InputTable.tsx
View File

@ -28,7 +28,8 @@ export class TableControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-table';
pluginIcon = 'table-plugin';
description = `可以用来展现数据的,可以用来展示数组类型的数据，比如 <code>multiple</code> 的子 <code>form</code>`;
description =
'可以用来展现数据的,可以用来展示数组类型的数据，比如 multiple 的子 form';
docLink = '/amis/zh-CN/components/form/input-table';
tags = ['表单项'];
scaffold = {

28
packages/amis-editor/src/plugin/Form/InputTag.tsx
View File

@ -9,10 +9,7 @@ import {
} from 'amis-editor-core';
import {formItemControl} from '../../component/BaseControl';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
export class TagControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -26,7 +23,7 @@ export class TagControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-tag';
pluginIcon = 'input-tag-plugin';
description = `配置<code>options</code>可以实现选择选项`;
description = '配置 options 可以实现选择选项';
docLink = '/amis/zh-CN/components/form/input-tag';
tags = ['表单项'];
scaffold = {
@ -79,6 +76,10 @@ export class TagControlPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '选中值'
},
'event.data.items': {
type: 'array',
title: '选项集合'
}
}
}
@ -95,6 +96,10 @@ export class TagControlPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '选中值'
},
'event.data.items': {
type: 'array',
title: '选项集合'
}
}
}
@ -144,15 +149,22 @@ export class TagControlPlugin extends BasePlugin {
}),
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('extractValue')
getSchemaTpl('extractValue'),
getSchemaTpl('autoFillApi', {
visibleOn:
'!this.autoFill || this.autoFill.scene && this.autoFill.action'
}),
getSchemaTpl('autoFill', {
visibleOn:
'!this.autoFill || !this.autoFill.scene && !this.autoFill.action'
})
]
},
option: {
body: [
getSchemaTpl('optionControlV2', {
description: '设置选项后，输入时会下拉这些选项供用户参考。'
}),
getSchemaTpl('autoFill')
})
]
},
status: {}

91
packages/amis-editor/src/plugin/Form/InputText.tsx
View File

@ -6,8 +6,7 @@ import {
SubRendererInfo,
BaseEventContext
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, setSchemaTpl} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
@ -208,21 +207,17 @@ export class TextControlPlugin extends BasePlugin {
form.changeValue('validationErrors', {...validationErrors});
}
}),
// getSchemaTpl('value'),
getSchemaTpl('valueFormula', {
rendererSchema: context?.schema
}),
getSchemaTpl('clearable'),
// getSchemaTpl('multiple',{
// visibleOn: `${isText} || ${isUrl}`
// }),
getSchemaTpl('showCounter', {
visibleOn: `${isText} || ${isPassword}`
}),
{
name: 'addOn',
label: tipedLabel('AddOn', '输入框左侧或右侧的附加挂件'),
type: 'ae-Switch-More',
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
title: 'AddOn',
@ -269,38 +264,62 @@ export class TextControlPlugin extends BasePlugin {
]
}
},
// {
// type: 'ae-Switch-More',
// mode: 'normal',
// label: tipedLabel(
// '自动补全',
// '根据输入内容，调用接口提供选项。当前输入值可用${term}变量'
// ),
// visibleOn: isText,
// formType: 'extend',
// defaultData: {
// autoComplete: {
// method: 'get',
// url: ''
// }
// },
// form: {
// body: [
// getSchemaTpl('apiControl', {
// name: 'autoComplete',
// label: '接口',
// description: '',
// visibleOn: 'data.autoComplete !== false',
// footer: []
// })
// ]
// }
// },
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
{
title: '选项',
visibleOn: `${isText} && (data.options || data.autoComplete || data.source)`,
body:[
getSchemaTpl('optionControlV2'),
getSchemaTpl('multiple',{
visibleOn: `${isText} || ${isUrl}`
}),
{
type: 'ae-Switch-More',
mode: 'normal',
label: tipedLabel(
'自动补全',
'根据输入内容，调用接口提供选项。当前输入值可用${term}变量'
),
visibleOn: isText,
formType: 'extend',
defaultData: {
autoComplete: {
method: 'get',
url: ''
}
},
form: {
body: [
getSchemaTpl('apiControl', {
name: 'autoComplete',
label: '接口',
description: '',
visibleOn: 'data.autoComplete !== false'
}),
{
label: tipedLabel(
'显示字段',
'选项文本对应的数据字段，多字段合并请通过模板配置'
),
type: 'input-text',
name: 'labelField',
placeholder: '选项文本对应的字段',
},
{
label: '值字段',
type: 'input-text',
name: 'valueField',
placeholder: '值对应的字段'
}
]
}
},
]
},
getSchemaTpl('status', {

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

@ -11,7 +11,7 @@ export class TimeControlPlugin extends DateControlPlugin {
isBaseComponent = true;
icon = 'fa fa-clock-o';
pluginIcon = 'input-time-plugin';
description = `时分秒输入`;
description = '时分秒输入';
docLink = '/amis/zh-CN/components/form/input-time';
tags = ['表单项'];
scaffold = {

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

@ -7,6 +7,8 @@ import {
getArgsWrapper,
getEventControlConfig
} from '../../renderer/event-control/helper';
import {tipedLabel} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
export class TreeControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -18,7 +20,8 @@ export class TreeControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-list-alt';
pluginIcon = 'input-tree-plugin';
description = `树型结构来选择，可通过<code>options</code>来配置选项，也可通过<code>source</code>拉取选项`;
description =
'树型结构来选择，可通过 options 来配置选项，也可通过 source 拉取选项';
docLink = '/amis/zh-CN/components/form/input-tree';
tags = ['表单项'];
scaffold = {
@ -91,7 +94,7 @@ export class TreeControlPlugin extends BasePlugin {
type: 'object',
title: '新增的节点信息'
},
'event.data.options': {
'event.data.items': {
type: 'array',
title: '选项集合'
}
@ -111,7 +114,7 @@ export class TreeControlPlugin extends BasePlugin {
type: 'object',
title: '编辑的节点信息'
},
'event.data.options': {
'event.data.items': {
type: 'array',
title: '选项集合'
}
@ -131,7 +134,7 @@ export class TreeControlPlugin extends BasePlugin {
type: 'object',
title: '删除的节点信息'
},
'event.data.options': {
'event.data.items': {
type: 'array',
title: '选项集合'
}
@ -250,85 +253,194 @@ export class TreeControlPlugin extends BasePlugin {
]
}
};
panelBodyCreator = (context: BaseEventContext) =>
getSchemaTpl('tabs', [
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const renderer: any = context.info.renderer;
return getSchemaTpl('tabs', [
{
title: '常规',
body: [
/*
getSchemaTpl('switchDefaultValue'),
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
type: 'input-text',
name: 'value',
label: '默认值',
visibleOn: 'typeof this.value !== "undefined"'
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('multiple', {
body: [
{
type: 'input-number',
label: tipedLabel('节点最小数', '表单校验最少选中的节点数'),
name: 'minLength'
},
{
type: 'input-number',
label: tipedLabel('节点最大数', '表单校验最多选中的节点数'),
name: 'maxLength'
}
]
}),
getSchemaTpl('switch', {
label: tipedLabel(
'子节点自动选',
'当选中父节点时级联选择子节点'
),
name: 'autoCheckChildren',
hiddenOn: '!data.multiple',
value: true
}),
getSchemaTpl('switch', {
label: tipedLabel(
'子节点可反选',
'子节点可反选，值包含父子节点'
),
name: 'cascade',
hiddenOn: '!data.multiple || !data.autoCheckChildren'
}),
getSchemaTpl('switch', {
label: tipedLabel(
'值包含父节点',
'选中父节点时，值里面将包含父子节点的值，否则只会保留父节点的值'
),
name: 'withChildren',
hiddenOn:
'!data.multiple || !data.autoCheckChildren && data.cascade'
}),
getSchemaTpl('switch', {
label: tipedLabel(
'值只含子节点',
'ui 行为级联选中子节点，子节点可反选，值只包含子节点的值'
),
name: 'onlyChildren',
hiddenOn: '!data.multiple || !data.autoCheckChildren'
}),
getSchemaTpl('valueFormula', {
rendererSchema: {
...context?.schema,
type: 'tree-select'
},
visibleOn: 'this.options && this.options.length > 0'
}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
]
},
*/
getSchemaTpl('valueFormula', {
rendererSchema: {
...context?.schema,
type: 'tree-select' // 改用树形输入框，避免占用太多空间
},
mode: 'vertical' // 改成上下展示模式
}),
getSchemaTpl('fieldSet', {
{
title: '选项',
body: [
{
$ref: 'options',
name: 'options'
},
getSchemaTpl('source', {
sampleBuilder: (schema: any) =>
JSON.stringify(
getSchemaTpl('treeOptionControl', {
label: '数据',
showIconField: true
}),
getSchemaTpl('switch', {
label: '只可选择叶子节点',
name: 'onlyLeaf'
}),
getSchemaTpl('creatable', {
formType: 'extend',
hiddenOnDefault: true,
label: '可新增',
form: {
body: [
getSchemaTpl('switch', {
label: '顶层可新增',
value: true,
name: 'rootCreatable'
}),
{
status: 0,
msg: '',
data: {
options: [
{
label: '选项A',
value: 'a',
children: [
{
label: '子选项',
value: 'c'
}
]
},
{
label: '选项B',
value: 'b'
}
]
}
type: 'input-text',
label: '顶层文案',
value: '添加一级节点',
name: 'rootCreateTip',
hiddenOn: '!data.rootCreatable'
},
null,
2
)
getSchemaTpl('addApi')
]
}
}),
getSchemaTpl('switch', {
label: '隐藏顶级',
name: 'hideRoot'
getSchemaTpl('editable', {
formType: 'extend',
hiddenOnDefault: true,
form: {
body: [getSchemaTpl('editApi')]
}
}),
getSchemaTpl('removable', {
formType: 'extend',
hiddenOnDefault: true,
form: {
body: [getSchemaTpl('deleteApi')]
}
})
]
},
{
title: '高级',
body: [
getSchemaTpl('valueFormula', {
name: 'highlightTxt',
label: '高亮节点字符',
type: 'input-text'
}),
{
type: 'ae-Switch-More',
mode: 'normal',
name: 'enableNodePath',
label: tipedLabel(
'选项值包含父节点',
'开启后对应节点值会包含父节点'
),
value: false,
formType: 'extend',
form: {
body: [
{
type: 'input-text',
label: '路径分隔符',
value: '/',
name: 'pathSeparator'
}
]
}
},
{
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',
label: '是否显示图标',
pipeIn: defaultValue(true)
value: true
}),
getSchemaTpl('multiple'),
getSchemaTpl('switch', {
name: 'cascade',
label: '不自动选中子节点',
visibleOn: 'data.multiple',
description: '选中父级时，孩子节点是否自动选中'
label: tipedLabel(
'显示节点勾选框',
'单选情况下，也可显示树节点勾选框'
),
name: 'showRadio',
hiddenOn: 'data.multiple'
}),
getSchemaTpl('switch', {
name: 'withChildren',
label: '数值是否携带子节点',
@ -342,38 +454,52 @@ export class TreeControlPlugin extends BasePlugin {
visibleOn: 'data.cascade !== true && data.multiple',
disabledOn: 'data.withChildren'
}),
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('extractValue'),
getSchemaTpl('autoFill')
{
type: 'ae-Switch-More',
mode: 'normal',
name: 'initiallyOpen',
label: tipedLabel(
'自定义展开层级',
'默认展开所有节点层级，开启后可自定义展开层级数'
),
value: true,
trueValue: false,
falseValue: true,
formType: 'extend',
form: {
body: [
{
type: 'input-number',
label: '设置层级',
name: 'unfoldedLevel',
value: 1,
hiddenOn: 'data.initiallyOpen'
}
]
}
}
]
})
]
},
getSchemaTpl('status', {
isFormItem: true,
readonly: true
}),
getSchemaTpl('validation', {tag: ValidatorTag.Tree})
])
},
{
title: '外观',
body: [
{
label: '顶级文字',
name: 'rootLabel',
type: 'input-text',
pipeIn: defaultValue('顶级'),
visibleOn: 'data.hideRoot !== true'
},
getSchemaTpl('switch', {
name: 'showIcon',
label: '是否显示图标',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
label: '是否显示单选按钮',
name: 'showRadio',
visibleOn: '!data.multiple'
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {renderer}),
getSchemaTpl('style:classNames', {
schema: [
getSchemaTpl('className', {
label: '外层容器',
name: 'treeContainerClassName'
})
]
})
]
])
},
{
title: '事件',
@ -386,6 +512,7 @@ export class TreeControlPlugin extends BasePlugin {
]
}
]);
};
}
registerEditorPlugin(TreeControlPlugin);

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

@ -12,7 +12,7 @@ export class YearControlPlugin extends DateControlPlugin {
isBaseComponent = true;
icon = 'fa fa-calendar';
pluginIcon = 'input-year-plugin';
description = `年选择`;
description = '年选择';
docLink = '/amis/zh-CN/components/form/input-year';
tags = ['表单项'];
// @ts-ignore

50
packages/amis-editor/src/plugin/Form/Item.tsx
View File

@ -15,6 +15,7 @@ import {
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import find from 'lodash/find';
import {JSONDelete, JSONPipeIn, JSONUpdate} from 'amis-editor-core';
import {SUPPORT_STATIC_FORMITEM_CMPTS} from '../../renderer/event-control/helper';
export class ItemPlugin extends BasePlugin {
// panelTitle = '表单项通配';
@ -48,16 +49,16 @@ export class ItemPlugin extends BasePlugin {
render: this.manager.makeSchemaFormRender({
body: this.panelBodyCreator(context),
panelById: store.activeId,
formKey: 'form-item',
formKey: 'form-item'
}),
order: -200
});
}
}
panelBodyCreator = (context: BaseEventContext) => {
const ignoreName = ~['button', 'submit', 'reset'].indexOf(
context.schema.type
);
const type = context.schema.type || '';
const supportStatic = SUPPORT_STATIC_FORMITEM_CMPTS.includes(type);
const ignoreName = ~['button', 'submit', 'reset'].indexOf(type);
const notRequiredName = ~[
'button-toobar',
'container',
@ -72,7 +73,7 @@ export class ItemPlugin extends BasePlugin {
'table',
'elevator',
'static'
].indexOf(context.schema.type);
].indexOf(type);
const hasReadOnly = ~[
'switch',
'wizard',
@ -81,10 +82,9 @@ export class ItemPlugin extends BasePlugin {
'input-rating',
'input-text',
'textarea'
].indexOf(context.schema.type);
].indexOf(type);
/** 不支持配置校验属性的组件 */
const ignoreValidator = !!~['input-group'].indexOf(context.schema.type);
const autoFillApi = context.schema.autoFillApi;
const ignoreValidator = !!~['input-group'].indexOf(type);
const renderer: any = context.info.renderer;
return [
getSchemaTpl('tabs', [
@ -106,15 +106,24 @@ export class ItemPlugin extends BasePlugin {
getSchemaTpl('switch', {
name: 'disabled',
label: '禁用',
mode: 'inline',
className: 'w-full'
mode: 'horizontal',
horizontal: {
justify: true,
left: 8
},
inputClassName: 'is-inline '
}),
ignoreValidator ? null : getSchemaTpl('required'),
getSchemaTpl('description'),
getSchemaTpl('placeholder'),
getSchemaTpl('remark'),
renderer.renderLabel !== false ? getSchemaTpl('labelRemark') : null,
autoFillApi ? getSchemaTpl('autoFillApi') : null
getSchemaTpl('remark', {
mode: 'row'
}),
renderer.renderLabel !== false
? getSchemaTpl('labelRemark', {
mode: 'row'
})
: null
]
},
@ -147,7 +156,15 @@ export class ItemPlugin extends BasePlugin {
label: '描述 CSS 类名',
name: 'descriptionClassName',
visibleOn: 'this.description'
})
}),
...(!supportStatic
? []
: [
getSchemaTpl('className', {
label: '静态 CSS 类名',
name: 'staticClassName'
})
])
]
},
@ -157,11 +174,10 @@ export class ItemPlugin extends BasePlugin {
// TODO: 有些表单项没有 disabled
getSchemaTpl('disabled'),
getSchemaTpl('visible'),
supportStatic ? getSchemaTpl('static') : null,
getSchemaTpl('switch', {
name: 'clearValueOnHidden',
label: '隐藏时删除表单项值',
disabledOn: 'typeof this.visible === "boolean"'
label: '隐藏时删除表单项值'
})
]
},

9
packages/amis-editor/src/plugin/Form/ListSelect.tsx
View File

@ -3,10 +3,7 @@ import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {formItemControl} from '../../component/BaseControl';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
export class ListControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -20,7 +17,8 @@ export class ListControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-ellipsis-h';
pluginIcon = 'list-select-plugin';
description = `单选或者多选，支持<code>source</code>拉取选项，选项可配置图片，也可以自定义<code>HTML</code>配置`;
description =
'单选或者多选，支持 source 拉取选项，选项可配置图片，也可以自定义 HTML 配置';
docLink = '/amis/zh-CN/components/form/list-select';
tags = ['表单项'];
scaffold = {
@ -111,6 +109,7 @@ export class ListControlPlugin extends BasePlugin {
}),
getSchemaTpl('label'),
getSchemaTpl('multiple'),
getSchemaTpl('extractValue'),
getSchemaTpl('valueFormula', {
rendererSchema: context?.schema,
useSelectMode: true, // 改用 Select 设置模式

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

@ -12,7 +12,7 @@ export class LocationControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-location-arrow';
pluginIcon = 'location-picker-plugin';
description = `地理位置选择`;
description = '地理位置选择';
docLink = '/amis/zh-CN/components/form/location-picker';
tags = ['表单项'];
scaffold = {

30
packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx
View File

@ -5,15 +5,12 @@ import {
BasicSubRenderInfo,
RendererEventContext,
SubRendererInfo,
BaseEventContext
BaseEventContext,
tipedLabel
} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
export class MatrixControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -25,7 +22,7 @@ export class MatrixControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-th-large';
pluginIcon = 'matrix-checkboxes-plugin';
description = `可配置行单选，列单选，以及全部选项只能单选或者全部选项多选`;
description = '可配置行单选，列单选，以及全部选项只能单选或者全部选项多选';
docLink = '/amis/zh-CN/components/form/matrix-checkboxes';
tags = ['表单项'];
scaffold = {
@ -151,15 +148,17 @@ export class MatrixControlPlugin extends BasePlugin {
}
],
pipeIn: defaultValue('column')
}
},
getSchemaTpl('autoFillApi')
]
},
{
title: '选项',
body: [
[
{
getSchemaTpl('combo-container', {
label: '列配置',
mode: 'normal',
name: 'columns',
type: 'combo',
multiple: true,
@ -174,16 +173,17 @@ export class MatrixControlPlugin extends BasePlugin {
placeholder: '列说明'
}
]
},
}),
{
name: 'rowLabel',
label: '行标题文字',
type: 'input-text'
},
{
getSchemaTpl('combo-container', {
label: '行配置',
name: 'rows',
type: 'combo',
mode: 'normal',
multiple: true,
scaffold: {
label: '行说明'
@ -196,16 +196,12 @@ export class MatrixControlPlugin extends BasePlugin {
placeholder: '行说明'
}
]
}
})
],
getSchemaTpl('apiControl', {
label: tipedLabel('接口', '获取矩阵数据接口'),
name: 'source',
mode: 'horizontal',
horizontal: {
left: 4,
justify: true
}
mode: 'normal'
})
// getSchemaTpl('value')
]

18
packages/amis-editor/src/plugin/Form/NestedSelect.tsx
View File

@ -1,8 +1,5 @@
import {relativeValueRe} from 'amis';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {availableLanguages} from 'amis/lib/renderers/Form/Editor';
import {defaultValue, getSchemaTpl, valuePipeOut} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
@ -11,9 +8,9 @@ import {
BasicSubRenderInfo,
RendererEventContext,
SubRendererInfo,
BaseEventContext
BaseEventContext,
tipedLabel
} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
@ -27,7 +24,7 @@ export class NestedSelectControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-indent';
pluginIcon = 'nested-select-plugin';
description = `适用于选项中含有子项，可通过<code>source</code>拉取选项，支持多选`;
description = '适用于选项中含有子项，可通过 source 拉取选项，支持多选';
docLink = '/amis/zh-CN/components/form/nestedselect';
tags = ['表单项'];
scaffold = {
@ -302,14 +299,13 @@ export class NestedSelectControlPlugin extends BasePlugin {
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
{
title: '选项',
body: [
getSchemaTpl('treeOptionControl')
]
body: [getSchemaTpl('treeOptionControl')]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {

192
packages/amis-editor/src/plugin/Form/Picker.tsx
View File

@ -1,7 +1,11 @@
import React from 'react';
import {Button} from 'amis';
import omit from 'lodash/omit';
import {getSchemaTpl} from 'amis-editor-core';
import {
getSchemaTpl,
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {
BaseEventContext,
@ -11,6 +15,7 @@ import {
ContextMenuItem
} from 'amis-editor-core';
import {diff} from 'amis-editor-core';
import {getEventControlConfig} from '../../renderer/event-control/helper';
export class PickerControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -22,7 +27,8 @@ export class PickerControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-window-restore';
pluginIcon = 'picker-plugin';
description = `通过<code>pickerSchema</code>配置可供选取的数据源进行选择需要的数据，支持多选`;
description =
'通过 pickerSchema 配置可供选取的数据源进行选择需要的数据，支持多选';
docLink = '/amis/zh-CN/components/form/picker';
tags = ['表单项'];
scaffold = {
@ -53,82 +59,144 @@ export class PickerControlPlugin extends BasePlugin {
]
};
// 事件定义
events: RendererPluginEvent[] = [
{
eventName: 'change',
eventLabel: '值变化',
description: '选中状态变化时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '选中值'
},
'event.data.selectedItems': {
type: 'string',
title: '选中的行数据'
}
}
}
]
},
{
eventName: 'itemclick',
eventLabel: '点击选项',
description: '选项被点击时触发',
dataSchema: [
{
type: 'object',
properties: {
'event.data.item': {
type: 'object',
title: '所点击的选项'
}
}
}
]
}
];
panelTitle = '列表选取';
panelBodyCreator = (context: BaseEventContext) => {
return [
getSchemaTpl('switch', {
name: 'embed',
label: '开启内嵌模式'
}),
getSchemaTpl('switchDefaultValue'),
return getSchemaTpl('tabs', [
{
type: 'input-text',
name: 'value',
label: '默认值',
visibleOn: 'typeof this.value !== "undefined"'
},
getSchemaTpl('fieldSet', {
title: '选项',
title: '属性',
body: [
getSchemaTpl('options'),
getSchemaTpl('api', {
name: 'source',
label: '获取选项接口'
getSchemaTpl('switch', {
name: 'embed',
label: '开启内嵌模式'
}),
{
children: (
<Button
size="sm"
level="danger"
className="m-b"
onClick={this.editDetail.bind(this, context.id)}
block
>
配置选框详情
</Button>
)
},
getSchemaTpl('switchDefaultValue'),
{
label: 'labelTpl',
type: 'textarea',
name: 'labelTpl',
labelRemark: '已选定数据的展示样式',
description:
'支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
type: 'input-text',
name: 'value',
label: '默认值',
visibleOn: 'typeof this.value !== "undefined"'
},
{
type: 'button-group-select',
name: 'modalMode',
label: '选框类型',
value: 'dialog',
size: 'xs',
options: [
getSchemaTpl('fieldSet', {
title: '选项',
body: [
getSchemaTpl('options'),
getSchemaTpl('api', {
name: 'source',
label: '获取选项接口'
}),
{
label: '弹框',
value: 'dialog'
children: (
<Button
size="sm"
level="danger"
className="m-b"
onClick={this.editDetail.bind(this, context.id)}
block
>
配置选框详情
</Button>
)
},
{
label: '抽出式弹框',
value: 'drawer'
}
]
},
label: 'labelTpl',
type: 'textarea',
name: 'labelTpl',
labelRemark: '已选定数据的展示样式',
description:
'支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>'
},
getSchemaTpl('multiple'),
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('extractValue'),
getSchemaTpl('autoFill')
{
type: 'button-group-select',
name: 'modalMode',
label: '选框类型',
value: 'dialog',
size: 'xs',
options: [
{
label: '弹框',
value: 'dialog'
},
{
label: '抽出式弹框',
value: 'drawer'
}
]
},
getSchemaTpl('multiple'),
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('extractValue'),
getSchemaTpl('autoFillApi', {
visibleOn:
'!this.autoFill || this.autoFill.scene && this.autoFill.action'
}),
getSchemaTpl('autoFill', {
visibleOn:
'!this.autoFill || !this.autoFill.scene && !this.autoFill.action'
})
]
})
]
})
];
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
]);
};
buildEditorToolbar(

18
packages/amis-editor/src/plugin/Form/Radios.tsx
View File

@ -4,10 +4,7 @@ import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
export class RadiosControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -21,7 +18,7 @@ export class RadiosControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-dot-circle-o';
pluginIcon = 'radios-plugin';
description = `通过<code>options</code>配置选项，可通过<code>source</code>拉取选项`;
description = '通过 options 配置选项，可通过 source 拉取选项';
docLink = '/amis/zh-CN/components/form/radios';
tags = ['表单项'];
scaffold = {
@ -70,6 +67,10 @@ export class RadiosControlPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '选中值'
},
'event.data.items': {
type: 'array',
title: '选项集合'
}
}
}
@ -122,7 +123,8 @@ export class RadiosControlPlugin extends BasePlugin {
}),
// getSchemaTpl('autoFill')
getSchemaTpl('labelRemark'),
getSchemaTpl('remark')
getSchemaTpl('remark'),
getSchemaTpl('autoFillApi')
]
},
{
@ -138,9 +140,7 @@ export class RadiosControlPlugin extends BasePlugin {
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {
tag: ValidatorTag.All
})
getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect})
])
},
{

55
packages/amis-editor/src/plugin/Form/Select.tsx
View File

@ -1,15 +1,11 @@
import {getSchemaTpl} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import isArray from 'lodash/isArray';
import {tipedLabel} from '../../component/BaseControl';
import {tipedLabel} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
export class SelectControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -23,7 +19,7 @@ export class SelectControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-th-list';
pluginIcon = 'select-plugin';
description = `支持多选，输入提示，可使用<code>source</code>获取选项`;
description = '支持多选，输入提示，可使用 source 获取选项';
docLink = '/amis/zh-CN/components/form/select';
tags = ['表单项'];
scaffold = {
@ -71,6 +67,10 @@ export class SelectControlPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '选中值'
},
'event.data.items': {
type: 'array',
title: '选项集合'
}
}
}
@ -87,6 +87,10 @@ export class SelectControlPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '选中值'
},
'event.data.items': {
type: 'array',
title: '选项集合'
}
}
}
@ -103,6 +107,10 @@ export class SelectControlPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '选中值'
},
'event.data.items': {
type: 'array',
title: '选项集合'
}
}
}
@ -120,7 +128,7 @@ export class SelectControlPlugin extends BasePlugin {
type: 'object',
title: '新增的选项'
},
'event.data.options': {
'event.data.items': {
type: 'array',
title: '选项集合'
}
@ -140,7 +148,7 @@ export class SelectControlPlugin extends BasePlugin {
type: 'object',
title: '编辑的选项'
},
'event.data.options': {
'event.data.items': {
type: 'array',
title: '选项集合'
}
@ -160,7 +168,7 @@ export class SelectControlPlugin extends BasePlugin {
type: 'object',
title: '删除的选项'
},
'event.data.options': {
'event.data.items': {
type: 'array',
title: '选项集合'
}
@ -210,17 +218,24 @@ export class SelectControlPlugin extends BasePlugin {
getSchemaTpl('clearable'),
getSchemaTpl('searchable'),
getSchemaTpl('multiple', {
popMore: [
body: [
getSchemaTpl('switch', {
label: '单行显示选中值',
name: 'valuesNoWrap'
})
}),
{
type: 'input-number',
name: 'maxTagCount',
label: tipedLabel(
'标签展示数',
'标签的最大展示数量，超出数量后以收纳浮层的方式展示，默认全展示'
)
}
]
}),
getSchemaTpl('checkAll'),
getSchemaTpl('valueFormula', {
rendererSchema: context?.schema,
visibleOn: 'this.options && this.options.length > 0'
rendererSchema: context?.schema
}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
@ -280,6 +295,18 @@ export class SelectControlPlugin extends BasePlugin {
})
]
},
{
title: '高级',
body: [
getSchemaTpl('switch', {
label: tipedLabel(
'选项值检查',
'开启后，当选项值未匹配到当前options中的选项时，选项文本飘红'
),
name: 'showInvalidMatch'
})
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect})
])

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

@ -18,7 +18,7 @@ export class StaticControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-info';
pluginIcon = 'static-plugin';
description = `纯用来展示数据，可用来展示<code>json、date、image、progress</code>等数据`;
description = '纯用来展示数据，可用来展示 json、date、image、progress 等数据';
docLink = '/amis/zh-CN/components/form/static';
tags = ['表单项'];
scaffold = {
@ -58,13 +58,14 @@ export class StaticControlPlugin extends BasePlugin {
getSchemaTpl('label'),
// getSchemaTpl('value'),
getSchemaTpl('valueFormula', {
rendererSchema: {
...context?.schema,
type: 'textarea', // 改用多行文本编辑
value: context?.schema.tpl, // 避免默认值丢失
},
mode: 'vertical', // 改成上下展示模式
name: 'tpl'
// TODO: 因为 formulaControl 未适配 static 这类特殊组件，暂不传递 rendererSchema属性，让其内部先使用 InputBox
// 待后续 formulaControl 优化之后再重新调整适配
// rendererSchema: {
// ...context?.schema,
// type: 'textarea', // 改用多行文本编辑
// value: context?.schema.tpl // 避免默认值丢失
// },
mode: 'vertical' // 改成上下展示模式
}),
getSchemaTpl('switch', {
name: 'quickEdit',
@ -95,8 +96,13 @@ export class StaticControlPlugin extends BasePlugin {
name: 'quickEdit.saveImmediately',
label: '立即保存',
visibleOn: 'data.quickEdit',
description: '开启后修改即提交，而不是标记修改批量提交。',
descriptionClassName: 'help-block m-b-none',
labelRemark: {
className: 'm-l-xs',
trigger: 'click',
rootClose: true,
placement: 'left',
content: '开启后修改即提交，而不是标记修改批量提交。'
},
pipeIn: (value: any) => !!value
}),
getSchemaTpl('apiControl', {
@ -291,7 +297,8 @@ export class StaticControlPlugin extends BasePlugin {
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
/*{
children: (
<Button

20
packages/amis-editor/src/plugin/Form/Switch.tsx
View File

@ -1,13 +1,9 @@
import {getSchemaTpl, valuePipeOut} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {registerEditorPlugin, tipedLabel} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import type {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import type {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
export class SwitchControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -21,12 +17,13 @@ export class SwitchControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-toggle-on';
pluginIcon = 'switch-plugin';
description = `开关控件`;
description = '开关控件';
docLink = '/amis/zh-CN/components/form/switch';
tags = ['表单项'];
scaffold = {
type: 'switch',
option: '开关',
label: '开关',
option: '说明',
name: 'switch',
falseValue: false,
trueValue: true
@ -97,7 +94,7 @@ export class SwitchControlPlugin extends BasePlugin {
},
{
type: 'ae-Switch-More',
type: 'ae-switch-more',
bulk: true,
mode: 'normal',
label: '填充文本',
@ -120,7 +117,7 @@ export class SwitchControlPlugin extends BasePlugin {
},
{
type: 'ae-Switch-More',
type: 'ae-switch-more',
bulk: true,
mode: 'normal',
label: tipedLabel(
@ -199,7 +196,8 @@ export class SwitchControlPlugin extends BasePlugin {
}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {isFormItem: true}),

142
packages/amis-editor/src/plugin/Form/TabsTransfer.tsx
View File

@ -3,10 +3,7 @@ import {getSchemaTpl} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {getEventControlConfig} from '../../renderer/event-control/helper';
export class TabsTransferPlugin extends BasePlugin {
@ -19,7 +16,7 @@ export class TabsTransferPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-th-list';
pluginIcon = 'tabs-transfer-plugin';
description = `组合穿梭器组件`;
description = '组合穿梭器组件';
docLink = '/amis/zh-CN/components/form/transfer';
tags = ['表单项'];
scaffold = {
@ -147,22 +144,10 @@ export class TabsTransferPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '选中值'
}
}
}
]
},
{
eventName: 'selectAll',
eventLabel: '全选',
description: '选中所有选项',
dataSchema: [
{
type: 'object',
properties: {
'event.data.value': {
type: 'string',
title: '选中值'
},
'event.data.items': {
type: 'array',
title: '选项集合'
}
}
}
@ -218,6 +203,10 @@ export class TabsTransferPlugin extends BasePlugin {
}
];
notRenderFormZone = true;
panelJustify = true;
panelDefinitions = {
options: {
label: '选项 Options',
@ -269,65 +258,64 @@ export class TabsTransferPlugin extends BasePlugin {
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('switchDefaultValue'),
{
type: 'select',
name: 'value',
label: '默认值',
source: '${options}',
multiple: true,
visibleOn: 'typeof this.value !== "undefined"'
},
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('searchable'),
getSchemaTpl('searchable'),
getSchemaTpl('api', {
label: '检索接口',
name: 'searchApi'
}),
getSchemaTpl('api', {
label: '检索接口',
name: 'searchApi'
}),
{
label: '查询时勾选展示模式',
name: 'searchResultMode',
type: 'select',
mode: 'inline',
className: 'w-full',
options: [
{
label: '列表形式',
value: 'list'
label: '查询时勾选展示模式',
name: 'searchResultMode',
type: 'select',
mode: 'normal',
options: [
{
label: '列表形式',
value: 'list'
},
{
label: '表格形式',
value: 'table'
},
{
label: '树形选择形式',
value: 'tree'
},
{
label: '级联选择形式',
value: 'chained'
}
]
},
{
label: '表格形式',
value: 'table'
},
{
label: '树形选择形式',
value: 'tree'
},
{
label: '级联选择形式',
value: 'chained'
}
getSchemaTpl('sortable'),
getSchemaTpl('formulaControl', {
label: '左侧选项标题',
name: 'selectTitle',
type: 'input-text',
inputClassName: 'is-inline '
}),
getSchemaTpl('formulaControl', {
label: '右侧结果标题',
name: 'resultTitle',
type: 'input-text',
inputClassName: 'is-inline '
})
]
},
getSchemaTpl('sortable'),
{
label: '左侧的标题文字',
name: 'selectTitle',
type: 'input-text'
},
{
label: '右侧结果的标题文字',
name: 'resultTitle',
type: 'input-text'
},
getSchemaTpl('fieldSet', {
title: '选项',
body: [
{
@ -338,9 +326,17 @@ export class TabsTransferPlugin extends BasePlugin {
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('extractValue'),
getSchemaTpl('autoFill')
getSchemaTpl('autoFillApi', {
visibleOn:
'!this.autoFill || this.autoFill.scene && this.autoFill.action'
}),
getSchemaTpl('autoFill', {
visibleOn:
'!this.autoFill || !this.autoFill.scene && !this.autoFill.action'
})
]
})
},
getSchemaTpl('status', {isFormItem: true})
])
},
{

13
packages/amis-editor/src/plugin/Form/Textarea.tsx
View File

@ -1,15 +1,11 @@
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin} from 'amis-editor-core';
import {BasePlugin, tipedLabel} from 'amis-editor-core';
import type {BaseEventContext} from 'amis-editor-core';
import {tipedLabel} from '../../component/BaseControl';
import {ValidatorTag} from '../../validator';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
export class TextareaControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -22,7 +18,7 @@ export class TextareaControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-paragraph';
pluginIcon = 'textarea-plugin';
description = `支持换行输入`;
description = '支持换行输入';
docLink = '/amis/zh-CN/components/form/textarea';
tags = ['表单项'];
scaffold = {
@ -142,7 +138,8 @@ export class TextareaControlPlugin extends BasePlugin {
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
getSchemaTpl('description'),
getSchemaTpl('autoFillApi')
]
},
getSchemaTpl('status', {

462
packages/amis-editor/src/plugin/Form/Transfer.tsx
View File

@ -2,10 +2,10 @@ import {getSchemaTpl} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {ValidatorTag} from '../../validator';
import {tipedLabel} from 'amis-editor-core';
export class TransferPlugin extends BasePlugin {
// 关联渲染器名字
@ -17,7 +17,7 @@ export class TransferPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-th-list';
pluginIcon = 'transfer-plugin';
description = `穿梭器组件`;
description = '穿梭器组件';
docLink = '/amis/zh-CN/components/form/transfer';
tags = ['表单项'];
scaffold = {
@ -26,45 +26,16 @@ export class TransferPlugin extends BasePlugin {
name: 'transfer',
options: [
{
label: '法师',
children: [
{
label: '诸葛亮',
value: 'zhugeliang'
}
]
label: '诸葛亮',
value: 'zhugeliang'
},
{
label: '战士',
children: [
{
label: '曹操',
value: 'caocao'
},
{
label: '钟无艳',
value: 'zhongwuyan'
}
]
},
{
label: '打野',
children: [
{
label: '李白',
value: 'libai'
},
{
label: '韩信',
value: 'hanxin'
},
{
label: '云中君',
value: 'yunzhongjun'
}
]
label: '曹操',
value: 'caocao'
}
]
],
selectMode: 'list',
resultListModeFollowSelect: false
};
previewSchema: any = {
type: 'form',
@ -92,6 +63,10 @@ export class TransferPlugin extends BasePlugin {
'event.data.value': {
type: 'string',
title: '选中值'
},
'event.data.items': {
type: 'array',
title: '选项集合'
}
}
}
@ -105,9 +80,9 @@ export class TransferPlugin extends BasePlugin {
{
type: 'object',
properties: {
'event.data': {
'event.data.items': {
type: 'array',
title: '选中值'
title: '选项集合'
}
}
}
@ -181,7 +156,9 @@ export class TransferPlugin extends BasePlugin {
}
};
// notRenderFormZone = true;
notRenderFormZone = true;
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const renderer: any = context.info.renderer;
@ -190,231 +167,194 @@ export class TransferPlugin extends BasePlugin {
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('switchDefaultValue'),
{
type: 'select',
name: 'value',
label: '默认值',
source: '${options}',
visibleOn: '!data.multiple && typeof this.value !== "undefined"'
},
{
type: 'select',
name: 'value',
label: '默认值',
source: '${options}',
multiple: true,
visibleOn: ' data.multiple && typeof this.value !== "undefined"'
},
{
label: '勾选展示模式',
name: 'selectMode',
type: 'select',
mode: 'inline',
className: 'w-full',
options: [
{
label: '列表形式',
value: 'list'
},
{
label: '表格形式',
value: 'table'
},
{
label: '树形选择形式',
value: 'tree'
},
{
label: '级联选择形式',
value: 'chained'
},
{
label: '关联选择形式',
value: 'associated'
}
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('valueFormula', {
rendererSchema: {
...context?.schema,
type: 'select',
multiple: true
},
visibleOn: 'data.options.length > 0'
}),
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('description'),
getSchemaTpl('switch', {
label: '统计数据',
name: 'statistics'
})
]
},
{
name: 'columns',
type: 'combo',
multiple: true,
label: false,
strictMode: false,
addButtonText: '新增一列',
draggable: false,
visibleOn: 'data.selectMode === "table"',
items: [
{
type: 'input-text',
name: 'label',
placeholder: '标题'
},
{
type: 'input-text',
name: 'name',
placeholder: '绑定字段名'
},
{
type: 'select',
name: 'type',
placeholder: '类型',
value: 'input-text',
options: [
{
value: 'text',
label: '纯文本'
},
{
value: 'tpl',
label: '模板'
},
{
value: 'image',
label: '图片'
},
{
value: 'date',
label: '日期'
},
{
value: 'progress',
label: '进度'
},
{
value: 'status',
label: '状态'
},
{
value: 'mapping',
label: '映射'
},
{
value: 'operation',
label: '操作栏'
}
]
}
]
},
{
$ref: 'options',
label: '左边的选项集',
name: 'leftOptions',
visibleOn: 'data.selectMode === "associated"'
},
{
label: '左侧选择形式',
name: 'leftMode',
type: 'select',
mode: 'inline',
className: 'w-full',
visibleOn: 'data.selectMode === "associated"',
options: [
{
label: '列表形式',
value: 'list'
},
{
label: '树形选择形式',
value: 'tree'
}
]
},
{
label: '右侧选择形式',
name: 'rightMode',
type: 'select',
mode: 'inline',
className: 'w-full',
visibleOn: 'data.selectMode === "associated"',
options: [
{
label: '列表形式',
value: 'list'
},
{
label: '树形选择形式',
value: 'tree'
}
]
},
getSchemaTpl('searchable'),
getSchemaTpl('api', {
label: '检索接口',
name: 'searchApi'
}),
{
label: '查询时勾选展示模式',
name: 'searchResultMode',
type: 'select',
mode: 'inline',
className: 'w-full',
options: [
{
label: '列表形式',
value: 'list'
},
{
label: '表格形式',
value: 'table'
},
{
label: '树形选择形式',
value: 'tree'
},
{
label: '级联选择形式',
value: 'chained'
}
]
},
getSchemaTpl('sortable'),
getSchemaTpl('selectFirst'),
getSchemaTpl('switch', {
label: '是否显示统计数据',
name: 'statistics'
}),
{
label: '左侧的标题文字',
name: 'selectTitle',
type: 'input-text'
},
{
label: '右侧结果的标题文字',
name: 'resultTitle',
type: 'input-text'
},
getSchemaTpl('fieldSet', {
title: '选项',
title: '左侧选项面板',
body: [
{
$ref: 'options',
name: 'options'
label: '展示形式',
name: 'selectMode',
type: 'select',
options: [
{
label: '列表形式',
value: 'list'
},
{
label: '表格形式',
value: 'table'
},
{
label: '树形形式',
value: 'tree'
}
],
onChange: (value: any, origin: any, item: any, form: any) => {
form.setValues({
options: undefined,
columns: undefined,
value: '',
valueTpl: ''
});
// 主要解决直接设置value、valueTpl为undefined配置面板不生效问题，所以先设置''，后使用setTimout设置为undefined
setTimeout(() => {
form.setValues({
value: undefined,
valueTpl: undefined
});
}, 100);
}
},
getSchemaTpl('source'),
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('extractValue'),
getSchemaTpl('autoFill')
getSchemaTpl('optionControl', {
visibleOn: 'data.selectMode === "list"',
multiple: true
}),
{
type: 'ae-transferTableControl',
label: '数据',
visibleOn: 'data.selectMode === "table"',
mode: 'normal',
// 自定义change函数
onValueChange: (
type: 'options' | 'columns',
data: any,
onBulkChange: Function
) => {
if (type === 'options') {
onBulkChange(data);
} else if (type === 'columns') {
const columns = data.columns;
if (data.columns.length > 0) {
data.valueTpl = `\${${columns[0].name}}`;
}
onBulkChange(data);
}
}
},
getSchemaTpl('treeOptionControl', {
visibleOn: 'data.selectMode === "tree"'
}),
getSchemaTpl('switch', {
label: '可检索',
name: 'searchable'
}),
getSchemaTpl('menuTpl', {
label: tipedLabel(
'模板',
'左侧选项渲染模板，支持JSX，变量使用\\${xx}'
),
visibleOn: 'data.selectMode !== "table"'
}),
getSchemaTpl('formulaControl', {
label: '标题',
name: 'selectTitle',
type: 'input-text',
inputClassName: 'is-inline '
})
]
})
},
{
title: '右侧结果面板',
body: [
{
type: 'button-group-select',
label: '展示形式',
name: 'resultListModeFollowSelect',
inputClassName: 'items-center',
options: [
{label: '列表形式', value: false},
{label: '跟随左侧', value: true}
],
onChange: (value: any, origin: any, item: any, form: any) => {
form.setValueByName('sortable', !value ? true : undefined);
}
},
getSchemaTpl('switch', {
label: tipedLabel(
'可检索',
'查询功能目前只支持根据名称或值来模糊匹配查询'
),
name: 'resultSearchable'
}),
getSchemaTpl('sortable', {
label: '支持排序',
mode: 'horizontal',
horizontal: {
justify: true,
left: 8
},
inputClassName: 'is-inline',
visibleOn:
'data.selectMode === "list" && !data.resultListModeFollowSelect'
}),
getSchemaTpl('menuTpl', {
name: 'valueTpl',
label: tipedLabel(
'模板',
'结果选项渲染模板，支持JSX，变量使用\\${xx}'
),
visibleOn:
'!(data.selectMode === "table" && data.resultListModeFollowSelect)'
}),
getSchemaTpl('formulaControl', {
label: '标题',
name: 'resultTitle',
type: 'input-text',
inputClassName: 'is-inline '
})
]
},
getSchemaTpl('status', {isFormItem: true}),
getSchemaTpl('validation', {tag: ValidatorTag.MultiSelect})
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', renderer),
getSchemaTpl('style:classNames', [
getSchemaTpl('className', {
label: '描述',
name: 'descriptionClassName',
visibleOn: 'this.description'
}),
getSchemaTpl('className', {
name: 'addOn.className',
label: 'AddOn',
visibleOn: 'this.addOn && this.addOn.type === "text"'
})
])
])
},
{

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

@ -1,11 +1,10 @@
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {getEventControlConfig} from '../../renderer/event-control/helper';
import {ValidatorTag} from '../../validator';
import {tipedLabel} from 'amis-editor-core';
export class TreeSelectControlPlugin extends BasePlugin {
// 关联渲染器名字
@ -17,13 +16,14 @@ export class TreeSelectControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-chevron-down';
pluginIcon = 'tree-select-plugin';
description = `点击输入框，弹出树型选择框进行选择`;
description = '点击输入框，弹出树型选择框进行选择';
docLink = '/amis/zh-CN/components/form/treeselect';
tags = ['表单项'];
scaffold = {
type: 'tree-select',
label: '树下拉框',
name: 'tree-select',
clearable: false,
options: [
{
label: '选项A',
@ -90,7 +90,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
type: 'object',
title: '新增的选项信息'
},
'event.data.options': {
'event.data.items': {
type: 'array',
title: '选项集合'
}
@ -110,7 +110,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
type: 'object',
title: '编辑的选项信息'
},
'event.data.options': {
'event.data.items': {
type: 'array',
title: '选项集合'
}
@ -130,7 +130,7 @@ export class TreeSelectControlPlugin extends BasePlugin {
type: 'object',
title: '删除的选项信息'
},
'event.data.options': {
'event.data.items': {
type: 'array',
title: '选项集合'
}
@ -249,154 +249,271 @@ export class TreeSelectControlPlugin extends BasePlugin {
}
};
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return [
getSchemaTpl('tabs', [
{
title: '常规',
body: [
getSchemaTpl('valueFormula', {
rendererSchema: context?.schema,
mode: 'vertical' // 改成上下展示模式
}),
const renderer: any = context.info.renderer;
getSchemaTpl('clearable'),
return getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
getSchemaTpl('hideNodePathLabel'),
getSchemaTpl('fieldSet', {
title: '选项',
body: [
{
$ref: 'options',
name: 'options'
getSchemaTpl('clearable', {
mode: 'horizontal',
horizontal: {
justify: true,
left: 8
},
inputClassName: 'is-inline '
}),
getSchemaTpl('searchable'),
getSchemaTpl('multiple', {
body: [
{
type: 'input-number',
label: tipedLabel('节点最小数', '表单校验最少选中的节点数'),
name: 'minLength'
},
{
type: 'input-number',
label: tipedLabel('节点最大数', '表单校验最多选中的节点数'),
name: 'maxLength'
}
]
}),
getSchemaTpl('switch', {
label: tipedLabel(
'子节点自动选',
'当选中父节点时级联选择子节点'
),
name: 'autoCheckChildren',
hiddenOn: '!data.multiple',
value: true
}),
getSchemaTpl('switch', {
label: tipedLabel(
'子节点可反选',
'子节点可反选，值包含父子节点'
),
name: 'cascade',
hiddenOn: '!data.multiple || !data.autoCheckChildren'
}),
getSchemaTpl('switch', {
label: tipedLabel(
'值包含父节点',
'选中父节点时，值里面将包含父子节点的值，否则只会保留父节点的值'
),
name: 'withChildren',
hiddenOn:
'!data.multiple || !data.autoCheckChildren && data.cascade'
}),
getSchemaTpl('switch', {
label: tipedLabel(
'值只含子节点',
'ui 行为级联选中子节点，子节点可反选，值只包含子节点的值'
),
name: 'onlyChildren',
hiddenOn: '!data.multiple || !data.autoCheckChildren'
}),
getSchemaTpl('source', {
sampleBuilder: (schema: any) =>
JSON.stringify(
{
status: 0,
msg: '',
data: {
options: [
{
label: '选项A',
value: 'a',
children: [
{
label: '子选项',
value: 'c'
}
]
},
{
label: '选项B',
value: 'b'
}
]
}
},
null,
2
)
}),
getSchemaTpl('api', {
name: 'autoComplete',
label: '自动完成接口',
description:
'每次输入新内容后，将调用接口，根据接口返回更新选项。当前用户输入值在 `\\${term}` 中。<code>请不要与获取选项接口同时设置。</code>'
}),
getSchemaTpl('switch', {
name: 'initiallyOpen',
label: '是否默认展开子选项',
pipeIn: defaultValue(true)
}),
{
type: 'input-text',
name: 'unfoldedLevel',
label: '选项默认展开级数',
visibleOn:
'typeof this.initiallyOpen !== "undefined" || !this.initiallyOpen'
getSchemaTpl('valueFormula', {
rendererSchema: {
...context?.schema,
type: 'tree-select'
},
visibleOn: 'this.options && this.options.length > 0'
}),
getSchemaTpl('switch', {
name: 'showIcon',
label: '是否显示图标',
pipeIn: defaultValue(true)
}),
getSchemaTpl('searchable'),
getSchemaTpl('switch', {
label: '是否显示单选按钮',
name: 'showRadio',
visibleOn: '!data.multiple'
}),
getSchemaTpl('multiple'),
getSchemaTpl('switch', {
name: 'cascade',
label: '不自动选中子节点',
visibleOn: 'data.multiple',
description: '选中父级时，孩子节点是否自动选中'
}),
getSchemaTpl('switch', {
name: 'withChildren',
label: '数值是否携带子节点',
visibleOn: 'data.cascade !== true && data.multiple'
}),
getSchemaTpl('switch', {
name: 'onlyChildren',
label: '数值是否只包含子节点',
visibleOn: 'data.cascade !== true && data.multiple',
disabledOn: 'data.withChildren'
}),
getSchemaTpl('joinValues'),
getSchemaTpl('delimiter'),
getSchemaTpl('extractValue'),
getSchemaTpl('autoFill'),
getSchemaTpl('creatable'),
getSchemaTpl('api', {
label: '新增选项接口',
name: 'addApi'
}),
getSchemaTpl('editable'),
getSchemaTpl('api', {
label: '编辑选项接口',
name: 'editApi'
}),
getSchemaTpl('removable'),
getSchemaTpl('api', {
label: '删除选项接口',
name: 'deleteApi'
})
]
})
]
},
{
title: '事件',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
])
];
getSchemaTpl('labelRemark'),
getSchemaTpl('remark'),
getSchemaTpl('placeholder'),
getSchemaTpl('description')
]
},
{
title: '选项',
body: [
getSchemaTpl('treeOptionControl', {
label: '数据',
showIconField: true
}),
getSchemaTpl('switch', {
label: '只可选择叶子节点',
name: 'onlyLeaf'
}),
getSchemaTpl('creatable', {
formType: 'extend',
hiddenOnDefault: true,
label: '可新增',
form: {
body: [
getSchemaTpl('switch', {
label: '顶层可新增',
value: true,
name: 'rootCreatable'
}),
{
type: 'input-text',
label: '顶层文案',
value: '添加一级节点',
name: 'rootCreateTip',
hiddenOn: '!data.rootCreatable'
},
getSchemaTpl('addApi')
]
}
}),
getSchemaTpl('editable', {
formType: 'extend',
hiddenOnDefault: true,
form: {
body: [getSchemaTpl('editApi')]
}
}),
getSchemaTpl('removable', {
formType: 'extend',
hiddenOnDefault: true,
form: {
body: [getSchemaTpl('deleteApi')]
}
})
]
},
{
title: '高级',
body: [
{
type: 'ae-Switch-More',
mode: 'normal',
name: 'enableNodePath',
label: tipedLabel(
'选项值包含父节点',
'开启后对应节点值会包含父节点'
),
value: false,
formType: 'extend',
form: {
body: [
{
type: 'input-text',
label: '路径分隔符',
value: '/',
name: 'pathSeparator'
}
]
}
},
getSchemaTpl('switch', {
label: tipedLabel(
'选项文本仅显示选中节点',
'隐藏选择框中已选中节点的祖先节点的文本信息'
),
name: 'hideNodePathLabel'
}),
// 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',
value: true
}),
getSchemaTpl('switch', {
label: tipedLabel(
'显示节点勾选框',
'单选情况下，也可显示树节点勾选框'
),
name: 'showRadio',
hiddenOn: 'data.multiple'
}),
getSchemaTpl('switch', {
label: tipedLabel('显示层级展开线', '显示树层级展开线'),
name: 'showOutline'
}),
{
type: 'ae-Switch-More',
mode: 'normal',
name: 'initiallyOpen',
label: tipedLabel(
'自定义展开层级',
'默认展开所有节点层级，开启后可自定义展开层级数'
),
value: true,
trueValue: false,
falseValue: true,
formType: 'extend',
form: {
body: [
{
type: 'input-number',
label: '设置层级',
name: 'unfoldedLevel',
value: 1,
hiddenOn: 'data.initiallyOpen'
}
]
}
}
]
},
getSchemaTpl('status', {
isFormItem: true,
readonly: true
}),
getSchemaTpl('validation', {tag: ValidatorTag.Tree})
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:formItem', {renderer}),
getSchemaTpl('style:classNames', {
schema: [
getSchemaTpl('className', {
label: 'tree容器',
name: 'treeContainerClassName'
})
]
})
])
},
{
title: '事件',
className: 'p-none',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
]);
};
}

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

@ -17,7 +17,7 @@ export class UUIDControlPlugin extends BasePlugin {
isBaseComponent = true;
icon = 'fa fa-eye-slash';
pluginIcon = 'uuid-plugin';
description = `自动生成的 UUID`;
description = '自动生成的 UUID';
docLink = '/amis/zh-CN/components/form/uuid';
tags = ['表单项'];
scaffold = {

10
packages/amis-editor/src/plugin/HBox.tsx
View File

@ -165,7 +165,7 @@ export class HBoxPlugin extends BasePlugin {
]
},
{
getSchemaTpl('combo-container', {
name: 'columns',
label: '列集合',
type: 'combo',
@ -179,8 +179,7 @@ export class HBoxPlugin extends BasePlugin {
items: [
{
type: 'tpl',
tpl:
'<span class="label label-default">列${index | plus}</span>',
tpl: `<span class="label label-default">${'列'}\${index | plus}</span>`,
columnClassName: 'no-grow v-middle'
},
getSchemaTpl('className', {
@ -189,7 +188,7 @@ export class HBoxPlugin extends BasePlugin {
label: ''
})
]
},
}),
getSchemaTpl('fieldSet', {
title: '水平对齐',
collapsable: false,
@ -378,8 +377,7 @@ export class HBoxPlugin extends BasePlugin {
label: '手动'
}
],
description:
'<% if (this.width && this.width !== "auto") {%>请按住高亮框右侧方块拖动调整宽度<%}%>'
description: `<% if (this.width && this.width !== "auto") {%>${'请按住高亮框右侧方块拖动调整宽度'}<%}%>`
}
]
}),

39
packages/amis-editor/src/plugin/IFrame.tsx
View File

@ -3,10 +3,10 @@ import {
BasePlugin,
RegionConfig,
RendererInfo,
BaseEventContext
BaseEventContext,
tipedLabel
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, valuePipeOut} from 'amis-editor-core';
import {formItemControl, tipedLabel} from '../component/BaseControl';
export class IFramePlugin extends BasePlugin {
// 关联渲染器名字
@ -57,25 +57,22 @@ export class IFramePlugin extends BasePlugin {
{
title: '基本',
body: [
{
name: 'width',
label: tipedLabel(
'宽度',
'默认宽度为父容器宽度，值单位默认为 px，也支持百分比等单位 ，如：100%'
),
type: 'input-text',
pipeIn: defaultValue('100%'),
pipeOut: valuePipeOut
},
{
name: 'height',
label: tipedLabel(
'高度',
'默认高度为父容器高度，值单位默认为 px，也支持百分比等单位 ，如：100%'
),
type: 'input-text',
pipeOut: valuePipeOut
}
getSchemaTpl('style:widthHeight', {
widthSchema: {
label: tipedLabel(
'宽度',
'默认宽度为父容器宽度，值单位默认为 px，也支持百分比等单位 ，如：100%'
),
pipeIn: defaultValue('100%')
},
heightSchema: {
label: tipedLabel(
'高度',
'默认高度为父容器高度，值单位默认为 px，也支持百分比等单位 ，如：100%'
),
pipeIn: defaultValue('100%')
}
})
]
},
getSchemaTpl('style:classNames', {

8
packages/amis-editor/src/plugin/Link.tsx
View File

@ -1,13 +1,7 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, RegionConfig, RendererInfo} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {tipedLabel} from '../component/BaseControl';
import {ValidatorTag} from '../validator';
import {getEventControlConfig} from '../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {tipedLabel} from 'amis-editor-core';
export class LinkPlugin extends BasePlugin {
// 关联渲染器名字

8
packages/amis-editor/src/plugin/Nav.tsx
View File

@ -66,12 +66,10 @@ export class NavPlugin extends BasePlugin {
required: true
},
{
type: 'icon-picker',
getSchemaTpl('icon', {
name: 'icon',
label: '图标',
className: 'fix-icon-picker-overflow'
},
label: '图标'
}),
{
type: 'group',

12
packages/amis-editor/src/plugin/Others/Action.tsx
View File

@ -6,10 +6,11 @@ import {
BasePlugin,
BasicPanelItem,
BasicToolbarItem,
BuildPanelEventContext,
BuildPanelEventContext
} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {diff} from 'amis-editor-core';
import {SchemaCollection} from 'amis/lib/Schema';
export class ActionPlugin extends BasePlugin {
panelTitle = '按钮';
@ -146,7 +147,10 @@ export class ActionPlugin extends BasePlugin {
name: 'dialog',
pipeIn: defaultValue({
title: '弹框标题',
body: '<p>对，你刚刚点击了</p>'
body: '<p>对，你刚刚点击了</p>',
showCloseButton: true,
showErrorMsg: true,
showLoading: true
}),
asFormItem: true,
children: ({value, onChange, data}: any) =>
@ -350,7 +354,7 @@ export class ActionPlugin extends BasePlugin {
className: 'p-3',
body: schema
}
];
] as SchemaCollection;
};
buildEditorPanel(
@ -405,7 +409,7 @@ export class ActionPlugin extends BasePlugin {
) {
toolbars.push({
iconSvg: 'dialog',
tooltip: `配置弹框内容`,
tooltip: '配置弹框内容',
placement: 'bottom',
onClick: () => this.editDetail(id)
});

6
packages/amis-editor/src/plugin/Others/TableCell.tsx
View File

@ -40,11 +40,9 @@ export class TableCellPlugin extends BasePlugin {
type: 'input-text'
},
{
name: 'name',
type: 'input-text',
getSchemaTpl('formItemName', {
label: '绑定字段名'
},
}),
{
name: 'remark',

503
packages/amis-editor/src/plugin/Page.tsx
View File

@ -1,13 +1,16 @@
import {ContainerWrapper} from 'amis-editor-core';
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {getSchemaTpl} from 'amis-editor-core';
import {getEventControlConfig} from '../renderer/event-control/helper';
import {
RendererPluginAction,
RendererPluginEvent
BaseEventContext,
BasePlugin,
getSchemaTpl,
defaultValue
} from 'amis-editor-core';
import {getEventControlConfig} from '../renderer/event-control/helper';
import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
import type {SchemaObject} from 'amis/lib/Schema';
import {tipedLabel} from 'amis-editor-core';
import {jsonToJsonSchema, EditorNodeType} from 'amis-editor-core';
export class PagePlugin extends BasePlugin {
// 关联渲染器名字
@ -26,6 +29,7 @@ export class PagePlugin extends BasePlugin {
// pluginIcon = 'page-plugin'; // 暂无新 icon
scaffold: SchemaObject = {
type: 'page',
regions: ['body'],
body: [
{
type: 'tpl',
@ -46,7 +50,7 @@ export class PagePlugin extends BasePlugin {
events: RendererPluginEvent[] = [
{
eventName: 'inited',
eventLabel: '初始化完成',
eventLabel: '初始化接口请求成功',
description: '远程初始化接口请求成功时触发',
dataSchema: [
{
@ -54,7 +58,7 @@ export class PagePlugin extends BasePlugin {
properties: {
'event.data': {
type: 'object',
title: '远程请求返回的初始化数据'
title: '初始化接口请求成功返回的数据'
}
}
}
@ -90,170 +94,170 @@ export class PagePlugin extends BasePlugin {
wrapper = ContainerWrapper;
panelTitle = '页面';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
return [
getSchemaTpl('tabs', [
{
title: '常规',
title: '属性',
body: [
{
type: 'checkboxes',
name: 'regions',
label: '区域展示',
pipeIn: (value: any) =>
Array.isArray(value)
? value
: ['auto', 'body', 'toolbar', 'aside', 'header'],
pipeOut: (value: any) => {
return Array.isArray(value) && ~value.indexOf('auto')
? undefined
: value.length
? value
: ['auto', 'body', 'toolbar', 'aside', 'header'];
getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
type: 'checkboxes',
name: 'regions',
label: '区域展示',
pipeIn: (value: any) =>
Array.isArray(value)
? value
: ['body', 'toolbar', 'aside', 'header'],
pipeOut: (value: any) => {
return Array.isArray(value) && value.length
? value
: ['body', 'toolbar', 'aside', 'header'];
},
joinValues: false,
extractValue: true,
inline: false,
options: [
{
label: '内容区',
value: 'body'
},
{
label: '标题栏',
value: 'header'
},
{
label: '工具栏',
value: 'toolbar'
},
{
label: '边栏',
value: 'aside'
}
]
},
{
label: '页面标题',
name: 'title',
type: 'input-text'
},
{
label: '副标题',
name: 'subTitle',
type: 'textarea'
},
getSchemaTpl('remark', {
label: '标题提示',
hiddenOn:
'data.regions && !data.regions.includes("header") || !data.title'
}),
{
type: 'ae-Switch-More',
name: 'asideResizor',
mode: 'normal',
label: '边栏宽度可调节',
hiddenOn: 'data.regions && !data.regions.includes("aside")',
value: false,
hiddenOnDefault: true,
formType: 'extend',
form: {
body: [
{
type: 'input-number',
label: '最小宽度',
min: 0,
name: 'asideMinWidth',
pipeIn: defaultValue(160),
pipeOut: (value: any) => value || 0
},
{
type: 'input-number',
label: '最大宽度',
min: 0,
name: 'asideMaxWidth',
pipeIn: defaultValue(350),
pipeOut: (value: any) => value || 0
}
]
}
},
{
type: 'switch',
label: tipedLabel(
'边栏固定',
'边栏内容是否固定，即不跟随内容区滚动'
),
name: 'asideSticky',
inputClassName: 'is-inline',
pipeIn: defaultValue(true),
hiddenOn: 'data.regions && !data.regions.includes("aside")'
}
]
},
joinValues: false,
extractValue: true,
inline: false,
options: [
{
label: '自动',
value: 'auto'
},
{
label: '内容区',
value: 'body',
disabledOn:
'!Array.isArray(this.regions) || ~this.regions.indexOf("auto")'
},
{
label: '边栏',
value: 'aside',
disabledOn:
'!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
},
{
label: '工具栏',
value: 'toolbar',
disabledOn:
'!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
},
{
label: '顶部',
value: 'header',
disabledOn:
'!Array.isArray(this.regions) ||~this.regions.indexOf("auto")'
}
]
},
{
label: '标题',
name: 'title',
type: 'input-text'
},
{
label: '副标题',
name: 'subTitle',
type: 'input-text'
},
{
label: '提示',
name: 'remark',
type: 'textarea',
visibleOn: 'this.title',
description:
'标题附近会出现一个提示图标，鼠标放上去会提示该内容。'
},
getSchemaTpl('data')
]
},
{
title: '接口',
body: [
getSchemaTpl('api', {
label: '数据初始化接口',
name: 'initApi',
sampleBuilder: (schema: any) => `{
"status": 0,
"msg": "",
data: {
// 示例数据
"id": 1,
"a": "sample"
}
}`
}),
getSchemaTpl('initFetch'),
getSchemaTpl('switch', {
label: '开启定时刷新',
name: 'interval',
visibleOn: 'data.initApi',
pipeIn: (value: any) => !!value,
pipeOut: (value: any) => (value ? 3000 : undefined)
}),
{
name: 'interval',
type: 'input-number',
visibleOn: 'typeof this.interval === "number"',
step: 500
},
getSchemaTpl('switch', {
name: 'silentPolling',
label: '静默刷新',
visibleOn: '!!data.interval',
description: '设置自动定时刷新时是否显示loading'
}),
{
name: 'stopAutoRefreshWhen',
label: '停止定时刷新检测表达式',
type: 'input-text',
visibleOn: '!!data.interval',
description:
'定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则不刷新了。'
},
{
label: '默认消息提示',
type: 'combo',
name: 'messages',
multiLine: true,
description:
'设置 ajax 默认提示信息，当 ajax 没有返回 msg 信息时有用，如果 ajax 返回携带了 msg 值，则还是以 ajax 返回为主',
items: [
{
label: '获取成功提示',
type: 'input-text',
name: 'fetchSuccess'
},
{
label: '获取失败提示',
type: 'input-text',
name: 'fetchFailed'
},
{
label: '保存成功提示',
type: 'input-text',
name: 'saveSuccess'
},
{
label: '保存失败提示',
type: 'input-text',
name: 'saveFailed'
}
]
}
{
title: '数据',
body: [
getSchemaTpl('combo-container', {
type: 'input-kv',
mode: 'normal',
name: 'data',
label: '初始化静态数据'
}),
getSchemaTpl('apiControl', {
name: 'initApi',
labelClassName: 'none',
label: tipedLabel(
'初始化接口',
'用来获取初始数据的 api, 返回的数据可以整个 page 级别使用'
)
})
]
},
,
{
title: '移动端',
body: [
{
type: 'combo',
name: 'pullRefresh',
mode: 'normal',
noBorder: true,
items: [
{
type: 'ae-Switch-More',
mode: 'normal',
label: '下拉刷新',
name: 'disabled',
formType: 'extend',
value: true,
trueValue: false,
falseValue: true,
autoFocus: false,
form: {
body: [
{
name: 'pullingText',
label: tipedLabel('下拉文案', '下拉过程提示文案'),
type: 'input-text'
},
{
name: 'loosingText',
label: tipedLabel('释放文案', '释放过程提示文案'),
type: 'input-text'
}
]
}
}
]
}
]
}
])
]
},
{
@ -261,27 +265,27 @@ export class PagePlugin extends BasePlugin {
className: 'p-none',
body: [
getSchemaTpl('collapseGroup', [
...getSchemaTpl('style:common'),
getSchemaTpl('style:className', {
...getSchemaTpl('style:common', ['layout']),
getSchemaTpl('style:classNames', {
isFormItem: false,
schema: [
getSchemaTpl('className', {
name: 'headerClassName',
label: '头部CSS类名'
label: '顶部'
}),
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容CSS类名'
label: '内容区'
}),
getSchemaTpl('className', {
name: 'asideClassName',
label: '边栏CSS类名'
label: '边栏'
}),
getSchemaTpl('className', {
name: 'toolbarClassName',
label: '工具栏CSS类名'
label: '工具栏'
})
]
})
@ -297,100 +301,77 @@ export class PagePlugin extends BasePlugin {
...getEventControlConfig(this.manager, context)
})
]
},
{
title: '其他',
body: [
{
type: 'combo',
name: 'pullRefresh',
multiLine: true,
noBorder: true,
items: [
{
type: 'switch',
label: '移动端下拉刷新',
name: 'disabled',
mode: 'horizontal',
horizontal: {
justify: true,
left: 8
},
inputClassName: 'is-inline ',
trueValue: false,
falseValue: true
},
{
name: 'pullingText',
label: '下拉过程提示文案',
type: 'input-text',
visibleOn: '!this.disabled'
},
{
name: 'loosingText',
label: '释放过程提示文案',
type: 'input-text',
visibleOn: '!this.disabled'
}
]
}
// {
// type: 'combo',
// name: 'definitions',
// multiple: true,
// multiLine: true,
// label: '定义',
// description: '定义类型，定义完成后可被子节点引用。',
// pipeIn: (value: any) =>
// value
// ? Object.keys(value).map(key => ({
// key,
// value: value[key]
// }))
// : [],
// pipeOut: (value: any) =>
// Array.isArray(value)
// ? value.reduce(
// (obj, current) => ({
// ...obj,
// [current.key || '']: current.value
// ? current.value
// : {type: 'tpl', tpl: '内容'}
// }),
// {}
// )
// : undefined,
// items: [
// {
// type: 'input-text',
// name: 'key',
// label: 'Key',
// required: true
// },
// {
// children: ({index}: any) => (
// <Button
// size="sm"
// level="danger"
// // onClick={this.handleEditDefinitionDetail.bind(
// // this,
// // index
// // )}
// block
// >
// 配置详情
// </Button>
// )
// }
// ]
// }
]
}
// {
// type: 'combo',
// name: 'definitions',
// multiple: true,
// multiLine: true,
// label: '定义',
// description: '定义类型，定义完成后可被子节点引用。',
// pipeIn: (value: any) =>
// value
// ? Object.keys(value).map(key => ({
// key,
// value: value[key]
// }))
// : [],
// pipeOut: (value: any) =>
// Array.isArray(value)
// ? value.reduce(
// (obj, current) => ({
// ...obj,
// [current.key || '']: current.value
// ? current.value
// : {type: 'tpl', tpl: '内容'}
// }),
// {}
// )
// : undefined,
// items: [
// {
// type: 'input-text',
// name: 'key',
// label: 'Key',
// required: true
// },
// {
// children: ({index}: any) => (
// <Button
// size="sm"
// level="danger"
// // onClick={this.handleEditDefinitionDetail.bind(
// // this,
// // index
// // )}
// block
// >
// 配置详情
// </Button>
// )
// }
// ]
// }
// ]
// }
])
];
};
rendererBeforeDispatchEvent(node: EditorNodeType, e: any, data: any) {
if (e === 'inited') {
const scope = this.manager.dataSchema.getScope(`${node.id}-${node.type}`);
const jsonschema: any = {
$id: 'pageInitedData',
...jsonToJsonSchema(data)
};
scope?.removeSchema(jsonschema.$id);
scope?.addSchema(jsonschema);
}
}
}
registerEditorPlugin(PagePlugin);

103
packages/amis-editor/src/plugin/Pagination.tsx
View File

@ -1,6 +1,10 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
import {tipedLabel} from '../component/BaseControl';
import {
BasePlugin,
RegionConfig,
BaseEventContext,
tipedLabel
} from 'amis-editor-core';
import {ValidatorTag} from '../validator';
import {getEventControlConfig} from '../renderer/event-control/helper';
import {RendererPluginEvent} from 'amis-editor-core';
@ -19,12 +23,12 @@ export class PaginationPlugin extends BasePlugin {
description = '分页组件，可以对列表进行分页展示，提高页面性能';
tags = ['容器'];
icon = 'fa fa-window-minimize';
// pluginIcon = 'pagination-plugin'; // 暂无新icon
baseLayoutLIst = [
lastLayoutSetting = ['pager'];
layoutOptions = [
{text: '总数', value: 'total', checked: false},
{text: '每页条数', value: 'perPage', checked: false},
{text: '分页', value: 'pager', checked: true},
{text: '跳转', value: 'go', checked: false}
{text: '跳转页', value: 'go', checked: false}
];
scaffold = {
type: 'pagination',
@ -64,27 +68,52 @@ export class PaginationPlugin extends BasePlugin {
body: [
{
name: 'mode',
label: '分页类型',
label: '模式',
type: 'button-group-select',
size: 'sm',
pipeIn: defaultValue('normal'),
options: [
{
label: '普通',
label: '默认',
value: 'normal'
},
{
label: '简易',
label: '简约',
value: 'simple'
}
]
},
// {
// name: 'hasNext',
// label: '是否有下一页',
// mode: 'row',
// inputClassName: 'inline-flex justify-between flex-row-reverse',
// type: 'switch',
// visibleOn: 'data.mode === "simple"'
// },
// {
// name: 'activePage',
// label: tipedLabel('当前页', '支持使用 \\${xxx} 来获取变量'),
// type: 'input-text'
// },
// {
// name: 'lastPage',
// label: tipedLabel('最后页码', '支持使用 \\${xxx} 来获取变量'),
// type: 'input-text',
// visibleOn: 'data.mode === "normal"'
// },
// {
// name: 'total',
// label: tipedLabel('总条数', '支持使用 \\${xxx} 来获取变量'),
// type: 'input-text',
// visibleOn: 'data.mode === "normal"'
// },
getSchemaTpl('combo-container', {
name: 'layout',
type: 'combo',
label: tipedLabel(
'分页布局展示',
'选中表示渲染该项，可以拖拽排序调整显示的顺序'
'启用功能',
'选中表示启用该项，可以拖拽排序调整功能的顺序'
),
visibleOn: 'data.mode === "normal"',
mode: 'normal',
@ -110,52 +139,37 @@ export class PaginationPlugin extends BasePlugin {
}
],
pipeIn: (value: any) => {
let layoutList: string[] = [];
if (Array.isArray(value)) {
layoutList = value;
if (!value) {
value = this.lastLayoutSetting;
} else if (typeof value === 'string') {
layoutList = (value as string).split(',');
value = (value as string).split(',');
}
const layout = this.baseLayoutLIst.map(v => ({
return this.layoutOptions.map(v => ({
...v,
checked: layoutList.includes(v.value)
checked: value.includes(v.value)
}));
return layout;
},
pipeOut: (value: any[]) => {
this.baseLayoutLIst = [...value];
return value.filter(v => v.checked).map(v => v.value);
this.lastLayoutSetting = value
.filter(v => v.checked)
.map(v => v.value);
return this.lastLayoutSetting.concat();
}
}),
{
type: 'ae-formulaControl',
label: '是否有下一页',
name: 'hasNext',
visibleOn: 'data.mode === "simple"'
},
{
type: 'ae-formulaControl',
label: '当前页',
name: 'activePage'
},
{
type: 'ae-formulaControl',
label: '最后页码',
name: 'lastPage',
visibleOn: 'data.mode === "normal"'
},
{
type: 'ae-formulaControl',
label: '总条数',
name: 'total',
visibleOn: 'data.mode === "normal"'
},
// {
// name: 'showPerPage',
// label: '显示每页条数',
// mode: 'row',
// inputClassName: 'inline-flex justify-between flex-row-reverse',
// type: 'switch',
// visibleOn: 'data.mode === "normal"'
// },
getSchemaTpl('combo-container', {
name: 'perPageAvailable',
type: 'combo',
label: '每页条数选项',
visibleOn:
'data.mode === "normal" && data.layout?.includes("perPage")',
'data.mode === "normal" && data.layout && data.layout.includes("perPage")',
mode: 'normal',
multiple: true,
multiLine: false,
@ -165,6 +179,7 @@ export class PaginationPlugin extends BasePlugin {
editable: true,
minLength: 1,
tabsStyle: 'inline',
addButtonClassName: 'm-b-sm',
items: [
{
type: 'input-number',
@ -173,7 +188,7 @@ export class PaginationPlugin extends BasePlugin {
}
],
pipeIn: (value: any[]) => {
return value.map(v => ({value: v}));
return value?.map(v => ({value: v})) || [10];
},
pipeOut: (value: any[]) => {
return value.map(v => v.value);

30
packages/amis-editor/src/plugin/Panel.tsx
View File

@ -85,7 +85,8 @@ export class PanelPlugin extends BasePlugin {
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) => {
const isForm = /(?:^|\/)form$/.test(context.path) || context?.schema?.type === 'form';
const isForm =
/(?:^|\/)form$/.test(context.path) || context?.schema?.type === 'form';
return [
getSchemaTpl('tabs', [
@ -102,7 +103,7 @@ export class PanelPlugin extends BasePlugin {
name: 'title',
type: 'input-text'
},
isForm
? null
: {
@ -124,7 +125,7 @@ export class PanelPlugin extends BasePlugin {
]
},
getSchemaTpl('status')
]),
])
]
},
{
@ -140,7 +141,7 @@ export class PanelPlugin extends BasePlugin {
label: '固定底部',
value: false
}),
getSchemaTpl('horizontal', {
visibleOn:
'(data.mode || data.$$formMode) == "horizontal" && data.$$mode == "form"'
@ -152,7 +153,9 @@ export class PanelPlugin extends BasePlugin {
title: '内容区域展示',
body: [
getSchemaTpl('subFormItemMode', {label: '表单展示模式'}),
getSchemaTpl('subFormHorizontalMode', {label: '表单水平占比'}),
getSchemaTpl('subFormHorizontalMode', {
label: '表单水平占比'
}),
getSchemaTpl('subFormHorizontal')
]
},
@ -211,28 +214,28 @@ export class PanelPlugin extends BasePlugin {
name: isForm ? 'panelClassName' : 'className',
pipeIn: defaultValue('Panel--default')
}),
getSchemaTpl('className', {
name: 'headerClassName',
label: '头部区域'
}),
getSchemaTpl('className', {
name: 'bodyClassName',
label: '内容区域'
}),
getSchemaTpl('className', {
name: 'footerClassName',
label: '底部区域'
}),
getSchemaTpl('className', {
name: 'actionsClassName',
label: '按钮外层'
})
],
},
]
}
])
]
}
@ -251,9 +254,10 @@ export class PanelPlugin extends BasePlugin {
if (
context.info.renderer.name === 'form' &&
schema.wrapWithPanel !== false &&
!context.selections.length
!context.selections.length &&
false
) {
/** Panel相关的配置融合到From中了 */
panels.push({
key: 'panel',
icon: 'fa fa-list-alt',

6
packages/amis-editor/src/plugin/Progress.tsx
View File

@ -1,7 +1,7 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {tipedLabel} from '../component/BaseControl';
import {tipedLabel} from 'amis-editor-core';
import {ValidatorTag} from '../validator';
import {getEventControlConfig} from '../renderer/event-control/helper';
@ -216,7 +216,7 @@ export class ProgressPlugin extends BasePlugin {
form.setValueByName('stripe', value === 'stripe');
}
},
{
getSchemaTpl('combo-container', {
name: 'map',
type: 'combo',
mode: 'normal',
@ -252,7 +252,7 @@ export class ProgressPlugin extends BasePlugin {
pipeIn: (value: any) => {
return Array.isArray(value) ? value : [];
}
}
})
]
},
getSchemaTpl('style:classNames', {

15
packages/amis-editor/src/plugin/Service.tsx
View File

@ -1,6 +1,6 @@
import {Button} from 'amis';
import React from 'react';
import {registerEditorPlugin} from 'amis-editor-core';
import {EditorNodeType, jsonToJsonSchema, registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin, RegionConfig} from 'amis-editor-core';
import {getSchemaTpl} from 'amis-editor-core';
import {getEventControlConfig} from '../renderer/event-control/helper';
@ -222,6 +222,19 @@ export class ServicePlugin extends BasePlugin {
}
]);
};
rendererBeforeDispatchEvent(node: EditorNodeType, e: any, data: any) {
if (e === 'fetchInited') {
const scope = this.manager.dataSchema.getScope(`${node.id}-${node.type}`);
const jsonschema: any = {
$id: 'serviceFetchInitedData',
...jsonToJsonSchema(data)
};
scope?.removeSchema(jsonschema.$id);
scope?.addSchema(jsonschema);
}
}
}
registerEditorPlugin(ServicePlugin);

4
packages/amis-editor/src/plugin/Steps.tsx
View File

@ -45,7 +45,7 @@ export class StepsPlugin extends BasePlugin {
{
title: '常规',
body: [
{
getSchemaTpl('combo-container', {
name: 'steps',
label: '步骤列表',
type: 'combo',
@ -76,7 +76,7 @@ export class StepsPlugin extends BasePlugin {
placeholder: '描述'
}
]
},
}),
{
name: 'value',
type: 'input-text',

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

@ -512,7 +512,7 @@ export class TablePlugin extends BasePlugin {
title: '显隐',
body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
},
{
isCRUDBody ? null : {
title: '事件',
className: 'p-none',
body: [

909
packages/amis-editor/src/plugin/Table2.tsx Normal file
View File

@ -0,0 +1,909 @@
import {resolveVariable} from 'amis';
import {setVariable} from 'amis-core';
import {
BasePlugin,
BaseEventContext,
PluginEvent,
RegionConfig,
RendererInfoResolveEventContext,
BasicRendererInfo,
PluginInterface,
InsertEventContext,
ScaffoldForm,
registerEditorPlugin,
defaultValue,
getSchemaTpl,
tipedLabel,
repeatArray,
mockValue,
EditorNodeType,
RendererPluginAction,
RendererPluginEvent
} from 'amis-editor-core';
import {getEventControlConfig} from '../renderer/event-control/helper';
import {SchemaObject} from 'amis/lib/Schema';
import {getArgsWrapper} from '../renderer/event-control/helper';
export class Table2Plugin extends BasePlugin {
// 关联渲染器名字
rendererName = 'table2';
$schema = '/schemas/TableSchema.json';
// 组件名称
name = '表格2';
isBaseComponent = true;
panelJustify = true;
disabledRendererPlugin = true;
description =
'用来展示表格数据，可以配置列信息，然后关联数据便能完成展示。支持嵌套、超级表头、列固定、表头固顶、合并单元格等等。当前组件需要配置数据源，不自带数据拉取，请优先使用 「CRUD」 组件。';
docLink = '/amis/zh-CN/components/table2';
icon = 'fa fa-table';
scaffold: SchemaObject = {
type: 'table2',
columns: [
{
title: '列信息',
name: 'a'
}
],
source: '$item'
};
regions: Array<RegionConfig> = [
{
key: 'columns',
label: '列集合',
renderMethod: 'renderTable',
preferTag: '展示',
dndMode: 'position-h'
}
];
previewSchema: any = {
type: 'table2',
className: 'text-left m-b-none',
items: [
{a: 1, b: 2, c: 9},
{a: 3, b: 4, c: 8},
{a: 5, b: 6, c: 7}
],
columns: [
{
title: 'A',
name: 'a'
},
{
title: 'B',
name: 'b'
}
]
};
scaffoldForm: ScaffoldForm = {
title: '快速构建表格',
body: [
{
name: 'columns',
type: 'combo',
multiple: true,
label: false,
addButtonText: '新增一列',
draggable: true,
items: [
{
type: 'input-text',
name: 'title',
placeholder: '标题'
},
{
type: 'input-text',
name: 'name',
placeholder: '绑定字段名'
},
{
type: 'select',
name: 'type',
placeholder: '类型',
value: 'text',
options: [
{
value: 'text',
label: '纯文本'
},
{
value: 'tpl',
label: '模板'
},
{
value: 'image',
label: '图片'
},
{
value: 'date',
label: '日期'
},
{
value: 'progress',
label: '进度'
},
{
value: 'status',
label: '状态'
},
{
value: 'mapping',
label: '映射'
},
{
value: 'container',
label: '容器'
},
{
value: 'operation',
label: '操作栏'
}
]
}
]
}
],
canRebuild: true
};
panelTitle = '表格';
events: RendererPluginEvent[] = [
{
eventName: 'selectedChange',
eventLabel: '选择表格项',
description: '手动选择表格项事件',
dataSchema: [
{
type: 'object',
properties: {
'event.data.selectedItems': {
type: 'array',
title: '已选择行'
},
'event.data.unSelectedItems': {
type: 'array',
title: '未选择行'
}
}
}
]
},
{
eventName: 'columnSort',
eventLabel: '列排序',
description: '点击列排序事件',
dataSchema: [
{
type: 'object',
properties: {
'event.data.orderBy': {
type: 'string',
title: '列排序列名'
},
'event.data.orderDir': {
type: 'string',
title: '列排序值'
}
}
}
]
},
{
eventName: 'columnFilter',
eventLabel: '列筛选',
description: '点击列筛选事件',
dataSchema: [
{
type: 'object',
properties: {
'event.data.filterName': {
type: 'string',
title: '列筛选列名'
},
'event.data.filterValue': {
type: 'string',
title: '列筛选值'
}
}
}
]
},
{
eventName: 'columnSearch',
eventLabel: '列搜索',
description: '点击列搜索事件',
dataSchema: [
{
type: 'object',
properties: {
'event.data.searchName': {
type: 'string',
title: '列搜索列名'
},
'event.data.searchValue': {
type: 'object',
title: '列搜索数据'
}
}
}
]
},
{
eventName: 'orderChange',
eventLabel: '行排序',
description: '手动拖拽行排序事件',
dataSchema: [
{
type: 'object',
properties: {
'event.data.movedItems': {
type: 'array',
title: '已排序数据'
}
}
}
]
},
{
eventName: 'columnToggled',
eventLabel: '列显示变化',
description: '点击自定义列事件',
dataSchema: [
{
type: 'object',
properties: {
'event.data.columns': {
type: 'array',
title: '当前显示的列配置数据'
}
}
}
]
},
{
eventName: 'rowClick',
eventLabel: '行单击',
description: '点击整行事件',
dataSchema: [
{
type: 'object',
properties: {
'event.data.rowItem': {
type: 'object',
title: '行点击数据'
}
}
}
]
}
];
actions: RendererPluginAction[] = [
{
actionType: 'select',
actionLabel: '设置选中项',
description: '设置表格的选中项',
schema: getArgsWrapper([
{
type: 'input-formula',
variables: '${variables}',
evalMode: false,
variableMode: 'tabs',
label: '选中项',
size: 'lg',
name: 'selected',
mode: 'horizontal'
}
])
},
{
actionType: 'selectAll',
actionLabel: '设置全部选中',
description: '设置表格全部项选中'
},
{
actionType: 'clearAll',
actionLabel: '清空选中项',
description: '清空表格所有选中项'
}
];
async buildDataSchemas(node: EditorNodeType, region?: EditorNodeType) {
const itemsSchema: any = {
$id: 'tableRow',
type: 'object',
properties: {}
};
const columns: EditorNodeType = node.children.find(
item => item.isRegion && item.region === 'columns'
);
if (columns) {
for (let current of columns.children) {
const schema = current.schema;
if (schema && schema.key) {
itemsSchema.properties[schema.key] = current.info?.plugin
?.buildDataSchemas
? await current.info.plugin.buildDataSchemas(current, region)
: {
type: 'string',
title: schema.label || schema.title,
description: schema.description
};
}
}
}
const result: any = {
$id: 'table2',
type: 'object',
properties: {
items: {
type: 'array',
title: '表格数据',
items: itemsSchema
}
}
};
if (region?.region === 'columns') {
result.properties = {
...itemsSchema.properties,
...result.properties
};
}
return result;
}
async getAvailableContextFields(
scopeNode: EditorNodeType,
node: EditorNodeType,
region?: EditorNodeType
) {
// // 只有表单项组件可以使用表单组件的数据域
// if (
// scopeNode.parent?.type === 'crud2'
// ) {
// return scopeNode.parent.info.plugin.getAvailableContextFields?.(
// scopeNode.parent,
// node,
// region
// );
// }
}
panelBodyCreator = (context: BaseEventContext) => {
const isCRUDBody = ['crud', 'crud2'].includes(context.schema.type);
return getSchemaTpl('tabs', [
{
title: '属性',
body: [
getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
{
name: 'source',
type: 'input-text',
label: tipedLabel('数据源', '绑定当前环境变量。'),
hidden: isCRUDBody,
pipeIn: defaultValue('${items}')
},
getSchemaTpl('switch', {
name: 'title',
label: '显示标题',
pipeIn: (value: any) => !!value,
pipeOut: (value: any) => {
if (value) {
return {
type: 'container',
body: [
{
type: 'tpl',
tpl: '表格标题',
inline: false,
style: {
fontSize: 14
}
}
]
};
}
return null;
}
}),
getSchemaTpl('switch', {
name: 'showHeader',
label: '显示表头',
value: true,
pipeIn: (value: any) => !!value,
pipeOut: (value: any) => !!value
}),
getSchemaTpl('switch', {
visibleOn: 'this.showHeader !== false',
name: 'sticky',
label: '冻结表头',
pipeIn: defaultValue(false)
}),
getSchemaTpl('switch', {
name: 'footer',
label: '显示表尾',
pipeIn: (value: any) => !!value,
pipeOut: (value: any) => {
if (value) {
return {
type: 'container',
body: [
{
type: 'tpl',
tpl: '表格尾部',
inline: false,
style: {
fontSize: 14
}
}
]
};
}
return null;
}
}),
{
name: 'scroll.y',
label: '内容高度',
type: 'button-group-select',
pipeIn: (v: any) => v != null,
pipeOut: (v: any) => (v ? '' : null),
options: [
{
label: '适配内容',
value: false
},
{
label: '固定',
value: true
}
]
},
{
type: 'input-group',
visibleOn: 'data.scroll && data.scroll.y !== null',
label: '高度值',
body: [
{
type: 'input-number',
name: 'scroll.y'
},
{
type: 'tpl',
addOnclassName: 'border-0 bg-none',
tpl: 'px'
}
]
},
{
name: 'scroll.x',
label: tipedLabel(
'内容宽度',
'当列内容过多，超出宽度时，可使用横向滚动方式查看数据。'
),
type: 'button-group-select',
pipeIn: (v: any) => v != null,
pipeOut: (v: any) => (v ? '' : null),
options: [
{
label: '适配内容',
value: false
},
{
label: '固定',
value: true
}
]
},
{
type: 'input-group',
visibleOn: 'data.scroll && data.scroll.x !== null',
name: 'scroll.x',
label: '宽度值',
body: [
{
type: 'input-number',
name: 'scroll.x'
},
{
type: 'tpl',
addOnclassName: 'border-0 bg-none',
tpl: 'px'
}
]
},
{
name: 'placeholder',
pipeIn: defaultValue('暂无数据'),
type: 'input-text',
label: '占位内容'
}
]
},
{
title: '列设置',
body: [
getSchemaTpl('switch', {
name: 'resizable',
label: tipedLabel('可调整列宽', '用户可通过拖拽调整列宽度'),
pipeIn: (value: any) => !!value,
pipeOut: (value: any) => value
}),
isCRUDBody
? null
: {
type: 'ae-Switch-More',
mode: 'normal',
name: 'columnsTogglable',
hiddenOnDefault: true,
formType: 'extend',
label: tipedLabel(
'自定义显示列',
'自动即列数量大于10自动开启。'
),
pipeOut: (value: any) => {
if (value && value.columnsTogglable) {
return {columnsTogglable: {type: 'column-toggler'}};
}
return value;
},
form: {
body: [
{
mode: 'normal',
type: 'ae-columnControl'
}
]
}
}
]
},
{
title: '行设置',
body: [
{
name: 'lineHeight',
label: '行高度',
type: 'select',
placeholder: '请选择高度',
options: [
{label: '跟随内容', value: ''},
{label: '高', value: 'large'},
{label: '中', value: 'middle'}
],
clearable: false,
value: ''
},
isCRUDBody
? {
type: 'ae-Switch-More',
mode: 'normal',
name: 'rowSelection',
label: '可多选',
visibleOn: 'data.selectable',
hiddenOnDefault: true,
formType: 'extend',
form: {
body: [
{
label: '可选区域',
name: 'rowSelection.rowClick',
type: 'button-group-select',
value: false,
options: [
{
label: 'CheckBox',
value: false
},
{
label: '整行',
value: true
}
]
},
{
name: 'rowSelection.disableOn',
type: 'ae-formulaControl',
label: '行禁用条件'
},
{
name: 'rowSelection.selections',
label: '选择菜单项',
type: 'checkboxes',
joinValues: false,
inline: false,
itemClassName: 'text-sm',
options: [
{label: '全选', value: 'all'},
{label: '反选', value: 'invert'},
{label: '取消选择', value: 'none'},
{label: '选择奇数项', value: 'odd'},
{label: '选择偶数项', value: 'even'}
],
pipeIn(v: any) {
if (!v) {
return;
}
return v.map((item: any) => ({
label: item.text,
value: item.key
}));
},
pipeOut(v: any) {
if (!v) {
return;
}
return v.map((item: any) => ({
key: item.value,
text: item.label
}));
}
}
]
}
}
: null,
{
type: 'ae-Switch-More',
mode: 'normal',
name: 'expandable',
label: '可展开',
hiddenOnDefault: true,
formType: 'extend',
form: {
body: [
{
name: 'expandable.expandableOn',
visibleOn: 'data.expandable',
type: 'ae-formulaControl',
label: '行展开条件'
}
]
}
},
getSchemaTpl('switch', {
name: 'childrenColumnName',
label: '可嵌套',
pipeIn: (value: any) => !!value,
pipeOut: (value: any) => (value ? 'children' : '')
}),
getSchemaTpl('switch', {
name: 'draggable',
label: '可拖拽',
pipeIn: (value: any) => !!value,
pipeOut: (value: any) => value
})
]
},
{
title: '状态',
body: [
getSchemaTpl('hidden', {
label: '隐藏'
})
]
},
{
title: '高级',
body: [
getSchemaTpl('apiControl', {
label: '快速保存',
name: 'quickSaveApi'
}),
getSchemaTpl('apiControl', {
label: '快速保存单条',
name: 'quickSaveItemApi'
})
]
}
])
]
},
{
title: '外观',
body: [
getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('switch', {
name: 'bordered',
label: '边框',
pipeIn: defaultValue(false)
}),
{
name: 'scroll.x',
type: 'input-number',
label: '横向滚动'
},
{
name: 'indentSize',
visibleOn: 'data.childrenColumnName',
type: 'input-number',
unitOptions: [{label: 'px', value: 'px'}],
label: '嵌套缩进'
},
{
name: 'rowSelection.columnWidth',
visibleOn: 'data.rowSelection',
type: 'input-number',
label: '选择列宽度',
description: '固定选择列的宽度'
},
{
name: 'expandable.columnWidth',
visibleOn: 'data.expandable',
type: 'input-number',
label: '展开列宽度',
description: '固定展开列的宽度'
}
]
},
getSchemaTpl('style:classNames', {
isFormItem: true,
schema: [
{
name: 'rowClassNameExpr',
type: 'ae-formulaControl',
label: '自定义行样式'
},
{
name: 'expandable.expandedRowClassNameExpr',
visibleOn: 'data.expandable',
type: 'ae-formulaControl',
label: '展开行样式'
}
]
})
])
]
},
{
title: '事件',
body: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
]);
};
filterProps(props: any) {
const arr = Array.isArray(props.value)
? props.value
: typeof props.source === 'string'
? resolveVariable(props.source, props.data)
: resolveVariable('items', props.data);
if (!Array.isArray(arr) || !arr.length) {
const mockedData: any = {};
if (Array.isArray(props.columns)) {
props.columns.forEach((column: any) => {
if (column.name) {
setVariable(mockedData, column.name, mockValue(column));
}
});
}
props.value = repeatArray(mockedData, 10).map((item, index) => ({
...item,
id: index + 1
}));
} else {
// 只取10条预览，否则太多卡顿
props.value = arr.slice(0, 10);
}
// 如果设置了可展开 默认把第一行展开
if (props.expandable) {
if (typeof props.expandable === 'boolean') {
props.expandable = {};
}
if (!props.expandable.type) {
props.expandable.type = 'container';
props.expandable.body = [
{
type: 'tpl',
tpl: '展开行内容',
inline: false
}
];
}
props.expandable.keyField = 'id';
props.expandable.expandedRowKeys = [1];
}
return props;
}
// 为了能够自动注入数据。
getRendererInfo(
context: RendererInfoResolveEventContext
): BasicRendererInfo | void {
const plugin: PluginInterface = this;
const {schema, renderer} = context;
if (
!schema.$$id &&
['crud', 'crud2'].includes(schema.$$editor?.renderer.name) &&
renderer.name === 'table2'
) {
return {
...({id: schema.$$editor.id} as any),
name: plugin.name!,
regions: plugin.regions,
patchContainers: plugin.patchContainers,
vRendererConfig: plugin.vRendererConfig,
wrapperProps: plugin.wrapperProps,
wrapperResolve: plugin.wrapperResolve,
filterProps: plugin.filterProps,
$schema: plugin.$schema,
renderRenderer: plugin.renderRenderer
};
}
return super.getRendererInfo(context);
}
// 自动插入 label
beforeInsert(event: PluginEvent<InsertEventContext>) {
const context = event.context;
if (
(context.info.plugin === this ||
context.node.sameIdChild?.info.plugin === this) &&
context.region === 'columns'
) {
context.data = {
...context.data,
title: context.data.label ?? context.subRenderer?.name ?? '列名称'
};
}
}
}
registerEditorPlugin(Table2Plugin);

587
packages/amis-editor/src/plugin/TableCell2.tsx Normal file
View File

@ -0,0 +1,587 @@
import {Button, Icon} from 'amis';
import React from 'react';
import {getVariable} from 'amis-core';
import {
BasePlugin,
BasicRendererInfo,
registerEditorPlugin,
RendererInfoResolveEventContext,
ReplaceEventContext,
PluginEvent,
AfterBuildPanelBody,
defaultValue,
getSchemaTpl,
tipedLabel,
DSField
} from 'amis-editor-core';
import {fromPairs} from 'lodash';
import {TabsSchema} from 'amis/lib/renderers/Tabs';
import {SchemaObject} from 'amis/lib/Schema';
import {remarkTpl} from '../component/BaseControl';
export class TableCell2Plugin extends BasePlugin {
panelTitle = '列配置';
panelIcon = 'fa fa-columns';
afterBuildPanelBody(event: PluginEvent<AfterBuildPanelBody>) {
const {context, data} = event.context;
if (
!context.node.parent?.parent?.type ||
context.node.parent.parent.type !== 'table2'
) {
return;
}
// @ts-ignore
const base: Array<{
sameName?: string;
[propName: string]: any;
}> = [
context.node.info.plugin.withDataSource === false
? false
: {
sameName: context.info.renderer.isFormItem ? 'name' : undefined,
name: 'name',
type: 'ae-DataBindingControl',
label: '列字段',
onBindingChange(
field: DSField,
onBulkChange: (value: any) => void
) {
const schema = field?.resolveColumnSchema?.('List') || {
title: field.label
};
onBulkChange(schema);
}
},
{
sameName: context.info.renderer.isFormItem ? 'label' : undefined,
name: 'title',
label: '列标题',
type: 'input-text'
},
remarkTpl({
name: 'remark',
label: '标题提示',
labelRemark: '在标题旁展示提示'
}),
{
name: 'placeholder',
type: 'input-text',
label: tipedLabel('占位提示', '当没有值时用这个来替代展示。'),
value: '-'
}
].filter(Boolean);
const advanced = [
getSchemaTpl('switch', {
name: 'sorter',
label: tipedLabel(
'可排序',
'开启后可以根据当前列排序，接口类型将增加排序参数。'
)
}),
getSchemaTpl('switch', {
name: 'searchable',
label: '可搜索',
pipeIn: (value: any) => !!value
}),
{
visibleOn: 'data.searchable',
name: 'searchable',
asFormItem: true,
label: false,
children: ({value, onChange, data}: any) => {
if (value === true) {
value = {};
} else if (typeof value === 'undefined') {
value = getVariable(data, 'searchable');
}
const originMode = value.mode;
value = {
...value,
type: 'form',
mode: 'normal',
wrapWithPanel: false,
body: [
{
type: 'input-text',
name: data.key
}
]
};
delete value.mode;
// todo 多个快速编辑表单模式看来只能代码模式编辑了。
return (
<Button
className="w-full flex flex-col items-center"
onClick={() => {
this.manager.openSubEditor({
title: '配置列搜索类型',
value: value,
onChange: value =>
onChange(
{
...value,
mode: originMode
},
'searchable'
)
});
}}
>
<span className="inline-flex items-center">
<Icon icon="edit" className="mr-1 w-3" />
配置列搜索类型
</span>
</Button>
);
}
},
{
name: 'quickEdit',
label: tipedLabel('快速编辑', '输入框左侧或右侧的附加挂件'),
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
bulk: true,
defaultData: {
mode: 'popOver'
},
form: {
body: [
{
name: 'quickEdit.mode',
type: 'button-group-select',
label: '模式',
value: 'popOver',
options: [
{
label: '下拉',
value: 'popOver'
},
{
label: '内嵌',
value: 'inline'
}
]
},
getSchemaTpl('switch', {
name: 'quickEdit.saveImmediately',
label: tipedLabel(
'修改立即保存',
'开启后修改即提交，而不是批量提交。'
),
pipeIn: (value: any) => !!value
}),
{
name: 'quickEdit',
asFormItem: true,
label: false,
children: ({value, onBulkChange, name, data}: any) => {
if (value === true) {
value = {};
} else if (typeof value === 'undefined') {
value = getVariable(data, 'quickEdit');
}
const originMode = value?.mode || 'popOver';
value = {
...value,
type: 'form',
mode: 'normal',
wrapWithPanel: false,
body: [
{
type: 'input-text',
name: data.key
}
]
};
if (value.mode) {
delete value.mode;
}
// todo 多个快速编辑表单模式看来只能代码模式编辑了。
return (
<Button
className="w-full flex flex-col items-center"
onClick={() => {
this.manager.openSubEditor({
title: '配置快速编辑类型',
value: value,
onChange: value =>
onBulkChange({
[name]: {
...value,
mode: originMode
}
})
});
}}
>
<span className="inline-flex items-center">
<Icon icon="edit" className="mr-1 w-3" />
配置编辑表单
</span>
</Button>
);
}
}
]
}
},
{
name: 'popOver',
label: '查看更多',
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
bulk: true,
form: {
body: [
{
name: 'popOver.mode',
label: '模式',
type: 'button-group-select',
pipeIn: defaultValue('popOver'),
options: [
{
label: '浮窗',
value: 'popOver'
},
{
label: '弹框',
value: 'dialog'
},
{
label: '抽屉',
value: 'drawer'
}
]
},
{
name: 'popOver.position',
label: '浮窗位置',
type: 'select',
visibleOn: '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'
}
]
},
{
name: 'popOver',
asFormItem: true,
label: false,
children: ({value, onBulkChange, name}: any) => {
value = {
type: 'panel',
title: '查看详情',
body: '内容详情',
...value
};
return (
<Button
className="w-full flex flex-col items-center"
onClick={() => {
this.manager.openSubEditor({
title: '配置查看更多展示内容',
value: value,
onChange: value =>
onBulkChange({
[name]: value
})
});
}}
>
<span className="inline-flex items-center">
<Icon icon="edit" className="mr-1 w-3" />
配置内容
</span>
</Button>
);
}
}
]
}
},
{
name: 'copyable',
label: tipedLabel('复制内容', '默认为当前字段值，可定制。'),
type: 'ae-switch-more',
mode: 'normal',
formType: 'extend',
bulk: true,
defaultData: {},
form: {
body: [
{
name: 'copyable.content',
type: 'textarea',
placehoder: '默认为当前字段的值',
label: '内容模板'
}
]
}
},
{
name: 'rowSpanExpr',
type: 'ae-formulaControl',
label: '合并行'
},
{
name: 'colSpanExpr',
type: 'ae-formulaControl',
label: '合并列'
}
];
const baseStyle = [
getSchemaTpl('withUnit', {
name: 'width',
label: tipedLabel('列宽', '固定列的宽度，不推荐设置。'),
control: {
name: 'width',
type: 'input-number'
},
unit: 'px'
}),
{
name: 'fixed',
type: 'button-group-select',
label: '固定位置',
pipeIn: defaultValue(''),
pipeOut(value: any) {
if (!value) {
return undefined;
}
return value;
},
options: [
{
value: '',
label: '不固定'
},
{
value: 'left',
label: '左侧'
},
{
value: 'right',
label: '右侧'
}
]
},
getSchemaTpl('switch', {
name: 'toggled',
label: '自定义列时默认展示',
pipeIn: defaultValue(true)
}),
getSchemaTpl('switch', {
name: 'className',
label: '内容超出换行',
pipeIn: (value: any) =>
typeof value === 'string' && /\word\-break\b/.test(value),
pipeOut: (value: any, originValue: any) =>
(value ? 'word-break ' : '') +
(originValue || '').replace(/\bword\-break\b/g, '').trim()
})
];
// 之前的面板，不是新的组件面板，需要添加新的tab，不能合并
if (Array.isArray(data)) {
if ((data[0] as SchemaObject).type === 'tabs') {
const body = data[0] as TabsSchema;
body.tabs.forEach((tab: any) => {
if (tab.title === '常规') {
tab.body.unshift(...base.concat(advanced));
}
if (tab.title === '外观') {
tab.body.unshift(...baseStyle);
}
});
} else {
console.error('错误的组件合并对象，面板过老无法处理，除非增加新面板');
}
return;
}
(data as TabsSchema).tabs?.forEach((tab: any) => {
if (tab.title === '属性') {
tab.body[0].body.forEach((collapse: any) => {
if (collapse.title === '基本') {
const appendItems = fromPairs(
base.map(item => [item.sameName ?? item.name, item])
);
const removeIndex: number[] = [];
collapse.body.forEach((item: any, index: number) => {
const key = item.name;
// 重复意义的配置用现在的表达文案替换一下
if (appendItems.hasOwnProperty(key)) {
removeIndex.push(index);
appendItems[key] = {
...item,
...appendItems[key]
};
return;
}
if (item.name === 'labelRemark') {
removeIndex.push(index);
}
});
removeIndex.reverse();
removeIndex.forEach(index => {
collapse.body.splice(index, 1);
});
collapse.body.unshift(...Object.values(appendItems));
}
});
const moreCollapse = getSchemaTpl('collapseGroup', [
{
title: '列',
body: advanced
}
]);
tab.body[0].body.splice(1, 0, ...moreCollapse.body);
// 让折叠器默认都展开
tab.body[0].activeKey.push(...moreCollapse.activeKey);
}
if (tab.title === '外观') {
const moreCollapse = getSchemaTpl('collapseGroup', [
{
title: '列',
body: baseStyle
}
]);
tab.body[0].body.splice(1, 0, ...moreCollapse.body);
// 让折叠器默认都展开
tab.body[0].activeKey.push(...moreCollapse.activeKey);
}
});
}
// filterProps(props: any) {
// props = JSONPipeOut(props, true);
// return props;
// }
getRendererInfo(
context: RendererInfoResolveEventContext
): BasicRendererInfo | void {
const {renderer, schema} = context;
if (renderer.name === 'cell-field') {
return {
name: schema.title ? `<${schema.title}>列` : '匿名列',
$schema: '/schemas/TableColumn.json',
multifactor: true,
wrapperResolve: (dom: HTMLDivElement) => {
// 固定这种结构 amis里改了 这里也得改
const parent = dom.parentElement?.parentElement;
const groupId = parent?.getAttribute('data-group-id');
const wrapper = dom.closest('table')!.parentElement?.parentElement;
return [].slice.call(
wrapper?.querySelectorAll(
`th[data-group-id="${groupId}"],
td[data-group-id="${groupId}"]`
)
);
}
// filterProps: this.filterProps
};
}
}
/*exchangeRenderer(id: string) {
this.manager.showReplacePanel(id, '展示');
}*/
beforeReplace(event: PluginEvent<ReplaceEventContext>) {
const context = event.context;
// 替换字段的时候保留 label 和 name 值。
if (context.info.plugin === this && context.data) {
context.data.title = context.data.title || context.schema.title;
context.data.key = context.data.key || context.schema.key;
}
}
}
registerEditorPlugin(TableCell2Plugin);

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

@ -185,7 +185,7 @@ export class TableViewPlugin extends BasePlugin {
body: [
getSchemaTpl('collapseGroup', [
{
title: '常用',
title: '基本',
body: [
{
label: '标题',

22
packages/amis-editor/src/plugin/Tabs.tsx
View File

@ -16,7 +16,7 @@ import {VRenderer} from 'amis-editor-core';
import findIndex from 'lodash/findIndex';
import {RegionWrapper as Region} from 'amis-editor-core';
import {Tab} from 'amis';
import {tipedLabel} from '../component/BaseControl';
import {tipedLabel} from 'amis-editor-core';
import {ValidatorTag} from '../validator';
import {
getArgsWrapper,
@ -74,7 +74,7 @@ export class TabsPlugin extends BasePlugin {
{
type: 'object',
properties: {
value: {
'event.data.value': {
type: 'string',
title: '选项卡索引'
}
@ -87,13 +87,12 @@ export class TabsPlugin extends BasePlugin {
actions = [
{
actionType: 'changeActiveKey',
actionLabel: '修改激活tab值',
actionLabel: '激活指定选项卡',
description: '修改当前激活tab项的key',
config: ['activeKey'],
desc: (info: any) => {
descDetail: (info: any) => {
return (
<div>
<span className="variable-right">{info?.__rendererLabel}</span>
激活第
<span className="variable-left variable-right">
{info?.args?.activeKey}
@ -155,7 +154,18 @@ export class TabsPlugin extends BasePlugin {
),
visibleOn: isNewTabMode,
clearValueOnHidden: true
})
}),
{
label: tipedLabel(
'默认选项卡',
'默认显示某个选项卡，选项卡配置hash时使用hash，否则使用索引值，支持获取变量，如：<code>tab\\${id}</code>、<code>\\${id}</code>'
),
type: 'input-text',
name: 'activeKey',
pipeOut: (data: string) =>
data === '' || isNaN(Number(data)) ? data : Number(data)
}
]
},
getSchemaTpl('status'),

108
packages/amis-editor/src/plugin/Timeline.tsx Normal file
View File

@ -0,0 +1,108 @@
import React from 'react';
import {getEventControlConfig} from '../renderer/event-control/helper';
import {tipedLabel} from 'amis-editor-core';
import {registerEditorPlugin, getSchemaTpl} from 'amis-editor-core';
import {BasePlugin, BaseEventContext} from 'amis-editor-core';
export class TimelinePlugin extends BasePlugin {
rendererName = 'timeline';
$schema = '/schemas/TimelineSchema.json';
label: '时间轴';
type: 'timeline';
name = '时间轴';
isBaseComponent = true;
icon = 'fa fa-bars';
description = '用来展示时间轴';
docLink = '/amis/zh-CN/components/timeline';
tags = ['功能'];
scaffold = {
type: 'timeline',
label: '时间轴',
name: 'timeline',
items: [
{time: '2012-12-21', title: '节点示例数据'},
{time: '2012-12-24', title: '节点示例数据'},
{time: '2012-12-27', title: '节点示例数据'}
]
};
previewSchema = {
...this.scaffold
};
// TODO 事件定义
// events = [];
panelTitle = '时间轴';
panelJustify = true;
panelBodyCreator = (context: BaseEventContext) =>
getSchemaTpl('tabs', [
{
title: '属性',
body: getSchemaTpl('collapseGroup', [
{
title: '基本',
body: [
getSchemaTpl('formItemName', {
required: true
}),
getSchemaTpl('label'),
{
label: '排序',
name: 'reverse',
value: false,
type: 'button-group-select',
inline: false,
options: [
{label: '正序', value: false},
{label: '反序', value: true}
]
},
{
label: '时间轴方向',
name: 'direction',
value: 'vertical',
type: 'button-group-select',
inline: true,
options: [
{label: '垂直', value: 'vertical'},
{label: '水平', value: 'horizontal'}
]
},
{
label: tipedLabel('文字位置', '文字相对时间轴位置'),
name: 'mode',
value: 'right',
type: 'button-group-select',
visibleOn: 'data.direction === "vertical"',
options: [
{label: '左侧', value: 'right'},
{label: '右侧', value: 'left'},
{label: '两侧交替', value: 'alternate'}
]
}
]
},
{
title: '数据',
body: [
getSchemaTpl('timelineItemControl', {
name: 'items',
mode: 'normal'
})
]
},
getSchemaTpl('status')
])
},
{
title: '外观',
body: getSchemaTpl('collapseGroup', [
getSchemaTpl('style:classNames', {
isFormItem: false
})
])
}
]);
}
registerEditorPlugin(TimelinePlugin);

8
packages/amis-editor/src/plugin/TooltipWrapper.tsx
View File

@ -5,7 +5,7 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BasePlugin, RegionConfig, BaseEventContext} from 'amis-editor-core';
import {defaultValue, getSchemaTpl} from 'amis-editor-core';
import {tipedLabel} from '../component/BaseControl';
import {tipedLabel} from 'amis-editor-core';
export class TooltipWrapperPlugin extends BasePlugin {
rendererName = 'tooltip-wrapper';
@ -59,7 +59,7 @@ export class TooltipWrapperPlugin extends BasePlugin {
body: [
getSchemaTpl('collapseGroup', [
{
title: '常用',
title: '基本',
body: [
{
type: 'input-text',
@ -205,7 +205,7 @@ export class TooltipWrapperPlugin extends BasePlugin {
Array.isArray(value) ? value[0] || 0 : 0,
pipeOut: (value: any, oldValue: any, data: any) => [
value,
data.offset[1]
data.offset?.[1] || 0
]
},
{
@ -215,7 +215,7 @@ export class TooltipWrapperPlugin extends BasePlugin {
pipeIn: (value: any) =>
Array.isArray(value) ? value[1] || 0 : 0,
pipeOut: (value: any, oldValue: any, data: any) => [
data.offset[0],
data.offset?.[0] || 0,
value
]
}

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

@ -1,7 +1,7 @@
import {registerEditorPlugin} from 'amis-editor-core';
import {BaseEventContext, BasePlugin} from 'amis-editor-core';
import {defaultValue, getSchemaTpl, setSchemaTpl} from 'amis-editor-core';
import {tipedLabel} from '../component/BaseControl';
import {tipedLabel} from 'amis-editor-core';
import {ValidatorTag} from '../validator';
setSchemaTpl('tpl:content', {

Some files were not shown because too many files have changed in this diff Show More