当前MediationProgress组件使用硬编码的5个固定步骤,无法根据实际案件类型动态展示不同的调解流程节点。需要集成API返回的nodes数据,实现动态的流程节点展示。
API Response (getCaseProcessInfo)
↓
CaseDataContext (新增processNodes状态)
↓
MediationProgress组件 (动态渲染)
在CaseDataContext中新增:
- processNodes 状态:存储流程节点数据
- 从getCaseProcessInfo响应中提取nodes数据并存储
MediationProgress组件改造:
- 删除硬编码的steps数组
- 使用useCaseData()获取processNodes
- 根据nodes数据动态生成步骤:
- 按order_no排序
- 显示node_name作为标签
- 根据每个节点的nodeState字段判断状态:
- nodeState: 0或1 → active激活状态
- nodeState: 2 → completed完成状态
- 其他值 → 默认未激活状态
- 保持原有的进度线、完成/激活/未完成样式逻辑
nodes数据格式(来自API):javascript [ { id: 1, node_name: "意愿调查", order_no: 1, nodeState: 2 }, // 已完成 { id: 2, node_name: "材料核实", order_no: 2, nodeState: 1 }, // 进行中(激活) { id: 3, node_name: "事实认定", order_no: 3, nodeState: 0 }, // 未开始 { id: 4, node_name: "达成协议", order_no: 4, nodeState: 0 }, // 未开始 { id: 5, node_name: "履约回访", order_no: 5, nodeState: 0 } // 未开始 ]
nodeState状态说明:
- 0 或 1:进行中/激活状态(active)
- 2:已完成状态(completed)
- 其他值:默认未激活
processNodes状态loadCaseData中保存response.nodesprocessNodesprocessNodesorder_no排序nodeState判断显示状态:nodeState === 2 → 显示为完成状态(带勾图标)nodeState === 0 || nodeState === 1 → 显示为激活状态node_name渲染步骤标签修改文件:
- web-app/src/contexts/CaseDataContext.jsx - 新增processNodes状态
- web-app/src/components/dashboard/MediationProgress.jsx - 动态渲染逻辑
不影响:
- API接口调用(已存在)
- 其他组件
- 样式文件(复用现有样式)