/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-17 14:28:30
|
* @LastEditTime: 2022-11-30 14:17:00
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 步骤条
|
*/
|
import React, { useEffect, useState } from 'react';
|
import { Typography } from 'antd';
|
import Icon, { CheckOutlined, RollbackOutlined } from '@ant-design/icons';
|
import NameCard from '../NameCard';
|
import * as $$ from '../../utils/utility';
|
import FilesDrawer from '../FilesDrawer';
|
import './index.less';
|
|
// 获取调度处理进度数据
|
function getDispProgressDataApi(caseId) {
|
return $$.ax.request({ url: 'caseDisp/getTaskProcess?caseId=' + caseId, type: 'get', service: 'disp' });
|
}
|
|
// 获取调解处理进度数据
|
function getProgressDataApi(caseId) {
|
return $$.ax.request({ url: 'caseTask/getTaskProcess?caseId=' + caseId, type: 'get', service: 'mediate' });
|
}
|
|
// 获取司法确认处理进度数据
|
function getJudicProgressDataApi(caseId) {
|
return $$.ax.request({ url: 'judicTask/getTaskProcess?caseId=' + caseId, type: 'get', service: 'mediate' });
|
}
|
|
/**
|
* caseId:'', // 案件id
|
* pageFrom:'', // 判断那个页面展示
|
*/
|
const ProgressStep = ({ caseId, pageFrom }) => {
|
const [data, setData] = useState([]);
|
|
const dom1 = (x, name = '经办人') => (
|
<div className="myStep-item-p">
|
<span>{name}：</span>
|
{x.handlerUserName ? <NameCard name={x.handlerUserName} userId={x.handlerUserId} /> : <span>-</span>}
|
</div>
|
);
|
|
const dom2 = (x, name = '经办说明') => (
|
<div className="myStep-item-p">
|
<span>{name}：</span>
|
<div className="myStep-item-textArea">
|
<Typography.Paragraph ellipsis={{ rows: 2, tooltip: x.handleContent || '-' }} style={{ width: '100%' }}>
|
{x.handleContent || '-'}
|
</Typography.Paragraph>
|
</div>
|
</div>
|
);
|
|
const dom3 = (x, name = '经办附件') => (
|
<div className="myStep-item-p">
|
<span>{name}：</span>
|
<FilesDrawer filesData={x.fileInfoList} title="经办附件" />
|
</div>
|
);
|
|
const dom4 = (x, name = '派单时间') => (
|
<div className="myStep-item-p">
|
<span>{name}：</span>
|
<span>{$$.timeFormat(x.createTime)}</span>
|
</div>
|
);
|
|
const dom5 = (x, name = '完成时间') => (
|
<div className="myStep-item-p">
|
<span>{name}：</span>
|
<span>{$$.timeFormat(x.finishTime)}</span>
|
</div>
|
);
|
|
const dom6 = (x, name = '下一级处理人') => (
|
<div className="myStep-item-p">
|
<span>{name}：</span>
|
{x.nextUserName ? <NameCard name={x.nextUserName} userId={x.nextUserId} /> : <span>-</span>}
|
</div>
|
);
|
|
const StepContent = ({ x }) => {
|
return (
|
<>
|
{dom1(x)}
|
{dom2(x)}
|
{dom3(x)}
|
{dom4(x)}
|
{dom5(x)}
|
{dom6(x)}
|
</>
|
);
|
};
|
|
useEffect(() => {
|
if (!caseId) return;
|
async function getProgressData() {
|
const res = await (pageFrom === 'judicialApply' || pageFrom === 'judicialAudit'
|
? getJudicProgressDataApi(caseId)
|
: pageFrom === 'dispatchRecord' || pageFrom === 'dispatch'
|
? getDispProgressDataApi(caseId)
|
: getProgressDataApi(caseId));
|
if (res.type) {
|
setData(res.data || []);
|
}
|
}
|
getProgressData();
|
}, [caseId, pageFrom]);
|
|
return (
|
<>
|
{data.length !== 0
|
? 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>
|
<StepContent x={x || {}} />
|
</div>
|
</div>
|
</div>
|
);
|
})
|
: $$.MyEmpty()}
|
</>
|
);
|
};
|
|
export default ProgressStep;
|
