amis-editor 4.2.0-beta.2 → 5.1.9-beta.0

package/src/plugin/Form/InputFile.tsx

@@ -4,7 +4,11 @@ import {
   valuePipeOut
 } from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+import {formItemControl, tipedLabel} from '../../component/control/BaseControl';
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
 
 export class FileControlPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -35,187 +39,357 @@ export class FileControlPlugin extends BasePlugin {
     ]
   };
 
-  panelTitle = '文件域';
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            type: 'input-text',
-            name: 'btnLabel',
-            label: '上传按钮名称',
-            value: '请选择文件'
-          },
+  notRenderFormZone = true;
 
-          getSchemaTpl('api', {
-            label: '文件接收器',
-            name: 'receiver',
-            description:
-              '默认不填写将上传到 bos，可以在系统配置中设置为自己的 bos 地址。',
-            value: '/api/upload/file',
-            __isUpload: true
-          }),
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '上传文件值变化时触发（上传失败同样会触发）',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '上传的文件'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'remove',
+      eventLabel: '移除文件',
+      description: '移除文件时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '被移除的文件'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'success',
+      eventLabel: '上传成功',
+      description: '上传文件成功时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '远程上传请求成功后返回的结果数据'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'fail',
+      eventLabel: '上传失败',
+      description: '上传文件失败时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.file': {
+              type: 'object',
+              title: '上传的文件'
+            },
+            'event.data.error': {
+              type: 'object',
+              title: '远程上传请求失败后返回的错误信息'
+            }
+          }
+        }
+      ]
+    }
+  ];
 
-          getSchemaTpl('autoFill'),
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空数据',
+      description: '清除选择的文件'
+    }
+  ];
 
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
           {
-            type: 'fieldSet',
-            title: '分块上传相关',
-            collapsed: true,
-            collapsable: true,
-            className: 'fieldset',
+            title: '基本',
             body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
               {
-                type: 'button-group-select',
-                name: 'useChunk',
-                label: '启用分块',
-                size: 'xs',
-                pipeOut: valuePipeOut,
-                value: 'auto',
+                type: 'input-text',
+                name: 'btnLabel',
+                label: '按钮名称',
+                value: '文件上传'
+              },
+              getSchemaTpl('multiple', {
+                replace: true,
+                body: [
+                  {
+                    name: 'maxLength',
+                    label: '最大数量',
+                    type: 'input-number'
+                  }
+                ]
+              }),
+              {
+                type: 'input-group',
+                name: 'maxSize',
+                label: '最大体积',
+                body: [
+                  {
+                    type: 'input-number',
+                    name: 'maxSize'
+                  },
+                  {
+                    type: 'tpl',
+                    addOnclassName: 'border-0 bg-none',
+                    tpl: 'B'
+                  }
+                ]
+              },
+              {
+                label: '提交方式',
+                name: 'submitType',
+                type: 'select',
+                tiled: true,
+                value: 'asUpload',
                 options: [
                   {
-                    label: '自动',
-                    value: 'auto'
+                    label: '随表单提交',
+                    value: 'asForm'
                   },
+
                   {
-                    label: '启用',
-                    value: true
+                    label: '独立上传',
+                    value: 'asUpload'
+                  }
+                ],
+                pipeIn: (value: any, form: any) => value || 'asUpload',
+                pipeOut: (value: any, form: any) => value || 'asUpload',
+                onChange: (
+                  value: any,
+                  oldValue: boolean,
+                  model: any,
+                  form: any
+                ) => {
+                  if (value === 'asUpload') {
+                    form.setValueByName('asBase64', false);
+                    form.setValueByName('asBlob', false);
+                  } else if (value === 'asForm') {
+                    // 作为表单数据，自动上传开启
+                    form.setValueByName('autoUpload', true);
+                    const formType =
+                      form.getValueByName('formType') || 'asBlob';
+                    form.setValueByName(formType, true);
+                  }
+                }
+              },
+              getSchemaTpl('uploadType', {
+                visibleOn: 'data.submitType === "asUpload" || !data.submitType',
+                pipeIn: (value: any, form: any) => value || 'fileReceptor',
+                pipeOut: (value: any, form: any) => value || 'fileReceptor'
+              }),
+
+              {
+                name: 'formType',
+                type: 'select',
+                tiled: true,
+                visibleOn: 'data.submitType === "asForm"',
+                value: 'asBlob',
+                label: tipedLabel(
+                  '数据格式',
+                  '${formType ? asBase64 ? "小文件时可以使用，默认给 Form 提交的是文件下载地址，设置后给 Form 提交文件内容的 base64 格式字符串。" : "File 控件不接管文件上传，直接由表单的保存接口完成。和 Base64 选项二选一。" : ""}'
+                ),
+                options: [
+                  {
+                    label: 'Base64',
+                    value: 'asBase64'
                   },
+
                   {
-                    label: '关闭',
-                    value: false
+                    label: '二进制',
+                    value: 'asBlob'
                   }
-                ]
+                ],
+                onChange: (
+                  value: any,
+                  oldValue: boolean,
+                  model: any,
+                  form: any
+                ) => {
+                  form.setValueByName('asBase64', 'asBase64' === value);
+                  form.setValueByName('asBlob', 'asBlob' === value);
+                }
               },
