/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-08-29 14:57:06
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @LastEditTime: 2024-08-29 15:58:19
|
* @FilePath: \gzDyh\gz-customerSystem\src\components\ProgressStep\VisitStep.jsx
|
* @Description: 来访登记步骤条
|
*/
|
|
import React, { useEffect, useState } from 'react';
|
import { Tooltip, Space } from 'antd';
|
import Icon, { PaperClipOutlined, RollbackOutlined, EllipsisOutlined } from '@ant-design/icons';
|
import { feedback, ledger_8, ledger_7 } 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>{x.operationName}</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>{x.operationName}</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' style={{width:'200px'}}>
|
<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}</span>
|
</div>
|
</div>
|
);
|
|
const fakeData = [
|
{
|
handlerUserName: '天河区棠下街综治中心',
|
canalName: '来访登记',
|
finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间
|
handleResult: '1',
|
status: '2',
|
taskNodeName: '来访登记',
|
mediResult: '22_00025-1',
|
handleContent: '调解成功，双方达成一致意见。',
|
operationName: '李晓明'
|
},
|
{
|
handlerUserName: '天河区棠下街综治中心',
|
canalName: '事件流转',
|
finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间
|
handleResult: '1',
|
status: '2',
|
taskNodeName: '案件调度',
|
mediResult: '22_00025-1',
|
handleContent: '自行受理',
|
operationName: '李晓明'
|
|
},
|
{
|
handlerUserName: '天河区棠下街综治中心',
|
canalName: '办理反馈',
|
finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间
|
handleResult: '2',
|
status: '3',
|
taskNodeName: '案件签收',
|
mediResult: '22_00025-1',
|
handleContent: '案件已被签收，准备开始调解。',
|
operationName: '李晓明'
|
|
},
|
];
|
|
useEffect(() => {
|
if (pageFrom === 'dispatchRecord') {
|
setData(fakeData || [])
|
}
|
}, [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('')
|
}
|
|
|
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' : 'noStarted1'}`}>
|
<div className="myStep-item-title">{splitByLine(x.taskNodeName || '', 2)}</div>
|
<img className='myStep-item-img' src={x.status === '1' ? ledger_8 : (x.handleResult === '2' ? feedback : 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;
|
