发送请求支持存储接口返回结果 & 变量赋值支持下拉选择变量

Change-Id: I038b49a6c8647ed2960b03ec684443140ced2e10

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',

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);
       }
     ),

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 (
       <div className="ae-event-control">
@@ -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<
                       </div>
                     </div>
                   </div>
-                  {onEvent[eventKey].actions.length &&
+                  {enventSnapshot[eventKey].actions.length &&
                   eventPanelActive[eventKey] ? (
                     <ul className="item-content">
-                      {onEvent[eventKey].actions.map((action, actionIndex) => {
+                      {enventSnapshot[eventKey].actions.map((action, actionIndex) => {
                         return (
                           <li
                             className="ae-option-control-item"