/*
|
* @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 { ledger_8, ledger_7, ledger_12, ledger_13 } from '../../assets/images';
|
import NameCard from '../NameCard';
|
import * as $$ from '../../utils/utility';
|
import FilesDrawer from '../FilesDrawer';
|
import './index.less';
|
|
/**
|
* progressData:'', // 流程数据
|
*/
|
const ProgressStep = ({ progressData }) => {
|
const iconMap = {
|
1: ledger_8,
|
2: ledger_7,
|
3: ledger_12,
|
4: ledger_13
|
}
|
|
// 已处理列表第一个元素
|
const dom1 = (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>
|
</div>
|
);
|
// 已处理列表后面 元素
|
const dom2 = (x) => (
|
<div>
|
<div className="myStep-item-p">
|
<span>{x.handlerUserName || '-'}</span>
|
</div>
|
{x.operationName &&
|
<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>
|
);
|
|
return (
|
<>
|
{progressData.length !== 0
|
? progressData.map((x, t) => {
|
return (
|
<div key={t + 1}>
|
<div className="myStep-item">
|
{t === progressData.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.taskNodeName}</div>
|
<img className='myStep-item-img' src={iconMap[x.status]} alt="" />
|
</div>
|
<div className="myStep-item-right">
|
{
|
t === 0 && dom1(x || {})
|
}
|
{
|
t !== 0 && <>
|
{
|
x.status === '1' ? dom3(x || {}) : dom2(x || {})
|
}
|
</>
|
}
|
</div>
|
</div>
|
</div>
|
);
|
})
|
: <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}
|
</>
|
);
|
};
|
|
export default ProgressStep;
|
