/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-08-29 14:57:06
|
* @LastEditors: lwh
|
* @LastEditTime: 2025-01-02 16:14:02
|
* @FilePath: \gzDyh\gz-customerSystem\src\components\ProgressStep\VisitStep.jsx
|
* @Description: 来访登记步骤条
|
*/
|
|
import React, { Fragment, useEffect, useState } from 'react';
|
import { Tooltip } from 'antd';
|
import { ledger_8, ledger_7, ledger_12, ledger_13, ledger_14 } from '../../assets/img';
|
import * as $$ from '../../utils/utility';
|
import PreviewImage from '../PreviewImage';
|
import './index.less';
|
|
|
/**
|
* progressData: {
|
* assistCaseFlowList: [],//配合部门流程数组
|
* handleCaseFlowList: [],//承办部门流程数组
|
* }, // 流程数据
|
*/
|
const ProgressStep = ({ progressData }) => {
|
const [proType, setProType] = useState('handleCaseFlowList')
|
const [assistType, setAssistType] = useState('')
|
const [progressList, setProgressList] = useState([]);
|
const iconMap = {
|
1: ledger_7,//完成
|
2: ledger_12,//回退
|
3: ledger_13,//上报
|
4: ledger_14,//不予受理
|
}
|
const btnList = [
|
{
|
value: 'handleCaseFlowList',
|
label: '承办部门'
|
},
|
{
|
value: 'assistCaseFlowList',
|
label: '配合部门'
|
},
|
]
|
|
useEffect(() => {
|
setProType('handleCaseFlowList')
|
setProgressList(progressData.handleCaseFlowList)
|
setAssistType(progressData.assistCaseFlowList && progressData.assistCaseFlowList[0]?.unitId || '')
|
}, [progressData])
|
|
//详细结果的处理
|
const typeDom = (data) => {
|
console.log(data);
|
const dom = data.fileInfoList?.map((result, resIndex) => {
|
return <div style={{ display: 'inline-block' }}>
|
<PreviewImage name={result.name} src={result.showUrl} />
|
{resIndex !== data.fileInfoList?.length - 1 && <>，</>}
|
</div>
|
})
|
console.log(dom);
|
//审核结果同意
|
if (data.auditResult && data.auditResult == '24_00004-1') {
|
return <div>
|
<div>审核结果：<span style={{ color: '#00B42A' }}>{data.auditResultName}</span></div>
|
{dom}
|
</div>
|
}
|
//审核结果不同意
|
if (data.auditResult && data.auditResult == '24_00004-2') {
|
return <div>
|
<div>审核结果：<span style={{ color: '#FF4D4F' }}>{data.auditResultName}</span></div>
|
{dom}
|
</div>
|
}
|
//化解结果成功
|
if (data.mediResult && data.mediResult == '22_00025-1') {
|
return <div>
|
<div>审核结果：<span style={{ color: '#00B42A' }}>{data.mediResultName}</span></div>
|
{dom}
|
</div>
|
}
|
//化解结果不成功
|
if (data.mediResult && data.mediResult == '22_00025-2') {
|
return <div>
|
<div>审核结果：<span style={{ color: '#FF4D4F' }}>{data.mediResultName}</span></div>
|
{dom}
|
</div>
|
}
|
return <div>
|
<div>{data.handleNotes || '-'}</div>
|
{dom}
|
</div>
|
}
|
|
return (
|
<Fragment>
|
{progressData.assistCaseFlowList &&
|
<>
|
<div className='tabBtn'>
|
{btnList.map((item, index) => {
|
return <div
|
className={`tabBtn-btn ${proType === item.value ? 'tabBtn-active' : ''}`}
|
key={item.value}
|
onClick={() => {
|
setProType(item.value)
|
if (item.value == 'handleCaseFlowList') {
|
setProgressList(progressData.handleCaseFlowList)
|
} else {
|
const findData = progressData.assistCaseFlowList?.find(res => res.unitId == assistType) || {}
|
setProgressList(findData.caseFlowList || [])
|
}
|
}}
|
style={{ marginRight: (index + 1) !== btnList.length ? '20px' : '0' }}
|
>{item.label == '配合部门' ? `${item.label}（${progressData.assistCaseFlowList.length}）` : item.label}</div>
|
})}
|
</div>
|
{
|
(proType == 'assistCaseFlowList' && progressData.assistCaseFlowList && progressData.assistCaseFlowList.length !== 0) && <div className='tabBtn'>
|
{progressData.assistCaseFlowList?.map(item => {
|
return <div
|
key={item.unitId}
|
className={`tabBtn-unit ${assistType === item.unitId ? 'tabBtn-unitActive' : ''}`}
|
onClick={() => {
|
setAssistType(item.unitId)
|
setProgressList(item.caseFlowList)
|
}}
|
>
|
{item.unitName}
|
</div>
|
})}
|
</div>
|
}
|
</>
|
}
|
{progressList && progressList.length !== 0
|
? progressList.map((x, t) => {
|
return (
|
<div key={t + 1}>
|
<div className="myStep-item">
|
<div>
|
<div
|
className={`myStep-item-icon1 myStep-item-${x.status === 1 ? 'noStarted1' : 'success1'}`}
|
style={{ padding: '4px' }}
|
>
|
<div className="myStep-item-title" style={x.nodeShowName && x.nodeShowName.length === 4 ? {
|
display: 'block',
|
width: '100%',
|
textAlign: 'center'
|
} : {}}>
|
{x.nodeShowName && x.nodeShowName.length === 4 ?
|
<>
|
{x.nodeShowName.substring(0, 2)}<br/>
|
{x.nodeShowName.substring(2, 4)}
|
</> :
|
(x.nodeShowName || '事件流转')
|
}
|
</div>
|
<img className='myStep-item-img' src={x.status === 1 ? ledger_8 : iconMap[x.taskType]} alt="" />
|
</div>
|
{t === progressList.length - 1 ? null : <div className='myStep-item-divider' />}
|
</div>
|
<div className="myStep-item-right">
|
{x.status === 1 ?
|
<div>
|
<div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
|
{x.statusName || '-'}
|
</div>
|
<div className="myStep-item-p">
|
<span>{x.processName || '-'}</span>
|
</div>
|
{
|
(x.readStatus === 0 || x.readStatus === 1) && <div className={x.readStatus === 0 ? 'myStep-item-noread' : 'myStep-item-read'}>
|
{x.readStatus === 0 ? '未读' : '已读 | ' + $$.minuteFormat(x.readTime)}
|
</div>
|
}
|
</div>
|
:
|
<div>
|
<div className="myStep-item-p">
|
<span>{x.handleUnitName || '-'}</span>
|
</div>
|
{x.handleUserName &&
|
<div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
|
<span>操作人：</span>
|
<span>{x.handleUserName}</span>
|
</div>
|
}
|
<div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
|
<span>操作时间：</span>
|
<span>{$$.minuteFormat(x.handleTime)}</span>
|
</div>
|
{
|
x.handleNotes &&
|
<div className='myStep-item-p-yy' style={{ width: '300px' }}>
|
<span className='myStep-item-p-yy-l'>
|
<span>
|
<Tooltip placement="top" title={x.handleNotes || ''}>
|
{typeDom(x)}
|
</Tooltip>
|
</span>
|
</span>
|
</div>
|
}
|
</div>
|
}
|
</div>
|
</div>
|
</div>
|
);
|
})
|
: <div style={{ padding: '100px 0' }}>{'暂无数据'}</div>}
|
</Fragment>
|
);
|
};
|
|
export default ProgressStep;
|
