数据结构总览

核心数据结构

1. 表单字段结构 (FormField)

每个表单字段都是一个对象，包含以下核心属性：

interface FormField {
  // 字段标识
  key: string                    // 字段唯一标识，如 "field_1"
  name: string                   // 表单验证用的名称，通常等于 key

  // 字段值
  value: any                     // 字段当前值
  default?: any                  // 默认值

  // 组件相关
  component: Component           // Vue 组件引用
  component_props: ComponentProps // 组件属性配置

  // 验证相关
  required?: boolean             // 是否必填
  rules?: ValidationRule[]       // 验证规则
  type?: string                  // 表单输入类型（text/textarea等）

  // 其他
  index?: number                 // 字段排序索引
}

2. 组件属性结构 (ComponentProps)

interface ComponentProps {
  // 基础属性
  tag: string                    // 组件类型标识（如 "input", "radio"）
  name: string                   // 组件名称
  label: string                  // 字段标签（显示名称）
  placeholder?: string           // 占位符文本
  default?: any                  // 默认值

  // 显示控制
  disabled?: boolean             // 是否隐藏
  disabled_show?: boolean        // 隐藏时是否显示图标
  readonly?: boolean             // 是否只读
  required?: boolean             // 是否必填

  // 选项类组件
  options?: Option[]             // 选项列表（radio/checkbox/select）

  // 样式相关
  align?: string                 // 文本对齐方式（left/center/right）
  direction?: string             // 排列方向（vertical/horizontal）
  background_color?: string      // 背景色

  // 高级功能
  note?: string                  // 提示文本（支持HTML）
  is_camera_scan?: boolean       // 是否启用微信扫一扫
  camera_scan_type?: string      // 扫码类型（ALL_CODE/QR_CODE/BAR_CODE）

  // 图片上传
  max_count?: number             // 最大上传数量
  max_size?: number              // 最大文件大小（MB）

  // 评分
  x_score?: number               // 分数值

  // 分组相关
  is_field_group?: boolean       // 是否是集合组
  group_field_name?: string      // 所属组字段名
}

3. 选项结构 (Option)

用于 Radio、Checkbox、Picker 等组件：

interface Option {
  // 基础
  title: string                  // 选项显示文本
  value: any                     // 选项值
  checked?: boolean              // 是否默认选中

  // 样式
  color?: string                 // 选项颜色
  background_color?: string      // 背景色

  // 状态
  disabled?: boolean             // 是否禁用

  // 描述信息
  desc_text?: string             // 描述文本
  desc_type?: string             // 描述类型（text/url）
  desc_url?: string              // 描述链接URL
  desc_btn_name?: string         // 描述按钮名称

  // 补充信息
  is_input?: boolean             // 是否需要输入补充信息
  input_required?: boolean       // 补充信息是否必填
  input_placeholder?: string     // 补充信息占位符
  affix?: string                 // 补充信息值
}

4. API 响应结构

interface APIResponse<T = any> {
  code: number                   // 状态码：1=成功，其他=失败
  msg: string                    // 响应消息
  data: T                        // 响应数据
  show?: boolean                 // 是否显示错误提示
}

数据流转

1. 表单渲染流程

后端API → 表单配置数据 → createComponentType() → 动态组件渲染

2. 表单提交流程

用户输入 → 组件v-model → item.value → addFormDataAPI() → 后端保存

关键概念

1. 动态组件系统

项目使用 component_props.tag 属性决定渲染哪种组件：

• 系统通过 src/hooks/useComponentType.js 中的 createComponentType() 函数
• 根据 tag 值动态分配对应的 Vue 组件
• 支持 30+ 种组件类型

2. 验证系统

• 基于 Vant Form 的验证系统
• 通过 rules 数组配置验证规则
• 必填项自动添加 { required: true, message: 'xxx' }

3. 规则系统

• 字段可以通过规则控制其他字段的显示/隐藏
• 通过 emit("active") 触发规则检查
• 规则组件：RuleField、MultiRuleField

4. Cookie 保存

• 未完成表单自动保存到 Cookie
• 格式：{ form_code: { field_key: value } }
• 过期时间：1 天

5. 周期选择

• 某些表单支持周期选择
• 通过 API /srv/?a=cycle_list 获取可用周期
• 周期选择后 URL 会携带 x_cycle 参数