sharp-formflow中自定义表单

自定义表单

自定义表单顾名思义就是由用户定义表单，由用户觉定标签和组件，决定要填写什么格式的数据。

创建表单

方式一

创建组件

http://localhost:8080/form/configurers

[{
    "label": "姓名",
    "cpnType": "TEXT",
    "validators": [{
        "min": 0,
        "max": 16,
        "message": "长度范围 0 - 16 个字符",
        "validatorType": "LENGTH"
    }, {
        "required": true,
        "message": "必填项",
        "validatorType": "REQUIRED"
    }],
    "defaultValue": "Rick",
    "placeholder": "请输入姓名"
}, {
    "label": "年龄",
    "cpnType": "NUMBER_TEXT",
    "validators": [{
        "min": 18,
        "max": 100,
        "message": "大小范围是18 - 100",
        "validatorType": "SIZE"
    }, {
        "required": true,
        "message": "必填项",
        "validatorType": "REQUIRED"
    }],
    "defaultValue": "18",
    "placeholder": "请输入年龄"
}, {
    "label": "兴趣爱好(单选)",
    "cpnType": "SELECT",
    "validators": [{
        "required": true,
        "message": "必填项",
        "validatorType": "REQUIRED"
    }],
    "options": ["足球", "篮球", "乒乓球", "羽毛球"],
    "defaultValue": "足球",
    "placeholder": "请输入兴趣爱好"
}, {
    "label": "信息收集",
    "cpnType": "TABLE",
    "validators": [],
    "placeholder": "请输入信息收集",
    "additionalInfo": {
        "labels": ["姓名", "年龄"]
    }
}, {
    "label": "兴趣爱好(多选)",
    "cpnType": "CHECKBOX",
    "validators": [],
    "options": ["足球", "篮球", "乒乓球", "羽毛球"],
    "defaultValue": "[\"足球\", \"篮球\"]",
    "placeholder": "请输入兴趣爱好"
}]

创建表单

http://localhost:8080/form/configurers

{
    "name": "人员信息登记表"
}

表单关联组件

http://localhost:8080/forms/488683635382583296/configs

["488675379486556160","488675379490750464","488675379490750465","488675379490750466","488675379494944768"]

方式二

创建表单和组件并关联

{
    "form": {
        "name": "我的第N个表单"
    },
    "configs": [{
        "label": "姓名",
        "cpnType": "TEXT",
        "validators": [{
            "min": 0,
            "max": 16,
            "message": "长度范围 0 - 16 个字符",
            "validatorType": "LENGTH"
        }, {
            "required": true,
            "message": "必填项",
            "validatorType": "REQUIRED"
        }],
        "defaultValue": "Rick",
        "placeholder": "请输入姓名"
    }, {
        "label": "年龄",
        "cpnType": "NUMBER_TEXT",
        "validators": [{
            "min": 18,
            "max": 100,
            "message": "大小范围是18 - 100",
            "validatorType": "SIZE"
        }, {
            "required": true,
            "message": "必填项",
            "validatorType": "REQUIRED"
        }],
        "defaultValue": "18",
        "placeholder": "请输入年龄"
    }, {
        "label": "兴趣爱好(单选)",
        "cpnType": "SELECT",
        "validators": [{
            "required": true,
            "message": "必填项",
            "validatorType": "REQUIRED"
        }],
        "options": ["足球", "篮球", "乒乓球", "羽毛球"],
        "defaultValue": "足球",
        "placeholder": "请输入兴趣爱好"
    }, {
        "label": "信息收集",
        "cpnType": "TABLE",
        "validators": [],
        "placeholder": "请输入信息收集",
        "additionalInfo": {
            "labels": ["姓名", "年龄"]
        }
    }, {
        "label": "兴趣爱好(多选)",
        "cpnType": "CHECKBOX",
        "validators": [],
        "options": ["足球", "篮球", "乒乓球", "羽毛球"],
        "defaultValue": "[\"足球\", \"篮球\"]",
        "placeholder": "请输入兴趣爱好"
    }]
}

