实时保存方式

项目访问链接

https://zion.functorz.com/tool/rmLyJ0ZAv8e/WEB?code=kGwL9xCMUKmLi&ref=4857164 

简介

• 目标：实现具备防冗余创建、实时保存的表单草稿功能。
• 适用场景：长文本创作、多步骤政务审批、在线考试系统等需要防止因非正常退出导致数据丢失的表单场景。
• 核心逻辑：新建按钮 -> 预检索数据源判断（有空行则复用，无空行则创建） -> 唤醒弹窗并接管 ID -> 输入组件失去焦点时 -> 空输入拦截校验 -> 修改数据。

实现步骤

数据存储

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

数据模型

表名：表单

关系映射：帐户 表与 表单 表存在 一对多 关系（一个帐户拥有多条表单/草稿记录）。

逻辑与状态配置

预检索空白草稿数据源

在 页面 表单草稿 级别配置数据源，用于实时检索当前用户名下是否已存在未填写的草稿。

• 数据源名称：source_form_empty_draft
• 目标数据表：表单
• 请求类型：查询
• 数据限额：1
• 数据筛选条件：帐户_id 等于 当前用户/id 且 (AND) 状态 等于 空白草稿。

“新建”按钮嵌套行为流配置

配置 按钮 新建 的 点击时 事件触发器，实现登录校验与草稿查重。

1. 登录检查：添加条件节点，配置 分支 未登录。条件设置为 是否登录状态 为假。
   • 动作：显示提示 -> 请先登录。
2. 空白草稿检查：在分支 已登录下添加条件节点，配置 分支 无空白草稿。条件设置为 source_form_empty_draft/id 为空。

3. 执行新建占位逻辑（无空白草稿分支）：
   • 添加数据：目标表为 表单。状态 赋值为 空白草稿；帐户_id 绑定为 当前用户/id。
   • 打开自定义弹窗：选择 弹窗 表单填写。入参 empty_draft_form_id 绑定为上一步“添加数据”节点的 id 出参。
   • 刷新数据源：选择页面级数据源 source_form_empty_draft。

4. 执行复用重定向逻辑（有空白草稿分支）：
   • 打开自定义弹窗：选择 弹窗 表单填写。入参 empty_draft_form_id 直接绑定为 source_form_empty_draft/id。
   • 刷新数据源：选择页面级数据源 source_form_empty_draft。

弹窗状态接管与变量转储

1. 变量声明：在 弹窗 表单填写 数据面板中创建输入参数empty_draft_form_id、变量 form_id，类型选择 长整数。
2. 页面加载时 ：
   • 设置变量：作用域选择 页面和组件 -> 变量指定为 form_id -> 值绑定为外部传入的入参 empty_draft_form_id。

UI 构建与交互

输入组件配置

• 输入框 字段1：输入值类型保持文本。
• 输入框 字段2：输入值类型 切换为 长整数。

失焦实时保存与空值保护校验

1. 配置“输入框 字段1”的自动保存：在组件的 失去焦点时 事件下添加条件判断行为。
   • 空值拦截：添加条件节点，配置 分支 输入为空。组合条件设为 输入框 字段1/组件输出 为空 且 (AND) 输入框 字段2/组件输出 为空。
     • 动作：显示提示 至少填写一项。
   • 非空时：配置 分支 输入非空。
     • 修改数据：选择 表单 表。数据筛选设置条件为 id 等于 变量/弹窗 表单填写/form_id。字段追加配置中，将 状态 赋值为常量字符串 已填草稿；将 字段1 绑定为当前组件输出值。
     • 成功时动作：显示提示 成功存储草稿。

2. 配置“输入框 字段2”的自动保存：在组件的 失去焦点时 事件下添加相似的条件判断行为。
   • 分支逻辑差异：在非空分支下的 修改 表单 节点中，将业务字段 字段2 绑定为当前组件输出值。

历史草稿箱列表与交互逻辑

1. 草稿总数看板：文本 当前草稿数量 组件的内容直接绑定 当前用户/表单/数量，过滤条件为状态 状态 等于 已填草稿。

