From 159d0a98310210768b2e0c57a68a523c2739e2ee Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Sun, 15 Sep 2024 22:35:51 +0800
Subject: [PATCH] feat: 事件流转组件，配合部门可多个
---
gz-customerSystem/src/components/ProgressStep/VisitStep.jsx | 95 +++++++++++++++++++++++++++++++++++++----------
1 files changed, 75 insertions(+), 20 deletions(-)
diff --git a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
index 0dfa948..4962ddd 100644
--- a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
+++ b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
@@ -22,6 +22,8 @@
*/
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,//回退
@@ -40,38 +42,87 @@
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>
@@ -96,7 +147,11 @@
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>
}
--
Gitblit v1.8.0