akmon/FORM_REFACTOR_SUMMARY.md

表单重构总结 - elder-form.uvue

重构前后对比

重构前的实现方式

• 每个输入字段都有独立的 @input 事件处理函数
• 例如：onNameInput, onIdCardInput, onPhoneInput 等
• 共有 11 个独立的输入事件处理函数
• 代码冗余度高，维护困难

重构后的实现方式

• 使用 <form> 标签统一处理表单数据
• 所有 input 和 textarea 元素都添加了 name 属性
• 使用 @submit="onFormSubmit" 统一处理表单提交
• 通过 e.detail.value 一次性获取所有表单数据

主要改进点

1. 模板结构优化

<!-- 重构前 -->
<input class="form-input" :value="formData.name" @input="onNameInput" placeholder="请输入老人姓名" />

<!-- 重构后 -->
<form @submit="onFormSubmit">
  <input class="form-input" name="name" :value="formData.name" placeholder="请输入老人姓名" />
</form>

2. 事件处理简化

// 重构前：需要 11 个独立函数
onNameInput(e: InputEvent) {
  this.formData.name = e.detail.value
},
onIdCardInput(e: InputEvent) {
  this.formData.id_card = e.detail.value
},
// ... 其余 9 个函数

// 重构后：统一处理
onFormSubmit(e: UniFormSubmitEvent) {
  const formValues = e.detail.value as Map<string, any>
  
  this.formData.name = formValues.get('name') || ''
  this.formData.id_card = formValues.get('id_card') || ''
  // ... 其余字段
  
  this.submitForm()
}

3. 特殊控件处理

对于 picker 组件，由于它们不是标准的表单控件，采用了混合方式：

• 保留原有的 @change 事件处理
• 添加隐藏的 input 字段来同步数据到表单

<picker @change="onGenderChange">
  <!-- picker 显示 -->
</picker>
<!-- 隐藏字段同步数据 -->
<input name="gender" type="text" :value="formData.gender" style="display: none;" />

4. 按钮类型优化

<!-- 重构前 -->
<button class="btn btn-cancel" @click="goBack">取消</button>
<button class="btn btn-submit" @click="submitForm">提交</button>

<!-- 重构后 -->
<button class="btn btn-cancel" type="button" @click="goBack">取消</button>
<button class="btn btn-submit" form-type="submit">提交</button>

优势分析

1. 代码简洁性

• 减少了 85% 的事件处理函数（从 11 个减少到 1 个）
• 表单逻辑更集中，易于维护

2. 一致性

• 遵循 HTML 表单标准
• 与登录页面等其他页面保持一致的实现方式

3. 扩展性

• 添加新字段时只需添加 name 属性
• 无需编写额外的事件处理函数

4. 错误处理

• 统一的数据收集点，便于添加统一的验证和错误处理
• 更容易实现表单重置、数据回显等功能

技术要点

1. UTS 类型安全

onFormSubmit(e: UniFormSubmitEvent) {
  const formValues = e.detail.value as Map<string, any>
  // 类型安全的数据获取
}

2. 数据同步策略

• 直接输入控件：通过 name 属性和表单事件获取
• Picker 控件：通过事件更新 formData，隐藏字段同步到表单
• 上传控件：通过事件更新 formData，隐藏字段同步到表单

3. 向后兼容

• 保持原有的数据结构不变
• 保持原有的业务逻辑不变
• 只优化了数据收集方式

最佳实践建议

1. 新表单应该默认使用 <form> 方式
2. 为所有表单控件添加 name 属性
3. 特殊控件（picker、upload）使用隐藏字段同步数据
4. 取消按钮使用 type="button" 避免意外提交
5. 提交按钮使用 form-type="submit" 触发表单事件

这次重构大大提升了代码的可维护性和可读性，为后续的表单开发提供了更好的模式参考。