2. 草稿列表数据源绑定：
   • 弹窗内 列表 组件的数据源请求类型指定为 订阅，绑定目标为 表单 表。数据筛选行条件设置为：帐户_id 等于 当前用户/id 且 (AND) 状态 等于 已填草稿。
     • 成功时添加动作：刷新数据源 -> 目标指向页面级全局查询 source_form_empty_draft。

3. 视图展开/收起状态控制：
   • 选中组件 条件容器 草稿箱。
   • 展开配置：条件 未展开 视图下的 按钮 草稿箱 点击时 -> 切换条件式容器状态 -> 目标容器指定为 条件容器 草稿箱，切换至 条件 展开。同时将下方列表切换至 条件 列表展开。
   • 收起配置：条件 展开 视图下的 按钮 草稿箱 点击时 -> 切换条件式容器状态 -> 目标容器重置回 条件 未展开。同时将下方列表重置为 条件 列表闭合。

4. 历史草稿应用反填逻辑：选中列表行内组件 文本 应用，绑定其 点击时 事件行为。
   • 设置变量：将变量 form_id 的值重新赋值为 数据源/列表/当前项/id。
   • 设置输入型组件值：将组件 输入框 字段1 的值赋值为 数据源/列表/当前项/字段1。
   • 设置输入型组件值：将组件 输入框 字段2 的值赋值为 数据源/列表/当前项/字段2。

5. 历史草稿删除与正在编辑锁保护：选中行内组件 文本 删除，绑定其 点击时 事件行为。
   • 编辑态自锁判定：添加条件节点，配置 分支 当前表单id为删除项id。判定条件设置为 变量/弹窗 表单填写/form_id 等于 数据源/列表/当前项/id。
     • 拦截动作：显示提示 不能删除正在编辑的草稿。
   • 物理软删除：配置 分支 当前表单id非删除项id。
     • 修改数据：选择 表单 表。数据筛选设置条件为 id 等于 数据源/列表/当前项/id。在字段映射表中将 状态 直接赋值重写覆盖为常量字符串 已删除。
       • 成功时动作：显示提示 删除草稿成功。

正式提交与弹窗关闭

1. “提交”按钮配置：选中组件 按钮 提交，绑定其 点击时 事件行为。
   • 修改数据：选择 表单 表。数据筛选设置条件为 id 等于 变量/弹窗 表单填写/form_id。在字段映射中将控制草稿生命周期的 状态 字段赋值变更为已提交。
     • 成功时：添加提示 成功提交。执行 UI 退出动作，选择 关闭最上层。
2. “关闭”按钮配置：选中组件 按钮 关闭， 点击时 添加动作 关闭弹窗（选择 关闭最上层），由于系统在之前的输入失焦时已保存草稿，直接关闭弹窗不会丢失数据。

验证

步骤 1：验证“空白草稿”复用逻辑

1. 点击底部的 模拟登录 选择一个帐户。
2. 点击页面上的 新建 按钮，弹出填写表单的弹窗。
   • 预期结果：保持两个输入框完全空白，点击弹窗底部的 取消 按钮。再次点击 新建，检查：系统未产生第二条记录，两次弹窗顶部反显的当前表单 id 完全一致，证明数据源成功执行了复用逻辑。

步骤 2：验证组件失去焦点时保存草稿

1. 在弹窗的 字段1 输入框中键入测试文本。
2. 点击弹窗任意空白非交互区域，使组件触发失去焦点行为。
   • 预期结果：屏幕上方弹出提示 成功存储草稿。查看数据表，该行记录的 状态 列已由 空白草稿 变更为 已填草稿。
3. 手动将 字段1 内容完全清空并保持整个表单双空，再次点击空白处使其失焦。
   • 预期结果：行为流内双空判定表达式生效，顶部弹出提示 至少填写一项，覆盖动作被成功拦截。

步骤 3：验证历史草稿箱恢复与正在编辑锁

1. 展开草稿箱，在列表中选择任意一条历史草稿，点击行内的 应用。
   • 预期结果：输入框组件内部的数值与文本更新为该历史记录的内容，且当前弹窗内部状态变量 form_id 被赋值为对应id。
2. 在下方的草稿箱列表中点击当前正处于编辑状态的这一行记录旁的 删除。
   • 预期结果：自锁保护逻辑生效，屏幕上方弹出提示 不能删除正在编辑的草稿。