1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| FR-ID: FR-CUST-008
功能点名称: 客户基础信息展示与编辑
来源: 客户详情页 -> 基础信息Tab
用户故事 (User Story):
* 作为 平台运营人员
* 我想要 查看和修改客户的基础信息
* 以便于 维护客户资料的准确性和完整性
验收标准:
**信息展示规范:**
* 基础信息字段展示：公司名称、法人姓名、法人联系方式、法人邮箱、业务场景、所在地址、经营内容、所属业务员、合同状态、营业执照、其他材料
* 合同状态为"已上传"时显示"查看合同"链接，为"未上传"时显示"未上传"文本
* "是否允许C端用户查看报告详情"开关根据权限配置展示，默认为关闭状态
* 营业执照和其他材料文件显示为只读状态（置灰不可编辑）
* 所有金额字段格式为"123,456.00 元"，时间字段空值显示为"/"
**权限控制:**
* 仅当开户状态为"待发起"或"审批拒绝"时，右上角显示"编辑"按钮
* 当条件不满足时，按钮为禁用状态，鼠标悬停显示提示"仅待发起或审批拒绝状态可编辑"
* 开户状态为"审批通过"时，显示"开发资料"按钮
**编辑模式功能:**
* 点击"编辑"按钮，页面切换为编辑模式，显示表单组件
* 可编辑字段：公司名称、法人姓名、法人联系方式、法人邮箱、业务场景、所在地址、经营内容、合同文件上传、C端报告查看权限开关
* 不可编辑字段：所属业务员（置灰显示）、营业执照、其他材料
* 表单验证规则：
- 公司名称：必填，最大50字符
- 法人姓名：必填，最大20字符
- 法人联系方式：必填，11位手机号格式验证
- 法人邮箱：必填，邮箱格式验证
- 业务场景：必填，最大200字符
- 所在地址：必填，最大100字符
- 经营内容：必填，最大500字符
**操作按钮功能:**
* 编辑模式右上角显示三个按钮："发起开户审批"、"保存"、"取消"
* "发起开户审批"按钮：
- 触发表单验证，验证通过后提交数据
- 客户信息更新，开户状态变更为"待审批"，合作状态变更为"合作中"
- 成功提示："开户审批已发起，请等待审批结果"
- 页面跳转到开户审批记录Tab
* "保存"按钮：
- 触发表单验证，验证通过后保存数据
- 客户信息更新，开户状态保持"待发起"，合作状态保持"未开始"
- 成功提示："客户信息已保存"
- 退出编辑模式，返回展示模式
* "取消"按钮：
- 不保存任何修改，退出编辑模式
- 表单数据重置为原始值
**业务逻辑:**
* 法人联系方式修改后，该客户需要使用新的手机号登录风盾SaaS平台
* C端报告查看权限开启后，C端用户付费完成后可查看详细报告内容
* 合同文件上传支持PDF、DOC、DOCX格式，最大10MB
UI组件/元素 (Ant Design 5.x):
* Descriptions组件：用于信息展示模式
* Form组件：用于编辑模式
* Button组件：编辑、发起开户审批、保存、取消按钮
* Input、Select、Upload组件：表单输入控件
* Switch组件：C端报告查看权限开关
* Tooltip组件：禁用状态提示信息
* message组件：操作成功/失败提示
数据交互 (Mock/API):
* **获取基础信息**: GET /api/customers/{id}/basic-info
* **更新基础信息**: PUT /api/customers/{id}/basic-info
```typescript
Body: {
companyName?: string,
legalRepresentative?: string,
legalRepresentativePhone?: string,
legalRepresentativeEmail?: string,
businessScenario?: string,
address?: string,
businessContent?: string,
contractFile?: File,
allowCEndUserViewReport?: boolean,
action: 'submit_for_approval' | 'save'
}
```
* **响应格式**:
```typescript
{
success: boolean,
message: string,
data?: {
customerId: string,
accountStatus: string,
cooperationStatus: string,
updatedAt: string
}
}
```
Mock数据要求:
* 模拟成功和失败场景
* 包含表单验证错误的测试数据
* 响应时间模拟（300-800ms）
* 文件上传进度模拟
技术实现要求:
* 严格遵循TypeScript类型定义
* 使用Umi Max的请求封装
* 实现表单数据的双向绑定
* 支持文件上传进度显示
* 与客户详情页其他Tab数据保持同步
前置条件:
* 用户已登录且具有客户管理权限
* 客户数据存在且完整
* 用户已访问客户详情页
测试要点:
* 权限控制验证（不同开户状态下的按钮显示）
* 表单验证规则测试
* 文件上传功能测试
* 数据保存和提交流程测试
* 错误场景处理测试
* 页面状态切换测试
|
