如何实现点击按钮即时创建空白表单页实例 保存不同数据到数据库不同条目

实现方案 #

1. 数据库结构调整 #

在原有表单数据表中新增form_instance_id（表单实例唯一标识）字段，采用用户ID + 表单实例ID作为联合主键，表字段参考如下：

• 基础字段：form_instance_id（主键）、user_id（所属用户ID）、create_time（实例创建时间）、update_time（最后修改时间）、instance_remark（可选，用于用户备注实例用途方便区分）
• 业务字段：原表单对应的所有业务字段原样保留
  调整后每份表单实例都会对应数据库内独立的一条记录，不会出现数据覆盖的问题。

2. 前端逻辑改造 #

2.1 表单模板抽离

把原有表单页面的字段渲染、校验、提交逻辑抽离为独立的可复用表单组件，组件仅保留两个核心入参：

• 实例ID：入参为空时组件默认渲染空白表单
• 初始数据：传入对应实例的历史数据时自动回显

2.2 新增实例操作入口

在原有页面顶部新增两类操作控件：

• 「新建空白表单」按钮：点击后生成新的临时实例ID（或先调用后端接口创建一条空实例记录拿到正式ID），重置表单组件的初始数据为空白状态，完成新实例加载
• 实例切换区域：展示当前用户所有历史表单实例列表，点击任意实例就拉取对应实例的数据传入表单组件回显

2.3 提交逻辑调整

表单提交时将当前激活的form_instance_id一同传给后端，后端根据ID判定为对应实例的新增/更新操作即可。

3. 轻量实现方案 #

如果不需要做实例切换列表，仅需要点击按钮打开新空白表单，可直接在页面URL中新增instanceId参数，点击新建按钮跳转至instanceId为空的页面地址即可，后端接口根据instanceId参数返回对应实例数据，参数为空时返回空白初始值。

内容的提问来源于stack exchange，提问作者Mauro Quiñones