amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/lib/plugin/Form/InputExcel.js

@@ -0,0 +1,121 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var BaseControl = require('../../component/BaseControl.js');
+
+var ExcelControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(ExcelControlPlugin, _super);
+    function ExcelControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'input-excel';
+        _this.$schema = '/schemas/ExcelControlSchema.json';
+        // 组件名称
+        _this.name = '上传 Excel';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-eyedropper';
+        _this.description = '自动解析 Excel';
+        _this.docLink = '/amis/zh-CN/components/form/input-excel';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'input-excel',
+            label: 'Excel',
+            name: 'excel'
+        };
+        _this.previewSchema = {
+            type: 'form',
+            className: 'text-left',
+            mode: 'horizontal',
+            wrapWithPanel: false,
+            body: [
+                tslib.__assign({}, _this.scaffold)
+            ]
+        };
+        _this.panelTitle = '上传 Excel';
+        _this.notRenderFormZone = true;
+        // 事件定义
+        _this.events = [
+            {
+                eventName: 'change',
+                eventLabel: '值变化',
+                description: 'excel 上传解析完成后触发',
+                dataSchema: [
+                    {
+                        type: 'object',
+                        properties: {
+                            'event.data.value': {
+                                type: 'string',
+                                title: 'excel 解析后的数据'
+                            }
+                        }
+                    }
+                ]
+            }
+        ];
+        // 动作定义
+        _this.actions = [
+            {
+                actionType: 'clear',
+                actionLabel: '清空',
+                description: '清除选中值'
+            },
+            {
+                actionType: 'reset',
+                actionLabel: '重置',
+                description: '将值重置为resetValue，若没有配置resetValue，则清空'
+            },
+            {
+                actionType: 'setValue',
+                actionLabel: '赋值',
+                description: '触发组件数据更新'
+            }
+        ];
+        _this.panelBodyCreator = function (context) {
+            return BaseControl.formItemControl({
+                common: {
+                    body: [
+                        {
+                            label: '解析模式',
+                            name: 'parseMode',
+                            type: 'select',
+                            options: [
+                                {
+                                    label: '对象',
+                                    value: 'object'
+                                },
+                                { label: '数组', value: 'array' }
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'allSheets',
+                            label: '是否解析所有 Sheet'
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'plainText',
+                            label: '是否解析为纯文本',
+                            pipeIn: AMisCodeEditor.defaultValue(true)
+                        }),
+                        AMisCodeEditor.getSchemaTpl('switch', {
+                            name: 'includeEmpty',
+                            label: '是否包含空内容',
+                            visibleOn: 'data.parseMode === "array"'
+                        })
+                    ]
+                }
+            }, context);
+        };
+        return _this;
+    }
+    return ExcelControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(ExcelControlPlugin);
+
+exports.ExcelControlPlugin = ExcelControlPlugin;

package/{dist → lib}/plugin/Form/InputFile.d.ts

@@ -1,4 +1,5 @@
-import { BasePlugin } from '../../plugin';
+import { BasePlugin, BaseEventContext } from 'amis-editor-core';
+import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
 export declare class FileControlPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -14,6 +15,9 @@ export declare class FileControlPlugin extends BasePlugin {
         name: string;
     };
     previewSchema: any;
-    panelTitle: string;
-    panelBody: any[];
+    notRenderFormZone: boolean;
+    events: RendererEvent[];
+    actions: RendererAction[];
+    panelJustify: boolean;
+    panelBodyCreator: (context: BaseEventContext) => any;
 }

package/lib/plugin/Form/InputFile.js

