docs(plan): 优化储蓄类产品计划书入口架构文档
- 完善三层结构字段说明(启用确认、提取选项、具体字段) - 添加完整的 Vue 组件实现示例(PlanFieldRadio、PlanFieldAgePicker 等) - 优化字段清理逻辑说明(按年岁/按保单年度两种模式的字段清理) - 改进业务场景描述,更清晰的结构层次 --- **详细信息**: - **影响文件**: docs/PLAN/plan-entry-architecture.md - **技术栈**: 文档 - **测试状态**: N/A - **备注**: 提升文档可读性和实现指导性
Showing
1 changed file
with
73 additions
and
84 deletions
| ... | @@ -102,16 +102,17 @@ | ... | @@ -102,16 +102,17 @@ |
| 102 | - 缴费年期:各产品不同(详见配置文件) | 102 | - 缴费年期:各产品不同(详见配置文件) |
| 103 | - **提取计划功能**(所有储蓄产品通用): | 103 | - **提取计划功能**(所有储蓄产品通用): |
| 104 | 104 | ||
| 105 | - **三层结构**: | 105 | + **字段结构说明**: |
| 106 | 106 | ||
| 107 | - **第一层**:是否希望生成一份容许减少名义金额的提取说明?(是/否) | 107 | + **字段1**:是否希望生成一份容许减少名义金额的提取说明?(是/否) |
| 108 | + - 独立字段,不影响下面的提取方案配置 | ||
| 109 | + - 仅用于标识是否需要生成说明文档 | ||
| 108 | 110 | ||
| 109 | - **第二层**(选择"是"时显示): | 111 | + **字段2**:提取选项(二选一): |
| 110 | - - 提取选项(二选一): | 112 | + - 指定提取金额 |
| 111 | - 1. 指定提取金额 | 113 | + - 最高固定提取金额 |
| 112 | - 2. 最高固定提取金额 | ||
| 113 | 114 | ||
| 114 | - **第三层**(根据第二层选择显示不同字段): | 115 | + **字段3-N**:根据字段2的选择显示不同字段: |
| 115 | 116 | ||
| 116 | **A. 指定提取金额模式**: | 117 | **A. 指定提取金额模式**: |
| 117 | - 提取方式(二选一): | 118 | - 提取方式(二选一): |
| ... | @@ -139,7 +140,7 @@ | ... | @@ -139,7 +140,7 @@ |
| 139 | **字段清理逻辑**: | 140 | **字段清理逻辑**: |
| 140 | - 切换提取方式时,自动清除不相关字段 | 141 | - 切换提取方式时,自动清除不相关字段 |
| 141 | - 切换"按年岁"和"按保单年度"时,清除 annual_amount 和 increase_rate | 142 | - 切换"按年岁"和"按保单年度"时,清除 annual_amount 和 increase_rate |
| 142 | - - 选择"否"(不启用提取计划)时,清除所有提取计划相关字段 | 143 | + - "是否希望生成说明"字段不影响任何其他字段 |
| 143 | 144 | ||
| 144 | --- | 145 | --- |
| 145 | 146 | ||
| ... | @@ -387,15 +388,17 @@ src/ | ... | @@ -387,15 +388,17 @@ src/ |
| 387 | 388 | ||
| 388 | **业务场景**:储蓄型产品(GS/GC/FA/LV2)支持提取计划功能 | 389 | **业务场景**:储蓄型产品(GS/GC/FA/LV2)支持提取计划功能 |
| 389 | 390 | ||
| 390 | -**三层结构**: | 391 | +**字段结构**: |
| 391 | 392 | ||
| 392 | -#### 第一层:启用确认 | 393 | +#### 字段1:是否生成说明(独立字段) |
| 393 | 394 | ||
| 394 | **问题**:是否希望生成一份容许减少名义金额的提取说明? | 395 | **问题**:是否希望生成一份容许减少名义金额的提取说明? |
| 395 | 396 | ||
| 396 | **选项**:是 / 否(默认:否) | 397 | **选项**:是 / 否(默认:否) |
| 397 | 398 | ||
| 398 | -#### 第二层:提取选项(第一层选择"是"时显示) | 399 | +**说明**:此字段为独立配置,不影响下面的提取方案 |
| 400 | + | ||
| 401 | +#### 字段2:提取选项 | ||
| 399 | 402 | ||
| 400 | **问题**:提取选项 | 403 | **问题**:提取选项 |
| 401 | 404 | ||
| ... | @@ -403,7 +406,7 @@ src/ | ... | @@ -403,7 +406,7 @@ src/ |
| 403 | 1. 指定提取金额 | 406 | 1. 指定提取金额 |
| 404 | 2. 最高固定提取金额 | 407 | 2. 最高固定提取金额 |
| 405 | 408 | ||
| 406 | -#### 第三层:具体字段(根据第二层选择显示不同字段) | 409 | +#### 字段3-N:具体配置字段(根据字段2选择显示不同字段) |
| 407 | 410 | ||
| 408 | ##### A. 指定提取金额模式 | 411 | ##### A. 指定提取金额模式 |
| 409 | 412 | ||
| ... | @@ -452,89 +455,71 @@ src/ | ... | @@ -452,89 +455,71 @@ src/ |
| 452 | - 无需"每年提取金额"字段(小程序端不需要) | 455 | - 无需"每年提取金额"字段(小程序端不需要) |
| 453 | - 字段清理逻辑:切换模式时自动清除不相关字段 | 456 | - 字段清理逻辑:切换模式时自动清除不相关字段 |
| 454 | 457 | ||
| 455 | -**组件设计(三层结构)**: | 458 | +**组件设计(独立字段结构)**: |
| 456 | 459 | ||
| 457 | ```vue | 460 | ```vue |
| 458 | <template> | 461 | <template> |
| 459 | <div> | 462 | <div> |
| 460 | - <!-- 第一层:启用确认 --> | 463 | + <!-- 字段1:是否生成说明(独立字段) --> |
| 461 | <PlanFieldRadio | 464 | <PlanFieldRadio |
| 462 | v-model="form.withdrawal_enabled" | 465 | v-model="form.withdrawal_enabled" |
| 463 | label="是否希望生成一份容许减少名义金额的提取说明?" | 466 | label="是否希望生成一份容许减少名义金额的提取说明?" |
| 464 | :options="['是', '否']" | 467 | :options="['是', '否']" |
| 465 | /> | 468 | /> |
| 466 | 469 | ||
| 467 | - <!-- 第二层 + 第三层:仅当选择"是"时显示 --> | 470 | + <!-- 字段2:款项提取配置(始终显示) --> |
| 468 | - <template v-if="form.withdrawal_enabled === '是'"> | 471 | + <h3>款项提取(容许减少名义金额)</h3> |
| 469 | - <h3>款项提取(容许减少名义金额)</h3> | 472 | + |
| 473 | + <!-- 提取选项 --> | ||
| 474 | + <PlanFieldRadio | ||
| 475 | + v-model="form.withdrawal_mode" | ||
| 476 | + label="提取选项" | ||
| 477 | + :options="['指定提取金额', '最高固定提取金额']" | ||
| 478 | + @change="onWithdrawalModeChange" | ||
| 479 | + /> | ||
| 470 | 480 | ||
| 471 | - <!-- 第二层:提取选项 --> | 481 | + <!-- 指定提取金额模式 --> |
| 482 | + <template v-if="form.withdrawal_mode === '指定提取金额'"> | ||
| 483 | + <!-- 子选项:提取方式 --> | ||
| 472 | <PlanFieldRadio | 484 | <PlanFieldRadio |
| 473 | - v-model="form.withdrawal_mode" | 485 | + v-model="form.specified_amount_type" |
| 474 | - label="提取选项" | 486 | + label="提取方式" |
| 475 | - :options="['指定提取金额', '最高固定提取金额']" | 487 | + :options="['按年岁', '按保单年度']" |
| 476 | - @change="onWithdrawalModeChange" | ||
| 477 | /> | 488 | /> |
| 478 | 489 | ||
| 479 | - <!-- 第三层 A:指定提取金额模式 --> | 490 | + <!-- 按年岁字段 --> |
| 480 | - <template v-if="form.withdrawal_mode === '指定提取金额'"> | 491 | + <template v-if="form.specified_amount_type === '按年岁'"> |
| 481 | - <!-- 子选项:提取方式 --> | 492 | + <PlanFieldAgePicker |
| 482 | - <PlanFieldRadio | 493 | + v-model="form.withdrawal_start_age" |
| 483 | - v-model="form.specified_amount_type" | 494 | + label="由几岁开始" |
| 484 | - label="提取方式" | 495 | + placeholder="请输入开始提取年龄" |
| 485 | - :options="['按年岁', '按保单年度']" | ||
| 486 | /> | 496 | /> |
| 487 | 497 | ||
| 488 | - <!-- 按年岁字段 --> | 498 | + <PlanFieldSelect |
| 489 | - <template v-if="form.specified_amount_type === '按年岁'"> | 499 | + v-model="form.withdrawal_period" |
| 490 | - <PlanFieldAgePicker | 500 | + label="提取期(年)" |
| 491 | - v-model="form.withdrawal_start_age" | 501 | + placeholder="请选择提取期" |
| 492 | - label="由几岁开始" | 502 | + :options="withdrawalPeriods" |
| 493 | - placeholder="请输入开始提取年龄" | 503 | + /> |
| 494 | - /> | ||
| 495 | - | ||
| 496 | - <PlanFieldSelect | ||
| 497 | - v-model="form.withdrawal_period" | ||
| 498 | - label="提取期(年)" | ||
| 499 | - placeholder="请选择提取期" | ||
| 500 | - :options="withdrawalPeriods" | ||
| 501 | - /> | ||
| 502 | 504 | ||
| 503 | - <!-- 每年递增提取之百分比 --> | 505 | + <!-- 每年递增提取之百分比 --> |
| 504 | - <div> | 506 | + <div> |
| 505 | - <div class="text-sm text-gray-700 mb-2"> | 507 | + <div class="text-sm text-gray-700 mb-2"> |
| 506 | - 每年递增提取之百分比(%) | 508 | + 每年递增提取之百分比(%) |
| 507 | - </div> | ||
| 508 | - <nut-input | ||
| 509 | - v-model="form.increase_rate" | ||
| 510 | - type="digit" | ||
| 511 | - placeholder="请输入递增百分比" | ||
| 512 | - /> | ||
| 513 | </div> | 509 | </div> |
| 514 | - </template> | 510 | + <nut-input |
| 515 | - | 511 | + v-model="form.increase_rate" |
| 516 | - <!-- 按保单年度字段 --> | 512 | + type="digit" |
| 517 | - <template v-if="form.specified_amount_type === '按保单年度'"> | 513 | + placeholder="请输入递增百分比" |
| 518 | - <PlanFieldAgePicker | ||
| 519 | - v-model="form.withdrawal_start_age" | ||
| 520 | - label="由几岁开始" | ||
| 521 | - placeholder="请输入开始提取年龄" | ||
| 522 | - /> | ||
| 523 | - | ||
| 524 | - <PlanFieldSelect | ||
| 525 | - v-model="form.withdrawal_period" | ||
| 526 | - label="提取期(年)" | ||
| 527 | - placeholder="请选择提取期" | ||
| 528 | - :options="withdrawalPeriods" | ||
| 529 | /> | 514 | /> |
| 530 | - </template> | 515 | + </div> |
| 531 | </template> | 516 | </template> |
| 532 | 517 | ||
| 533 | - <!-- 第三层 B:最高固定提取金额模式 --> | 518 | + <!-- 按保单年度字段 --> |
| 534 | - <template v-if="form.withdrawal_mode === '最高固定提取金额'"> | 519 | + <template v-if="form.specified_amount_type === '按保单年度'"> |
| 535 | <PlanFieldAgePicker | 520 | <PlanFieldAgePicker |
| 536 | v-model="form.withdrawal_start_age" | 521 | v-model="form.withdrawal_start_age" |
| 537 | - label="按年岁:由几岁开始" | 522 | + label="由几岁开始" |
| 538 | placeholder="请输入开始提取年龄" | 523 | placeholder="请输入开始提取年龄" |
| 539 | /> | 524 | /> |
| 540 | 525 | ||
| ... | @@ -546,6 +531,22 @@ src/ | ... | @@ -546,6 +531,22 @@ src/ |
| 546 | /> | 531 | /> |
| 547 | </template> | 532 | </template> |
| 548 | </template> | 533 | </template> |
| 534 | + | ||
| 535 | + <!-- 最高固定提取金额模式 --> | ||
| 536 | + <template v-if="form.withdrawal_mode === '最高固定提取金额'"> | ||
| 537 | + <PlanFieldAgePicker | ||
| 538 | + v-model="form.withdrawal_start_age" | ||
| 539 | + label="按年岁:由几岁开始" | ||
| 540 | + placeholder="请输入开始提取年龄" | ||
| 541 | + /> | ||
| 542 | + | ||
| 543 | + <PlanFieldSelect | ||
| 544 | + v-model="form.withdrawal_period" | ||
| 545 | + label="提取期(年)" | ||
| 546 | + placeholder="请选择提取期" | ||
| 547 | + :options="withdrawalPeriods" | ||
| 548 | + /> | ||
| 549 | + </template> | ||
| 549 | </div> | 550 | </div> |
| 550 | </template> | 551 | </template> |
| 551 | 552 | ||
| ... | @@ -565,18 +566,6 @@ watch(() => form.specified_amount_type, (newType) => { | ... | @@ -565,18 +566,6 @@ watch(() => form.specified_amount_type, (newType) => { |
| 565 | delete form.annual_amount | 566 | delete form.annual_amount |
| 566 | delete form.increase_rate | 567 | delete form.increase_rate |
| 567 | }) | 568 | }) |
| 568 | - | ||
| 569 | -// 监听启用状态变化 | ||
| 570 | -watch(() => form.withdrawal_enabled, (newValue) => { | ||
| 571 | - if (newValue === '否') { | ||
| 572 | - // 清除所有提取计划相关字段 | ||
| 573 | - delete form.withdrawal_mode | ||
| 574 | - delete form.specified_amount_type | ||
| 575 | - delete form.withdrawal_start_age | ||
| 576 | - delete form.withdrawal_period | ||
| 577 | - delete form.increase_rate | ||
| 578 | - } | ||
| 579 | -}) | ||
| 580 | </script> | 569 | </script> |
| 581 | ``` | 570 | ``` |
| 582 | 571 | ... | ... |
-
Please register or login to post a comment