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 | 56 +++++++++++++++++++++-------
gz-customerSystem/src/components/ProgressStep/index.less | 15 +++++++
2 files changed, 56 insertions(+), 15 deletions(-)
diff --git a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
index 44d86ea..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,6 +42,7 @@
useEffect(() => {
setProType('handleCaseFlowList')
+ setProgressList(progressData.handleCaseFlowList)
}, [progressData])
//详细结果的处理
@@ -66,20 +69,45 @@
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">
@@ -88,7 +116,7 @@
<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 === progressData[proType].length - 1 ? null : <div className='myStep-item-divider' />}
+ {t === progressList.length - 1 ? null : <div className='myStep-item-divider' />}
</div>
<div className="myStep-item-right">
{x.status === 1 ?
diff --git a/gz-customerSystem/src/components/ProgressStep/index.less b/gz-customerSystem/src/components/ProgressStep/index.less
index d298d6a..93245ce 100644
--- a/gz-customerSystem/src/components/ProgressStep/index.less
+++ b/gz-customerSystem/src/components/ProgressStep/index.less
@@ -212,7 +212,7 @@
border: 1px solid #e5e6eb;
border-radius: 4px;
color: #e5e6eb;
- padding: 4px 8px;
+ padding: 3px 8px 4px 8px;
cursor: pointer;
}
@@ -220,4 +220,17 @@
color: #1a6fb8;
border-color: #1a6fb8;
}
+
+ &-unit {
+ height: 32px;
+ border-radius: 21px;
+ color: #1D2129;
+ padding: 3px 12px 4px 12px;
+ cursor: pointer;
+ }
+
+ &-unitActive {
+ background: #f3f2f7;
+ color: #1a6fb8;
+ }
}
\ No newline at end of file
--
Gitblit v1.8.0