@@ -0,0 +1,354 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var AMisCodeEditor = require('amis-editor-core');
+var BaseControl = require('../../component/BaseControl.js');
+var validator = require('../../validator.js');
+var util = require('../../util.js');
+
+var FileControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(FileControlPlugin, _super);
+    function FileControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'input-file';
+        _this.$schema = '/schemas/FileControlSchema.json';
+        // 组件名称
+        _this.name = '文件上传';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-upload';
+        _this.description = "\u53EF\u4E0A\u4F20\u591A\u4E2A\u6587\u4EF6\uFF0C\u53EF\u914D\u7F6E\u662F\u5426\u81EA\u52A8\u4E0A\u4F20\u4EE5\u53CA\u5927\u6587\u4EF6\u5206\u7247\u4E0A\u4F20";
+        _this.docLink = '/amis/zh-CN/components/form/input-file';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'input-file',
+            label: '文件上传',
+            name: 'file'
+        };
+        _this.previewSchema = {
+            type: 'form',
+            className: 'text-left',
+            wrapWithPanel: false,
+            mode: 'horizontal',
+            body: [
+                tslib.__assign({}, _this.scaffold)
+            ]
+        };
+        _this.notRenderFormZone = true;
+        // 事件定义
+        _this.events = [
+            {
+                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: '远程上传请求失败后返回的错误信息'
+                            }
+                        }
+                    }
+                ]
+            }
+        ];
+        // 动作定义
+        _this.actions = [
+            {
+                actionType: 'clear',
+                actionLabel: '清空数据',
+                description: '清除选择的文件'
+            }
+        ];
+        _this.panelJustify = true;
+        _this.panelBodyCreator = function (context) {
+            return AMisCodeEditor.getSchemaTpl('tabs', [
+                {
+                    title: '属性',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        {
+                            title: '基本',
+                            body: [
+                                AMisCodeEditor.getSchemaTpl('formItemName', {
+                                    required: true
+                                }),
+                                AMisCodeEditor.getSchemaTpl('label'),
+                                {
+                                    type: 'input-text',
+                                    name: 'btnLabel',
+                                    label: '按钮名称',
+                                    value: '文件上传'
+                                },
+                                AMisCodeEditor.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: 'asForm'
+                                        },
+                                        {
+                                            label: '独立上传',
+                                            value: 'asUpload'
+                                        }
+                                    ],
+                                    pipeIn: function (value, form) { return value || 'asUpload'; },
+                                    pipeOut: function (value, form) { return value || 'asUpload'; },
+                                    onChange: function (value, oldValue, model, form) {
+                                        if (value === 'asUpload') {
+                                            form.setValueByName('asBase64', false);
+                                            form.setValueByName('asBlob', false);
+                                        }
+                                        else if (value === 'asForm') {
+                                            // 作为表单数据，自动上传开启
+                                            form.setValueByName('autoUpload', true);
+                                            var formType = form.getValueByName('formType') || 'asBlob';
+                                            form.setValueByName(formType, true);
+                                        }
+                                    }
+                                },
+                                AMisCodeEditor.getSchemaTpl('uploadType', {
+                                    visibleOn: 'data.submitType === "asUpload" || !data.submitType',
+                                    pipeIn: function (value, form) { return value || 'fileReceptor'; },
+                                    pipeOut: function (value, form) { return value || 'fileReceptor'; }
+                                }),
+                                {
+                                    name: 'formType',
+                                    type: 'select',
+                                    tiled: true,
+                                    visibleOn: 'data.submitType === "asForm"',
+                                    value: 'asBlob',
+                                    label: BaseControl.tipedLabel('数据格式', '${formType ? asBase64 ? "小文件时可以使用，默认给 Form 提交的是文件下载地址，设置后给 Form 提交文件内容的 base64 格式字符串。" : "File 控件不接管文件上传，直接由表单的保存接口完成。和 Base64 选项二选一。" : ""}'),
+                                    options: [
+                                        {
+                                            label: 'Base64',
+                                            value: 'asBase64'
+                                        },
+                                        {
+                                            label: '二进制',
+                                            value: 'asBlob'
+                                        }
+                                    ],
+                                    onChange: function (value, oldValue, model, form) {
+                                        form.setValueByName('asBase64', 'asBase64' === value);
+                                        form.setValueByName('asBlob', 'asBlob' === value);
+                                    }
+                                },
+                                AMisCodeEditor.getSchemaTpl('bos', {
+                                    visibleOn: '(data.submitType === "asUpload" || !data.submitType) && data.uploadType === "bos"'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('proxy', {
+                                    value: false,
+                                    visibleOn: 'data.submitType === "asUpload" || !data.submitType'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'autoUpload',
+                                    label: '自动上传',
+                                    value: true,
+                                    visibleOn: 'data.submitType === "asUpload"'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'useChunk',
+                                    label: '开启分块',
+                                    value: false,
+                                    pipeIn: function (value, form) { return !!value; },
+                                    visibleOn: 'data.submitType == "asUpload"'
+                                }),
+                                {
+                                    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: [
+                                                AMisCodeEditor.getSchemaTpl('apiControl', {
+                                                    name: 'startChunkApi',
+                                                    label: BaseControl.tipedLabel('分块准备接口', '用来做分块前的准备工作，一个文件只会调用一次。如果出错了，后续的分块上传就会中断。'),
+                                                    value: '/api/upload/startChunk'
+                                                }),
+                                                AMisCodeEditor.getSchemaTpl('apiControl', {
+                                                    name: 'chunkApi',
+                                                    label: BaseControl.tipedLabel('分块上传接口', '用来接收每个分块上传，大文件会根据 chunkSize 分割成多块，然后每块上传都会调用这个接口。'),
+                                                    value: '/api/upload/chunk'
+                                                }),
+                                                AMisCodeEditor.getSchemaTpl('apiControl', {
+                                                    name: 'finishChunkApi',
+                                                    label: BaseControl.tipedLabel('上传完成接口', '等所有分块上传完后，将上传文件收集到的 `eTag` 信息合并一起，再次请求后端完成文件上传。'),
+                                                    value: '/api/upload/finishChunk'
+                                                })
+                                            ]
+                                        }
+                                    ]
+                                },
+                                AMisCodeEditor.getSchemaTpl('apiControl', {
+                                    name: 'receiver',
+                                    label: BaseControl.tipedLabel('文件接收器', '默认不填写将上传到 bos，可以在系统配置中设置为自己的 bos 地址。'),
+                                    value: '/api/upload/file',
+                                    __isUpload: true,
+                                    visibleOn: 'data.submitType === "asUpload" && data.uploadType === "fileReceptor" && !data.useChunk'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('fileUrl', {
+                                    name: 'templateUrl',
+                                    label: BaseControl.tipedLabel('模板链接', '适用于excel上传等有上传格式要求的场景，为用户提供一个模板下载入口')
+                                }),
+                                AMisCodeEditor.getSchemaTpl('switch', {
+                                    name: 'drag',
+                                    label: '拖拽上传',
+                                    value: false
+                                }),
+                                AMisCodeEditor.getSchemaTpl('remark'),
+                                AMisCodeEditor.getSchemaTpl('labelRemark'),
+                                AMisCodeEditor.getSchemaTpl('description')
+                                // getSchemaTpl('autoFill')
+                            ]
+                        },
+                        AMisCodeEditor.getSchemaTpl('status', { isFormItem: true }),
+                        AMisCodeEditor.getSchemaTpl('validation', { tag: validator.ValidatorTag.File })
+                    ])
+                },
+                {
+                    title: '外观',
+                    body: AMisCodeEditor.getSchemaTpl('collapseGroup', [
+                        AMisCodeEditor.getSchemaTpl('style:formItem', { renderer: context.info.renderer }),
+                        AMisCodeEditor.getSchemaTpl('style:classNames', {
+                            schema: [
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'descriptionClassName',
+                                    label: '描述'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'btnClassName',
+                                    label: '选择按钮'
+                                }),
+                                AMisCodeEditor.getSchemaTpl('className', {
+                                    name: 'btnUploadClassName',
+                                    label: '上传按钮'
+                                })
+                            ]
+                        })
+                    ])
+                },
+                {
+                    title: '事件',
+                    className: 'p-none',
+                    body: [
+                        AMisCodeEditor.getSchemaTpl('eventControl', tslib.__assign({ name: 'onEvent' }, util.getEventControlConfig(_this.manager, context)))
+                    ]
+                }
+            ]);
+        };
+        return _this;
+    }
+    return FileControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(FileControlPlugin);
+
+exports.FileControlPlugin = FileControlPlugin;

