From 5aa4a814ab8d4aa194a9683ebefaefdfc6d92c3a Mon Sep 17 00:00:00 2001
From: liuwh <964324856@qq.com>
Date: Tue, 17 Sep 2024 17:18:05 +0800
Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master
---
gz-customerSystem/src/components/ProgressStep/VisitStep.jsx | 226 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 132 insertions(+), 94 deletions(-)
diff --git a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
index 7a40a68..be73cf0 100644
--- a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
+++ b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
@@ -2,122 +2,160 @@
* @Author: dminyi 1301963064@qq.com
* @Date: 2024-08-29 14:57:06
* @LastEditors: dminyi 1301963064@qq.com
- * @LastEditTime: 2024-08-29 15:58:19
+ * @LastEditTime: 2024-09-12 11:38:05
* @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 React, { Fragment, useEffect, useState } from 'react';
+import { Tooltip } from 'antd';
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:'', // 流程数据
+ * progressData: {
+ * assistCaseFlowList: [],//配合部门流程数组
+ * handleCaseFlowList: [],//承办部门流程数组
+ * }, // 流程数据
+ * hasTab: false,//是否有部门切换
*/
-const ProgressStep = ({ progressData }) => {
+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_8,
- 2: ledger_7,
- 3: ledger_12,
- 4: ledger_13
+ 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>
}
- // 已处理列表第一个元素
- 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>
+ 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>
{
- 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="经办附件" />
+ 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>
}
- </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) => {
+ {progressList && progressList.length !== 0
+ ? progressList.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-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 === 0 && dom1(x || {})
- }
- {
- t !== 0 && <>
- {
- x.status === '1' ? dom3(x || {}) : dom2(x || {})
+ {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>
@@ -125,7 +163,7 @@
);
})
: <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}
- </>
+ </Fragment>
);
};
--
Gitblit v1.8.0