查看表单

http://localhost:8080/forms/ajax/488686638231617536

{
    "form": {
        "id": "488686638231617536",
        "name": "我的第N个表单"
    },
    "instanceId": null,
    "propertyList": [
        {
            "id": 488686640483958784,
            "name": "ZghRwhvcGu",
            "configurer": {
                "id": "488686639036923904",
                "label": "姓名",
                "cpnType": "TEXT",
                "validators": [
                    {
                        "min": 0,
                        "max": 16,
                        "message": "长度范围 0 - 16 个字符",
                        "validatorType": "LENGTH"
                    },
                    {
                        "required": true,
                        "message": "必填项",
                        "validatorType": "REQUIRED"
                    }
                ],
                "options": null,
                "defaultValue": "Rick",
                "placeholder": "请输入姓名",
                "additionalInfo": null
            },
            "value": "Rick",
            "validatorProperies": {
                "Required.required": true,
                "Length.min": 0,
                "Length.max": 16
            }
        },
        {
            "id": 488686640483958785,
            "name": "VnmnWkziwe",
            "configurer": {
                "id": "488686639036923905",
                "label": "年龄",
                "cpnType": "NUMBER_TEXT",
                "validators": [
                    {
                        "min": 18,
                        "max": 100,
                        "message": "大小范围是18 - 100",
                        "validatorType": "SIZE"
                    },
                    {
                        "required": true,
                        "message": "必填项",
                        "validatorType": "REQUIRED"
                    }
                ],
                "options": null,
                "defaultValue": "18",
                "placeholder": "请输入年龄",
                "additionalInfo": null
            },
            "value": 18,
            "validatorProperies": {
                "Size.min": 18,
                "Size.max": 100,
                "Required.required": true
            }
        },
        {
            "id": 488686640488153088,
            "name": "WIRyhGtAhh",
            "configurer": {
                "id": "488686639036923906",
                "label": "兴趣爱好(单选)",
                "cpnType": "SELECT",
                "validators": [
                    {
                        "required": true,
                        "message": "必填项",
                        "validatorType": "REQUIRED"
                    }
                ],
                "options": [
                    "足球",
                    "篮球",
                    "乒乓球",
                    "羽毛球"
                ],
                "defaultValue": "足球",
                "placeholder": "请输入兴趣爱好",
                "additionalInfo": null
            },
            "value": "足球",
            "validatorProperies": {
                "Required.required": true
            }
        },
        {
            "id": 488686640488153089,
            "name": "EsaBSGeoNF",
            "configurer": {
                "id": "488686639041118208",
                "label": "信息收集",
                "cpnType": "TABLE",
                "validators": [],
                "options": null,
                "defaultValue": null,
                "placeholder": "请输入信息收集",
                "additionalInfo": {
                    "labels": [
                        "姓名",
                        "年龄"
                    ]
                }
            },
            "value": null,
            "validatorProperies": {}
        },
        {
            "id": 488686640488153090,
            "name": "dCrOsUvnkb",
            "configurer": {
                "id": "488686639041118209",
                "label": "兴趣爱好(多选)",
                "cpnType": "CHECKBOX",
                "validators": [],
                "options": [
                    "足球",
                    "篮球",
                    "乒乓球",
                    "羽毛球"
                ],
                "defaultValue": "[\"足球\", \"篮球\"]",
                "placeholder": "请输入兴趣爱好",
                "additionalInfo": null
            },
            "value": [
                "足球",
                "篮球"
            ],
            "validatorProperies": {}
        }
    ],
    "method": "POST",
    "actionUrl": "488686638231617536"
}

填写表单数据

我的模版是是基于 thymeleaf jQuery Bootstrap 实现的。
浏览器访问：http://localhost:8080/forms/page/488686638231617536

http://xhope.top/wp-content/uploads/2021/11/1122.png
数据填写完成后，会生实例id

实例id查看实例数据

488693516797902848 就是实例id

http://localhost:8080/forms/page/488686638231617536/488693516797902848