hookehuyr

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

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

---

**详细信息**:
- **影响文件**: docs/PLAN/plan-entry-architecture.md
- **技术栈**: 文档
- **测试状态**: N/A
- **备注**: 提升文档可读性和实现指导性
......@@ -102,16 +102,17 @@
- 缴费年期:各产品不同(详见配置文件)
- **提取计划功能**(所有储蓄产品通用):
**三层结构**
**字段结构说明**
**第一层**:是否希望生成一份容许减少名义金额的提取说明?(是/否)
**字段1**:是否希望生成一份容许减少名义金额的提取说明?(是/否)
- 独立字段,不影响下面的提取方案配置
- 仅用于标识是否需要生成说明文档
**第二层**(选择"是"时显示):
- 提取选项(二选一):
1. 指定提取金额
2. 最高固定提取金额
**字段2**:提取选项(二选一):
- 指定提取金额
- 最高固定提取金额
**第三层**(根据第二层选择显示不同字段)
**字段3-N**:根据字段2的选择显示不同字段
**A. 指定提取金额模式**
- 提取方式(二选一):
......@@ -139,7 +140,7 @@
**字段清理逻辑**
- 切换提取方式时,自动清除不相关字段
- 切换"按年岁"和"按保单年度"时,清除 annual_amount 和 increase_rate
- 选择"否"(不启用提取计划)时,清除所有提取计划相关字段
- "是否希望生成说明"字段不影响任何其他字段
---
......@@ -387,15 +388,17 @@ src/
**业务场景**:储蓄型产品(GS/GC/FA/LV2)支持提取计划功能
**三层结构**
**字段结构**
#### 第一层:启用确认
#### 字段1:是否生成说明(独立字段)
**问题**:是否希望生成一份容许减少名义金额的提取说明?
**选项**:是 / 否(默认:否)
#### 第二层:提取选项(第一层选择"是"时显示)
**说明**:此字段为独立配置,不影响下面的提取方案
#### 字段2:提取选项
**问题**:提取选项
......@@ -403,7 +406,7 @@ src/
1. 指定提取金额
2. 最高固定提取金额
#### 第三层:具体字段(根据第二层选择显示不同字段)
#### 字段3-N:具体配置字段(根据字段2选择显示不同字段)
##### A. 指定提取金额模式
......@@ -452,89 +455,71 @@ src/
- 无需"每年提取金额"字段(小程序端不需要)
- 字段清理逻辑:切换模式时自动清除不相关字段
**组件设计(三层结构)**
**组件设计(独立字段结构)**
```vue
<template>
<div>
<!-- 第一层:启用确认 -->
<!-- 字段1:是否生成说明(独立字段) -->
<PlanFieldRadio
v-model="form.withdrawal_enabled"
label="是否希望生成一份容许减少名义金额的提取说明?"
:options="['是', '否']"
/>
<!-- 第二层 + 第三层:仅当选择"是"时显示 -->
<template v-if="form.withdrawal_enabled === '是'">
<h3>款项提取(容许减少名义金额)</h3>
<!-- 字段2:款项提取配置(始终显示) -->
<h3>款项提取(容许减少名义金额)</h3>
<!-- 提取选项 -->
<PlanFieldRadio
v-model="form.withdrawal_mode"
label="提取选项"
:options="['指定提取金额', '最高固定提取金额']"
@change="onWithdrawalModeChange"
/>
<!-- 第二层:提取选项 -->
<!-- 指定提取金额模式 -->
<template v-if="form.withdrawal_mode === '指定提取金额'">
<!-- 子选项:提取方式 -->
<PlanFieldRadio
v-model="form.withdrawal_mode"
label="提取选项"
:options="['指定提取金额', '最高固定提取金额']"
@change="onWithdrawalModeChange"
v-model="form.specified_amount_type"
label="提取方式"
:options="['按年岁', '按保单年度']"
/>
<!-- 第三层 A:指定提取金额模式 -->
<template v-if="form.withdrawal_mode === '指定提取金额'">
<!-- 子选项:提取方式 -->
<PlanFieldRadio
v-model="form.specified_amount_type"
label="提取方式"
:options="['按年岁', '按保单年度']"
<!-- 按年岁字段 -->
<template v-if="form.specified_amount_type === '按年岁'">
<PlanFieldAgePicker
v-model="form.withdrawal_start_age"
label="由几岁开始"
placeholder="请输入开始提取年龄"
/>
<!-- 按年岁字段 -->
<template v-if="form.specified_amount_type === '按年岁'">
<PlanFieldAgePicker
v-model="form.withdrawal_start_age"
label="由几岁开始"
placeholder="请输入开始提取年龄"
/>
<PlanFieldSelect
v-model="form.withdrawal_period"
label="提取期(年)"
placeholder="请选择提取期"
:options="withdrawalPeriods"
/>
<PlanFieldSelect
v-model="form.withdrawal_period"
label="提取期(年)"
placeholder="请选择提取期"
:options="withdrawalPeriods"
/>
<!-- 每年递增提取之百分比 -->
<div>
<div class="text-sm text-gray-700 mb-2">
每年递增提取之百分比(%)
</div>
<nut-input
v-model="form.increase_rate"
type="digit"
placeholder="请输入递增百分比"
/>
<!-- 每年递增提取之百分比 -->
<div>
<div class="text-sm text-gray-700 mb-2">
每年递增提取之百分比(%)
</div>
</template>
<!-- 按保单年度字段 -->
<template v-if="form.specified_amount_type === '按保单年度'">
<PlanFieldAgePicker
v-model="form.withdrawal_start_age"
label="由几岁开始"
placeholder="请输入开始提取年龄"
/>
<PlanFieldSelect
v-model="form.withdrawal_period"
label="提取期(年)"
placeholder="请选择提取期"
:options="withdrawalPeriods"
<nut-input
v-model="form.increase_rate"
type="digit"
placeholder="请输入递增百分比"
/>
</template>
</div>
</template>
<!-- 第三层 B:最高固定提取金额模式 -->
<template v-if="form.withdrawal_mode === '最高固定提取金额'">
<!-- 按保单年度字段 -->
<template v-if="form.specified_amount_type === '按保单年度'">
<PlanFieldAgePicker
v-model="form.withdrawal_start_age"
label="按年岁:由几岁开始"
label="由几岁开始"
placeholder="请输入开始提取年龄"
/>
......@@ -546,6 +531,22 @@ src/
/>
</template>
</template>
<!-- 最高固定提取金额模式 -->
<template v-if="form.withdrawal_mode === '最高固定提取金额'">
<PlanFieldAgePicker
v-model="form.withdrawal_start_age"
label="按年岁:由几岁开始"
placeholder="请输入开始提取年龄"
/>
<PlanFieldSelect
v-model="form.withdrawal_period"
label="提取期(年)"
placeholder="请选择提取期"
:options="withdrawalPeriods"
/>
</template>
</div>
</template>
......@@ -565,18 +566,6 @@ watch(() => form.specified_amount_type, (newType) => {
delete form.annual_amount
delete form.increase_rate
})
// 监听启用状态变化
watch(() => form.withdrawal_enabled, (newValue) => {
if (newValue === '否') {
// 清除所有提取计划相关字段
delete form.withdrawal_mode
delete form.specified_amount_type
delete form.withdrawal_start_age
delete form.withdrawal_period
delete form.increase_rate
}
})
</script>
```
......