表单录入Scrap_Date后自动填充间隔递增日期的实现方法

你之前写的SQL是数据查询逻辑，仅能筛选表中已存在的符合日期规则的记录，无法实现表单录入时的自动填充效果，要完成需求需要分两层实现，兼顾交互体验和数据准确性：

1. 表单层（满足实时展示、不可编辑的交互要求） #

核心是给Scrap_Date字段绑定值变更联动逻辑，步骤如下：

• 为Scrap_Date输入组件添加值变化监听：当用户完成Scrap_Date录入、确认值后，自动计算两个派生日期：
  • Due_Date = Scrap_Date加7天
  • Follow_Up_Date = Scrap_Date加14天
• 计算完成后把值自动赋值给对应字段，同时将Due_Date、Follow_Up_Date两个字段设为不可编辑状态：
  • 如果表单提交时不会过滤禁用字段，直接给组件加disabled属性，搭配浅灰背景样式明确标识为自动生成项
  • 如果表单提交会跳过禁用字段，改用readonly属性，同样搭配只读样式即可

原生JS实现的参考逻辑如下，低代码平台可直接套用逻辑配置字段联动规则，无需手写代码：

// 绑定Scrap_Date值变更事件
document.querySelector('#scrap_date').addEventListener('change', function(){
  const scrapVal = new Date(this.value);
  // 计算7天日期
  const dueVal = new Date(scrapVal);
  dueVal.setDate(dueVal.getDate() + 7);
  // 计算14天日期
  const followVal = new Date(scrapVal);
  followVal.setDate(followVal.getDate() + 14);
  // 赋值给对应字段，格式化为YYYY-MM-DD
  document.querySelector('#due_date').value = dueVal.toISOString().split('T')[0];
  document.querySelector('#follow_up_date').value = followVal.toISOString().split('T')[0];
})
// 初始化时设置两个自动填充字段为不可编辑
document.querySelector('#due_date').disabled = true;
document.querySelector('#follow_up_date').disabled = true;

如果使用低代码平台搭建表单，直接在平台的「字段联动规则」里配置即可：触发条件选Scrap_Date值变更，执行动作选赋值，分别给两个目标字段设置对应日期计算规则，再把两个字段的编辑权限关闭设为只读。

2. 数据库层（兜底避免脏数据） #

不要仅依赖前端控制，防止有人绕过前端直接写入不符合规则的数据，需要给表加约束，不同数据库的日期计算函数略有差异，以Oracle为例：

-- 给两个字段配置默认值，插入时未传值则自动计算
ALTER TABLE SCRAP_BODY_SYSTEM 
MODIFY (DUE_DATE DATE DEFAULT (SCRAP_DATE + 7));
ALTER TABLE SCRAP_BODY_SYSTEM 
MODIFY (FOLLOW_UP_DATE DATE DEFAULT (SCRAP_DATE + 14));

-- 添加检查约束，强制写入的数据必须符合日期规则，错误值无法插入
ALTER TABLE SCRAP_BODY_SYSTEM 
ADD CONSTRAINT CHK_SCRAP_DATE_RULE CHECK (
  DUE_DATE = SCRAP_DATE + 7
  AND FOLLOW_UP_DATE = SCRAP_DATE + 14
);

如果使用MySQL，把日期计算逻辑替换为DATE_ADD(SCRAP_DATE, INTERVAL 7 DAY)、DATE_ADD(SCRAP_DATE, INTERVAL 14 DAY)即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者bbowen14