You need to sign in or sign up before continuing.
hookehuyr

docs(plan): 优化储蓄类产品计划书入口架构文档

- 完善三层结构字段说明(启用确认、提取选项、具体字段)
- 添加完整的 Vue 组件实现示例(PlanFieldRadio、PlanFieldAgePicker 等)
- 优化字段清理逻辑说明(按年岁/按保单年度两种模式的字段清理)
- 改进业务场景描述,更清晰的结构层次

---

**详细信息**:
- **影响文件**: docs/PLAN/plan-entry-architecture.md
- **技术栈**: 文档
- **测试状态**: N/A
- **备注**: 提升文档可读性和实现指导性
...@@ -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
......