/*
|
* @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 iconMap = {
|
1: ledger_7,//完成
|
2: ledger_12,//回退
|
3: ledger_13//上报
|
}
|
const btnList = [
|
{
|
value: 'handleCaseFlowList',
|
label: '承办部门'
|
},
|
{
|
value: 'assistCaseFlowList',
|
label: '配合部门'
|
},
|
]
|
|
useEffect(() => {
|
setProType('handleCaseFlowList')
|
}, [progressData])
|
|
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>
|
}
|
{progressData[proType] && progressData[proType].length !== 0
|
? progressData[proType].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-right">
|
{t === progressData[proType].length - 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 || ''}><span>{x.handleNotes || '-'}</span></Tooltip></span>
|
</span>
|
</div>
|
}
|
</div>
|
}
|
</div>
|
</div>
|
</div>
|
);
|
})
|
: <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}
|
</Fragment>
|
);
|
};
|
|
export default ProgressStep;
|
