From 1d0119a01d0be549a3c304399875058cf85b62b4 Mon Sep 17 00:00:00 2001 From: hsm-lv Date: Tue, 11 Oct 2022 21:42:28 +0800 Subject: [PATCH] =?UTF-8?q?[amis-saas-7408]:=E4=BC=98=E5=8C=96=E5=88=B7?= =?UTF-8?q?=E6=96=B0=E5=8A=A8=E4=BD=9C=E9=85=8D=E7=BD=AE=EF=BC=8C=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=95=B0=E6=8D=AE=E8=BF=BD=E5=8A=A0=E6=8E=A7=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: If0cab922f8b40b092c22edfc865ceab09a2a83c2 --- packages/amis-editor/src/plugin/Form/Form.tsx | 9 +- .../src/renderer/event-control/actions.tsx | 223 ++++++++++++++---- .../src/renderer/event-control/helper.tsx | 91 +++++-- 3 files changed, 254 insertions(+), 69 deletions(-) diff --git a/packages/amis-editor/src/plugin/Form/Form.tsx b/packages/amis-editor/src/plugin/Form/Form.tsx index 141be42c6..4584365a8 100644 --- a/packages/amis-editor/src/plugin/Form/Form.tsx +++ b/packages/amis-editor/src/plugin/Form/Form.tsx @@ -223,7 +223,7 @@ export class FormPlugin extends BasePlugin { properties: { 'event.data': { type: 'object', - title: 'initApi 远程请求返回的初始化数据' + title: '初始化接口请求成功后返回的数据' } } } @@ -328,14 +328,15 @@ export class FormPlugin extends BasePlugin { { eventName: 'submitSucc', eventLabel: '提交成功', - description: '表单提交请求成功后触发', + description: + '表单提交成功后触发,如果事件源是按钮,且按钮的类型为“提交”,那么即便当前表单没有配置“保存接口”也将触发提交成功事件', dataSchema: [ { type: 'object', properties: { 'event.data.result': { type: 'object', - title: '提交成功后返回的数据' + title: '保存接口请求成功后返回的数据' } } } @@ -351,7 +352,7 @@ export class FormPlugin extends BasePlugin { properties: { 'event.data.error': { type: 'object', - title: '提交失败后返回的错误信息' + title: '保存接口请求失败后返回的错误信息' } } } diff --git a/packages/amis-editor/src/renderer/event-control/actions.tsx b/packages/amis-editor/src/renderer/event-control/actions.tsx index 53a0ef9d6..f9c86b100 100644 --- a/packages/amis-editor/src/renderer/event-control/actions.tsx +++ b/packages/amis-editor/src/renderer/event-control/actions.tsx @@ -37,7 +37,8 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { descDetail: (info: any) => { return (
- 跳转至{info?.args?.url} + 跳转至 + {info?.args?.url || '-'}
); }, @@ -66,6 +67,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { label: '页面参数', multiple: true, mode: 'horizontal', + size: 'lg', items: [ { name: 'key', @@ -109,7 +111,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
打开 - {info?.args?.pageName} + {info?.args?.pageName || '-'} 页面
@@ -295,7 +297,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { return (
{MSG_TYPES[info?.args?.msgType] || ''}消息: - {info?.args?.msg} + {info?.args?.msg || '-'}
); }, @@ -424,10 +426,10 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
发送 - {apiInfo?.method} + {apiInfo?.method || '-'} 请求: - {apiInfo?.url} + {apiInfo?.url || '-'}
); }, @@ -555,7 +557,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
显示 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 组件
@@ -569,7 +571,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
隐藏 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 组件
@@ -579,7 +581,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { ], supportComponents: '*', schema: [ - ...renderCmptSelect('选择组件', true), + ...renderCmptSelect('目标组件', true), { type: 'radios', label: '显示/隐藏', @@ -614,7 +616,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
启用 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 组件
@@ -628,7 +630,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
禁用 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 组件
@@ -642,7 +644,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { ...SUPPORT_DISABLED_CMPTS ], schema: [ - ...renderCmptSelect('选择组件', true), + ...renderCmptSelect('目标组件', true), { type: 'radios', label: '启用/禁用', @@ -674,19 +676,128 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
刷新 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 组件
); }, supportComponents: 'byComponent', - schema: renderCmptSelect('选择组件', true) + schema: [ + ...renderCmptSelect( + '目标组件', + true, + (value: string, oldVal: any, data: any, form: any) => { + form.setValueByName('__addParam', true); + form.setValueByName('__addParamType', 'default'); + form.setValueByName('__reloadParam', []); + } + ), + { + type: 'switch', + name: '__addParam', + label: '追加数据', + labelRemark: { + className: 'm-l-xs', + icon: 'fa fa-question-circle', + rootClose: true, + content: `选择“是”时,会将源组件所在数据域变量同步到目标组件的数据域。
如果目标组件是增删改查组件,且增删改查组件的数据拉取接口是get请求,则源组件所在数据域变量将追加到目标组件的初始化请求query中。`, + placement: 'top' + }, + onText: '是', + offText: '否', + mode: 'horizontal', + pipeIn: defaultValue(true), + visibleOn: `data.actionType === "reload" && ${IS_DATA_CONTAINER}` + }, + { + type: 'radios', + name: 'dataMergeMode', + mode: 'horizontal', + label: '追加方式', + labelRemark: { + className: 'm-l-xs', + icon: 'fa fa-question-circle', + rootClose: true, + content: `选择“合并”时,会将数据合并到目标组件的数据域。
选择“覆盖”时,数据会直接覆盖目标组件的数据域。`, + placement: 'top' + }, + pipeIn: defaultValue('merge'), + visibleOn: `data.__addParam && data.actionType === "reload" && ${IS_DATA_CONTAINER}`, + options: [ + { + label: '合并', + value: 'merge' + }, + { + label: '覆盖', + value: 'override' + } + ] + }, + { + type: 'radios', + name: '__addParamType', + mode: 'horizontal', + label: '数据配置', + labelRemark: { + className: 'm-l-xs', + icon: 'fa fa-question-circle', + rootClose: true, + content: `数据默认为源组件所在数据域,可以选择“自定义”来定制所需数据`, + placement: 'top' + }, + pipeIn: defaultValue('default'), + visibleOn: `data.__addParam && data.actionType === "reload" && ${IS_DATA_CONTAINER}`, + options: [ + { + label: '源组件所在数据域', + value: 'default' + }, + { + label: '自定义', + value: 'custom' + } + ] + }, + { + type: 'combo', + name: '__reloadParams', + label: '', + multiple: true, + removable: true, + addable: true, + strictMode: false, + canAccessSuperData: true, + size: 'lg', + mode: 'horizontal', + items: [ + { + name: 'key', + type: 'input-text', + placeholder: '参数名', + labelField: 'label', + valueField: 'value', + required: true + }, + { + name: 'val', + type: 'input-formula', + placeholder: '参数值', + variables: '${variables}', + evalMode: false, + variableMode: 'tabs', + inputMode: 'input-group' + } + ], + visibleOn: `data.__addParam && data.__addParamType === "custom" && data.actionType === "reload" && ${IS_DATA_CONTAINER}` + } + ] }, { - actionLabel: '设置组件数据', + actionLabel: '组件数据', actionType: 'setValue', - description: '设置数据容器或表单项的数据', + description: '更新目标组件的数据域或目标表单项的数据值', innerArgs: [ 'value', 'index', @@ -699,7 +810,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
设置 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 的数据 {/* 值为 @@ -713,25 +824,32 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { }, supportComponents: 'byComponent', schema: [ - ...renderCmptActionSelect('选择组件', true), + ...renderCmptActionSelect( + '目标组件', + true, + (value: string, oldVal: any, data: any, form: any) => { + form.setValueByName('args.__containerType', 'all'); + form.setValueByName('args.__comboType', 'all'); + } + ), getArgsWrapper({ type: 'wrapper', className: 'p-none', body: [ { type: 'radios', - required: true, name: '__containerType', mode: 'horizontal', - label: '赋值方式', - visibleOn: `data.__rendererName && ${IS_DATA_CONTAINER}`, + label: '数据设置', + pipeIn: defaultValue('all'), + visibleOn: `${IS_DATA_CONTAINER}`, options: [ { - label: '数据域赋值', + label: '直接赋值', value: 'all' }, { - label: '数据域成员赋值', + label: '成员赋值', value: 'appoint' } ], @@ -747,12 +865,12 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { }, { type: 'radios', - required: true, name: '__comboType', inputClassName: 'event-action-radio', mode: 'horizontal', - label: '赋值方式', - visibleOn: `data.__rendererName && __rendererName === 'combo'`, + label: '数据设置', + pipeIn: defaultValue('all'), + visibleOn: `data.__rendererName === 'combo'`, options: [ { label: '全量', @@ -780,19 +898,21 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { name: 'index', mode: 'horizontal', label: '输入序号', + size: 'lg', placeholder: '请输入待更新序号', - visibleOn: `data.__comboType && __comboType === 'appoint' && data.__rendererName && data.__rendererName === 'combo'` + visibleOn: `data.__comboType === 'appoint' && data.__rendererName === 'combo'` }, { type: 'combo', name: 'value', - label: '字段赋值', + label: '', multiple: true, removable: true, required: true, addable: true, strictMode: false, canAccessSuperData: true, + size: 'lg', mode: 'horizontal', items: [ { @@ -802,7 +922,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { source: '${__setValueDs}', labelField: 'label', valueField: 'value', - required: true, + required: true }, { name: 'val', @@ -814,12 +934,12 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { inputMode: 'input-group' } ], - visibleOn: `data.__rendererName && ${IS_DATA_CONTAINER} && data.__containerType && data.__containerType === 'appoint' || (data.__comboType && __comboType === 'appoint')` + visibleOn: `${IS_DATA_CONTAINER} && data.__containerType === 'appoint' || data.__comboType === 'appoint'` }, { type: 'combo', name: 'value', - label: '字段赋值', + label: '', multiple: true, removable: true, required: true, @@ -827,6 +947,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { strictMode: false, canAccessSuperData: true, mode: 'horizontal', + size: 'lg', items: [ { type: 'combo', @@ -840,6 +961,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { strictMode: false, canAccessSuperData: true, className: 'm-l', + size: 'lg', mode: 'horizontal', items: [ { @@ -862,7 +984,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { ] } ], - visibleOn: `data.__rendererName && __rendererName === 'combo' && data.__comboType && __comboType === 'all'` + visibleOn: `data.__rendererName === 'combo' && data.__comboType === 'all'` }, { name: '__valueInput', @@ -871,10 +993,23 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { evalMode: false, variableMode: 'tabs', inputMode: 'input-group', - label: '赋值', + label: '', size: 'lg', mode: 'horizontal', - visibleOn: `data.__rendererName && !${IS_DATA_CONTAINER} && !${SHOW_SELECT_PROP} && __rendererName !== 'combo' || (${IS_DATA_CONTAINER} && data.__containerType && data.__containerType === 'all')`, + visibleOn: `(${IS_DATA_CONTAINER} || ${SHOW_SELECT_PROP}) && data.__containerType === 'all'`, + required: true + }, + { + name: '__valueInput', + type: 'input-formula', + variables: '${variables}', + evalMode: false, + variableMode: 'tabs', + inputMode: 'input-group', + label: '数据设置', + size: 'lg', + mode: 'horizontal', + visibleOn: `data.__rendererName && !${IS_DATA_CONTAINER} && data.__rendererName !== 'combo'`, required: true } ] @@ -890,14 +1025,14 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
提交 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 的数据
); }, supportComponents: 'form', - schema: renderCmptSelect('选择组件', true) + schema: renderCmptSelect('目标组件', true) }, { actionLabel: '清空表单', @@ -908,14 +1043,14 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
清空 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 的数据
); }, supportComponents: 'form', - schema: renderCmptSelect('选择组件', true) + schema: renderCmptSelect('目标组件', true) }, { actionLabel: '重置表单', @@ -926,14 +1061,14 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
重置 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 的数据
); }, supportComponents: 'form', - schema: renderCmptSelect('选择组件', true) + schema: renderCmptSelect('目标组件', true) }, { actionLabel: '校验表单', @@ -944,21 +1079,21 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
校验 - {info?.rendererLabel} + {info?.rendererLabel || '-'} 的数据
); }, supportComponents: 'form', - schema: renderCmptSelect('选择组件', true) + schema: renderCmptSelect('目标组件', true) }, { actionLabel: '组件特性动作', actionType: 'component', description: '触发所选组件的特性动作', supportComponents: '*', - schema: renderCmptActionSelect('选择组件', true) + schema: renderCmptActionSelect('目标组件', true) } ] }, @@ -975,7 +1110,9 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { return (
复制内容: - {info?.args?.content} + + {info?.args?.content || '-'} +
); }, diff --git a/packages/amis-editor/src/renderer/event-control/helper.tsx b/packages/amis-editor/src/renderer/event-control/helper.tsx index 193a6912e..0eabeb247 100644 --- a/packages/amis-editor/src/renderer/event-control/helper.tsx +++ b/packages/amis-editor/src/renderer/event-control/helper.tsx @@ -18,12 +18,12 @@ import { filterTree, findTree, mapTree, - normalizeApi + normalizeApi, + PlainObject } from 'amis-core'; import CmptActionSelect from './comp-action-select'; import {Button} from 'amis'; import ACTION_TYPE_TREE from './actions'; -import {stores} from 'amis-core/lib/factory'; // 数据容器范围 export const DATA_CONTAINER = [ @@ -32,6 +32,7 @@ export const DATA_CONTAINER = [ 'drawer', 'wizard', 'service', + 'crud', 'page', 'app', 'chart' @@ -43,12 +44,12 @@ export const SELECT_PROPS_CONTAINER = ['form']; // 是否数据容器 export const IS_DATA_CONTAINER = `${JSON.stringify( DATA_CONTAINER -)}.includes(__rendererName)`; +)}.includes(data.__rendererName)`; // 是否下拉展示可赋值属性 export const SHOW_SELECT_PROP = `${JSON.stringify( SELECT_PROPS_CONTAINER -)}.includes(__rendererName)`; +)}.includes(data.__rendererName)`; // 表单项组件 export const FORMITEM_CMPTS = [ @@ -211,7 +212,7 @@ export const COMMON_ACTION_SCHEMA_MAP: { inputMode: 'input-group' } ], - visibleOn: `data.__rendererName && ${IS_DATA_CONTAINER}` + visibleOn: `${IS_DATA_CONTAINER}` }, { type: 'combo', @@ -255,7 +256,7 @@ export const COMMON_ACTION_SCHEMA_MAP: { ] } ], - visibleOn: `data.__rendererName && __rendererName === 'combo'` + visibleOn: `data.__rendererName === 'combo'` }, { name: '__valueInput', @@ -267,7 +268,7 @@ export const COMMON_ACTION_SCHEMA_MAP: { label: '变量赋值', size: 'lg', mode: 'horizontal', - visibleOn: `data.__rendererName && !${IS_DATA_CONTAINER} && __rendererName !== 'combo'`, + visibleOn: `!${IS_DATA_CONTAINER} && data.__rendererName !== 'combo'`, required: true } ] @@ -511,7 +512,7 @@ export const renderCmptSelect = ( { type: 'tree-select', name: 'componentId', - label: componentLabel, + label: componentLabel || '选择组件', showIcon: false, searchable: true, required, @@ -540,7 +541,7 @@ export const renderCmptActionSelect = ( ) => { return [ ...renderCmptSelect( - '选择组件', + componentLabel || '选择组件', true, async (value: string, oldVal: any, data: any, form: any) => { // 获取组件上下文. @@ -957,6 +958,31 @@ export const getOldActionSchema = ( }; }; +/** + * 对象转Combo组件对象数组 + * @param obj + * @returns + */ +const objectToComboArray = (obj: PlainObject) => + Object.entries(obj).map(([key, val]) => ({ + key, + val + })); + +/** + * Combo组件对象数组转对象 + * @param arr + * @returns + */ +const comboArrayToObject = (arr: any[]) => { + let obj: PlainObject = {}; + arr.forEach(item => { + obj[item.key] = item.val; + }); + + return obj; +}; + /** * 获取事件动作面板所需属性配置 */ @@ -1085,10 +1111,7 @@ export const getEventControlConfig = ( if (!arr[index]) { arr[index] = {}; } - arr[index].item = Object.entries(valueItem).map(([key, val]) => ({ - key, - val - })); + arr[index].item = objectToComboArray(valueItem); return arr; }, [] @@ -1096,10 +1119,7 @@ export const getEventControlConfig = ( // 目前只有给combo赋值会是数组,所以认为是全量的赋值方式 config.args['__comboType'] = 'all'; } else if (typeof action.args[prop] === 'object') { - config.args[prop] = Object.keys(action.args[prop]).map(key => ({ - key, - val: action.args?.[prop][key] - })); + config.args[prop] = objectToComboArray(action.args[prop]); config.args['__containerType'] = 'appoint'; // 如果有index,认为是给指定序号的combo赋值,所以认为是指定序号的赋值方式 if (action.args.index !== undefined) { @@ -1128,6 +1148,24 @@ export const getEventControlConfig = ( manager.pluginActions, commonActions ); + + // 处理刷新组件动作的追加参数 + if (config.actionType === 'reload') { + config.__addParam = config.args === undefined || !!config.args; + + if (config.args && typeof config.args === 'object') { + config.__addParamType = 'custom'; + } + + if ( + config.__addParam && + config.__addParamType === 'custom' && + config.args + ) { + config.__reloadParams = objectToComboArray(config.args); + } + } + // 还原args为可视化配置结构(args + addOnArgs) if (config.args) { if (innerArgs) { @@ -1219,6 +1257,20 @@ export const getEventControlConfig = ( }); delete action.addOnArgs; } + + // 刷新组件时,处理是否追加事件变量 + if (config.actionType === 'reload') { + action.args = null; + action.dataMergeMode = undefined; + if (config.__addParam) { + action.dataMergeMode = config.dataMergeMode || 'merge'; + action.args = undefined; + if (config.__addParamType === 'custom') { + action.args = comboArrayToObject(config.__reloadParams || []); + } + } + } + // 转换下格式 if (['setValue', 'url'].includes(action.actionType)) { const propName = action.actionType === 'setValue' ? 'value' : 'params'; @@ -1264,11 +1316,6 @@ export const getEventControlConfig = ( delete action.config; - // 去掉空参 - if (action.args && !Object.keys(action.args).length) { - delete action.args; - } - return action; } };