mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
兼容api string格式 && tooltip优化
Change-Id: I05b1a5e03060ee73affd203b1308fb3ddb8b126b
This commit is contained in:
pianruijie
parent
56e75341fc
commit
21ef86a5a9
@ -129,11 +129,9 @@ export default class APIControl extends React.Component<
|
||||
|
||||
componentDidUpdate(prevProps: APIControlProps) {
|
||||
const props = this.props;
|
||||
|
||||
if (prevProps.value !== props.value) {
|
||||
this.setState({apiStr: this.transformApi2Str(props.value)});
|
||||
}
|
||||
|
||||
if (anyChanged(['enablePickerMode', 'pickerSchema'], prevProps, props)) {
|
||||
this.setState({schema: props.pickerSchema});
|
||||
}
|
||||
@ -198,7 +196,6 @@ export default class APIControl extends React.Component<
|
||||
if (typeof value !== 'string' || typeof values !== 'string') {
|
||||
api = merge({}, normalizeApi(values));
|
||||
}
|
||||
|
||||
onChange?.(api);
|
||||
}
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import {
|
||||
RendererPluginAction
|
||||
} from 'amis-editor-core';
|
||||
import React from 'react';
|
||||
import {normalizeApi} from 'amis-core';
|
||||
import {
|
||||
FORMITEM_CMPTS,
|
||||
getArgsWrapper,
|
||||
@ -409,14 +410,18 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
|
||||
description: '配置并发送API请求',
|
||||
innerArgs: ['api'],
|
||||
descDetail: (info: any) => {
|
||||
let apiInfo = info?.args?.api;
|
||||
if (typeof apiInfo === 'string'){
|
||||
apiInfo = normalizeApi(apiInfo);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
发送
|
||||
<span className="variable-right variable-left">
|
||||
{info?.args?.api?.method}
|
||||
{apiInfo?.method}
|
||||
</span>
|
||||
请求：
|
||||
<span className="variable-left">{info?.args?.api?.url}</span>
|
||||
<span className="variable-left">{apiInfo?.url}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@ -13,7 +13,7 @@ import {
|
||||
SubRendererPluginAction
|
||||
} from 'amis-editor-core';
|
||||
import {ActionConfig, ContextVariables} from './types';
|
||||
import {DataSchema, filterTree, findTree, mapTree} from 'amis-core';
|
||||
import {DataSchema, filterTree, findTree, mapTree, normalizeApi} from 'amis-core';
|
||||
import CmptActionSelect from './comp-action-select';
|
||||
import {Button} from 'amis';
|
||||
import ACTION_TYPE_TREE from './actions';
|
||||
@ -591,345 +591,353 @@ export const getOldActionSchema = (
|
||||
) => {
|
||||
const isInDialog = /(?:\/|^)dialog\/.+$/.test(context.path);
|
||||
return {
|
||||
type: 'button',
|
||||
label: '配置动作(旧版)',
|
||||
className: 'block old-action-btn',
|
||||
tooltip:
|
||||
type: 'tooltip-wrapper',
|
||||
content:
|
||||
'温馨提示：添加下方事件动作后，下方事件动作将先于旧版动作执行，建议统一迁移至事件动作机制，帮助您实现更灵活的交互设计',
|
||||
tooltipPlacement: 'left',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
type: 'dialog',
|
||||
title: '动作',
|
||||
body: {
|
||||
type: 'form',
|
||||
body: [
|
||||
{
|
||||
label: '按钮行为',
|
||||
type: 'select',
|
||||
name: 'actionType',
|
||||
pipeIn: defaultValue(''),
|
||||
options: [
|
||||
inline: true,
|
||||
tooltipTheme: "dark",
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '配置动作(旧版)',
|
||||
className: 'block old-action-btn',
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
type: 'dialog',
|
||||
title: '动作',
|
||||
body: {
|
||||
type: 'form',
|
||||
body: [
|
||||
{
|
||||
label: '默认',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '弹框',
|
||||
value: 'dialog'
|
||||
label: '按钮行为',
|
||||
type: 'select',
|
||||
name: 'actionType',
|
||||
pipeIn: defaultValue(''),
|
||||
options: [
|
||||
{
|
||||
label: '默认',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '弹框',
|
||||
value: 'dialog'
|
||||
},
|
||||
|
||||
{
|
||||
label: '抽出式弹框（Drawer）',
|
||||
value: 'drawer'
|
||||
},
|
||||
|
||||
{
|
||||
label: '发送请求',
|
||||
value: 'ajax'
|
||||
},
|
||||
|
||||
{
|
||||
label: '下载文件',
|
||||
value: 'download'
|
||||
},
|
||||
|
||||
{
|
||||
label: '页面跳转(单页模式)',
|
||||
value: 'link'
|
||||
},
|
||||
|
||||
{
|
||||
label: '页面跳转',
|
||||
value: 'url'
|
||||
},
|
||||
|
||||
{
|
||||
label: '刷新目标',
|
||||
value: 'reload'
|
||||
},
|
||||
|
||||
{
|
||||
label: '复制内容',
|
||||
value: 'copy'
|
||||
},
|
||||
|
||||
{
|
||||
label: '提交',
|
||||
value: 'submit'
|
||||
},
|
||||
|
||||
{
|
||||
label: '重置',
|
||||
value: 'reset'
|
||||
},
|
||||
|
||||
{
|
||||
label: '重置并提交',
|
||||
value: 'reset-and-submit'
|
||||
},
|
||||
|
||||
{
|
||||
label: '确认',
|
||||
value: 'confirm'
|
||||
},
|
||||
|
||||
{
|
||||
label: '取消',
|
||||
value: 'cancel'
|
||||
},
|
||||
|
||||
{
|
||||
label: '跳转下一条',
|
||||
value: 'next'
|
||||
},
|
||||
|
||||
{
|
||||
label: '跳转上一条',
|
||||
value: 'prev'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
label: '抽出式弹框（Drawer）',
|
||||
value: 'drawer'
|
||||
type: 'input-text',
|
||||
name: 'content',
|
||||
visibleOn: 'data.actionType == "copy"',
|
||||
label: '复制内容模板'
|
||||
},
|
||||
|
||||
{
|
||||
label: '发送请求',
|
||||
value: 'ajax'
|
||||
type: 'select',
|
||||
name: 'copyFormat',
|
||||
options: [
|
||||
{
|
||||
label: '纯文本',
|
||||
value: 'text/plain'
|
||||
},
|
||||
{
|
||||
label: '富文本',
|
||||
value: 'text/html'
|
||||
}
|
||||
],
|
||||
visibleOn: 'data.actionType == "copy"',
|
||||
label: '复制格式'
|
||||
},
|
||||
|
||||
{
|
||||
label: '下载文件',
|
||||
value: 'download'
|
||||
type: 'input-text',
|
||||
name: 'target',
|
||||
visibleOn: 'data.actionType == "reload"',
|
||||
label: '指定刷新目标',
|
||||
required: true
|
||||
},
|
||||
|
||||
{
|
||||
label: '页面跳转(单页模式)',
|
||||
value: 'link'
|
||||
name: 'dialog',
|
||||
pipeIn: defaultValue({
|
||||
title: '弹框标题',
|
||||
body: '<p>对，你刚刚点击了</p>'
|
||||
}),
|
||||
asFormItem: true,
|
||||
children: ({value, onChange, data}: any) =>
|
||||
data.actionType === 'dialog' ? (
|
||||
<Button
|
||||
size="sm"
|
||||
level="danger"
|
||||
className="m-b"
|
||||
onClick={() =>
|
||||
manager.openSubEditor({
|
||||
title: '配置弹框内容',
|
||||
value: {type: 'dialog', ...value},
|
||||
onChange: value => onChange(value)
|
||||
})
|
||||
}
|
||||
block
|
||||
>
|
||||
配置弹框内容
|
||||
</Button>
|
||||
) : null
|
||||
},
|
||||
|
||||
{
|
||||
label: '页面跳转',
|
||||
value: 'url'
|
||||
visibleOn: 'data.actionType == "drawer"',
|
||||
name: 'drawer',
|
||||
pipeIn: defaultValue({
|
||||
title: '弹框标题',
|
||||
body: '<p>对，你刚刚点击了</p>'
|
||||
}),
|
||||
asFormItem: true,
|
||||
children: ({value, onChange, data}: any) =>
|
||||
data.actionType == 'drawer' ? (
|
||||
<Button
|
||||
size="sm"
|
||||
level="danger"
|
||||
className="m-b"
|
||||
onClick={() =>
|
||||
manager.openSubEditor({
|
||||
title: '配置抽出式弹框内容',
|
||||
value: {type: 'drawer', ...value},
|
||||
onChange: value => onChange(value)
|
||||
})
|
||||
}
|
||||
block
|
||||
>
|
||||
配置抽出式弹框内容
|
||||
</Button>
|
||||
) : null
|
||||
},
|
||||
|
||||
getSchemaTpl('api', {
|
||||
label: '目标API',
|
||||
visibleOn: 'data.actionType == "ajax"'
|
||||
}),
|
||||
|
||||
{
|
||||
name: 'feedback',
|
||||
pipeIn: defaultValue({
|
||||
title: '弹框标题',
|
||||
body: '<p>内容</p>'
|
||||
}),
|
||||
asFormItem: true,
|
||||
children: ({onChange, value, data}: any) =>
|
||||
data.actionType == 'ajax' ? (
|
||||
<div className="m-b">
|
||||
<Button
|
||||
size="sm"
|
||||
level={value ? 'danger' : 'info'}
|
||||
onClick={() =>
|
||||
manager.openSubEditor({
|
||||
title: '配置反馈弹框详情',
|
||||
value: {type: 'dialog', ...value},
|
||||
onChange: value => onChange(value)
|
||||
})
|
||||
}
|
||||
>
|
||||
配置反馈弹框内容
|
||||
</Button>
|
||||
|
||||
{value ? (
|
||||
<Button
|
||||
size="sm"
|
||||
level="link"
|
||||
className="m-l"
|
||||
onClick={() => onChange('')}
|
||||
>
|
||||
清空设置
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null
|
||||
},
|
||||
|
||||
{
|
||||
label: '刷新目标',
|
||||
value: 'reload'
|
||||
name: 'feedback.visibleOn',
|
||||
label: '是否弹出表达式',
|
||||
type: 'input-text',
|
||||
visibleOn: 'this.feedback',
|
||||
autoComplete: false,
|
||||
description: '请使用 JS 表达式如：`this.xxx == 1`'
|
||||
},
|
||||
|
||||
{
|
||||
label: '复制内容',
|
||||
value: 'copy'
|
||||
name: 'feedback.skipRestOnCancel',
|
||||
label: '弹框取消是否中断后续操作',
|
||||
type: 'switch',
|
||||
mode: 'inline',
|
||||
className: 'block',
|
||||
visibleOn: 'this.feedback'
|
||||
},
|
||||
|
||||
{
|
||||
label: '提交',
|
||||
value: 'submit'
|
||||
name: 'feedback.skipRestOnConfirm',
|
||||
label: '弹框确认是否中断后续操作',
|
||||
type: 'switch',
|
||||
mode: 'inline',
|
||||
className: 'block',
|
||||
visibleOn: 'this.feedback'
|
||||
},
|
||||
|
||||
{
|
||||
label: '重置',
|
||||
value: 'reset'
|
||||
type: 'input-text',
|
||||
label: '目标地址',
|
||||
name: 'link',
|
||||
visibleOn: 'data.actionType == "link"'
|
||||
},
|
||||
|
||||
{
|
||||
label: '重置并提交',
|
||||
value: 'reset-and-submit'
|
||||
type: 'input-text',
|
||||
label: '目标地址',
|
||||
name: 'url',
|
||||
visibleOn: 'data.actionType == "url"',
|
||||
placeholder: 'http://'
|
||||
},
|
||||
|
||||
{
|
||||
label: '确认',
|
||||
value: 'confirm'
|
||||
type: 'switch',
|
||||
name: 'blank',
|
||||
visibleOn: 'data.actionType == "url"',
|
||||
mode: 'inline',
|
||||
className: 'w-full',
|
||||
label: '是否用新窗口打开',
|
||||
pipeIn: defaultValue(true)
|
||||
},
|
||||
|
||||
isInDialog
|
||||
? {
|
||||
visibleOn:
|
||||
'data.actionType == "submit" || data.type == "submit"',
|
||||
name: 'close',
|
||||
type: 'switch',
|
||||
mode: 'inline',
|
||||
className: 'w-full',
|
||||
pipeIn: defaultValue(true),
|
||||
label: '是否关闭当前弹框'
|
||||
}
|
||||
: {},
|
||||
|
||||
{
|
||||
name: 'confirmText',
|
||||
type: 'textarea',
|
||||
label: '确认文案',
|
||||
description:
|
||||
'点击后会弹出此内容，等用户确认后才进行相应的操作。'
|
||||
},
|
||||
|
||||
{
|
||||
label: '取消',
|
||||
value: 'cancel'
|
||||
type: 'input-text',
|
||||
name: 'reload',
|
||||
label: '刷新目标组件',
|
||||
visibleOn:
|
||||
'data.actionType != "link" && data.actionType != "url"',
|
||||
description:
|
||||
'当前动作完成后，指定目标组件刷新。支持传递数据如：<code>xxx?a=\\${a}&b=\\${b}</code>，多个目标请用英文逗号隔开。'
|
||||
},
|
||||
|
||||
{
|
||||
label: '跳转下一条',
|
||||
value: 'next'
|
||||
type: 'input-text',
|
||||
name: 'target',
|
||||
visibleOn: 'data.actionType != "reload"',
|
||||
label: '指定响应组件',
|
||||
description:
|
||||
'指定动作执行者，默认为当前组件所在的功能性性组件，如果指定则转交给目标组件来处理。'
|
||||
},
|
||||
|
||||
{
|
||||
label: '跳转上一条',
|
||||
value: 'prev'
|
||||
type: 'js-editor',
|
||||
allowFullscreen: true,
|
||||
name: 'onClick',
|
||||
label: '自定义点击事件',
|
||||
description: '将会传递 event 和 props 两个参数'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'hotKey',
|
||||
label: '键盘快捷键'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'content',
|
||||
visibleOn: 'data.actionType == "copy"',
|
||||
label: '复制内容模板'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'select',
|
||||
name: 'copyFormat',
|
||||
options: [
|
||||
{
|
||||
label: '纯文本',
|
||||
value: 'text/plain'
|
||||
},
|
||||
{
|
||||
label: '富文本',
|
||||
value: 'text/html'
|
||||
}
|
||||
],
|
||||
visibleOn: 'data.actionType == "copy"',
|
||||
label: '复制格式'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'target',
|
||||
visibleOn: 'data.actionType == "reload"',
|
||||
label: '指定刷新目标',
|
||||
required: true
|
||||
},
|
||||
|
||||
{
|
||||
name: 'dialog',
|
||||
pipeIn: defaultValue({
|
||||
title: '弹框标题',
|
||||
body: '<p>对，你刚刚点击了</p>'
|
||||
}),
|
||||
asFormItem: true,
|
||||
children: ({value, onChange, data}: any) =>
|
||||
data.actionType === 'dialog' ? (
|
||||
<Button
|
||||
size="sm"
|
||||
level="danger"
|
||||
className="m-b"
|
||||
onClick={() =>
|
||||
manager.openSubEditor({
|
||||
title: '配置弹框内容',
|
||||
value: {type: 'dialog', ...value},
|
||||
onChange: value => onChange(value)
|
||||
})
|
||||
}
|
||||
block
|
||||
>
|
||||
配置弹框内容
|
||||
</Button>
|
||||
) : null
|
||||
},
|
||||
|
||||
{
|
||||
visibleOn: 'data.actionType == "drawer"',
|
||||
name: 'drawer',
|
||||
pipeIn: defaultValue({
|
||||
title: '弹框标题',
|
||||
body: '<p>对，你刚刚点击了</p>'
|
||||
}),
|
||||
asFormItem: true,
|
||||
children: ({value, onChange, data}: any) =>
|
||||
data.actionType == 'drawer' ? (
|
||||
<Button
|
||||
size="sm"
|
||||
level="danger"
|
||||
className="m-b"
|
||||
onClick={() =>
|
||||
manager.openSubEditor({
|
||||
title: '配置抽出式弹框内容',
|
||||
value: {type: 'drawer', ...value},
|
||||
onChange: value => onChange(value)
|
||||
})
|
||||
}
|
||||
block
|
||||
>
|
||||
配置抽出式弹框内容
|
||||
</Button>
|
||||
) : null
|
||||
},
|
||||
|
||||
getSchemaTpl('api', {
|
||||
label: '目标API',
|
||||
visibleOn: 'data.actionType == "ajax"'
|
||||
}),
|
||||
|
||||
{
|
||||
name: 'feedback',
|
||||
pipeIn: defaultValue({
|
||||
title: '弹框标题',
|
||||
body: '<p>内容</p>'
|
||||
}),
|
||||
asFormItem: true,
|
||||
children: ({onChange, value, data}: any) =>
|
||||
data.actionType == 'ajax' ? (
|
||||
<div className="m-b">
|
||||
<Button
|
||||
size="sm"
|
||||
level={value ? 'danger' : 'info'}
|
||||
onClick={() =>
|
||||
manager.openSubEditor({
|
||||
title: '配置反馈弹框详情',
|
||||
value: {type: 'dialog', ...value},
|
||||
onChange: value => onChange(value)
|
||||
})
|
||||
}
|
||||
>
|
||||
配置反馈弹框内容
|
||||
</Button>
|
||||
|
||||
{value ? (
|
||||
<Button
|
||||
size="sm"
|
||||
level="link"
|
||||
className="m-l"
|
||||
onClick={() => onChange('')}
|
||||
>
|
||||
清空设置
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null
|
||||
},
|
||||
|
||||
{
|
||||
name: 'feedback.visibleOn',
|
||||
label: '是否弹出表达式',
|
||||
type: 'input-text',
|
||||
visibleOn: 'this.feedback',
|
||||
autoComplete: false,
|
||||
description: '请使用 JS 表达式如：`this.xxx == 1`'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'feedback.skipRestOnCancel',
|
||||
label: '弹框取消是否中断后续操作',
|
||||
type: 'switch',
|
||||
mode: 'inline',
|
||||
className: 'block',
|
||||
visibleOn: 'this.feedback'
|
||||
},
|
||||
|
||||
{
|
||||
name: 'feedback.skipRestOnConfirm',
|
||||
label: '弹框确认是否中断后续操作',
|
||||
type: 'switch',
|
||||
mode: 'inline',
|
||||
className: 'block',
|
||||
visibleOn: 'this.feedback'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '目标地址',
|
||||
name: 'link',
|
||||
visibleOn: 'data.actionType == "link"'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '目标地址',
|
||||
name: 'url',
|
||||
visibleOn: 'data.actionType == "url"',
|
||||
placeholder: 'http://'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'switch',
|
||||
name: 'blank',
|
||||
visibleOn: 'data.actionType == "url"',
|
||||
mode: 'inline',
|
||||
className: 'w-full',
|
||||
label: '是否用新窗口打开',
|
||||
pipeIn: defaultValue(true)
|
||||
},
|
||||
|
||||
isInDialog
|
||||
? {
|
||||
visibleOn:
|
||||
'data.actionType == "submit" || data.type == "submit"',
|
||||
name: 'close',
|
||||
type: 'switch',
|
||||
mode: 'inline',
|
||||
className: 'w-full',
|
||||
pipeIn: defaultValue(true),
|
||||
label: '是否关闭当前弹框'
|
||||
}
|
||||
: {},
|
||||
|
||||
{
|
||||
name: 'confirmText',
|
||||
type: 'textarea',
|
||||
label: '确认文案',
|
||||
description: '点击后会弹出此内容，等用户确认后才进行相应的操作。'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'reload',
|
||||
label: '刷新目标组件',
|
||||
visibleOn: 'data.actionType != "link" && data.actionType != "url"',
|
||||
description:
|
||||
'当前动作完成后，指定目标组件刷新。支持传递数据如：<code>xxx?a=\\${a}&b=\\${b}</code>，多个目标请用英文逗号隔开。'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'target',
|
||||
visibleOn: 'data.actionType != "reload"',
|
||||
label: '指定响应组件',
|
||||
description:
|
||||
'指定动作执行者，默认为当前组件所在的功能性性组件，如果指定则转交给目标组件来处理。'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'js-editor',
|
||||
allowFullscreen: true,
|
||||
name: 'onClick',
|
||||
label: '自定义点击事件',
|
||||
description: '将会传递 event 和 props 两个参数'
|
||||
},
|
||||
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'hotKey',
|
||||
label: '键盘快捷键'
|
||||
onConfirm: (values: any[]) => {
|
||||
manager.panelChangeValue(values[0]);
|
||||
}
|
||||
]
|
||||
},
|
||||
onConfirm: (values: any[]) => {
|
||||
manager.panelChangeValue(values[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
@ -1064,7 +1072,9 @@ export const getEventControlConfig = (
|
||||
delete config.args?.value;
|
||||
}
|
||||
}
|
||||
|
||||
if (action.actionType === 'ajax' && typeof action?.args?.api === 'string') {
|
||||
action.args.api = normalizeApi(action?.args?.api);
|
||||
}
|
||||
// 获取动作专有配置参数
|
||||
const innerArgs: any = getPropOfAcion(
|
||||
action,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user