Hooke / data-table

目标

• 在 src/components/PaginationField/index.vue 新增分页组件，控制当前页的字段显示/隐藏。
• 首页仅显示“下一页”，中间页显示“上一页/下一页”，最后一页显示“上一页/提交”。
• 切页前主动校验当前页字段；最后页点击“提交”调用现有 van-form 的 onSubmit（src/views/index.vue:26）。

总体思路

• 在父页面 src/views/index.vue 中引入分页组件，基于“页配置”过滤 formData，使 v-for 仅渲染当前页字段（src/views/index.vue:28-29）。
• 校验采用 Vant Form 校验能力：仅渲染的字段会被 myForm.validate() 校验；自定义组件使用现有 validOther() 进行补充校验。
• 提交沿用现有 myForm.submit() 与 onSubmit 全流程逻辑，无需改接口与数据流。

关键点

• 字段显示/隐藏：通过“当前页的字段 key 列表”过滤 formData，只渲染当前页字段；规则隐藏（checkRules）仍生效，提交时继续移除 disabled 字段。
• 切页校验：点击“下一页”先调用 myForm.validate() + validOther()，不通过则提示并停留该页；通过才切页。
• 提交触发：最后一页点击“提交”直接 myForm.submit()，沿用现有 onSubmit 分支处理。

组件设计（PaginationField）

• Props：current（当前页索引）、total（总页数）、isLast（是否最后页）。
• Emits：prev、next、submit。
• UI：底部固定区域，首页仅“下一页”，中间页“上一页/下一页”，最后页“上一页/提交”。样式用 less，遵循项目风格。

页面改动（index.vue）

• 引入并放置分页组件：在 van-form 的字段列表之后、提交按钮之前插入 PaginationField；当启用分页时隐藏原提交按钮（非流程版 PCommit.visible 处）。
• 计算当前页可见字段：
  • 维护 pages：数组形式，每页是一组字段 key。
  • 维护 current_page_index；计算 visible_keys 与 visible_form_data = formData.filter(key ∈ visible_keys)。
  • 将现有 v-for 的数据源换为 visible_form_data（对应 src/views/index.vue:28-29）。

校验逻辑

• 收集当前页渲染的字段 name（动态组件普遍设置 item.name = item.key，参见 src/hooks/useComponentType.js:32-214，以及各组件中的 van-field :name）。
• 点击“下一页”：
  • 执行 myForm.validate()（仅当前页渲染字段会被校验）。
  • 执行 validOther() 校验图片/文件/表格等自定义组件（当前页渲染的才在 ref 列表内）。
  • 任一失败：根据 onFailed 提示规则，Toast 显示第一个错误并阻止切页（src/views/index.vue:1303-1330）。
• 点击“提交”：直接 myForm.submit()，触发既有 onSubmit 流程（src/views/index.vue:1141-1301）。

Mock 分页策略（后端未定）

• 优先按“分割线组件 divider”自动分页：遇到 DividerField 开始新页；若无，则按数量（如 5~8 个字段/页）进行等分。
• pages 结构为 [ ['field_a','field_b',...], ['field_x',...], ... ]，后续可由后端下发或用户手动配置覆盖。

兼容与边界

• 规则隐藏：checkRules() 仍会设置 disabled，过滤时排除 disabled 字段以避免误校验与误提交。
• 流程页（formSetting.is_flow）不受影响：分页仅控制字段渲染，提交行为沿用现有流程分支；如有需要可在流程页也显示分页按钮，最终依然走 myForm.submit()。
• 历史数据与 Cookie 回填：不影响分页，仍在挂载阶段写入默认值（src/views/index.vue:480-540）。

实施步骤

1. 完成 PaginationField 组件开发（props/emits/按钮/less）。
2. 在 index.vue 引入组件，新增 pages 与 current_page_index 状态，改造 v-for 为 visible_form_data。
3. 实现 handlePrev/handleNext/handleSubmit，接入 myForm.validate() + validOther() + myForm.submit()。
4. 当启用分页时隐藏原“提交”按钮（保留流程提交按钮逻辑）。

验收

• 首页仅“下一页”，中间页“上一页/下一页”，最后页“上一页/提交”。
• 当前页校验失败时 Toast 提示并停留该页；通过时切页。
• 最后一页点击“提交”走既有 onSubmit 流程，提交成功行为不变。