From 21ef86a5a9a1092df7252ad146d13f683328b7f7 Mon Sep 17 00:00:00 2001 From: pianruijie Date: Thu, 21 Jul 2022 16:56:01 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=BC=E5=AE=B9api=20string=E6=A0=BC?= =?UTF-8?q?=E5=BC=8F=20&&=20tooltip=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I05b1a5e03060ee73affd203b1308fb3ddb8b126b --- .../amis-editor/src/renderer/APIControl.tsx | 3 - .../src/renderer/event-control/actions.tsx | 9 +- .../src/renderer/event-control/helper.tsx | 594 +++++++++--------- 3 files changed, 309 insertions(+), 297 deletions(-) diff --git a/packages/amis-editor/src/renderer/APIControl.tsx b/packages/amis-editor/src/renderer/APIControl.tsx index b9f72be74..90cc9ac7e 100644 --- a/packages/amis-editor/src/renderer/APIControl.tsx +++ b/packages/amis-editor/src/renderer/APIControl.tsx @@ -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); } diff --git a/packages/amis-editor/src/renderer/event-control/actions.tsx b/packages/amis-editor/src/renderer/event-control/actions.tsx index bbfbe36b9..422f62ca4 100644 --- a/packages/amis-editor/src/renderer/event-control/actions.tsx +++ b/packages/amis-editor/src/renderer/event-control/actions.tsx @@ -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 (
发送 - {info?.args?.api?.method} + {apiInfo?.method} 请求： - {info?.args?.api?.url} + {apiInfo?.url}
); }, diff --git a/packages/amis-editor/src/renderer/event-control/helper.tsx b/packages/amis-editor/src/renderer/event-control/helper.tsx index 144883a7e..3a52be717 100644 --- a/packages/amis-editor/src/renderer/event-control/helper.tsx +++ b/packages/amis-editor/src/renderer/event-control/helper.tsx @@ -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: '

对，你刚刚点击了

' + }), + asFormItem: true, + children: ({value, onChange, data}: any) => + data.actionType === 'dialog' ? ( + + ) : null }, { - label: '页面跳转', - value: 'url' + visibleOn: 'data.actionType == "drawer"', + name: 'drawer', + pipeIn: defaultValue({ + title: '弹框标题', + body: '

对，你刚刚点击了

' + }), + asFormItem: true, + children: ({value, onChange, data}: any) => + data.actionType == 'drawer' ? ( + + ) : null + }, + + getSchemaTpl('api', { + label: '目标API', + visibleOn: 'data.actionType == "ajax"' + }), + + { + name: 'feedback', + pipeIn: defaultValue({ + title: '弹框标题', + body: '

内容

' + }), + asFormItem: true, + children: ({onChange, value, data}: any) => + data.actionType == 'ajax' ? ( +
+ + + {value ? ( + + ) : null} +
+ ) : 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: + '当前动作完成后，指定目标组件刷新。支持传递数据如：xxx?a=\\${a}&b=\\${b}，多个目标请用英文逗号隔开。' }, { - 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: '

对，你刚刚点击了

' - }), - asFormItem: true, - children: ({value, onChange, data}: any) => - data.actionType === 'dialog' ? ( - - ) : null - }, - - { - visibleOn: 'data.actionType == "drawer"', - name: 'drawer', - pipeIn: defaultValue({ - title: '弹框标题', - body: '

对，你刚刚点击了

' - }), - asFormItem: true, - children: ({value, onChange, data}: any) => - data.actionType == 'drawer' ? ( - - ) : null - }, - - getSchemaTpl('api', { - label: '目标API', - visibleOn: 'data.actionType == "ajax"' - }), - - { - name: 'feedback', - pipeIn: defaultValue({ - title: '弹框标题', - body: '

内容

' - }), - asFormItem: true, - children: ({onChange, value, data}: any) => - data.actionType == 'ajax' ? ( -
- - - {value ? ( - - ) : null} -
- ) : 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: - '当前动作完成后，指定目标组件刷新。支持传递数据如：xxx?a=\\${a}&b=\\${b}，多个目标请用英文逗号隔开。' - }, - - { - 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,