test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-16 01:40:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[amis-saas-7408]:优化刷新动作配置，增加数据追加控制

Browse Source 
Change-Id: If0cab922f8b40b092c22edfc865ceab09a2a83c2
This commit is contained in:
hsm-lv 2022-10-11 21:42:28 +08:00
parent acd233860c
commit 1d0119a01d
3 changed files with 254 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: '保存接口请求失败后返回的错误信息'
}
}
}

223
packages/amis-editor/src/renderer/event-control/actions.tsx
View File

@ -37,7 +37,8 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
descDetail: (info: any) => {
return (
<div>
跳转至<span className="variable-left">{info?.args?.url}</span>
跳转至
<span className="variable-left">{info?.args?.url || '-'}</span>
</div>
);
},
@ -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[] => {
<div>
打开
<span className="variable-left variable-right">
{info?.args?.pageName}
{info?.args?.pageName || '-'}
</span>
页面
</div>
@ -295,7 +297,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
return (
<div>
{MSG_TYPES[info?.args?.msgType] || ''}消息：
<span className="variable-left">{info?.args?.msg}</span>
<span className="variable-left">{info?.args?.msg || '-'}</span>
</div>
);
},
@ -424,10 +426,10 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
<div>
发送
<span className="variable-right variable-left">
{apiInfo?.method}
{apiInfo?.method || '-'}
</span>
请求：
<span className="variable-left">{apiInfo?.url}</span>
<span className="variable-left">{apiInfo?.url || '-'}</span>
</div>
);
},
@ -555,7 +557,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
<div>
显示
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
组件
</div>
@ -569,7 +571,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
<div>
隐藏
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
组件
</div>
@ -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[] => {
<div>
启用
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
组件
</div>
@ -628,7 +630,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
<div>
禁用
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
组件
</div>
@ -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[] => {
<div>
刷新
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
组件
</div>
);
},
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: `选择“是”时，会将源组件所在数据域变量同步到目标组件的数据域。<br/>如果目标组件是增删改查组件，且增删改查组件的数据拉取接口是get请求，则源组件所在数据域变量将追加到目标组件的初始化请求query中。`,
placement: 'top'
},
onText: '是',
offText: '否',
mode: 'horizontal',
pipeIn: defaultValue(true),
visibleOn: `data.actionType === "reload" && ${IS_DATA_CONTAINER}`
},
{
actionLabel: '设置组件数据',
type: 'radios',
name: 'dataMergeMode',
mode: 'horizontal',
label: '追加方式',
labelRemark: {
className: 'm-l-xs',
icon: 'fa fa-question-circle',
rootClose: true,
content: `选择“合并”时，会将数据合并到目标组件的数据域。<br/>选择“覆盖”时，数据会直接覆盖目标组件的数据域。`,
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: '组件数据',
actionType: 'setValue',
description: '设置数据容器或表单项的数据',
description: '更新目标组件的数据域或目标表单项的数据值',
innerArgs: [
'value',
'index',
@ -699,7 +810,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
<div>
设置
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
的数据
{/* 值为
@ -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[] => {
<div>
提交
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
的数据
</div>
);
},
supportComponents: 'form',
schema: renderCmptSelect('选择组件', true)
schema: renderCmptSelect('目标组件', true)
},
{
actionLabel: '清空表单',
@ -908,14 +1043,14 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
<div>
清空
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
的数据
</div>
);
},
supportComponents: 'form',
schema: renderCmptSelect('选择组件', true)
schema: renderCmptSelect('目标组件', true)
},
{
actionLabel: '重置表单',
@ -926,14 +1061,14 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
<div>
重置
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
的数据
</div>
);
},
supportComponents: 'form',
schema: renderCmptSelect('选择组件', true)
schema: renderCmptSelect('目标组件', true)
},
{
actionLabel: '校验表单',
@ -944,21 +1079,21 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
<div>
校验
<span className="variable-left variable-right">
{info?.rendererLabel}
{info?.rendererLabel || '-'}
</span>
的数据
</div>
);
},
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 (
<div>
复制内容：
<span className="variable-left">{info?.args?.content}</span>
<span className="variable-left">
{info?.args?.content || '-'}
</span>
</div>
);
},

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

@ -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;
}
};