amis-editor 4.2.0-beta.2 → 5.1.9

package/src/plugin/Form/Form.tsx

@@ -8,6 +8,9 @@ import {
   ScaffoldForm
 } from '../../plugin';
 import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {getEventControlConfig, jsonToJsonSchema} from '../../util';
+import {EditorNodeType} from '../../store/node';
+import {RendererAction, RendererEvent} from '../../event-action';
 import {setVariable} from 'amis-core';
 
 // 用于脚手架的常用表单控件
@@ -204,6 +207,174 @@ export class FormPlugin extends BasePlugin {
   ];
 
   panelTitle = '表单';
+
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'inited',
+      eventLabel: '初始化完成',
+      description: '远程初始化接口请求成功时触发',
+      // 表单数据为表单变量
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data': {
+              type: 'object',
+              title: 'initApi 远程请求返回的初始化数据'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'change',
+      eventLabel: '数值变化',
+      description: '表单值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data': {
+              type: 'object',
+              title: '当前表单数据'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'formItemValidateSucc',
+      eventLabel: '表单项校验成功',
+      description: '表单项校验成功后触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data': {
+              type: 'object',
+              title: '当前表单数据'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'formItemValidateError',
+      eventLabel: '表单项校验失败',
+      description: '表单项校验失败后触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data': {
+              type: 'object',
+              title: '当前表单数据'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'validateSucc',
+      eventLabel: '表单校验成功',
+      description: '表单校验成功后触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data': {
+              type: 'object',
+              title: '当前表单数据'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'validateError',
+      eventLabel: '表单校验失败',
+      description: '表单校验失败后触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data': {
+              type: 'object',
+              title: '当前表单数据'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'submitSucc',
+      eventLabel: '提交成功',
+      description: '表单提交请求成功后触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.result': {
+              type: 'object',
+              title: '提交成功后返回的数据'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'submitFail',
+      eventLabel: '提交失败',
+      description: '表单提交请求失败后触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.error': {
+              type: 'object',
+              title: '提交失败后返回的错误信息'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionLabel: '提交表单',
+      actionType: 'submit',
+      description: '触发表单提交'
+    },
+    {
+      actionLabel: '重置表单',
+      actionType: 'reset',
+      description: '触发表单重置'
+    },
+    {
+      actionLabel: '清空表单',
+      actionType: 'clear',
+      description: '触发表单清空'
+    },
+    {
+      actionLabel: '校验表单',
+      actionType: 'validate',
+      description: '触发表单校验'
+    },
+    {
+      actionLabel: '重新加载',
+      actionType: 'reload',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionLabel: '更新数据',
+      actionType: 'setValue',
+      description: '触发组件数据更新'
+    }
+  ];
+
   panelBodyCreator = (context: BaseEventContext) => {
     const isCRUDFilter: boolean = /\/crud\/filter\/form$/.test(context.path);
     const isInDialog: boolean = /(?:\/|^)dialog\/.+$/.test(context.path);
@@ -228,12 +399,9 @@ export class FormPlugin extends BasePlugin {
               description: '当没有自定义按钮时有效。'
             },
 
-            {
+            getSchemaTpl('switch', {
               name: 'autoFocus',
-              type: 'switch',
               label: '自动聚焦',
-              mode: 'inline',
-              className: 'block',
               labelRemark: {
                 className: 'm-l-xs',
                 trigger: 'click',
@@ -241,16 +409,13 @@ export class FormPlugin extends BasePlugin {
                 content: '设置后将让表单的第一个可输入的表单项获得焦点',
                 placement: 'left'
               }
-            },
+            }),
 
             getSchemaTpl('submitOnChange'),
 
-            {
+            getSchemaTpl('switch', {
               label: '提交完后重置表单',
-              type: 'switch',
               name: 'resetAfterSubmit',
-              mode: 'inline',
-              className: 'block',
               labelRemark: {
                 className: 'm-l-xs',
                 trigger: 'click',
@@ -258,16 +423,13 @@ export class FormPlugin extends BasePlugin {
                 content: '即表单提交完后，让所有表单项的值还原成初始值',
                 placement: 'left'
               }
-            },
+            }),
 
             isCRUDFilter
               ? null
-              : {
+              : getSchemaTpl('switch', {
                   label: '初始化后提交一次',
-                  type: 'switch',
                   name: 'submitOnInit',
-                  mode: 'inline',
-                  className: 'block',
                   labelRemark: {
                     className: 'm-l-xs',
                     trigger: 'click',
@@ -275,17 +437,14 @@ export class FormPlugin extends BasePlugin {
                     content: '开启后，表单初始完成便会触发一次提交。',
                     placement: 'left'
                   }
-                },
+                }),
 
             isInDialog
-              ? {
+              ? getSchemaTpl('switch', {
                   label: '提交后是否关闭对话框',
-                  type: 'switch',
                   name: 'closeDialogOnSubmit',
-                  mode: 'inline',
-                  className: 'block',
                   pipeIn: (value: any) => value !== false
-                }
+                })
               : null,
 
             isCRUDFilter
@@ -311,22 +470,16 @@ export class FormPlugin extends BasePlugin {
                   description: '当设置此值后，表单提交完后跳转到目标地址。'
                 },
 
-            {
+            getSchemaTpl('switch', {
               name: 'canAccessSuperData',
               label: '是否自动填充父级同名变量',
-              type: 'switch',
-              pipeIn: defaultValue(true),
-              mode: 'inline',
-              className: 'block'
-            },
+              pipeIn: defaultValue(true)
+            }),
 
-            {
+            getSchemaTpl('switch', {
               name: 'persistData',
               label: '是否开启本地缓存',
-              type: 'switch',
               pipeIn: defaultValue(false),
-              mode: 'inline',
-              className: 'block',
               labelRemark: {
                 className: 'm-l-xs',
                 trigger: 'click',
@@ -335,15 +488,12 @@ export class FormPlugin extends BasePlugin {
                   '开启后，表单的数据会缓存在浏览器中，切换页面或关闭弹框不会清空当前表单内的数据',
                 placement: 'left'
               }
-            },
+            }),
 
-            {
+            getSchemaTpl('switch', {
               name: 'clearPersistDataAfterSubmit',
               label: '提交成功后清空本地缓存',
-              type: 'switch',
               pipeIn: defaultValue(false),
-              mode: 'inline',
-              className: 'block',
               visibleOn: 'data.persistData',
               labelRemark: {
                 className: 'm-l-xs',
@@ -353,7 +503,7 @@ export class FormPlugin extends BasePlugin {
                   '开启本地缓存并开启本配置项后，表单提交成功后，会自动清除浏览器中当前表单的缓存数据',
                 placement: 'left'
               }
-            },
+            }),
 
             {
               name: 'rules',
@@ -395,9 +545,11 @@ export class FormPlugin extends BasePlugin {
                   // test: !this.isCRUDFilter
                 }),
 
-                {
+                getSchemaTpl('switch', {
+                  name: 'asyncApi',
                   label: '采用异步方式?',
-                  remark: {
+                  visibleOn: 'data.api',
+                  labelRemark: {
                     trigger: 'click',
                     rootClose: true,
                     title: '什么是异步方式？',
@@ -405,14 +557,9 @@ export class FormPlugin extends BasePlugin {
                       '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
                     placement: 'left'
                   },
-                  type: 'switch',
-                  name: 'asyncApi',
-                  visibleOn: 'data.api',
                   pipeIn: (value: any) => value != null,
-                  pipeOut: (value: any) => (value ? '' : undefined),
-                  mode: 'inline',
-                  className: 'block'
-                },
+                  pipeOut: (value: any) => (value ? '' : undefined)
+                }),
 
                 getSchemaTpl('api', {
                   name: 'asyncApi',
@@ -458,15 +605,13 @@ export class FormPlugin extends BasePlugin {
                   }
                 }),
 
-                {
+                getSchemaTpl('switch', {
                   label: '开启定时刷新',
-                  type: 'switch',
                   name: 'interval',
                   visibleOn: 'data.initApi',
                   pipeIn: (value: any) => !!value,
-                  pipeOut: (value: any) => (value ? 3000 : undefined),
-                  mode: 'inline'
-                },
+                  pipeOut: (value: any) => (value ? 3000 : undefined)
+                }),
 
                 {
                   name: 'interval',
@@ -477,14 +622,12 @@ export class FormPlugin extends BasePlugin {
                   description: '设置后将自动定时刷新，单位 ms'
                 },
 
-                {
+                getSchemaTpl('switch', {
                   name: 'silentPolling',
                   label: '静默刷新',
-                  type: 'switch',
-                  mode: 'inline',
                   visibleOn: '!!data.interval',
                   description: '设置自动定时刷新时是否显示loading'
-                },
+                }),
 
                 {
                   name: 'stopAutoRefreshWhen',
@@ -495,8 +638,10 @@ export class FormPlugin extends BasePlugin {
                     '定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则不刷新了。'
                 },
 
-                {
+                getSchemaTpl('switch', {
                   label: '采用异步方式？',
+                  name: 'initAsyncApi',
+                  visibleOn: 'data.initApi',
                   remark: {
                     trigger: 'click',
                     rootClose: true,
@@ -505,13 +650,9 @@ export class FormPlugin extends BasePlugin {
                       '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
                     placement: 'left'
                   },
-                  type: 'switch',
-                  name: 'initAsyncApi',
-                  visibleOn: 'data.initApi',
                   pipeIn: (value: any) => value != null,
-                  pipeOut: (value: any) => (value ? '' : undefined),
-                  mode: 'inline'
-                },
+                  pipeOut: (value: any) => (value ? '' : undefined)
+                }),
 
                 getSchemaTpl('api', {
                   name: 'initAsyncApi',
@@ -595,11 +736,8 @@ export class FormPlugin extends BasePlugin {
         {
           title: '外观',
           body: [
-            {
+            getSchemaTpl('switch', {
               name: 'wrapWithPanel',
-              type: 'switch',
-              mode: 'inline',
-              className: 'block',
               label: '用 Panel 包裹',
               pipeIn: defaultValue(true),
               labelRemark: {
@@ -609,7 +747,7 @@ export class FormPlugin extends BasePlugin {
                 content: '关闭后，表单只会展示表单项，标题和操作栏将不会显示。',
                 placement: 'left'
               }
-            },
+            }),
 
             {
               name: 'mode',
@@ -650,6 +788,17 @@ export class FormPlugin extends BasePlugin {
           ]
         },
 
+        {
+          title: '事件',
+          className: 'p-none',
+          body: [
+            getSchemaTpl('eventControl', {
+              name: 'onEvent',
+              ...getEventControlConfig(this.manager, context)
+            })
+          ]
+        },
+
         {
           title: '其他',
           body: [
@@ -657,13 +806,12 @@ export class FormPlugin extends BasePlugin {
             getSchemaTpl('name', {
               test: !isCRUDFilter
             }),
-            {
+            getSchemaTpl('switch', {
               name: 'debug',
               label: '开启调试',
-              type: 'switch',
-              mode: 'inline',
               labelRemark: '显示当前表单的数据在表单顶部'
-            },
+            }),
+
             getSchemaTpl('disabled'),
             getSchemaTpl('visible')
           ]
@@ -682,6 +830,65 @@ export class FormPlugin extends BasePlugin {
       this.manager.buildPanels();
     }
   }
+
+  async buildDataSchemas(node: EditorNodeType, region: EditorNodeType) {
+    const jsonschema: any = {
+      $id: 'formItems',
+      type: 'object',
+      properties: {}
+    };
+
+    const pool = node.children.concat();
+    while (pool.length) {
+      const current = pool.shift() as EditorNodeType;
+
+      if (current.rendererConfig?.type === 'combo') {
+        const schema = current.schema;
+        if (schema.name) {
+          jsonschema.properties[schema.name] = {
+            type: 'array',
+            title: schema.label || schema.name,
+            items: current.info?.plugin?.buildDataSchemas
+              ? await current.info.plugin.buildDataSchemas(current, region)
+              : {
+                  type: 'object',
+                  properties: {}
+                }
+          };
+        }
+      } else if (current.rendererConfig?.isFormItem) {
+        const schema = current.schema;
+        if (schema.name) {
+          jsonschema.properties[schema.name] = current.info?.plugin
+            ?.buildDataSchemas
+            ? await current.info.plugin.buildDataSchemas(current, region)
+            : {
+                type: 'string',
+                title: schema.label || schema.name,
+                description: schema.description
+              };
+        }
+      } else {
+        pool.push(...current.children);
+      }
+    }
+
+    return jsonschema;
+  }
+
+  rendererBeforeDispatchEvent(node: EditorNodeType, e: any, data: any) {
+    if (e === 'inited') {
+      // 监听 form 的 inited 事件，把数据加入到上下文中
+      const scope = this.manager.dataSchema.getScope(`${node.id}-${node.type}`);
+      const jsonschema: any = {
+        $id: 'formInitedData',
+        ...jsonToJsonSchema(data)
+      };
+
+      scope.removeSchema(jsonschema.$id);
+      scope.addSchema(jsonschema);
+    }
+  }
 }
 
 registerEditorPlugin(FormPlugin);

package/src/plugin/Form/Formula.tsx

@@ -1,4 +1,4 @@
-import {defaultValue} from '../../component/schemaTpl';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
 import {BasePlugin} from '../../plugin';
 
@@ -50,25 +50,19 @@ export class FormulaControlPlugin extends BasePlugin {
       description:
         '支持如：<code>\\${xxx}</code>或者<code>data.xxx == "a"</code> 表达式来配置作用条件，当满足该作用条件时，会将计算结果设置到目标变量上。'
     },
-    {
+    getSchemaTpl('switch', {
       name: 'initSet',
-      type: 'switch',
       label: '是否初始应用',
-      pipeIn: defaultValue(true),
       description: '是否初始化的时候运行公式结果，并设置到目标变量上。',
-      mode: 'inline',
-      className: 'block'
-    },
-    {
+      pipeIn: defaultValue(true)
+    }),
+    getSchemaTpl('switch', {
       name: 'autoSet',
-      type: 'switch',
       label: '是否自动应用',
-      pipeIn: defaultValue(true),
-      mode: 'inline',
-      className: 'block',
       description:
-        '是否自动计算公式结果，有变化时自动设置到目标变量上。<br />关闭后，通过按钮也能触发运算。'
-    }
+        '是否自动计算公式结果，有变化时自动设置到目标变量上。<br />关闭后，通过按钮也能触发运算。',
+      pipeIn: defaultValue(true)
+    })
   ];
 
   renderRenderer(props: any) {

package/src/plugin/Form/InputArray.tsx

@@ -82,14 +82,11 @@ export class ArrayControlPlugin extends BasePlugin {
         )
       },
 
-      {
+      getSchemaTpl('switch', {
         label: '是否可新增',
-        type: 'switch',
         name: 'addable',
-        mode: 'inline',
-        className: 'w-full',
         pipeIn: defaultValue(true)
-      },
+      }),
 
       {
         label: '新增按钮文字',
@@ -108,14 +105,11 @@ export class ArrayControlPlugin extends BasePlugin {
         pipeIn: defaultValue('')
       },
 
-      {
+      getSchemaTpl('switch', {
         label: '是否可删除',
-        type: 'switch',
         name: 'removable',
-        mode: 'inline',
-        className: 'w-full',
         pipeIn: defaultValue(true)
-      },
+      }),
 
       getSchemaTpl('api', {
         name: 'deleteApi',
@@ -131,13 +125,10 @@ export class ArrayControlPlugin extends BasePlugin {
         pipeIn: defaultValue('确认要删除')
       },
 
-      {
+      getSchemaTpl('switch', {
         name: 'draggable',
-        label: '启用拖拽排序',
-        type: 'switch',
-        mode: 'inline',
-        className: 'w-full'
-      },
+        label: '启用拖拽排序'
+      }),
 
       {
         name: 'draggableTip',

package/src/plugin/Form/InputCity.tsx

@@ -90,4 +90,4 @@ export class CityControlPlugin extends BasePlugin {
   ];
 }
 
-registerEditorPlugin(CityControlPlugin);
+registerEditorPlugin(CityControlPlugin);