点击保存方式

项目访问链接

https://zion.functorz.com/tool/0lqQ0rO8E4O/WEB?code=XXrhFG3j9TYId&ref=4857164 

简介

• 目标：实现表单草稿功能，允许用户将未填完的数据保存为“草稿”，并在最终提交前随时恢复编辑。
• 适用场景：长文本博客创作系统、多步骤考试答题系统、官网上报审批表单等业务场景。
• 核心逻辑：通过数据库字段 状态（草稿 / 已提交 / 已删除）跟踪记录生命周期，并利用前端页面变量 form_id 作为“状态路由”，动态切换“插入（新建）”与“更新（编辑）”行为。

实现步骤

数据存储

要实现草稿系统，我们需要在数据库中建立一个专门的表来映射用户数据及其处理状态。

数据模型

数据表：表单

这是存放草稿及最终提交数据的核心表。

页面入口逻辑

在用户进入表单之前，需要验证其身份状态并初始化交互入口。

1. 点击并添加一个页面，命名为 表单草稿。
2. 从组件库拖入一个按钮至画布。在右侧面板 样式 中将文字改为 新建，并重命名组件为 新建。
3. 选中按钮 新建，在 行为 选项卡的 点击时 事件下添加行为。
4. 条件分支：添加一个条件分支节点。
   • 分支 未登录：配置判断表达式，检查 getIsLoggedIn 是否 为假。
     • 显示提示：在分支内添加显示提示节点，提示内容为：请先登录。
   • 分支 已登录：默认分支。添加 打开自定义弹窗 行为，目标指向 弹窗 表单填写。

弹窗 UI 搭建

弹窗是用户填写数据的主工作区。我们通过一个变量来识别当前是创建新记录还是编辑现有草稿。

1. 在左侧面板 弹窗 选项卡中，创建一个名为 弹窗 表单填写 的弹窗。
2. 选中该弹窗的根节点，在右侧面板 数据 选项卡中点击 变量 旁的 + 号。
3. 配置变量：名称 为 form_id，类型 设为 长整数，默认值 严格设定为 -1。

4. 在弹窗内放置两个输入组件：
   • 第一个重命名为 输入框 字段1，类型 为 文本。
   • 第二个重命名为 输入框 字段2，类型 为 长整数。

5. 配置按钮 取消。在其 点击时 行为流中，添加 关闭弹窗 节点，并将 范围 设为 关闭最顶层。

草稿列表组件

为了实现续填功能，我们需要展示当前用户已保存的草稿记录。

1. 选中文本 当前表单数量 组件。将其 内容 绑定至 当前用户/表单/数量。
2. 添加 数据行筛选 规则：状态 等于 '草稿'。

3. 拖入 列表 组件。
   • 数据源：选择 表单 表。
   • 请求类型：切换为 订阅 以启用实时同步，确保增删操作能即时反映在界面上。

4. 进入列表的 筛选条件 面板，添加两个由 且 连接的过滤逻辑：
   • 帐户_id 等于 当前用户/id
   • 状态 等于 '草稿'

删除确认弹窗

为了防止误删，我们使用一个独立的弹窗来拦截删除行为，并返回用户的确认状态。

1. 新建弹窗 弹窗 确认删除。在 数据 选项卡中，分别创建一个 出参 is_deleted（布尔值）和一个本地 变量 is_deleted（布尔值）。

2. 选中弹窗根节点，在 出参配置 中基于本地变量设置 条件分支：
   • 分支 0：如果变量 is_deleted 为真，传递 True。
   • 分支 1：如果变量 is_deleted 为假，传递 False。

3. 配置按钮 NO：在其 点击时 行为流中，先 设置变量 将本地 is_deleted 设为 假，随后执行 关闭弹窗。

4. 配置按钮 YES：在其 点击时 行为流中，先 设置变量 将本地 is_deleted 设为 真，随后执行 关闭弹窗。

交互视图切换

我们将利用条件容器来控制草稿箱的展开与收起视图。

1. 在条件容器 草稿箱按钮 的 未展开 分支下，选中按钮 草稿箱。
2. 在 点击时 事件下，添加 切换条件容器视图 行为，目标分支设为 展开。

3. 在 展开 分支下，对对应的按钮 草稿箱 添加同样的动作，将目标切回 未展开。

存草稿行为流

