docs(plan): 完善计划书表单字段配置使用文档
### 新增 - 添加计划书模块入口与配置地图(页面、组件、配置、API) - 添加计划书表单字段容器使用示例 - 添加字段组件、模板组件、配置文件的详细说明 ### 文档 - README 更新计划书模块定位与优化建议 - CHANGELOG 记录文档更新 - plan-form-schema-usage.md 完善计划书模块配置文档 --- **详细信息**: - **影响文件**: docs/PLAN/plan-form-schema-usage.md, README.md, docs/CHANGELOG.md - **技术栈**: Vue 3, Taro - **测试状态**: npm lint(存在历史警告) - **备注**: 文档补齐,便于快速定位计划书模块配置与入口 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Showing
3 changed files
with
97 additions
and
0 deletions
| ... | @@ -70,6 +70,10 @@ pnpm lint | ... | @@ -70,6 +70,10 @@ pnpm lint |
| 70 | - ✅ **新人指南更新** - 入口文档从工具生成器调整为业务上手流程 | 70 | - ✅ **新人指南更新** - 入口文档从工具生成器调整为业务上手流程 |
| 71 | - ✅ **文档导航同步** - docs/README 快速导航修正与补充 | 71 | - ✅ **文档导航同步** - docs/README 快速导航修正与补充 |
| 72 | 72 | ||
| 73 | +### 计划书模块定位 | ||
| 74 | +- ✅ **配置与入口整理** - 补充计划书模块入口、配置与 API 位置说明 | ||
| 75 | +- ✅ **优化建议** - 新增产品时优先补齐 form_sn 与 plan_config,避免模板缺失 | ||
| 76 | + | ||
| 73 | ### 计划书模块优化补齐 | 77 | ### 计划书模块优化补齐 |
| 74 | - ✅ **字段分组补齐** - 补齐基本信息/保障/提取字段分组 | 78 | - ✅ **字段分组补齐** - 补齐基本信息/保障/提取字段分组 |
| 75 | - ✅ **错误回调兼容** - 支持 onError 回调并保持 onViewError 兼容 | 79 | - ✅ **错误回调兼容** - 支持 onError 回调并保持 onViewError 兼容 | ... | ... |
| 1 | +#### [2026-02-14] - 计划书模块配置定位文档整理 | ||
| 2 | + | ||
| 3 | +### 变更 | ||
| 4 | +- 补充计划书模块入口、配置与 API 位置说明 | ||
| 5 | +- 增加计划书模块使用流程与容器组件使用示例 | ||
| 6 | +- README 更新计划书模块定位与优化建议 | ||
| 7 | + | ||
| 8 | +### 测试 | ||
| 9 | +- pnpm lint(存在历史警告) | ||
| 10 | + | ||
| 11 | +--- | ||
| 12 | + | ||
| 13 | +**详细信息**: | ||
| 14 | +- **影响文件**: docs/plan/plan-form-schema-usage.md, README.md, docs/CHANGELOG.md | ||
| 15 | +- **技术栈**: Vue 3, Taro | ||
| 16 | +- **测试状态**: lint 存在历史警告 | ||
| 17 | +- **备注**: 文档补齐,便于快速定位计划书模块配置与入口 | ||
| 18 | + | ||
| 19 | +--- | ||
| 20 | + | ||
| 1 | #### [2026-02-14] - 计划书必填校验与提示优化 | 21 | #### [2026-02-14] - 计划书必填校验与提示优化 |
| 2 | 22 | ||
| 3 | ### 修复 | 23 | ### 修复 | ... | ... |
| ... | @@ -175,3 +175,76 @@ const template_config = { | ... | @@ -175,3 +175,76 @@ const template_config = { |
| 175 | - 新字段:仅在 form_schema 增加字段并补充 submit_mapping | 175 | - 新字段:仅在 form_schema 增加字段并补充 submit_mapping |
| 176 | - 新联动:在 show_when 与 reset_map 中定义条件 | 176 | - 新联动:在 show_when 与 reset_map 中定义条件 |
| 177 | - 新模板:复用现有字段组件,保持 schema 结构一致 | 177 | - 新模板:复用现有字段组件,保持 schema 结构一致 |
| 178 | + | ||
| 179 | +## 12. 计划书模块入口与配置地图 | ||
| 180 | +### 12.1 页面入口 | ||
| 181 | +- 产品详情:`src/pages/product-detail/index.vue`(按钮打开计划书弹窗) | ||
| 182 | +- 产品中心:`src/pages/product-center/index.vue`(列表内“计划书”按钮) | ||
| 183 | +- 搜索页:`src/pages/search/index.vue`(搜索结果卡片“计划书”按钮) | ||
| 184 | +- 计划书列表:`src/pages/plan/index.vue`(查看/删除计划书) | ||
| 185 | +- 提交结果页:`src/pages/plan-submit-result/index.vue` | ||
| 186 | + | ||
| 187 | +### 12.2 组件与模板 | ||
| 188 | +- 弹窗容器:`src/components/plan/PlanPopupNew.vue` | ||
| 189 | +- 计划书容器:`src/components/plan/PlanFormContainer.vue` | ||
| 190 | +- 模板组件: | ||
| 191 | + - `src/components/plan/PlanTemplates/LifeInsuranceTemplate.vue` | ||
| 192 | + - `src/components/plan/PlanTemplates/CriticalIllnessTemplate.vue` | ||
| 193 | + - `src/components/plan/PlanTemplates/SavingsTemplate.vue` | ||
| 194 | +- 字段组件:`src/components/plan/PlanFields/*` | ||
| 195 | + | ||
| 196 | +### 12.3 配置与数据处理 | ||
| 197 | +- 模板映射:`src/config/plan-templates.js` | ||
| 198 | +- 字段定义与映射:`src/config/plan-fields.js` | ||
| 199 | +- 字段转换函数:`src/utils/planFieldTransformers.js` | ||
| 200 | +- 字段转换入口:`src/composables/useFieldValueTransform.js` | ||
| 201 | +- 字段联动规则:`src/composables/useFieldDependencies.js` | ||
| 202 | +- 字段校验工具:`src/utils/planFieldValidation.js` | ||
| 203 | +- 订单状态常量:`src/config/constants/orderStatus.js` | ||
| 204 | + | ||
| 205 | +### 12.4 API 入口 | ||
| 206 | +- 计划书 API:`src/api/plan.js` | ||
| 207 | + - 新增:`addAPI` | ||
| 208 | + - 列表:`listAPI` | ||
| 209 | + - 删除:`deleteAPI` | ||
| 210 | + - 查看:`viewAPI` | ||
| 211 | + | ||
| 212 | +### 12.5 技术书/附件预览关联 | ||
| 213 | +- 产品详情附件列表:`src/pages/product-detail/index.vue` | ||
| 214 | +- 文件预览能力:`src/composables/useFileOperation.js` | ||
| 215 | + | ||
| 216 | +## 13. 计划书模块使用流程 | ||
| 217 | +1. 产品详情/产品中心/搜索页获取产品对象(至少包含 `id` 与 `form_sn`,可选 `plan_config`) | ||
| 218 | +2. 打开 `PlanFormContainer` 并传入 `product` | ||
| 219 | +3. `PlanFormContainer` 根据 `form_sn` 从 `plan-templates` 选择模板并合并 `plan_config` | ||
| 220 | +4. 模板组件基于 `form_schema` 渲染字段,调用自身 `validate` 完成校验 | ||
| 221 | +5. 提交时使用 `submit_mapping` 生成请求参数,并通过 `addAPI` 提交 | ||
| 222 | +6. 提交完成后通过 `usePlanSubmit` 跳转到提交结果页 | ||
| 223 | +7. 在计划书列表中用 `listAPI` 拉取数据,使用 `viewAPI` 标记为已查看 | ||
| 224 | + | ||
| 225 | +## 14. 计划书容器使用示例 | ||
| 226 | +```vue | ||
| 227 | +<template> | ||
| 228 | + <PlanFormContainer | ||
| 229 | + v-model:visible="show_plan_popup" | ||
| 230 | + :product="selected_product" | ||
| 231 | + @close="show_plan_popup = false" | ||
| 232 | + @submit="handle_plan_submit" | ||
| 233 | + /> | ||
| 234 | +</template> | ||
| 235 | + | ||
| 236 | +<script setup> | ||
| 237 | +import { ref } from 'vue' | ||
| 238 | +import PlanFormContainer from '@/components/plan/PlanFormContainer.vue' | ||
| 239 | +import { usePlanSubmit } from '@/composables/usePlanSubmit' | ||
| 240 | + | ||
| 241 | +const show_plan_popup = ref(false) | ||
| 242 | +const selected_product = ref(null) | ||
| 243 | + | ||
| 244 | +const { handlePlanSubmit: handle_plan_submit } = usePlanSubmit({ | ||
| 245 | + getPopupState: () => show_plan_popup.value, | ||
| 246 | + setPopupState: (state) => { show_plan_popup.value = state }, | ||
| 247 | + pageName: 'Plan Entry' | ||
| 248 | +}) | ||
| 249 | +</script> | ||
| 250 | +``` | ... | ... |
-
Please register or login to post a comment