本手册详细介绍「在线表单」模块的全部功能与操作流程。通过该模块，您可以 零代码 完成表单的设计、发布和使用，实现数据的快速采集与管理。

1. 功能概览

在线表单模块采用 「设计 → 发布 → 使用」 三阶段工作流：

2. 表单管理列表

进入 在线开发 → Online表单开发 菜单，即可看到表单管理列表页面。

2.1 查询与筛选

页面顶部提供了四个查询条件，帮助您快速定位目标表单：

填写条件后，点击 「查询」 按钮即可过滤列表。

2.2 列表字段说明

2.3 操作按钮

3. 新增/修改表单（三步流程）

点击列表页面的 「新增」 按钮或某条记录的 「修改」 链接，将打开全屏的表单设计器，分为三个步骤：

步骤一：基础信息  →  步骤二：表单设计  →  步骤三：列表配置

通过顶部的 「上一步」 和 「下一步」 按钮在步骤间切换，最后在步骤三点击 「保存」 完成。

3.1 步骤一：基础信息

本步骤用于设置表单的基本属性和数据表关联。

3.1.1 基本属性

3.1.2 数据表关联

在基本属性下方，您可以关联数据库表。点击 「新增一行」 按钮会弹出 表选择器 对话框：

表选择器操作步骤：

1. 在搜索栏输入 表名 或 表说明 进行查询
2. 在列表中 勾选 需要关联的表（支持多选）
3. 点击 「确定」 添加到关联列表

[!IMPORTANT]
主键要求：所有关联的数据表 必须 包含名为 id 的主键字段，否则无法添加。

添加表后，关联配置表将显示以下信息：

[!TIP]
单表模式：如果不选择任何表，系统会自动创建数据表。

多表模式：第一张表为主表，后续表为从表，需配置外键关联关系。

点击 「下一步」 前，系统会自动校验：

• 必填字段是否已填写
• 从表的外键字段、关联主键、与主表关系是否已选择

3.2 步骤二：表单设计

本步骤是核心的可视化表单设计器，采用 拖拽式 操作，分为三个区域。

3.2.1 界面布局

3.2.2 可用控件一览

基础控件：

高级控件：

布局控件：

3.2.3 操作方式

1. 添加控件：从左侧控件面板 拖拽 控件到中间画布
2. 选中控件：在画布中 点击 某个控件，右侧属性面板将显示其配置项
3. 调整顺序：在画布中 拖动 控件以调整位置
4. 删除控件：选中控件后，点击控件上的 删除按钮
5. 配置属性：在右侧面板设置控件的标签、默认值、占位符等
6. 设置校验：在右侧面板的「校验规则」区域，添加必填、格式等验证

3.2.4 控件属性配置（右侧面板）

每个控件选中后，右侧面板可配置的通用属性包括：

每个数据类控件都 必须 关联一张表和一个字段。点击「下一步」时，系统会校验所有控件的表和字段关联是否正确，不正确将弹出错误提示。

3.3 步骤三：列表配置

本步骤用于配置发布后数据列表页面的展示方式，包括查询条件和列表字段。

3.3.1 界面布局

页面分为 左侧主内容区 和 右侧配置栏：

• 左侧： 展示已选择的查询字段和列表字段的详细配置表格
• 右侧： 提供字段勾选、平台切换和列表属性设置

3.3.2 平台切换

右侧顶部可切换 桌面端 和 移动端 两个平台标签，两端的配置 相互独立：

3.3.3 查询字段配置

在右侧「查询字段」标签页中 勾选 需要作为查询条件的字段，勾选后会出现在左侧的查询字段配置表中。

查询字段表各列含义：

3.3.4 列表字段配置

在右侧「列表字段」标签页中 勾选 需要在列表中展示的字段，勾选后出现在左侧列表字段配置表中。

列表字段表各列含义：

[!TIP]
系统会自动提取主表的系统字段（如 ID、创建人、创建时间、修改人、修改时间），您可以直接在字段列表中勾选使用，无需在表单设计中手动添加。

3.3.5 列表属性配置

在右侧「列表属性」标签页中，可设置以下全局属性：

表单打开方式（仅桌面端）：

表单宽度：当打开方式为「弹窗」或「抽屉」时，可自定义宽度（默认 800px）。

