| | |
| | | */ |
| | | const ProgressStep = ({ progressData, hasTab }) => { |
| | | const [proType, setProType] = useState('handleCaseFlowList') |
| | | const [assistType, setAssistType] = useState(progressData.assistCaseFlowList && progressData.assistCaseFlowList[0]?.unitId || '') |
| | | const [progressList, setProgressList] = useState([]); |
| | | const iconMap = { |
| | | 1: ledger_7,//完成 |
| | | 2: ledger_12,//回退 |
| | |
| | | |
| | | useEffect(() => { |
| | | setProType('handleCaseFlowList') |
| | | setProgressList(progressData.handleCaseFlowList) |
| | | }, [progressData]) |
| | | |
| | | //详细结果的处理 |
| | | const typeDom = (data) => { |
| | | //审核结果同意 |
| | | if (data.auditResult && data.auditResult == '24_00004-1') { |
| | | return <span>审核结果:<span style={{ color: '#00B42A' }}>{data.auditResultName}</span></span> |
| | | } |
| | | //审核结果不同意 |
| | | if (data.auditResult && data.auditResult == '24_00004-2') { |
| | | return <span>审核结果:<span style={{ color: '#FF4D4F' }}>{data.auditResultName}</span></span> |
| | | } |
| | | //化解结果成功 |
| | | if (data.mediResult && data.mediResult == '22_00025-1') { |
| | | return <span>审核结果:<span style={{ color: '#00B42A' }}>{data.mediResultName}</span></span> |
| | | } |
| | | //化解结果不成功 |
| | | if (data.mediResult && data.mediResult == '22_00025-2') { |
| | | return <span>审核结果:<span style={{ color: '#FF4D4F' }}>{data.mediResultName}</span></span> |
| | | } |
| | | return <span>{data.handleNotes || '-'}</span> |
| | | } |
| | | |
| | | return ( |
| | | <Fragment> |
| | | {hasTab && |
| | | <div className='tabBtn'> |
| | | {btnList.map((item, index) => { |
| | | return <div |
| | | className={`tabBtn-btn ${proType === item.value ? 'tabBtn-active' : ''}`} |
| | | key={item.value} |
| | | onClick={() => { setProType(item.value) }} |
| | | style={{ marginRight: (index + 1) !== btnList.length ? '20px' : '0' }} |
| | | >{item.label}</div> |
| | | })} |
| | | |
| | | </div> |
| | | <> |
| | | <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}</div> |
| | | })} |
| | | </div> |
| | | { |
| | | proType == 'assistCaseFlowList' && <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> |
| | | } |
| | | </> |
| | | } |
| | | {progressData[proType] && progressData[proType].length !== 0 |
| | | ? progressData[proType].map((x, t) => { |
| | | {progressList && progressList.length !== 0 |
| | | ? progressList.map((x, t) => { |
| | | return ( |
| | | <div key={t + 1}> |
| | | <div className="myStep-item"> |
| | | {t === progressData[proType].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 === 1 ? 'noStarted1' : 'success1'}`}> |
| | | <div className="myStep-item-title">{x.nodeShowName || '事件流转'}</div> |
| | | <img className='myStep-item-img' src={x.status === 1 ? ledger_8 : iconMap[x.taskType]} alt="" /> |
| | | <div> |
| | | <div className={`myStep-item-icon1 myStep-item-${x.status === 1 ? 'noStarted1' : 'success1'}`}> |
| | | <div className="myStep-item-title">{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"> |
| | | {t === progressData[proType].length - 1 ? |
| | | {x.status === 1 ? |
| | | <div> |
| | | <div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}> |
| | | {x.processName} |
| | | {x.processName || '-'} |
| | | </div> |
| | | <div className="myStep-item-p"> |
| | | <span>{x.handleUnitName || '-'}</span> |
| | |
| | | x.handleNotes && |
| | | <div className='myStep-item-p-yy' style={{ width: '200px' }}> |
| | | <span className='myStep-item-p-yy-l'> |
| | | <span><Tooltip placement="top" title={x.handleNotes || ''}><span>{x.handleNotes || '-'}</span></Tooltip></span> |
| | | <span> |
| | | <Tooltip placement="top" title={x.handleNotes || ''}> |
| | | {typeDom(x)} |
| | | </Tooltip> |
| | | </span> |
| | | </span> |
| | | </div> |
| | | } |