+
+              getSchemaTpl('bos', {
+                visibleOn:
+                  '(data.submitType === "asUpload" || !data.submitType) && data.uploadType === "bos"'
+              }),
+
+              getSchemaTpl('proxy', {
+                value: false,
+                visibleOn: 'data.submitType === "asUpload" || !data.submitType'
+              }),
+
+              getSchemaTpl('switch', {
+                name: 'autoUpload',
+                label: '自动上传',
+                value: true,
+                visibleOn: 'data.submitType === "asUpload"'
+              }),
+
+              getSchemaTpl('switch', {
+                name: 'useChunk',
+                label: '开启分块',
+                value: false,
+                pipeIn: (value: any, form: any) => !!value, // 兼容auto
+                visibleOn: 'data.submitType == "asUpload"'
+              }),
+
               {
-                name: 'chunkSize',
-                type: 'input-number',
-                label: '分块大小',
-                visibleOn: 'data.useChunk != false',
-                value: 5 * 1024 * 1024
+                type: 'container',
+                className: 'ae-ExtendMore mb-3',
+                visibleOn:
+                  'data.submitType === "asUpload" && data.useChunk != false',
+                body: [
+                  {
+                    type: 'input-group',
+                    name: 'chunkSize',
+                    label: '分块大小',
+                    body: [
+                      {
+                        type: 'input-number',
+                        name: 'chunkSize'
+                      },
+                      {
+                        type: 'tpl',
+                        addOnclassName: 'border-0 bg-none',
+                        tpl: 'B'
+                      }
+                    ]
+                  },
+                  {
+                    type: 'Container',
+                    visibleOn:
+                      'data.submitType === "asUpload" && data.uploadType == "fileReceptor" && data.useChunk != false',
+                    body: [
+                      getSchemaTpl('apiControl', {
+                        name: 'startChunkApi',
+                        label: tipedLabel(
+                          '分块准备接口',
+                          '用来做分块前的准备工作，一个文件只会调用一次。如果出错了，后续的分块上传就会中断。'
+                        ),
+                        value: '/api/upload/startChunk'
+                      }),
+                      getSchemaTpl('apiControl', {
+                        name: 'chunkApi',
+                        label: tipedLabel(
+                          '分块上传接口',
+                          '用来接收每个分块上传，大文件会根据 chunkSize 分割成多块，然后每块上传都会调用这个接口。'
+                        ),
+                        value: '/api/upload/chunk'
+                      }),
+                      getSchemaTpl('apiControl', {
+                        name: 'finishChunkApi',
+                        label: tipedLabel(
+                          '上传完成接口',
+                          '等所有分块上传完后，将上传文件收集到的 `eTag` 信息合并一起，再次请求后端完成文件上传。'
+                        ),
+                        value: '/api/upload/finishChunk'
+                      })
+                    ]
+                  }
+                ]
               },
