From 82fa7b9a674d4c84c28bbeaefea17ead32e98bd9 Mon Sep 17 00:00:00 2001 From: pianruijie Date: Tue, 5 Jul 2022 21:03:12 +0800 Subject: [PATCH 01/36] =?UTF-8?q?=E5=8F=91=E9=80=81=E8=AF=B7=E6=B1=82?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=AD=98=E5=82=A8=E6=8E=A5=E5=8F=A3=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=E7=BB=93=E6=9E=9C=20&=20=E5=8F=98=E9=87=8F=E8=B5=8B?= =?UTF-8?q?=E5=80=BC=E6=94=AF=E6=8C=81=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I038b49a6c8647ed2960b03ec684443140ced2e10 --- .../src/renderer/event-control/actions.tsx | 51 ++++++++++++++++--- .../src/renderer/event-control/helper.tsx | 49 ++++++++++++++---- .../src/renderer/event-control/index.tsx | 40 +++++++++++---- 3 files changed, 114 insertions(+), 26 deletions(-) diff --git a/packages/amis-editor/src/renderer/event-control/actions.tsx b/packages/amis-editor/src/renderer/event-control/actions.tsx index 8f5536843..62609aab8 100644 --- a/packages/amis-editor/src/renderer/event-control/actions.tsx +++ b/packages/amis-editor/src/renderer/event-control/actions.tsx @@ -9,6 +9,7 @@ import { FORMITEM_CMPTS, getArgsWrapper, IS_DATA_CONTAINER, + SHOW_SELECT_PROP, renderCmptActionSelect, renderCmptSelect, SUPPORT_DISABLED_CMPTS @@ -424,13 +425,27 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { }, schema: { type: 'wrapper', - style: {padding: '0'}, + className: "p-none", body: [ getArgsWrapper( getSchemaTpl('apiControl', { - name: 'api' + name: 'api', + label: '配置请求', + mode: 'horizontal', + size: 'lg', + required: true }) - ) + ), + { + name: 'outputVar', + type: 'input-text', + label: '请求出参', + placeholder: '请输入存储请求结果的变量名称', + description: '后面的动作可以通过${event.data.请求出参名称}来获取本次请求的返回结果', + mode: 'horizontal', + size: 'lg', + required: true + } ] } }, @@ -615,7 +630,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { }, supportComponents: [], schema: [ - ...renderCmptSelect('选择组件', true), + ...renderCmptActionSelect('选择组件', true), getArgsWrapper({ type: 'wrapper', className: 'p-none', @@ -632,11 +647,22 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { canAccessSuperData: true, mode: 'horizontal', items: [ + { + name: 'key', + type: 'select', + placeholder: '变量名', + source: '${__setValueDs}', + labelField: 'label', + valueField: 'value', + required: true, + visibleOn: `data.__rendererName && ${SHOW_SELECT_PROP}`, + }, { name: 'key', type: 'input-text', - placeholder: '字段名', - required: true + placeholder: '变量名', + required: true, + visibleOn: `data.__rendererName && !${SHOW_SELECT_PROP}` }, { name: 'val', @@ -676,10 +702,21 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => { className: 'm-l', mode: 'horizontal', items: [ + { + name: 'key', + type: 'select', + source: '${__setValueDs}', + labelField: 'label', + valueField: 'name', + required: true, + visibleOn: `data.__rendererName && ${SHOW_SELECT_PROP}`, + }, { name: 'key', type: 'input-text', - required: true + required: true, + placeholder: '变量名', + visibleOn: `data.__rendererName && !${SHOW_SELECT_PROP}` }, { name: 'val', diff --git a/packages/amis-editor/src/renderer/event-control/helper.tsx b/packages/amis-editor/src/renderer/event-control/helper.tsx index 2f8828f73..634324f91 100644 --- a/packages/amis-editor/src/renderer/event-control/helper.tsx +++ b/packages/amis-editor/src/renderer/event-control/helper.tsx @@ -17,6 +17,11 @@ import {DataSchema, findTree} from 'amis-core'; import CmptActionSelect from './comp-action-select'; import {Button} from 'amis'; +interface SetValueDsItem { + name: string; + label: string; +} + // 数据容器范围 export const DATA_CONTAINER = [ 'form', @@ -29,11 +34,22 @@ export const DATA_CONTAINER = [ 'chart' ]; +// 下拉展示可赋值属性范围 +export const SELECT_PROPS_CONTAINER = [ + 'form', +]; + // 是否数据容器 export const IS_DATA_CONTAINER = `${JSON.stringify( DATA_CONTAINER )}.includes(__rendererName)`; +// 是否下拉展示可赋值属性 +export const SHOW_SELECT_PROP = `${JSON.stringify( + SELECT_PROPS_CONTAINER +)}.includes(__rendererName)`; + + // 表单项组件 export const FORMITEM_CMPTS = [ 'button-group-select', @@ -166,11 +182,22 @@ export const COMMON_ACTION_SCHEMA_MAP: { canAccessSuperData: true, mode: 'horizontal', items: [ + { + name: 'key', + type: 'select', + placeholder: '变量名', + source: '${__setValueDs}', + labelField: 'label', + valueField: 'value', + required: true, + visibleOn: `data.__rendererName && ${SHOW_SELECT_PROP}`, + }, { name: 'key', type: 'input-text', placeholder: '变量名', - required: true + required: true, + visibleOn: `data.__rendererName && !${SHOW_SELECT_PROP}` }, { name: 'val', @@ -498,7 +525,8 @@ export const renderCmptActionSelect = ( '选择组件', true, async (value: string, oldVal: any, data: any, form: any) => { - // 获取组件上下文 + // 获取组件上下文. + const rendererType = form.data.__rendererName if (form.data.__nodeId) { const dataSchema: any = await form.data.getContextSchemas?.( form.data.__nodeId, @@ -519,15 +547,18 @@ export const renderCmptActionSelect = ( ['页面变量', '系统变量'].includes(item.label) ) ]); - } - - if (form.data.actionType === 'setValue') { - // todo:这里会闪一下，需要从amis查下问题 - form.setValueByName('args.value', undefined); - form.setValueByName('args.valueInput', undefined); + if (form.data.actionType === 'setValue') { + // todo:这里会闪一下，需要从amis查下问题 + form.setValueByName('args.value', []); + form.setValueByName('args.valueInput', undefined); + if (SELECT_PROPS_CONTAINER.includes(rendererType)) { + form.setValueByName('__setValueDs', variables.filter(item => item.value !== '$$id')); + } else { + form.setValueByName('__setValueDs', []); + } + } } form.setValueByName('__cmptActionType', ''); - onChange?.(value, oldVal, data, form); } ), diff --git a/packages/amis-editor/src/renderer/event-control/index.tsx b/packages/amis-editor/src/renderer/event-control/index.tsx index 46c8850e2..9d5143111 100644 --- a/packages/amis-editor/src/renderer/event-control/index.tsx +++ b/packages/amis-editor/src/renderer/event-control/index.tsx @@ -3,6 +3,7 @@ import {findDOMNode} from 'react-dom'; 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} from 'amis-core'; import ActionDialog from './action-config-dialog'; import { @@ -10,7 +11,8 @@ import { findSubActionNode, getEventDesc, getEventLabel, - getPropOfAcion + getPropOfAcion, + SELECT_PROPS_CONTAINER } from './helper'; import { ActionConfig, @@ -67,6 +69,7 @@ interface EventControlState { __cmptTreeSource?: ComponentInfo[]; __actionSchema?: any; __subActions?: SubRendererPluginAction[]; + __setValueDs?: any[] } | undefined; type: 'update' | 'add'; @@ -303,10 +306,18 @@ export class EventControl extends React.Component< * @param {*} config * @memberof EventControl */ - updateValue(event: string, index: number, config: any) { + async updateValue(event: string, index: number, config: any) { const {onEvent} = this.state; + let emptyEventAcion = {...onEvent}; let onEventConfig = {...onEvent}; + emptyEventAcion[event] = { + actions: onEvent[event].actions.map((item, actionIndex) => { + return actionIndex === index + ? {actionType: ''} : item; + }), + weight: onEvent[event].weight + }; onEventConfig[event] = { actions: onEvent[event].actions.map((item, actionIndex) => { return actionIndex === index @@ -320,11 +331,9 @@ export class EventControl extends React.Component< }), weight: onEvent[event].weight }; - this.setState({ onEvent: onEventConfig }); - this.props.onChange && this.props.onChange(onEventConfig); } @@ -460,7 +469,16 @@ export class EventControl extends React.Component< const actionConfig = actionConfigInitFormatter?.(action); const actionNode = findActionNode(actionTree, actionConfig?.actionType!); const hasSubActionNode = findSubActionNode(actionTree, action.actionType); - + let setValueDs: any = null; + if (actionConfig?.actionType === 'setValue') { + const rendererType = actionConfig?.__rendererName; + 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'); + } + } data.actionData = { eventKey: data.actionData!.eventKey, actionIndex: data.actionData!.actionIndex, @@ -474,7 +492,8 @@ 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 : '' }; // 选中项自动滚动至可见位置 @@ -536,8 +555,9 @@ export class EventControl extends React.Component< type, actionData } = this.state; + const enventSnapshot = cloneDeep(onEvent); const {showOldEntry} = this.props; - const eventKeys = Object.keys(onEvent); + const eventKeys = Object.keys(enventSnapshot); return (
@@ -557,7 +577,7 @@ export class EventControl extends React.Component< className={cx({ 'event-item-header': true, 'no-bd-btm': !( - onEvent[eventKey].actions?.length && + enventSnapshot[eventKey].actions?.length && eventPanelActive[eventKey] ) })} @@ -602,10 +622,10 @@ export class EventControl extends React.Component<
- {onEvent[eventKey].actions.length && + {enventSnapshot[eventKey].actions.length && eventPanelActive[eventKey] ? (