edit | blame | history | raw

证据材料审查弹窗功能

概述

在"证据材料汇总"Tab的材料列表中,为未审核通过的材料项添加"审核"按钮,点击后弹出证据材料审查弹窗,支持查看材料详情、预览材料图片、执行审核操作。

背景与动机

当前证据材料汇总Tab仅展示材料列表,缺少审核操作入口。需要为调解员/审核人员提供便捷的材料审核功能,可在弹窗中查看材料基本信息、预览材料图片,并执行"审核通过"或"退回补充"操作。

功能范围

入口触发

  • 位置:TabContainer.jsx中EvidenceBoard组件的材料列表项
  • 触发条件:仅当audit_state !== 1(未审核通过)时显示"审核"按钮
  • 按钮文案:"审核"

弹窗参数

点击"审核"按钮时,携带以下5个参数传递给弹窗:
| 参数 | 来源字段 | 说明 |
|------|----------|------|
| case_id | file_list[].case_id | 案件ID |
| evidence_type | file_list[].evidence_type | 证据类型 |
| per_type | data[].per_type | 人员类型(15_020008-1/15_020008-2)|
| person_id | file_list[].person_id | 人员ID |
| name | file_list[].name | 材料名称 |

弹窗内容结构(遵循doc_audit.html原型)

1. 材料基本信息区域

调用EvidenceAPIService.getPersonInfo获取,展示:
- 提交人:per_class_name + "-" + true_name
- 材料类型:根据evidence_type映射显示
- 材料数量:total_count + "份"
- 提交时间:submit_time

2. 材料清单(表格形式)

展示当前材料的详细信息:
- 材料类型:根据evidence_type映射
- 文件格式:suffix
- 上传时间:从API返回的时间字段
- 文件大小:total_file_size
- 注意:去掉原型中的"查看详情"按钮

3. 材料预览区域

调用EvidenceAPIService.getEvidenceListByPerson获取图片列表:
- 图片URL拼接规则:platform_url + "/" + show_url
- platform_url从localStorage的case_data_timeline.process_config.platform_url获取
- 支持点击缩略图查看大图

4. 审核操作区域

  • 审核通过按钮:调用EvidenceAPIService.auditEvidenceaudit_state=1
  • 退回补充按钮:打开退回意见输入框,必填退回意见后调用API,audit_state=2

API调用规范

getPersonInfo

// 请求参数
{ case_id, evidence_type, per_type }

// 响应结构
{
  "code": 200,
  "data": {
    "id": "2303191513081130",
    "per_class_name": "申请人",
    "true_name": "刘树杰",
    "total_count": "3",
    "submit_time": "2026-01-28 17:01",
    "audit_state": 0,
    "total_file_size": "0.0003",
    "suffix": "png"
  }
}

getEvidenceListByPerson

// 请求参数
{ case_id, evidence_type, per_type, person_id }

// 响应结构 - show_url需拼接platform_url前缀

auditEvidence

// 请求参数
{
  "case_id": "202601281644031088",
  "evidence_type": 1,
  "person_id": "2303191513081130",
  "file_id_list": ["202601281701461043"],
  "audit_user": "当前用户",
  "audit_state": 1,  // 1-审核成功,2-退回补充
  "audit_remark": "审核意见"
}

UI/UX要求

  • 弹窗类型:模态对话框(Ant Design Modal)
  • 弹窗宽度:根据内容自适应,参考原型约1000px
  • 样式:100%遵循doc_audit.html原型
  • 退回补充时退回意见必填
  • 操作成功后显示友好提示消息,关闭弹窗并刷新材料列表

技术实现要点

  1. 在TabContainer.jsx的EvidenceBoard组件中添加弹窗状态管理
  2. 更新EvidenceAPIService.js中的API方法签名以匹配实际接口
  3. 使用Ant Design Modal、Image、Spin、message等组件
  4. 图片预览支持Image.PreviewGroup批量预览

原型参考

  • 主要原型:document/原型/doc_audit.html
  • 需移除原型中的"查看详情"按钮

关联变更

  • 修改文件:web-app/src/components/dashboard/TabContainer.jsx
  • 修改文件:web-app/src/services/EvidenceAPIService.js