|
|
@@ -1,7 +1,7 @@
|
|
|
# Story 008.006: 移植残疾人个人管理UI(disability_person → @d8d/allin-disability-person-management-ui)
|
|
|
|
|
|
## Status
|
|
|
-Ready for Review
|
|
|
+In Progress - 需要完善照片上传功能
|
|
|
|
|
|
## Story
|
|
|
**As a** 开发者,
|
|
|
@@ -63,23 +63,38 @@ Ready for Review
|
|
|
- `allin-packages/platform-management-ui/src/api/types.ts` - 平台管理UI类型定义
|
|
|
- `allin-packages/disability-management-ui/src/api/disabilityClient.ts` - 残疾人管理UI API客户端(最新实现)
|
|
|
|
|
|
-- [x] 任务3:实现文件上传集成 (AC: 3)
|
|
|
+- [ ] 任务3:实现文件上传集成 (AC: 3)
|
|
|
- [x] 分析源系统照片上传逻辑:`allin_system-master/client/app/admin/dashboard/disability_person/AddDisabledPersonModal.tsx`
|
|
|
- **源文件**:`allin_system-master/client/app/admin/dashboard/disability_person/AddDisabledPersonModal.tsx`
|
|
|
- **查看要点**:照片上传组件、文件处理逻辑、预览功能
|
|
|
+ - **关键发现**:原系统支持多个照片上传,每个照片包含`photoType`、`photoUrl`、`canDownload`字段
|
|
|
+ - [x] 分析源系统照片上传组件:`allin_system-master/client/components/UploadCover/index.tsx`
|
|
|
+ - **源文件**:`allin_system-master/client/components/UploadCover/index.tsx`
|
|
|
+ - **查看要点**:阿里云OSS上传实现、文件类型限制、单文件上传限制
|
|
|
+ - **关键发现**:UploadCover组件`maxCount: 1`,原系统通过多个实例实现多个照片上传
|
|
|
- [x] 查看文件管理UI包组件:`packages/file-management-ui/src/components/FileSelector.tsx`
|
|
|
- **组件文件**:`packages/file-management-ui/src/components/FileSelector.tsx`
|
|
|
- **查看要点**:组件API、事件处理、文件类型限制
|
|
|
- - [x] 创建照片上传组件:`src/components/PhotoUploadField.tsx`
|
|
|
+ - [x] 分析原系统照片API调用:`allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts`
|
|
|
+ - **源文件**:`allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts`
|
|
|
+ - **查看要点**:聚合API调用方式、照片数据结构、上传流程
|
|
|
+ - **关键发现**:使用`POST /disability-persons/aggregated/create`聚合API,照片数据包含`photoType`、`photoUrl`、`canDownload`
|
|
|
+ - [x] 分析新系统照片API实现:`allin-packages/disability-module/src/routes/aggregated.routes.ts`和`src/services/aggregated.service.ts`
|
|
|
+ - **源文件**:`allin-packages/disability-module/src/routes/aggregated.routes.ts`、`src/services/aggregated.service.ts`
|
|
|
+ - **查看要点**:新系统聚合API路由、照片验证逻辑、文件ID管理
|
|
|
+ - **关键发现**:新系统使用`fileId`字段引用文件模块,验证文件ID有效性,自动添加`fileUrl`
|
|
|
+ - [ ] 创建照片上传组件:`src/components/PhotoUploadField.tsx`
|
|
|
- **目标文件**:`allin-packages/disability-person-management-ui/src/components/PhotoUploadField.tsx`
|
|
|
- - **功能**:集成`FileSelector`组件,支持照片上传、预览、删除
|
|
|
+ - **功能**:集成`FileSelector`组件,支持**多个照片上传**、照片类型选择、是否可下载选项
|
|
|
- **参考文件**:`packages/file-management-ui/src/components/FileSelector.tsx`
|
|
|
- - [x] 集成照片上传到表单:在残疾人个人表单中添加照片上传字段
|
|
|
- - **字段**:`photoFileId`(文件ID字段)
|
|
|
- - **表单集成**:使用`PhotoUploadField`组件,表单接收`fileId`参数
|
|
|
- - [x] 创建照片预览组件:`src/components/PhotoPreview.tsx`
|
|
|
+ - **关键功能**:支持动态添加/移除照片,每个照片独立管理
|
|
|
+ - [ ] 集成照片上传到表单:在残疾人个人表单中添加照片上传字段
|
|
|
+ - **字段**:`photos`(照片数组字段)
|
|
|
+ - **表单集成**:使用`PhotoUploadField`组件,表单接收照片数组参数
|
|
|
+ - **数据结构**:每个照片包含`photoType`、`fileId`、`canDownload`字段
|
|
|
+ - [ ] 创建照片预览组件:`src/components/PhotoPreview.tsx`
|
|
|
- **目标文件**:`allin-packages/disability-person-management-ui/src/components/PhotoPreview.tsx`
|
|
|
- - **功能**:使用`FilePreview`组件显示照片
|
|
|
+ - **功能**:使用`FilePreview`组件显示多个照片
|
|
|
- **参考文件**:`packages/file-management-ui/src/components/FilePreview.tsx`
|
|
|
|
|
|
- [x] 任务4:实现区域选择器集成 (AC: 4)
|
|
|
@@ -199,11 +214,21 @@ Ready for Review
|
|
|
|
|
|
### 源系统文件路径
|
|
|
- **需要移植的源文件**:
|
|
|
- - `allin_system-master/client/app/admin/dashboard/disability_person/page.tsx`
|
|
|
- - `allin_system-master/client/app/admin/dashboard/disability_person/AddDisabledPersonModal.tsx`
|
|
|
- - `allin_system-master/client/app/admin/dashboard/disability_person/DisabledPersonDetailModal.tsx`
|
|
|
- - `allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts`
|
|
|
- - `allin_system-master/client/app/admin/dashboard/disability_person/constant.ts`
|
|
|
+ - `allin_system-master/client/app/admin/dashboard/disability_person/page.tsx` - 主页面
|
|
|
+ - `allin_system-master/client/app/admin/dashboard/disability_person/AddDisabledPersonModal.tsx` - **关键文件:包含多个照片上传实现**
|
|
|
+ - `allin_system-master/client/app/admin/dashboard/disability_person/DisabledPersonDetailModal.tsx` - 详情模态框
|
|
|
+ - `allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts` - 服务层
|
|
|
+ - `allin_system-master/client/app/admin/dashboard/disability_person/constant.ts` - 常量定义
|
|
|
+- **照片上传相关源文件**:
|
|
|
+ - `allin_system-master/client/components/UploadCover/index.tsx` - **照片上传组件**(使用阿里云OSS上传)
|
|
|
+ - `allin_system-master/client/lib/api.ts` - API调用工具
|
|
|
+ - `allin_system-master/client/store/disabilityPerson.ts` - 状态管理(包含photosAtom)
|
|
|
+- **UploadCover组件分析**:
|
|
|
+ - **功能**:基于Ant Design Upload组件的阿里云OSS上传
|
|
|
+ - **限制**:`maxCount: 1`(每个UploadCover实例只支持单文件上传)
|
|
|
+ - **文件类型**:仅支持JPG/PNG,大小限制2MB
|
|
|
+ - **上传路径**:`/disablity_system/disability_people/${fileName}`
|
|
|
+ - **关键发现**:原系统通过多个UploadCover实例实现多个照片上传
|
|
|
- **需要对照参考的文件**:
|
|
|
- `allin-packages/platform-management-ui/src/components/PlatformManagement.tsx`
|
|
|
- `allin-packages/platform-management-ui/src/api/platformClient.ts`
|
|
|
@@ -222,6 +247,57 @@ Ready for Review
|
|
|
- **枚举常量文件**:
|
|
|
- `allin-packages/enums/src/index.ts`
|
|
|
|
|
|
+### 原系统API调用信息(基于disabilityPersonService.ts分析)
|
|
|
+- **原系统API调用方式**(来自`allin_system-master/client/app/admin/dashboard/disability_person/disabilityPersonService.ts`):
|
|
|
+ - `POST /disability-persons/aggregated/create` - **聚合创建残疾人所有信息**(包含照片)
|
|
|
+ - `GET /disability-persons/aggregated/:personId` - **聚合查询残疾人所有信息**(包含照片)
|
|
|
+ - `GET /disability-persons` - 获取残疾人列表
|
|
|
+ - `DELETE /disability-persons/:personId` - 删除残疾人
|
|
|
+ - `PUT /disability-persons/:personId` - 更新残疾人信息
|
|
|
+
|
|
|
+- **照片数据结构**(来自`CreateDisabledPersonData`接口):
|
|
|
+ ```typescript
|
|
|
+ photos?: Array<{
|
|
|
+ photoType: string; // 照片类型
|
|
|
+ photoUrl: string; // 照片URL(阿里云OSS URL)
|
|
|
+ canDownload: number; // 是否可下载:1-是,0-否
|
|
|
+ }>;
|
|
|
+ ```
|
|
|
+
|
|
|
+- **照片上传流程**:
|
|
|
+ 1. 通过`UploadCover`组件上传到阿里云OSS,获取`photoUrl`
|
|
|
+ 2. 通过聚合API一次性提交所有数据(包含照片URL数组)
|
|
|
+ 3. 后端处理照片URL,转换为文件ID存储
|
|
|
+
|
|
|
+### 新系统残疾人模块API信息(基于disability-module分析)
|
|
|
+- **聚合API路由**(来自`allin-packages/disability-module/src/routes/aggregated.routes.ts`):
|
|
|
+ - `POST /createAggregatedDisabledPerson` - **聚合创建残疾人所有信息**(包含照片)
|
|
|
+ - `GET /getAggregatedDisabledPerson/{id}` - **聚合查询残疾人所有信息**(包含照片)
|
|
|
+ - `PUT /updateAggregatedDisabledPerson/{id}` - **聚合更新残疾人所有信息**(包含照片)
|
|
|
+
|
|
|
+- **照片数据结构**(来自`DisabledPhotoSchema`):
|
|
|
+ ```typescript
|
|
|
+ {
|
|
|
+ id?: number; // 照片ID(创建时可选)
|
|
|
+ personId?: number; // 残疾人ID(创建时可选)
|
|
|
+ photoType: string; // 照片类型
|
|
|
+ fileId: number; // **文件ID**(引用@d8d/file-module)
|
|
|
+ uploadTime?: Date; // 上传时间(创建时自动生成)
|
|
|
+ canDownload: number; // 是否可下载:1-是,0-否
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+- **照片验证逻辑**(来自`AggregatedService`):
|
|
|
+ - 验证`fileId`的有效性(检查文件是否存在)
|
|
|
+ - 照片必须包含有效的文件ID
|
|
|
+ - 自动为照片添加`fileUrl`字段(从文件模块获取)
|
|
|
+
|
|
|
+- **照片上传流程**(新系统):
|
|
|
+ 1. 通过`FileSelector`上传到文件模块,获取`fileId`
|
|
|
+ 2. 通过聚合API提交照片数据(包含`fileId`)
|
|
|
+ 3. 后端验证`fileId`并关联文件实体
|
|
|
+ 4. 响应中包含`fileUrl`(从文件模块获取)
|
|
|
+
|
|
|
### 残疾人模块RPC API调用信息(基于集成测试和路由定义)
|
|
|
- **RPC客户端调用方式**(来自`allin-packages/disability-module/tests/integration/disability.integration.test.ts`和`allin-packages/disability-module/src/routes/disabled-person-custom.routes.ts`):
|
|
|
- `disabilityClientManager.get().createDisabledPerson.$post({ json: personData })` - 创建残疾人记录
|
|
|
@@ -319,18 +395,25 @@ Claude Code (d8d-model)
|
|
|
- 类型检查错误修复:API客户端类型推导语法修正(`findByIdCard[':idCard'].$get` → `findByIdCard[':idCard']['$get']`)
|
|
|
- 依赖安装:成功安装所有依赖包
|
|
|
- 组件集成:成功集成文件上传、区域选择器、枚举常量组件
|
|
|
+- **照片上传功能分析**:发现原系统支持多个照片上传,每个照片包含photoType、photoUrl、canDownload字段
|
|
|
+- **当前实现差距**:当前移植版本只支持单个照片上传,缺少照片类型和是否可下载字段
|
|
|
|
|
|
### Completion Notes List
|
|
|
1. **基础结构创建成功**:完整创建了残疾人个人管理UI包的基础结构,包括package.json、tsconfig.json、vitest.config.ts等配置文件
|
|
|
2. **API客户端实现**:基于残疾人模块的路由定义创建了完整的API客户端,使用ClientManager单例模式管理RPC客户端生命周期
|
|
|
3. **组件集成优化**:
|
|
|
- - 文件上传:直接集成`@d8d/file-management-ui`的FileSelector组件,无需重复创建
|
|
|
+ - 文件上传:直接集成`@d8d/file-management-ui`的FileSelector组件,但**需要改进以支持多个照片上传**
|
|
|
- 区域选择器:直接集成`@d8d/area-management-ui`的AreaSelect组件,支持三级联动
|
|
|
- 枚举常量:直接使用`@d8d/allin-enums`包的残疾类型和残疾等级枚举
|
|
|
4. **复杂表单组件实现**:创建了完整的残疾人个人管理主组件,包含CRUD操作、搜索、分页等功能
|
|
|
5. **集成测试编写**:编写了完整的集成测试,覆盖CRUD流程、文件上传集成、区域选择器集成、枚举选择器集成等场景
|
|
|
6. **类型推导最佳实践**:遵循史诗008经验总结,使用RPC推断类型(`InferRequestType`和`InferResponseType`),避免直接导入schema类型
|
|
|
7. **测试验证完成**:所有集成测试通过,类型检查完成,组件集成功能验证正常
|
|
|
+8. **照片上传功能差距**:发现当前实现与原系统的差距:
|
|
|
+ - ❌ 原系统支持**多个照片上传**,当前只支持单个
|
|
|
+ - ❌ 原系统每个照片有`photoType`字段,当前缺少
|
|
|
+ - ❌ 原系统每个照片有`canDownload`选项,当前缺少
|
|
|
+ - ✅ 已使用FileSelector组件,但需要扩展功能
|
|
|
|
|
|
### File List
|
|
|
**新创建的文件:**
|
|
|
@@ -345,8 +428,13 @@ Claude Code (d8d-model)
|
|
|
- `allin-packages/disability-person-management-ui/src/components/DisabilityPersonManagement.tsx` - 主管理组件
|
|
|
- `allin-packages/disability-person-management-ui/tests/integration/disability-person.integration.test.tsx` - 集成测试文件
|
|
|
|
|
|
+**需要创建的文件:**
|
|
|
+- `allin-packages/disability-person-management-ui/src/components/PhotoUploadField.tsx` - 多个照片上传组件(待创建)
|
|
|
+- `allin-packages/disability-person-management-ui/src/components/PhotoPreview.tsx` - 多个照片预览组件(待创建)
|
|
|
+
|
|
|
**修改的文件:**
|
|
|
- `docs/stories/008.006.transplant-disability-person-management-ui.story.md` - 更新任务完成状态和开发记录
|
|
|
+- `allin-packages/disability-person-management-ui/src/components/DisabilityPersonManagement.tsx` - 需要更新以支持多个照片上传
|
|
|
|
|
|
## QA Results
|
|
|
*Results from QA Agent QA review of the completed story implementation*
|