-              getSchemaTpl('api', {
-                name: 'startChunkApi',
-                label: 'startChunkApi',
-                value: '/api/upload/startChunk'
+
+              getSchemaTpl('apiControl', {
+                name: 'receiver',
+                label: tipedLabel(
+                  '文件接收器',
+                  '默认不填写将上传到 bos，可以在系统配置中设置为自己的 bos 地址。'
+                ),
+                value: '/api/upload/file',
+                __isUpload: true,
+                visibleOn:
+                  'data.submitType === "asUpload" && data.uploadType === "fileReceptor" && !data.useChunk'
               }),
-              getSchemaTpl('api', {
-                name: 'chunkApi',
-                label: 'chunkApi',
-                value: '/api/upload/chunk'
+              getSchemaTpl('fileUrl', {
+                name: 'templateUrl',
+                label: tipedLabel(
+                  '模板链接',
+                  '适用于excel上传等有上传格式要求的场景，为用户提供一个模板下载入口'
+                )
               }),
-              getSchemaTpl('api', {
-                name: 'finishChunkApi',
-                label: 'finishChunkApi',
-                value: '/api/upload/finishChunk'
-              })
+              getSchemaTpl('switch', {
+                name: 'drag',
+                label: '拖拽上传',
+                value: false
+              }),
+              getSchemaTpl('remark'),
+              getSchemaTpl('labelRemark'),
+              getSchemaTpl('description')
+              // getSchemaTpl('autoFill')
             ]
           },
-          {
-            type: 'input-text',
-            name: 'accept',
-            label: '文件类型',
-            value: '',
-            description:
-              '请填写文件的 <code>mime-types</code>，参考 <code>input[type=file]</code> 的 <code>accept</code> 说明'
-          },
-          getSchemaTpl('switchDefaultValue'),
-          {
-            type: 'input-text',
-            name: 'value',
-            label: '默认值',
-            visibleOn: 'typeof this.value !== "undefined"'
-          },
-          getSchemaTpl('multiple', {
-            pipeIn: defaultValue(false)
-          }),
-          getSchemaTpl('joinValues'),
-          getSchemaTpl('delimiter'),
-          getSchemaTpl('extractValue')
-        ]
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {tag: ValidatorTag.File})
+        ])
       },
       {
         title: '外观',
-        body: [
-          getSchemaTpl('className', {
-            name: 'btnClassName',
-            label: '按钮 CSS 类名',
-            pipeIn: defaultValue('btn-sm btn-info')
-          }),
-          getSchemaTpl('className', {
-            name: 'btnUploadClassName',
-            label: '上传按钮 CSS 类名',
-            pipeIn: defaultValue('btn-sm btn-success')
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
+          getSchemaTpl('style:classNames', {
+            schema: [
+              getSchemaTpl('className', {
+                name: 'descriptionClassName',
+                label: '描述'
+              }),
+              getSchemaTpl('className', {
+                name: 'btnClassName',
+                label: '选择按钮'
+              }),
+              getSchemaTpl('className', {
+                name: 'btnUploadClassName',
+                label: '上传按钮'
+              })
+            ]
           })
-        ]
+        ])
       },
       {
-        title: '其他',
+        title: '事件',
+        className: 'p-none',
         body: [
-          {
-            name: 'maxSize',
-            type: 'input-number',
-            label: '文件最大体积',
-            description: '超出大小不允许上传，单位字节'
-          },
-          {
-            name: 'maxLength',
-            type: 'input-number',
-            label: '文件最大数量',
-            description: '超出数量不允许上传',
-            visibleOn: 'data.multiple != false'
-          },
-          {
-            name: 'fileField',
-            type: 'input-text',
-            label: '文件域名称',
-            value: 'file'
-          },
-          {
-            name: 'asBase64',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
-            label: '作为 Base64 提交',
-            hiddenOn: 'data.asBlob',
-            description:
-              '小文件时可以使用，默认给 Form 提交的是文件下载地址，设置后给 Form 提交文件内容的 base64 格式字符串。'
-          },
-          {
-            name: 'asBlob',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
-            label: '作为二进制提交',
-            hiddenOn: 'data.asBase64',
-            description:
-              'File 控件不接管文件上传，直接由表单的保存接口完成。和 Base64 选项二选一。'
-          },
-          {
-            name: 'autoUpload',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
-            label: '是否自动上传',
-            value: true
-          },
-          {
-            name: 'hideUploadButton',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
-            label: '是否隐藏上传按钮',
-            value: false
-          },
-          getSchemaTpl('fileUrl', {
-            name: 'templateUrl',
-            label: '模板地址'
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
           })
         ]
       }
-    ])
-  ];
+    ]);
+  };
 }
 
 registerEditorPlugin(FileControlPlugin);

package/src/plugin/Form/InputImage.tsx

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

package/src/plugin/Form/InputKV.tsx

@@ -1,6 +1,7 @@
 /**
  * @file input-kv 组件的素项目部
  */
+import {RendererAction, RendererEvent} from '../../event-action';
 import {
   defaultValue,
   getSchemaTpl,
@@ -42,6 +43,66 @@ export class KVControlPlugin extends BasePlugin {
       }
     ]
   };
+
+   // 事件定义
+   events: RendererEvent[] = [
+    {
+      eventName: 'add',
+      eventLabel: '添加',
+      description: '添加组合项时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'object',
+              title: '当前组合项的值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'delete',
+      eventLabel: '删除',
+      description: '删除组合项时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.key': {
+              type: 'string',
+              title: '删除项的索引'
+            },
+            'event.data.value': {
+              type: 'string',
+              title: '当前组合项的值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除选中值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
   panelTitle = 'KV 键值对';
   panelBody = [
     {

package/src/plugin/Form/InputMonth.tsx

@@ -8,7 +8,7 @@ export class MonthControlPlugin extends DateControlPlugin {
   $schema = '/schemas/MonthControlSchema.json';
 
   // 组件名称
-  name = 'Month';
+  name = '日期';
   isBaseComponent = true;
   icon = 'fa fa-calendar';
   description = `月份选择`;
@@ -19,6 +19,8 @@ export class MonthControlPlugin extends DateControlPlugin {
     type: 'input-month',
     name: 'month'
   };
+
+  disabledRendererPlugin = true;
   previewSchema: any = {
     type: 'form',
     wrapWithPanel: false,