表单设计

表单设计

第一版功能实现并不完全，例如布局上不支持多列布局。

标题为通用字段，标题的样式参考设计稿，标题的输入框是element-ui的小号文本输入。

通用

只读

只读字段表示这个字段用户不能填写内容，也无法收集数据。可以使用在内容描述的场景下。

提示

每一个字段的描述，配合只读，可以制作表单描述。

校验

• 必填项
• 自定义错误提示

必填项是一个checkbox，参考设计稿。必填项的说明是“必填项的数据如果没有填写会提示错误。”

自定义错误是checkbox，选中后出错信息将提示输入框的内容。使用小号文本输入框。

文本字段

属性

• 默认值
• 占位符
• 提示
• 只读
• 多行文本

默认值和占位符的输入框都是小号文本输入。

提示使用一个简洁一些的富文本编辑器。

多行文本是checkbox，选中后编辑器的样式变成多行文本输入

校验

• 必填项
• 自定义错误提示
• 最少填 x 个字
• 最多填 x 个字

多行文字

和文本字段一样，只是初始状态下多行文本为勾选状态。

单项选择

属性

• 标题
• 选项
• 提示

选项

• 可拖拽选项排序
• 修改默认选项
• 删除选项
• 可编辑选项

校验

• 必填项
• 自定义错误提示

布局设置

• 排列方式

排列方式为选项以多行还是多列的方式进行排列。

其他设置

• 字段隐藏

多项选择

技术

表单编辑和创建使用POST /api/v1/form和PUT /api/v1/form/{formId} 两个接口。

具体结构说明参考Swagger API文档。下面是一个简单的创建接口的请求结构。

{
    "title": "在 JotForm 上测试 openform MVP",
    "fields": [
        {
            "title": "真实姓名",
            "name": "name",
            "discriminator": "text_field",
            "multiple": false,
            "placeholder": "请输入你的真实姓名",
            "constraints": [
                {
                    "discriminator": "required_constraint"
                }
            ]
        },
        {
            "title": "如果我们必须要“模仿”一个表单构建器，我们应该模仿谁？",
            "discriminator": "select_field",
            "multiple": false,
            "type": "radio",
            "constraints": [
                {
                    "discriminator": "required_constraint"
                }
            ],
            "options": [
                {
                    "label": "金数据"
                },
                {
                    "label": "帆软"
                },
                {
                    "label": "轻流"
                },
                {
                    "label": "问卷星"
                },
                {
                    "label": "JotForm"
                },
                {
                    "label": "Typeform"
                },
                {
                    "label": "Google Forms"
                },
                {
                    "label": "Other",
                    "editable": true
                }
            ]
        },
        {
            "title": "对于提交按钮组件，除了其本身之外，openform MVP#1 的开发还应该包含如下哪些配置项？",
            "discriminator": "select_field",
            "multiple": true,
            "type": "checkbox",
            "options": [
                {
                    "label": "按钮在页面中的左中右对齐",
                    "default": true
                },
                {
                    "label": "按钮文字的自定义"
                },
                {
                    "label": "可开启保存按钮以便稍后继续"
                },
                {
                    "label": "可开启打印按钮以便调用打印机"
                },
                {
                    "label": "可选的预设按钮样式"
                },
                {
                    "label": "可上传图片作为按钮"
                },
                {
                    "label": "Other",
                    "editable": true
                }
            ],
            "constraints": [
                {
                    "discriminator": "required_constraint"
                },
                {
                    "discriminator": "range_constraint",
                    "min": 1,
                    "max": 3
                }
            ]
        }
    ]
}