amis-editor 4.1.0-beta.4 → 4.2.0-beta.0

package/src/plugin/Form/Form.tsx

@@ -0,0 +1,687 @@
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  ChangeEventContext,
+  BaseEventContext,
+  PluginEvent,
+  RegionConfig,
+  ScaffoldForm
+} from '../../plugin';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {setVariable} from 'amis-core';
+
+// 用于脚手架的常用表单控件
+const formItemOptions = [
+  {
+    name: 'type',
+    label: '控件类型',
+    type: 'select',
+    required: true,
+    options: [
+      {
+        label: '单行文本框',
+        value: 'input-text'
+      },
+      {
+        label: '多行文本',
+        value: 'textarea'
+      },
+      {
+        label: '分组',
+        value: 'group'
+      },
+      {
+        label: '数字输入',
+        value: 'input-number'
+      },
+      {
+        label: '单选框',
+        value: 'radios'
+      },
+      {
+        label: '勾选框',
+        value: 'checkbox'
+      },
+      {
+        label: '复选框',
+        value: 'checkboxes'
+      },
+      {
+        label: '下拉框',
+        value: 'select'
+      },
+      {
+        label: '开关',
+        value: 'switch'
+      },
+      {
+        label: '日期',
+        value: 'input-date'
+      },
+      {
+        label: '表格',
+        value: 'input-table'
+      },
+      {
+        label: '文件上传',
+        value: 'input-file'
+      },
+      {
+        label: '图片上传',
+        value: 'input-image'
+      },
+      {
+        label: '富文本编辑器',
+        value: 'input-rich-text'
+      }
+    ]
+  },
+  {
+    name: 'label',
+    label: '显示名称',
+    type: 'input-text',
+    hiddenOn: 'data.type === "group"'
+  },
+  {
+    name: 'name',
+    label: '提交字段名',
+    required: true,
+    type: 'input-text',
+    hiddenOn: 'data.type === "group"'
+  }
+];
+
+export class FormPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'form';
+  $schema = '/schemas/FormSchema.json';
+
+  order = -999;
+
+  // 组件名称
+  name = '表单';
+  isBaseComponent = true;
+  description =
+    '可用于新建、编辑或者展示数据，配置初始化接口可从远端加载数据，配置提交接口可将数据发送远端。另外也可以将数据提交给其他组件，与其他组件通信。';
+  docLink = '/amis/zh-CN/components/form/index';
+  tags = ['功能'];
+  icon = 'fa fa-list-alt';
+  scaffold = {
+    type: 'form',
+    title: '表单',
+    body: [
+      {
+        label: '文本框',
+        type: 'input-text',
+        name: 'text'
+      }
+    ]
+  };
+  previewSchema = {
+    type: 'form',
+    panelClassName: 'Panel--default text-left m-b-none',
+    mode: 'horizontal',
+    body: [
+      {
+        label: '文本',
+        name: 'a',
+        type: 'input-text'
+      }
+    ]
+  };
+
+  scaffoldForm: ScaffoldForm = {
+    title: '快速创建表单',
+    body: [
+      getSchemaTpl('api', {
+        label: '提交地址'
+      }),
+      {
+        name: 'mode',
+        label: '文字与输入框展示模式',
+        type: 'button-group-select',
+        pipeIn: defaultValue('normal', false),
+        options: [
+          {
+            label: '上下',
+            value: 'normal'
+          },
+          {
+            label: '左右摆放',
+            value: 'horizontal'
+          },
+          {
+            label: '内联',
+            value: 'inline'
+          }
+        ]
+      },
+      {
+        label: '表单控件',
+        type: 'combo',
+        name: 'body',
+        multiple: true,
+        draggable: true,
+        multiLine: false,
+        items: [
+          ...formItemOptions,
+          {
+            visibleOn: 'data.type === "group"',
+            type: 'combo',
+            name: 'body',
+            label: '分组内的控件',
+            multiple: true,
+            draggable: true,
+            multiLine: true,
+            items: [...formItemOptions]
+          }
+        ]
+      }
+    ]
+  };
+
+  // scaffoldForm: ScaffoldForm = {
+  //   title: '配置表单信息',
+  //   body: [getSchemaTpl('api')],
+  //   canRebuild: true
+  // };
+
+  // 容器配置
+  regions: Array<RegionConfig> = [
+    {
+      key: 'body',
+      label: '表单集合',
+      matchRegion: (elem: JSX.Element) => !!elem?.props.noValidate,
+      renderMethod: 'renderBody',
+      preferTag: '表单项'
+    },
+
+    {
+      label: '按钮组',
+      key: 'actions',
+      preferTag: '按钮'
+    }
+  ];
+
+  panelTitle = '表单';
+  panelBodyCreator = (context: BaseEventContext) => {
+    const isCRUDFilter: boolean = /\/crud\/filter\/form$/.test(context.path);
+    const isInDialog: boolean = /(?:\/|^)dialog\/.+$/.test(context.path);
+
+    return [
+      getSchemaTpl('tabs', [
+        {
+          title: '常规',
+          body: [
+            {
+              name: 'title',
+              type: 'input-text',
+              label: '标题',
+              visibleOn: `this.wrapWithPanel !== false`
+            },
+            {
+              name: 'submitText',
+              type: 'input-text',
+              label: '提交按钮名称',
+              pipeIn: defaultValue('提交'),
+              visibleOn: `this.wrapWithPanel !== false && !this.actions && (!Array.isArray(this.body) || !this.body.some(function(item) {return !!~['submit','button','reset','button-group'].indexOf(item.type);}))`,
+              description: '当没有自定义按钮时有效。'
+            },
+
+            {
+              name: 'autoFocus',
+              type: 'switch',
+              label: '自动聚焦',
+              mode: 'inline',
+              className: 'block',
+              labelRemark: {
+                className: 'm-l-xs',
+                trigger: 'click',
+                rootClose: true,
+                content: '设置后将让表单的第一个可输入的表单项获得焦点',
+                placement: 'left'
+              }
+            },
+
+            getSchemaTpl('submitOnChange'),
+
+            {
+              label: '提交完后重置表单',
+              type: 'switch',
+              name: 'resetAfterSubmit',
+              mode: 'inline',
+              className: 'block',
+              labelRemark: {
+                className: 'm-l-xs',
+                trigger: 'click',
+                rootClose: true,
+                content: '即表单提交完后，让所有表单项的值还原成初始值',
+                placement: 'left'
+              }
+            },
+
+            isCRUDFilter
+              ? null
+              : {
+                  label: '初始化后提交一次',
+                  type: 'switch',
+                  name: 'submitOnInit',
+                  mode: 'inline',
+                  className: 'block',
+                  labelRemark: {
+                    className: 'm-l-xs',
+                    trigger: 'click',
+                    rootClose: true,
+                    content: '开启后，表单初始完成便会触发一次提交。',
+                    placement: 'left'
+                  }
+                },
+
+            isInDialog
+              ? {
+                  label: '提交后是否关闭对话框',
+                  type: 'switch',
+                  name: 'closeDialogOnSubmit',
+                  mode: 'inline',
+                  className: 'block',
+                  pipeIn: (value: any) => value !== false
+                }
+              : null,
+
+            isCRUDFilter
+              ? null
+              : {
+                  label: '提交给其他组件',
+                  name: 'target',
+                  type: 'input-text',
+                  description:
+                    '可以通过设置此属性，把当前表单的值提交给目标组件，而不是自己来通过接口保存，请填写目标组件的 <code>name</code> 属性，多个组件请用逗号隔开。当 <code>target</code> 为 <code>window</code> 时，则把表单数据附属到地址栏。'
+                },
+
+            getSchemaTpl('reload', {
+              test: !isCRUDFilter
+            }),
+
+            isCRUDFilter
+              ? null
+              : {
+                  label: '跳转',
+                  name: 'redirect',
+                  type: 'input-text',
+                  description: '当设置此值后，表单提交完后跳转到目标地址。'
+                },
+
+            {
+              name: 'canAccessSuperData',
+              label: '是否自动填充父级同名变量',
+              type: 'switch',
+              pipeIn: defaultValue(true),
+              mode: 'inline',
+              className: 'block'
+            },
+
+            {
+              name: 'persistData',
+              label: '是否开启本地缓存',
+              type: 'switch',
+              pipeIn: defaultValue(false),
+              mode: 'inline',
+              className: 'block',
+              labelRemark: {
+                className: 'm-l-xs',
+                trigger: 'click',
+                rootClose: true,
+                content:
+                  '开启后，表单的数据会缓存在浏览器中，切换页面或关闭弹框不会清空当前表单内的数据',
+                placement: 'left'
+              }
+            },
+
+            {
+              name: 'clearPersistDataAfterSubmit',
+              label: '提交成功后清空本地缓存',
+              type: 'switch',
+              pipeIn: defaultValue(false),
+              mode: 'inline',
+              className: 'block',
+              visibleOn: 'data.persistData',
+              labelRemark: {
+                className: 'm-l-xs',
+                trigger: 'click',
+                rootClose: true,
+                content:
+                  '开启本地缓存并开启本配置项后，表单提交成功后，会自动清除浏览器中当前表单的缓存数据',
+                placement: 'left'
+              }
+            },
+
+            {
+              name: 'rules',
+              label: '表单组合校验',
+              type: 'combo',
+              multiple: true,
+              multiLine: true,
+              items: [
+                {
+                  name: 'rule',
+                  label: '校验规则',
+                  type: 'input-text'
+                },
+                {
+                  name: 'message',
+                  label: '报错提示',
+                  type: 'input-text'
+                }
+              ]
+            }
+          ]
+        },
+
+        isCRUDFilter
+          ? null
+          : {
+              title: '接口',
+              body: [
+                getSchemaTpl('api', {
+                  label: '保存接口',
+                  description: '用来保存表单数据',
+                  sampleBuilder: (schema: any) => `{
+    "status": 0,
+    "msg": "",
+
+    // 可以不返回，如果返回了数据将被 merge 进来。
+    data: {}
+  }`
+                  // test: !this.isCRUDFilter
+                }),
+
+                {
+                  label: '采用异步方式?',
+                  remark: {
+                    trigger: 'click',
+                    rootClose: true,
+                    title: '什么是异步方式？',
+                    content:
+                      '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
+                    placement: 'left'
+                  },
+                  type: 'switch',
+                  name: 'asyncApi',
+                  visibleOn: 'data.api',
+                  pipeIn: (value: any) => value != null,
+                  pipeOut: (value: any) => (value ? '' : undefined),
+                  mode: 'inline',
+                  className: 'block'
+                },
+
+                getSchemaTpl('api', {
+                  name: 'asyncApi',
+                  label: '异步检测接口',
+                  visibleOn: 'data.asyncApi != null',
+                  description:
+                    '设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束'
+                }),
+
+                {
+                  type: 'divider'
+                },
+
+                getSchemaTpl('api', {
+                  name: 'initApi',
+                  label: '初始化接口',
+                  description: '用来初始化表单数据',
+                  sampleBuilder: (schema: any) => {
+                    const data = {};
+
+                    if (Array.isArray(schema.body)) {
+                      schema.body.forEach((control: any) => {
+                        if (
+                          control.name &&
+                          !~['combo', 'input-array', 'form'].indexOf(
+                            control.type
+                          )
+                        ) {
+                          setVariable(data, control.name, 'sample');
+                        }
+                      });
+                    }
+
+                    return JSON.stringify(
+                      {
+                        status: 0,
+                        msg: '',
+                        data: data
+                      },
+                      null,
+                      2
+                    );
+                  }
+                }),
+
+                {
+                  label: '开启定时刷新',
+                  type: 'switch',
+                  name: 'interval',
+                  visibleOn: 'data.initApi',
+                  pipeIn: (value: any) => !!value,
+                  pipeOut: (value: any) => (value ? 3000 : undefined),
+                  mode: 'inline'
+                },
+
+                {
+                  name: 'interval',
+                  type: 'input-number',
+                  visibleOn: 'data.interval',
+                  step: 500,
+                  className: 'm-t-n-sm',
+                  description: '设置后将自动定时刷新，单位 ms'
+                },
+
+                {
+                  name: 'silentPolling',
+                  label: '静默刷新',
+                  type: 'switch',
+                  mode: 'inline',
+                  visibleOn: '!!data.interval',
+                  description: '设置自动定时刷新时是否显示loading'
+                },
+
+                {
+                  name: 'stopAutoRefreshWhen',
+                  label: '停止定时刷新检测表达式',
+                  type: 'input-text',
+                  visibleOn: '!!data.interval',
+                  description:
+                    '定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则不刷新了。'
+                },
+
+                {
+                  label: '采用异步方式？',
+                  remark: {
+                    trigger: 'click',
+                    rootClose: true,
+                    title: '什么是异步方式？',
+                    content:
+                      '异步方式主要用来解决请求超时问题，启用异步方式后，程序会在请求完后，定时轮询请求额外的接口用来咨询操作是否完成。所以接口可以快速的返回，而不需要等待流程真正完成。',
+                    placement: 'left'
+                  },
+                  type: 'switch',
+                  name: 'initAsyncApi',
+                  visibleOn: 'data.initApi',
+                  pipeIn: (value: any) => value != null,
+                  pipeOut: (value: any) => (value ? '' : undefined),
+                  mode: 'inline'
+                },
+
+                getSchemaTpl('api', {
+                  name: 'initAsyncApi',
+                  label: '异步检测接口',
+                  visibleOn: 'data.initAsyncApi != null',
+                  description:
+                    '设置此属性后，表单请求 initApi 后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束'
+                }),
+
+                {
+                  type: 'divider'
+                },
+
+                isCRUDFilter
+                  ? {
+                      name: 'messages',
+                      pipeIn: defaultValue({
+                        fetchFailed: '初始化失败'
+                      }),
+                      label: '默认消息信息',
+                      type: 'combo',
+                      multiLine: true,
+                      description:
+                        '可以不设置，接口返回的 msg 字段，优先级更高',
+                      items: [
+                        {
+                          label: '获取成功提示',
+                          name: 'fetchSuccess',
+                          type: 'input-text'
+                        },
+                        {
+                          label: '获取失败提示',
+                          name: 'fetchFailed',
+                          type: 'input-text'
+                        }
+                      ]
+                    }
+                  : {
+                      name: 'messages',
+                      pipeIn: defaultValue({
+                        fetchFailed: '初始化失败',
+                        saveSuccess: '保存成功',
+                        saveFailed: '保存失败'
+                      }),
+                      label: '默认消息提示',
+                      type: 'combo',
+                      multiLine: true,
+                      description:
+                        '可以不设置，接口返回的 msg 字段，优先级更高',
+                      items: [
+                        {
+                          label: '获取成功提示',
+                          name: 'fetchSuccess',
+                          type: 'input-text'
+                        },
+                        {
+                          label: '获取失败提示',
+                          name: 'fetchFailed',
+                          type: 'input-text'
+                        },
+                        {
+                          label: '保存成功提示',
+                          name: 'saveSuccess',
+                          type: 'input-text'
+                        },
+                        {
+                          label: '保存失败提示',
+                          name: 'saveFailed',
+                          type: 'input-text'
+                        },
+                        {
+                          label: '验证失败提示',
+                          name: 'validateFailed',
+                          type: 'input-text'
+                        }
+                      ]
+                    }
+              ]
+            },
+
+        {
+          title: '外观',
+          body: [
+            {
+              name: 'wrapWithPanel',
+              type: 'switch',
+              mode: 'inline',
+              className: 'block',
+              label: '用 Panel 包裹',
+              pipeIn: defaultValue(true),
+              labelRemark: {
+                className: 'm-l-xs',
+                trigger: 'click',
+                rootClose: true,
+                content: '关闭后，表单只会展示表单项，标题和操作栏将不会显示。',
+                placement: 'left'
+              }
+            },
+
+            {
+              name: 'mode',
+              label: '展示模式',
+              type: 'button-group-select',
+              size: 'sm',
+              // mode: 'inline',
+              // className: 'block',
+              pipeIn: defaultValue('normal', false),
+              options: [
+                {
+                  label: '默认',
+                  value: 'normal'
+                },
+                {
+                  label: '左右摆放',
+                  value: 'horizontal'
+                },
+                {
+                  label: '内联',
+                  value: 'inline'
+                }
+              ]
+            },
+
+            getSchemaTpl('horizontal', {
+              visibleOn: 'this.mode == "horizontal"'
+            }),
+
+            getSchemaTpl('className'),
+
+            getSchemaTpl('className', {
+              name: 'panelClassName',
+              visibleOn: 'this.wrapWithPanel !== false',
+              label: 'Panel 的 CSS 类名',
+              description: '可以设置 Panel--info 之类的'
+            })
+          ]
+        },
+
+        {
+          title: '其他',
+          body: [
+            getSchemaTpl('ref'),
+            getSchemaTpl('name', {
+              test: !isCRUDFilter
+            }),
+            {
+              name: 'debug',
+              label: '开启调试',
+              type: 'switch',
+              mode: 'inline',
+              labelRemark: '显示当前表单的数据在表单顶部'
+            },
+            getSchemaTpl('disabled'),
+            getSchemaTpl('visible')
+          ]
+        }
+      ])
+    ];
+  };
+
+  afterUpdate(event: PluginEvent<ChangeEventContext>) {
+    const context = event.context;
+
+    if (
+      context.info.renderer.name === 'form' &&
+      context.diff?.some(change => change.path?.join('.') === 'wrapWithPanel')
+    ) {
+      this.manager.buildPanels();
+    }
+  }
+}
+
+registerEditorPlugin(FormPlugin);