“存草稿”逻辑会首先校验输入内容，随后保存进度并同步更新页面变量。

1. 选中弹窗中的 按钮 存草稿，进入行为流编辑器。

2. 条件分支：添加第一个节点进行非空验证。
   • 分支 输入为空：使用 且 连接符，配置规则为 输入框 字段1.组件输出 为空 且 输入框 字段2.组件输出 为空。
   • 在此分支下添加 显示提示：内容为 至少填写一项。

3. 添加数据：在 分支 输入非空 分支下，执行向 表单 表添加数据的操作。
   • 字段设置：将 状态 固定设为 草稿；字段1 和 字段2 分别绑定至对应的输入框组件；帐户_id 绑定至 当前用户.id。

4. 设置变量：在数据添加动作的 成功时 路径下，添加设置变量节点。
   • 目标：弹窗 表单填写.form_id。
   • 赋值：绑定到 行为结果/添加 表单/id。
5. 显示提示：完成赋值后，弹出 成功存储草稿 的通知。

表单提交逻辑

“提交”行为会基于 form_id 变量的状态决定是执行“插入新记录”还是“覆盖旧草稿”。

1. 选中按钮 提交。
2. 添加一个空值检查逻辑（同草稿步骤）。在 分支 输入非空 下，嵌套一个新的 条件分支。

3. 模式评估：将分支命名为 分支 直接提交。判断表达式为 弹窗 表单填写.form_id 等于 -1。

4. 新增数据路径 (form_id == -1)：
   • 添加数据：向 表单 表插入记录，将 状态 设为 已提交。

5. 草稿更新路径 (form_id != -1)：
   • 修改数据：目标表为 表单。
   • 筛选条件：id 等于 弹窗 表单填写.form_id。
   • 字段更新：将 状态 改为 已提交，并更新业务字段内容。成功后，弹出 成功提交 并执行 关闭弹窗。

草稿删除与应用

我们通过判断待操作记录是否正被加载在当前表单中，来实现差异化的删除逻辑。

1. 选中列表中的 文本 删除，配置其点击行为。
2. 条件分支：添加一个条件节点，命名为 分支 当前表单id为删除项id。
   • 判断规则：弹窗 表单填写.form_id 等于 数据源/列表/当前项/id。

3. 活动记录删除逻辑：
   • 如果条件成立，先执行 打开自定义弹窗 指向 弹窗 确认删除。
   • 在 当弹窗关闭时 回调中，添加 条件分支。若 弹窗 确认删除.is_deleted 为真，则执行 修改数据 将该条记录的 状态 改为 已删除。

• 设置变量：修改数据完成后，必须将 form_id 重置为 -1。这将重置表单的工作模式。最后弹出 成功删除草稿。

4. 非活动记录删除逻辑：
   • 在 分支 当前表单id非删除项id 分支下，无需重置变量，直接执行 修改数据 将对应记录的 状态 设为 已删除。

应用草稿

1. 选中列表行内的文本 应用。在其 点击时 事件下，依次添加三个行为：
   • 设置变量：将 弹窗 表单填写.form_id 设为 数据源/列表/当前项/id。
   • 设置输入型组件值：将 数据源/列表/当前项/字段1 载入 输入框 字段1。
   • 设置输入型组件值：将 数据源/列表/当前项/字段2 载入 输入框 字段2。

验证

步骤 1：权限拦截测试

• 测试工具：使用编辑器底部工具栏的 模拟登录 功能，点击 恢复用户到未登录状态。
• 动作：点击页面中的 新建 按钮。
• 预期结果：系统弹出 请先登录 的提示，且弹窗不会打开。

步骤 2：模式切换与同步测试

• 测试工具：在 模拟登录 中选择角色。
• 动作：点击 新建。此时 form_id 为 -1。在输入框录入内容后点击 存草稿。
• 预期结果：弹出 成功存储草稿。草稿列表即时刷新并出现该记录，列表标题的计数同步增加。

步骤 3：数据回填与删除链路

• 动作：展开草稿列表，点击其中一条记录的 应用。
• 预期结果：表单输入框自动填入对应历史数据，且界面显示的 当前表单id 变为该记录的实际 ID。
• 动作：点击该行记录对应的 删除，并在确认弹窗中选择 YES。
• 预期结果：确认弹窗关闭，主弹窗的 当前表单id 重置为 -1。记录从列表中消失。