/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-17 14:28:30
|
* @LastEditTime: 2023-10-09 10:11:14
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 步骤条
|
*/
|
import React, { useEffect, useState } from 'react';
|
import { Tooltip, Space } from 'antd';
|
import Icon, { PaperClipOutlined, RollbackOutlined, EllipsisOutlined } from '@ant-design/icons';
|
import { ledger_7, ledger_8, ledger_9 } from '../../assets/images';
|
import NameCard from '../NameCard';
|
import * as $$ from '../../utils/utility';
|
import FilesDrawer from '../FilesDrawer';
|
import './index.less';
|
|
// 获取调度处理进度数据
|
function getDispProgressDataApi(caseId) {
|
return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' });
|
}
|
|
// 获取调解处理进度数据
|
function getProgressDataApi(caseId) {
|
return $$.ax.request({ url: 'caseTask/transferRecord?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) => (
|
<div>
|
<div className="myStep-item-p">
|
<span>{x.handlerUserName || '-'}{'（已申请）'}</span>
|
<span className={`public-nameCard-tag public-nameCard-tag-grey`}>
|
{x.canalName || '-'}
|
</span>
|
</div>
|
<div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
|
<span>经办时间：</span>
|
<span>{$$.timeFormat(x.finishTime)}</span>
|
</div>
|
</div>
|
);
|
// 已处理列表后面 元素
|
const dom2 = (x) => (
|
<div>
|
<div className="myStep-item-p">
|
<span>{x.handlerUserName || '-'}（已处理）</span>
|
</div>
|
<div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
|
<span>经办时间：</span>
|
<span>{$$.timeFormat(x.finishTime)}</span>
|
</div>
|
{
|
x.handleContent &&
|
<div className='myStep-item-p-yy'>
|
<span className='myStep-item-p-yy-l'>
|
{x.handleResult == '2' ?
|
<span>退回<Tooltip placement="top" title={x.handleContent || ''}><span>{`（${x.handleContent}）` || '-'}</span></Tooltip></span>
|
: x.taskNode == 'F22_00019-3' && x.handleResult == '1' ?
|
// 22_00025-1：调解成功，22_00025-2：调解不成功
|
<span>调解结果：<Tooltip placement="top" title={x.mediResult == '22_00025-1' ? '调解成功' : x.mediResult == '22_00025-2' ? '调解不成功' : '-'}><span>{`${x.mediResult == '22_00025-1' ? '调解成功' : x.mediResult == '22_00025-2' ? '调解不成功' : '-'}` || '-'}</span></Tooltip></span>
|
: <Tooltip placement="top" title={x.handleContent || ''}><span>{x.handleContent || '-'}</span></Tooltip>}
|
</span>
|
{
|
x.fileInfoList?.length > 0 &&
|
<div style={{ marginTop: '4px' }}>
|
<FilesDrawer name={<>
|
<PaperClipOutlined style={{ marginRight: '4px' }} />
|
<span>{x.taskNode == 'F22_00019-3' && x.handleResult == '1' ? '调解协议书' : '处理附件'}</span>
|
</>} filesData={x.fileInfoList} title="经办附件" />
|
</div>
|
}
|
</div>
|
}
|
</div>
|
);
|
|
// 处理中
|
const dom3 = (x) => (
|
<div>
|
<div className="myStep-item-p">
|
<span style={{ color: 'rgba(0,0,0,0.50)' }}>处理中</span>
|
</div>
|
<div className="myStep-item-p">
|
<span>{`${x.handlerUserName ? '1人可处理' : x.handleNameList ? x.handleNameList?.length > 1 ? `${x.handleNameList?.length}人均可处理` : `${x.handleNameList?.length}人可处理` : '0人可处理'}`}</span>
|
</div>
|
<div >
|
<Space size="small">
|
{
|
x.handlerUserName ? <div className="myStep-item-p-flex">
|
<div className='public-nameCard-card-mini public-nameCard-card-blue'>{x.handlerUserName.substr(0, 1)}</div>
|
<div className='myStep-item-p-flex-title'>{x.handlerUserName || '-'}</div>
|
</div> :
|
<>
|
{
|
x.handleNameList?.map((item, index) => (
|
<div key={index} className="myStep-item-p-flex">
|
<div className='public-nameCard-card-mini public-nameCard-card-blue'>{item.substr(0, 1)}</div>
|
<div className='myStep-item-p-flex-title'>{item}</div>
|
</div>
|
))
|
}
|
</>
|
}
|
|
</Space>
|
{/* <div className='public-nameCard-card-mini public-nameCard-card-blue'>{x.nextUserName ? x.nextUserName.substr(0, 1) : ''}</div> */}
|
</div>
|
</div>
|
);
|
|
useEffect(() => {
|
if (!caseId) return;
|
async function getProgressData() {
|
global.setSpinning(true);
|
const res = await (pageFrom === 'judicialApply' || pageFrom === 'judicialAudit'
|
? getJudicProgressDataApi(caseId)
|
: pageFrom === 'dispatchRecord' || pageFrom === 'dispatch'
|
? getDispProgressDataApi(caseId)
|
: getProgressDataApi(caseId));
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data || []);
|
}
|
}
|
getProgressData();
|
}, [caseId, pageFrom]);
|
|
function splitByLine(str, len = 10) {
|
let strLen = str.length,
|
num = 0,
|
multiple = Math.floor(strLen / len),
|
arrStr = str.split(''),
|
space = strLen % len > 0 ? multiple + 1 : multiple
|
for (let i = 1; i <= space; i++) {
|
arrStr.splice((len * i + num), 0, '\n')
|
num++
|
}
|
return arrStr.join('')
|
}
|
|
console.log('data',data);
|
|
return (
|
<>
|
{data.length !== 0
|
? data.map((x, t) => {
|
return (
|
<div key={t + 1}>
|
<div className="myStep-item">
|
{t === data.length - 1 ? null : <div className={`${!x.handleContent ? 'myStep-item-divider' : x.fileInfoList?.length > 0 ? 'myStep-item-divider2' : "myStep-item-divider1"} ${x.status === '2' && 'myStep-item-divider-success'}`} />}
|
<div className={`myStep-item-icon1 myStep-item-${x.status === '2' ? 'success1' : 'noStarted'}`}>
|
<div className="myStep-item-title">{splitByLine(x.taskNodeName || '', 2)}</div>
|
<img className='myStep-item-img' src={x.status === '1' ? ledger_8 : (x.handleResult === '2' ? ledger_9 : ledger_7)} alt="" />
|
{/* <Icon className='myStep-item-img' component={x.handleResult === '2' ? RollbackOutlined : CheckOutlined} /> */}
|
</div>
|
<div className="myStep-item-right">
|
{/* {dom1(x || {})} */}
|
{
|
t === 0 && dom1(x || {})
|
}
|
{
|
t !== 0 && <>
|
{
|
x.status === '2' ? dom2(x || {}) : dom3(x || {})
|
}
|
</>
|
}
|
{/* <div className="myStep-item-title">{x.taskNodeName}</div> */}
|
{/* {
|
<StepContent x={x || {}} t={t || 0} />} */}
|
</div>
|
</div>
|
</div>
|
);
|
})
|
: <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}
|
</>
|
);
|
};
|
|
export default ProgressStep;
|
