/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-08-29 14:57:06
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @LastEditTime: 2024-09-12 11:38:05
|
* @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 } from '../../assets/images';
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
|
/**
|
* progressData: {
|
* assistCaseFlowList: [],//配合部门流程数组
|
* handleCaseFlowList: [],//承办部门流程数组
|
* }, // 流程数据
|
* hasTab: false,//是否有部门切换
|
*/
|
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,//回退
|
3: ledger_13//上报
|
}
|
const btnList = [
|
{
|
value: 'handleCaseFlowList',
|
label: '承办部门'
|
},
|
{
|
value: 'assistCaseFlowList',
|
label: '配合部门'
|
},
|
]
|
|
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)
|
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>
|
}
|
</>
|
}
|
{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'}`}>
|
<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">
|
{x.status === 1 ?
|
<div>
|
<div className="myStep-item-p" style={{ color: 'rgba(0,0,0,0.50)' }}>
|
{x.processName || '-'}
|
</div>
|
<div className="myStep-item-p">
|
<span>{x.handleUnitName || '-'}</span>
|
</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: '200px' }}>
|
<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' }}>{$$.MyEmpty()}</div>}
|
</Fragment>
|
);
|
};
|
|
export default ProgressStep;
|
