# 使用表单组件完成数据采集

在实际业务场景中,我们需要和用户进行交互,收集数据,此时就需要表单。

# 功能场景

  • 案例1:通过实体拖拽直接实现如下图所示效果,创建产品信息时,根据不同信息出现不同采集方式。

    1

  • 案例2:通过自定义表格输入形式实现如下图所示效果,创建信息时,根据不同信息出现不同采集方式。

    2

# 操作详解

# 示例1:通过实体拖拽自动生成表单

# 操作步骤

  1. 以应用开发者帐号登录低代码平台。

  2. 在数据设计器下,添加实体。

    2023-04-10_101514

  3. 创建Product实体,实体信息如下表所示。

    名称 标题 数据类型
    name 产品名称 String 字符串
    serialNumber 产品编号 String 字符串
    price 单价 Double 小数
    specification 规格 String 字符串
    origin 产地 Text 长文本
    describe 描述 Text 长文本

    2023-04-10_102427

  4. 在IDE中进入指定页面后,在组件库中拖拽线性布局。

    2023-04-10_102525

  5. 将实体拖拽至线性布局。

    2023-04-10_102730

  6. 选择创建,创建页面如下。

    2023-04-10_103358

# 实现效果

配置完成后,实现效果如下图所示。

1

# 示例2:自定义表单输入形式

# 操作步骤

  1. 创建ExperienceEnum枚举类型,如下表所示:

    枚举值 标题
    0 一般
    1 良好
    2 非常好
  2. 创建Questionnaire问卷信息实体,实体信息如下表所示:

    名称 标题 数据类型
    name 填写人 String 字符串
    age 年龄 Integer 整数
    gender 性别 String 字符串
    hobbies 爱好 Text 长文本
    area 所在地区 String 字符串
    comfort 舒适度 String 字符串
    submitDate 提交日期 Date 日期
    sense 体验感 EexperienceEnum
    feedback 反馈 Text 长文本
    picture 图片 Text 长文本
  3. 在IDE中进入指定页面后,将此实体拖入到线性布局中,选择创建。

    2023-04-10_140008

  4. 将表单项下的数据采集组件修改为以下相应的组件:

    • 填写人:单行输入
    • 年龄:数字输入
    • 性别:单选组
    • 爱好:多选组
    • 所在地区:地区选择
    • 舒适度:评分
    • 提交日期:日期选择
    • 体验感:选择框
    • 图片:文件上传
    • 反馈:富文本编辑器(扩展组件)

# 实现效果

2

上次更新: 2023年06月26日