/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-17 14:28:30
|
* @LastEditTime: 2022-11-10 10:39:47
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 我的待办，我的已办查看进入的办转记录页面
|
*/
|
import React, { useEffect, useState } from 'react';
|
import * as $$ from '../../../utils/utility';
|
import { Typography } from 'antd';
|
import Icon, { RollbackOutlined, CheckOutlined } from '@ant-design/icons';
|
import NameCard from '../../../components/NameCard';
|
import FilesDrawer from '../../../components/FilesDrawer';
|
|
// 办转记录
|
function getProcessRecordDataApi(caseId) {
|
return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' });
|
}
|
|
const ProcessRecord = ({ caseId }) => {
|
// 办转数据
|
const [data, setData] = useState([]);
|
|
//初始化
|
useEffect(() => {
|
// 获取数据
|
async function getProcessRecordData() {
|
global.setSpinning(true);
|
const res = await getProcessRecordDataApi(caseId);
|
global.setSpinning(false);
|
setData(res.data || []);
|
}
|
getProcessRecordData();
|
}, [caseId]);
|
|
return data.length === 0 ? (
|
<div style={{ backgroundColor: '#ffffff', height: '100%', paddingTop: '10%' }}>{$$.MyEmpty({ style: { margin: 0 } })}</div>
|
) : (
|
<div className="processRecord">
|
{data.map((x, t) => {
|
let classType = `myStep-item-${x.status === '1' || x.status === '2' ? 'success' : 'noStarted'}`;
|
return (
|
<div key={t + 1}>
|
<div className="myStep-item">
|
{t === data.length - 1 ? null : <div className={`myStep-item-divider ${x.status === '2' && 'myStep-item-divider-success'}`} />}
|
<div className={`myStep-item-icon ${classType}`}>
|
<Icon component={x.handleResult === '2' ? RollbackOutlined : CheckOutlined} />
|
</div>
|
<div className="myStep-item-right">
|
<div className="myStep-item-title">{x.taskNodeName}</div>
|
<div className="myStep-item-p">
|
<span>经办人：</span>
|
{x.handlerUserName ? <NameCard name={x.handlerUserName} userId={x.handlerUserId} /> : <span>-</span>}
|
</div>
|
<div className="myStep-item-p">
|
<span>经办说明：</span>
|
<div className="myStep-item-textArea">
|
<Typography.Paragraph ellipsis={{ rows: 1, tooltip: x.handleContent || '-' }} style={{ width: '100%' }}>
|
{x.handleContent || '-'}
|
</Typography.Paragraph>
|
</div>
|
</div>
|
<div className="myStep-item-p">
|
<span>经办附件：</span>
|
<FilesDrawer filesData={x.fileInfoList} title="经办附件" />
|
</div>
|
<div className="myStep-item-p">
|
<span>派单时间：</span>
|
<span>{$$.timeFormat(x.createTime)}</span>
|
</div>
|
<div className="myStep-item-p">
|
<span>完成时间：</span>
|
<span>{$$.timeFormat(x.finishTime)}</span>
|
</div>
|
<div className="myStep-item-p">
|
<span>下一级处理人：</span>
|
{x.nextUserName ? <NameCard name={x.nextUserName} userId={x.nextUserId} /> : <span>-</span>}
|
</div>
|
</div>
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
);
|
};
|
|
export default ProcessRecord;
|