package/{dist → lib}/plugin/Form/InputGroup.d.ts

@@ -1,4 +1,4 @@
-import { BasePlugin } from '../../plugin';
+import { BasePlugin } from 'amis-editor-core';
 export declare class InputGroupControlPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;

package/lib/plugin/Form/InputGroup.js

@@ -0,0 +1,100 @@
+/**
+ * amis-editor v5.2.0-beta.0
+ * Copyright 2018-2022 @fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var amis = require('amis');
+var AMisCodeEditor = require('amis-editor-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var InputGroupControlPlugin = /** @class */ (function (_super) {
+    tslib.__extends(InputGroupControlPlugin, _super);
+    function InputGroupControlPlugin() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        // 关联渲染器名字
+        _this.rendererName = 'input-group';
+        _this.$schema = '/schemas/InputGroupControlSchema.json';
+        // 组件名称
+        _this.name = '输入组合';
+        _this.isBaseComponent = true;
+        _this.icon = 'fa fa-object-group';
+        _this.description = "\u8F93\u5165\u7EC4\u5408\uFF0C\u652F\u6301\u591A\u79CD\u7C7B\u578B\u7684\u63A7\u4EF6\u7EC4\u5408";
+        _this.docLink = '/amis/zh-CN/components/form/input-group';
+        _this.tags = ['表单项'];
+        _this.scaffold = {
+            type: 'input-group',
+            name: 'input-group',
+            label: 'input 组合',
+            body: [
+                {
+                    type: 'input-text',
+                    inputClassName: 'b-r-none p-r-none',
+                    name: 'input-group'
+                },
+                {
+                    type: 'submit',
+                    label: '提交',
+                    level: 'primary'
+                }
+            ]
+        };
+        _this.previewSchema = {
+            type: 'form',
+            className: 'text-left',
+            mode: 'horizontal',
+            wrapWithPanel: false,
+            body: [
+                tslib.__assign({}, _this.scaffold)
+            ]
+        };
+        _this.panelTitle = 'Input 组合';
+        _this.panelBody = [
+            [
+                {
+                    name: 'body',
+                    type: 'combo',
+                    // label: '子按钮',
+                    multiple: true,
+                    addable: false,
+                    draggable: true,
+                    draggableTip: '可排序、可移除、如要编辑请在预览区选中编辑',
+                    editable: false,
+                    visibleOn: 'this.body && this.body.length',
+                    items: [
+                        {
+                            type: 'tpl',
+                            inline: false,
+                            className: 'p-t-xs',
+                            tpl: '<%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%>'
+                        }
+                    ]
+                },
+                {
+                    children: (React__default["default"].createElement(amis.Button, { className: "m-b", 
+                        // TODO：需要限制一下 body 的类型，之前是这些 'text', 'url', 'email', 'password', 'select', 'date', 'time', 'date-time', 'date-range', 'formula', 'color', 'city', 'icon', 'plain', 'tpl', 'button', 'submit', 'reset'
+                        onClick: function () {
+                            // this.manager.showInsertPanel('body')
+                            _this.manager.showRendererPanel('表单项'); // '请从左侧组件面板中点击添加表单项'
+                        }, level: "danger", tooltip: "\u63D2\u5165\u4E00\u4E2A\u65B0\u7684\u5143\u7D20", size: "sm", block: true }, "\u65B0\u589E\u5143\u7D20"))
+                },
+                AMisCodeEditor.getSchemaTpl('formItemName', {
+                    required: true
+                })
+            ]
+        ];
+        return _this;
+    }
+    return InputGroupControlPlugin;
+}(AMisCodeEditor.BasePlugin));
+AMisCodeEditor.registerEditorPlugin(InputGroupControlPlugin);
+
+exports.InputGroupControlPlugin = InputGroupControlPlugin;

package/{dist → lib}/plugin/Form/InputImage.d.ts

@@ -1,4 +1,5 @@
-import { BasePlugin } from '../../plugin';
+import { BasePlugin, BaseEventContext } from 'amis-editor-core';
+import { RendererAction, RendererEvent } from 'amis-editor-comp/dist/renderers/event-action';
 export declare class ImageControlPlugin extends BasePlugin {
     rendererName: string;
     $schema: string;
@@ -15,6 +16,9 @@ export declare class ImageControlPlugin extends BasePlugin {
         imageClassName: string;
     };
     previewSchema: any;
+    notRenderFormZone: boolean;
+    events: RendererEvent[];
+    actions: RendererAction[];
     panelTitle: string;
-    panelBody: any[];
+    panelBodyCreator: (context: BaseEventContext) => any[];
 }