mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
支持可视化选择请求结果变量
Change-Id: Ia4b0290a5bff095663cdffeb41bf03fabc643c42
This commit is contained in:
pianruijie
parent
8df83bd50b
commit
299bb97720
@ -4,7 +4,12 @@ import cx from 'classnames';
|
||||
import Sortable from 'sortablejs';
|
||||
import {DataSchema, FormItem, Icon, TooltipWrapper} from 'amis';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import {FormControlProps, autobind, render as amisRender, findTree} from 'amis-core';
|
||||
import {
|
||||
FormControlProps,
|
||||
autobind,
|
||||
render as amisRender,
|
||||
findTree
|
||||
} from 'amis-core';
|
||||
import ActionDialog from './action-config-dialog';
|
||||
import {
|
||||
findActionNode,
|
||||
@ -70,7 +75,7 @@ interface EventControlState {
|
||||
__cmptTreeSource?: ComponentInfo[];
|
||||
__actionSchema?: any;
|
||||
__subActions?: SubRendererPluginAction[];
|
||||
__setValueDs?: any[]
|
||||
__setValueDs?: any[];
|
||||
}
|
||||
| undefined;
|
||||
type: 'update' | 'add';
|
||||
@ -312,10 +317,9 @@ export class EventControl extends React.Component<
|
||||
let emptyEventAcion = {...onEvent};
|
||||
let onEventConfig = {...onEvent};
|
||||
|
||||
emptyEventAcion[event] = {
|
||||
emptyEventAcion[event] = {
|
||||
actions: onEvent[event].actions.map((item, actionIndex) => {
|
||||
return actionIndex === index
|
||||
? {actionType: ''} : item;
|
||||
return actionIndex === index ? {actionType: ''} : item;
|
||||
}),
|
||||
weight: onEvent[event].weight
|
||||
};
|
||||
@ -393,7 +397,7 @@ export class EventControl extends React.Component<
|
||||
} else {
|
||||
parent.appendChild(e.item);
|
||||
}
|
||||
let onEventConfig = {...this.state.onEvent};
|
||||
let onEventConfig = cloneDeep(this.state.onEvent);
|
||||
const newEvent = onEventConfig[eventKey];
|
||||
let options = newEvent?.actions.concat();
|
||||
// 从后往前移
|
||||
@ -430,6 +434,46 @@ export class EventControl extends React.Component<
|
||||
});
|
||||
}
|
||||
|
||||
getEventVariables(
|
||||
activeData: Pick<
|
||||
EventControlState,
|
||||
'showAcionDialog' | 'type' | 'actionData'
|
||||
>
|
||||
) {
|
||||
const {events, onEvent} = this.state;
|
||||
// 收集当前事件已有ajax动作的请求返回结果作为事件变量
|
||||
let oldActions = onEvent[activeData.actionData!.eventKey].actions;
|
||||
if (activeData.type === 'update') {
|
||||
oldActions = oldActions.slice(0, activeData.actionData!.actionIndex || oldActions?.length);
|
||||
}
|
||||
const ajaxActions = oldActions?.filter(item => item.actionType === 'ajax');
|
||||
const ajaxVariables = ajaxActions?.map((item: any, index: number) => {
|
||||
return {
|
||||
label: `${item.outputVar ? item.outputVar + '（请求返回结果）' : '请求返回结果'}`,
|
||||
tag: 'object',
|
||||
type: 'object',
|
||||
value: `${item.outputVar ? ('event.data.' + item.outputVar) : 'event.data'}`
|
||||
};
|
||||
});
|
||||
const eventVariables: ContextVariables[] = [
|
||||
{
|
||||
label: '事件变量',
|
||||
children: ajaxVariables || []
|
||||
}
|
||||
];
|
||||
const eventConfig = events.find(
|
||||
item => item.eventName === activeData.actionData!.eventKey
|
||||
);
|
||||
eventConfig?.dataSchema?.forEach((ds: any) => {
|
||||
const dataSchema = new DataSchema(ds || []);
|
||||
eventVariables[0].children = [
|
||||
...eventVariables[0].children!,
|
||||
...dataSchema.getDataPropsAsOptions()
|
||||
];
|
||||
});
|
||||
return eventVariables;
|
||||
}
|
||||
|
||||
// 唤起动作配置弹窗
|
||||
activeActionDialog(
|
||||
data: Pick<EventControlState, 'showAcionDialog' | 'type' | 'actionData'>
|
||||
@ -441,27 +485,9 @@ export class EventControl extends React.Component<
|
||||
getComponents,
|
||||
actionTree
|
||||
} = this.props;
|
||||
const {events, rawVariables} = this.state;
|
||||
|
||||
const {rawVariables} = this.state;
|
||||
// 收集事件变量
|
||||
let eventVariables: ContextVariables[] = [
|
||||
{
|
||||
label: '事件变量',
|
||||
children: []
|
||||
}
|
||||
];
|
||||
const eventConfig = events.find(
|
||||
item => item.eventName === data.actionData!.eventKey
|
||||
);
|
||||
|
||||
eventConfig?.dataSchema?.forEach((ds: any) => {
|
||||
const dataSchema = new DataSchema(ds || []);
|
||||
eventVariables[0].children = [
|
||||
...eventVariables[0].children!,
|
||||
...dataSchema.getDataPropsAsOptions()
|
||||
];
|
||||
});
|
||||
|
||||
const eventVariables = this.getEventVariables(data);
|
||||
const variables = [...eventVariables, ...rawVariables];
|
||||
|
||||
// 编辑操作，需要格式化动作配置
|
||||
@ -476,8 +502,12 @@ export class EventControl extends React.Component<
|
||||
const rendererName = actionConfig?.__rendererLabel;
|
||||
// todo:这里会闪一下，需要从amis查下问题
|
||||
if (SELECT_PROPS_CONTAINER.includes(rendererType)) {
|
||||
const curVariable = rawVariables.find(item => item.label === `${rendererName}变量`);
|
||||
setValueDs = curVariable?.children?.filter(item => item.value !== '$$id');
|
||||
const curVariable = rawVariables.find(
|
||||
item => item.label === `${rendererName}变量`
|
||||
);
|
||||
setValueDs = curVariable?.children?.filter(
|
||||
item => item.value !== '$$id'
|
||||
);
|
||||
}
|
||||
}
|
||||
data.actionData = {
|
||||
@ -492,12 +522,20 @@ export class EventControl extends React.Component<
|
||||
__actionDesc: actionNode!.description!, // 树节点描述
|
||||
__actionSchema: actionNode!.schema, // 树节点schema
|
||||
__subActions: hasSubActionNode?.actions, // 树节点子动作
|
||||
__cmptTreeSource: actionConfig?.componentId ? getComponents?.(actionNode!) ?? [] : [],
|
||||
__cmptTreeSource: actionConfig?.componentId
|
||||
? getComponents?.(actionNode!) ?? []
|
||||
: [],
|
||||
__setValueDs: setValueDs
|
||||
// broadcastId: action.actionType === 'broadcast' ? action.eventName : ''
|
||||
};
|
||||
// 选中项自动滚动至可见位置
|
||||
setTimeout(() => document.querySelector('.action-tree .cxd-Tree-item--isLeaf .is-checked')?.scrollIntoView(), 0);
|
||||
setTimeout(
|
||||
() =>
|
||||
document
|
||||
.querySelector('.action-tree .cxd-Tree-item--isLeaf .is-checked')
|
||||
?.scrollIntoView(),
|
||||
0
|
||||
);
|
||||
} else {
|
||||
data.actionData = {
|
||||
eventKey: data.actionData!.eventKey,
|
||||
@ -513,7 +551,12 @@ export class EventControl extends React.Component<
|
||||
|
||||
// 渲染描述信息
|
||||
renderDesc(action: ActionConfig) {
|
||||
const {actions: pluginActions, actionTree, commonActions, getComponents} = this.props;
|
||||
const {
|
||||
actions: pluginActions,
|
||||
actionTree,
|
||||
commonActions,
|
||||
getComponents
|
||||
} = this.props;
|
||||
const desc = getPropOfAcion(
|
||||
action,
|
||||
'descDetail',
|
||||
@ -534,7 +577,7 @@ export class EventControl extends React.Component<
|
||||
info = {
|
||||
...info,
|
||||
rendererLabel: node.label
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -562,7 +605,12 @@ export class EventControl extends React.Component<
|
||||
}
|
||||
|
||||
render() {
|
||||
const {actionTree, actions: pluginActions, commonActions, getComponents} = this.props;
|
||||
const {
|
||||
actionTree,
|
||||
actions: pluginActions,
|
||||
commonActions,
|
||||
getComponents
|
||||
} = this.props;
|
||||
const {
|
||||
onEvent,
|
||||
events,
|
||||
@ -577,32 +625,35 @@ export class EventControl extends React.Component<
|
||||
|
||||
return (
|
||||
<div className="ae-event-control">
|
||||
<header
|
||||
className={cx({
|
||||
'ae-event-control-header': true,
|
||||
'ae-event-control-header-oldentry': showOldEntry,
|
||||
'no-bd-btm': !eventKeys.length
|
||||
})}
|
||||
>
|
||||
{amisRender({
|
||||
type: 'dropdown-button',
|
||||
level: 'enhance',
|
||||
label: '添加事件',
|
||||
disabled: false,
|
||||
className: 'block w-full add-event-dropdown',
|
||||
closeOnClick: true,
|
||||
buttons: events.map(item => ({
|
||||
type: 'button',
|
||||
actionType: '',
|
||||
label: item.eventLabel,
|
||||
onClick: this.addEvent.bind(this, item)
|
||||
}))
|
||||
})}
|
||||
</header>
|
||||
<ul className={cx({
|
||||
'ae-event-control-content': true,
|
||||
'ae-event-control-content-oldentry': showOldEntry
|
||||
})} ref={this.dragRef}>
|
||||
<header
|
||||
className={cx({
|
||||
'ae-event-control-header': true,
|
||||
'ae-event-control-header-oldentry': showOldEntry,
|
||||
'no-bd-btm': !eventKeys.length
|
||||
})}
|
||||
>
|
||||
{amisRender({
|
||||
type: 'dropdown-button',
|
||||
level: 'enhance',
|
||||
label: '添加事件',
|
||||
disabled: false,
|
||||
className: 'block w-full add-event-dropdown',
|
||||
closeOnClick: true,
|
||||
buttons: events.map(item => ({
|
||||
type: 'button',
|
||||
actionType: '',
|
||||
label: item.eventLabel,
|
||||
onClick: this.addEvent.bind(this, item)
|
||||
}))
|
||||
})}
|
||||
</header>
|
||||
<ul
|
||||
className={cx({
|
||||
'ae-event-control-content': true,
|
||||
'ae-event-control-content-oldentry': showOldEntry
|
||||
})}
|
||||
ref={this.dragRef}
|
||||
>
|
||||
{eventKeys.length ? (
|
||||
eventKeys.map((eventKey, eventIndex) => {
|
||||
return (
|
||||
@ -659,63 +710,71 @@ export class EventControl extends React.Component<
|
||||
{enventSnapshot[eventKey].actions.length &&
|
||||
eventPanelActive[eventKey] ? (
|
||||
<ul className="item-content">
|
||||
{enventSnapshot[eventKey].actions.map((action, actionIndex) => {
|
||||
return (
|
||||
<li
|
||||
className="ae-option-control-item"
|
||||
key={`item-content_${actionIndex}`}
|
||||
>
|
||||
<div className="action-control-header">
|
||||
<div className="action-control-header-left">
|
||||
<div className="ae-option-control-item-dragBar">
|
||||
<Icon
|
||||
icon="drag-six-circle-btn"
|
||||
className="icon"
|
||||
/>
|
||||
</div>
|
||||
<div className="action-item-actiontype">
|
||||
{getPropOfAcion(
|
||||
action,
|
||||
'actionLabel',
|
||||
actionTree,
|
||||
pluginActions,
|
||||
commonActions
|
||||
) || action.actionType}
|
||||
</div>
|
||||
</div>
|
||||
<div className="action-control-header-right">
|
||||
<div
|
||||
onClick={this.activeActionDialog.bind(this, {
|
||||
showAcionDialog: true,
|
||||
type: 'update',
|
||||
actionData: {
|
||||
{enventSnapshot[eventKey].actions.map(
|
||||
(action, actionIndex) => {
|
||||
return (
|
||||
<li
|
||||
className="ae-option-control-item"
|
||||
key={`item-content_${actionIndex}`}
|
||||
>
|
||||
<div className="action-control-header">
|
||||
<div className="action-control-header-left">
|
||||
<div className="ae-option-control-item-dragBar">
|
||||
<Icon
|
||||
icon="drag-six-circle-btn"
|
||||
className="icon"
|
||||
/>
|
||||
</div>
|
||||
<div className="action-item-actiontype">
|
||||
{getPropOfAcion(
|
||||
action,
|
||||
eventKey,
|
||||
actionIndex
|
||||
}
|
||||
})}
|
||||
>
|
||||
<Icon className="icon" icon="edit-full-btn" />
|
||||
'actionLabel',
|
||||
actionTree,
|
||||
pluginActions,
|
||||
commonActions
|
||||
) || action.actionType}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onClick={this.delAction.bind(
|
||||
this,
|
||||
eventKey,
|
||||
action,
|
||||
actionIndex
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className="icon"
|
||||
icon="delete-easy-btn"
|
||||
/>
|
||||
<div className="action-control-header-right">
|
||||
<div
|
||||
onClick={this.activeActionDialog.bind(
|
||||
this,
|
||||
{
|
||||
showAcionDialog: true,
|
||||
type: 'update',
|
||||
actionData: {
|
||||
action,
|
||||
eventKey,
|
||||
actionIndex
|
||||
}
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className="icon"
|
||||
icon="edit-full-btn"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
onClick={this.delAction.bind(
|
||||
this,
|
||||
eventKey,
|
||||
action,
|
||||
actionIndex
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
className="icon"
|
||||
icon="delete-easy-btn"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.renderDesc(action)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
{this.renderDesc(action)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</ul>
|
||||
) : null}
|
||||
</li>
|
||||
@ -746,4 +805,4 @@ export class EventControl extends React.Component<
|
||||
@FormItem({
|
||||
type: 'ae-eventControl'
|
||||
})
|
||||
export class EventControlRenderer extends EventControl {}
|
||||
export class EventControlRenderer extends EventControl {}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user