合计配置（仅桌面端）：

• 开启后，可选择需要合计的数字字段，列表底部会自动显示合计行

按钮配置：

每个按钮都可以 自定义显示文字，例如将"新增"改为"新增客户"。

3.3.6 保存表单

完成所有三个步骤的配置后，点击顶部的 「保存」 按钮完成表单设计。保存成功后会自动关闭设计器并刷新列表。

[!NOTE]
保存后表单状态为 未发布，需要手动点击「发布」才能使表单上线。

4. 发布表单

在表单列表中，找到需要发布的表单，点击操作列的 「发布」 链接。

发布流程：

1. 系统弹出确认对话框："确定发布该表单吗？"
2. 点击 「确定」 执行发布
3. 发布成功后，表单状态变为 已发布（绿色标签）
4. 此时可以使用「演示」和「创建菜单」功能

[!IMPORTANT]

• 已发布的表单如果再次修改并保存，状态会变为 已修改（橙色标签）
• 需要再次点击「发布」才能让最新的修改生效
• 发布操作会自动同步更新数据库表结构

5. 演示表单

点击操作列的 「演示」 链接，系统将跳转到表单的实际运行页面。该页面展示了表单发布后的最终效果，包括：

• 查询条件区域：显示在列表配置中勾选的查询字段
• 工具栏按钮：显示配置中启用的工具栏按钮（新增、批量删除等）
• 数据列表：按列表配置展示数据，支持分页、排序
• 行操作按钮：显示配置中启用的行操作（编辑、删除、详情）

在演示页面中可以进行完整的数据操作（新增、编辑、删除、查询），验证表单设计的效果。

打开方式根据列表配置中的设置，弹窗/抽屉/整页三种方式展现新增和编辑表单。

6. 创建菜单

发布后，您可以将表单挂载到系统菜单中，让用户通过侧边栏菜单直接访问。点击 「创建菜单」 链接，弹出菜单配置对话框。

配置项说明

操作步骤

1. 选择 菜单端（Web端或移动端）
2. 在菜单树中选择 上级菜单
3. 输入菜单 名称
4. 点击图标选择器选择一个 图标
5. 点击 「确定」 完成创建

[!TIP]
同一个表单可以 分别创建 Web端菜单和移动端菜单，两者互不影响。创建菜单后，刷新页面即可在侧边栏看到新添加的菜单项。

7. 移动端适配

在线表单天然支持移动端。您可以通过以下方式让表单在移动 App 中使用：

1. 设计表单时：表单设计（步骤二）在两端共用同一套表单布局
2. 列表配置时：在步骤三切换到 「移动端」 平台，独立配置移动端的查询字段、列表字段和按钮
3. 创建菜单时：选择 「移动端菜单」 将表单挂载到 App 菜单

移动端的列表页面会自动适配手机屏幕尺寸，提供 筛选面板 和 排序面板 等移动端友好的交互方式。

8. 常见问题

Q1：表单设计中控件报错"未关联数据表或表字段"怎么办？

原因：控件没有设置关联的数据表和字段。

解决：选中该控件，在右侧属性面板中选择关联的「数据表」和「字段」。

Q2：从表的外键字段如何选择？

原因：从表需要一个字段来存储与主表的关联关系。

解决：选择从表中用于存储主表 ID 的字段（通常命名为 主表名_id，如 order_id）。

Q3：表单发布后修改了设计，为什么列表没有变化？

原因：修改后的表单状态变为「已修改」，需要重新发布。

解决：回到表单列表，点击该表单的「发布」按钮重新发布。

Q4：添加数据表时提示"必须存在 id 字段"？

原因：在线表单要求所有关联的数据表必须有名为 [id]的主键字段。

解决：请先在数据库中为该表添加 [id]主键字段。

Q5：如何配置下拉框的选项数据？

在表单设计器中选中下拉选择框控件，右侧属性面板提供三种数据源方式：

Q6：如何实现子表（一对多）数据录入？

1. 在步骤一添加 主表 和 从表，设置关系为「一对多」
2. 在步骤二使用 「设计子表」 控件
3. 将子表的字段控件拖入子表容器中
4. 运行时用户可以动态添加/删除多条子表记录