import React, { useEffect, useState } from 'react';
|
import { Modal, Tag, Space } from 'antd';
|
import TableView from '@/components/TableView';
|
import PreviewImage from '@/components/PreviewImage';
|
import * as $$ from '@/utils/utility';
|
import './index.less';
|
import { ledger_2,Frame_2 } from '../../assets/images';
|
// 获取修改记录列表
|
function getModifyRecordApi(caseId) {
|
return $$.ax.request({
|
url: 'cases/modify-record/group-by-time-user',
|
type: 'get',
|
data: { caseId },
|
service: 'mediate'
|
});
|
}
|
|
// 获取修改记录详情
|
function getModifyDetailApi(params) {
|
return $$.ax.request({
|
url: 'cases/modify-record/detail',
|
type: 'get',
|
data: params,
|
service: 'mediate'
|
});
|
}
|
|
const CaseUpdateInfo = ({
|
visible = false,
|
onCancel,
|
caseId
|
}) => {
|
const [recordList, setRecordList] = useState([]);
|
const [loading, setLoading] = useState(false);
|
const [detailVisible, setDetailVisible] = useState(false);
|
const [detailLoading, setDetailLoading] = useState(false);
|
const [detailData, setDetailData] = useState([]);
|
const [currentRecord, setCurrentRecord] = useState(null);
|
|
// 获取修改记录列表
|
const getModifyRecord = async () => {
|
if (!caseId) return;
|
|
setLoading(true);
|
try {
|
const res = await getModifyRecordApi(caseId);
|
if (res.type) {
|
setRecordList(res.data || []);
|
}
|
} catch (error) {
|
console.error('获取修改记录失败', error);
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
// 获取修改记录详情
|
const getModifyDetail = async (record) => {
|
setDetailLoading(true);
|
try {
|
const res = await getModifyDetailApi({
|
caseId,
|
modifyTime: record.modifyTime,
|
modifyUser: record.modifyUser
|
});
|
if (res.type) {
|
setDetailData(res.data || []);
|
}
|
} catch (error) {
|
console.error('获取修改详情失败', error);
|
} finally {
|
setDetailLoading(false);
|
}
|
};
|
|
// 处理查看详情
|
const handleViewDetail = (record) => {
|
setCurrentRecord(record);
|
setDetailVisible(true);
|
getModifyDetail(record);
|
};
|
|
useEffect(() => {
|
if (visible && caseId) {
|
getModifyRecord();
|
}
|
}, [visible, caseId]);
|
|
// 详情表格列定义
|
const detailColumns = [
|
{
|
title: '类型',
|
dataIndex: 'modifyType',
|
key: 'modifyType',
|
width: 80,
|
render: (text) => {
|
const typeMap = {
|
'修改': <span className="modify-type-tag modify-type-edit">修改</span>,
|
'添加': <span className="modify-type-tag modify-type-add">添加</span>,
|
'删除': <span className="modify-type-tag modify-type-delete">删除</span>
|
};
|
return typeMap[text] || text;
|
}
|
},
|
{
|
title: '修改内容',
|
dataIndex: 'modifyAttribute',
|
key: 'modifyAttribute',
|
width: '10%'
|
},
|
{
|
title: '修改项',
|
dataIndex: 'modifyItem',
|
key: 'modifyItem',
|
width: '10%'
|
},
|
|
{
|
title: '修改前',
|
dataIndex: 'beforeContent',
|
key: 'beforeContent',
|
width: '40%',
|
render: (text, record) => {
|
if (record.fileUrl && record.modifyType === '删除') {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={record.beforeContent} src={record.fileUrl} />
|
{/* {index !== props.transactResult?.fileInfoBaseDTOList.length - 1 && <>，</>} */}
|
</div>
|
}
|
return text || '-';
|
}
|
},
|
{
|
title: '修改后',
|
dataIndex: 'afterContent',
|
key: 'afterContent',
|
width: '40%',
|
render: (text, record) => {
|
if (record.fileUrl && record.modifyType !== '删除') {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={record.afterContent} src={record.fileUrl} />
|
{/* {index !== props.transactResult?.fileInfoBaseDTOList.length - 1 && <>，</>} */}
|
</div>
|
}
|
return text || '-';
|
}
|
}
|
];
|
|
return (
|
<>
|
<Modal
|
title="查看修改日志"
|
open={visible}
|
onCancel={onCancel}
|
width={1200}
|
style={{
|
top: 100,
|
maxWidth: 1600
|
}}
|
bodyStyle={{
|
height: 552
|
}}
|
footer={null}
|
destroyOnClose
|
className="case-repeat-info-modal"
|
maskClosable={false}
|
zIndex={100}
|
>
|
<div className="case-repeat-info">
|
{loading ? (
|
<div className="loading-tip">
|
<div className="loading-content">加载中...</div>
|
</div>
|
) : (
|
<>
|
{recordList.length > 0 ? (
|
<>
|
<div className="info-tip">
|
<i className="info-icon"></i>
|
<span>事项在办结后共计修改<span style={{ color: '#1A6FB8' }}>{recordList.length}</span>次，详情如下</span>
|
</div>
|
<div className="record-list">
|
{recordList.map((record, index) => (
|
<div className="record-item" key={index}>
|
<div className="record-icon">
|
<img src={Frame_2} className="time-icon" />
|
</div>
|
<div className="record-content">
|
<div className="record-time">{record.modifyTime}</div>
|
<div className="record-info-row">
|
<div className="record-info">
|
<span className="label">修改人：</span>
|
<span className="value">{record.modifyUser}</span>
|
<span className="user-dept">{record.userDept}</span>
|
</div>
|
<div className="record-info">
|
<span className="label">修改内容：</span>
|
<span className="value">{record.modifyCount}项</span>
|
</div>
|
</div>
|
</div>
|
<div className="record-action">
|
<span className="view-btn" onClick={() => handleViewDetail(record)}>查看</span>
|
</div>
|
</div>
|
))}
|
</div>
|
</>
|
) : (
|
<div className="empty-tip">
|
<div className="empty-content">暂无修改记录</div>
|
</div>
|
)}
|
</>
|
)}
|
</div>
|
</Modal>
|
|
{/* 修改详情弹窗 */}
|
<Modal
|
title="修改日志详情"
|
open={detailVisible}
|
onCancel={() => setDetailVisible(false)}
|
width="calc(100% - 32px)"
|
style={{
|
top: 20,
|
maxWidth: 1600,
|
overflow: 'auto'
|
}}
|
footer={null}
|
destroyOnClose
|
className="case-repeat-detail-modal"
|
maskClosable={false}
|
zIndex={101}
|
>
|
<div className="case-repeat-detail">
|
<div className="detail-header">
|
<div className="info-tip">
|
<i className="info-icon"></i>
|
<span>事项办结后修改详情如下</span>
|
</div>
|
|
{currentRecord && (
|
<div className="detail-info-row">
|
<div className="info-item">
|
<span className="label">修改时间：</span>
|
<span className="value">{currentRecord.modifyTime}</span>
|
</div>
|
<div className="info-item">
|
<span className="label">修改人：</span>
|
<span className="value">{currentRecord.modifyUser}</span>
|
<span className="user-dept">{currentRecord.userDept}</span>
|
</div>
|
</div>
|
)}
|
</div>
|
|
<TableView
|
columns={detailColumns}
|
dataSource={detailData}
|
rowKey="id"
|
loading={detailLoading}
|
pagination={false}
|
bordered={true}
|
className="detail-table"
|
locale={{
|
emptyText: <div className="empty-content">暂无修改详情</div>
|
}}
|
/>
|
</div>
|
</Modal>
|
</>
|
);
|
};
|
|
export default CaseUpdateInfo;
|
