From 945d241bcf549a2c272477748c86095bf0878e74 Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Sat, 07 Sep 2024 16:54:29 +0800
Subject: [PATCH] feat: 对接事件流转
---
gz-customerSystem/src/components/ProgressStep/VisitStep.jsx | 173 ++++++++++++++++++++++++++-------------------------------
1 files changed, 78 insertions(+), 95 deletions(-)
diff --git a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
index 7a40a68..14e906f 100644
--- a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
+++ b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
@@ -7,117 +7,100 @@
* @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 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: '配合部门'
+ },
+ ]
- // 已处理列表第一个元素
- 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>
- );
+ useEffect(() => {
+ setProType('handleCaseFlowList')
+ }, [progressData])
return (
- <>
- {progressData.length !== 0
- ? progressData.map((x, t) => {
+ <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.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="" />
+ {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 === 0 && dom1(x || {})
- }
- {
- t !== 0 && <>
- {
- x.status === '1' ? dom3(x || {}) : dom2(x || {})
+ {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>{$$.timeFormat(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>
@@ -125,7 +108,7 @@
);
})
: <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}
- </>
+ </Fragment>
);
};
--
Gitblit v1.8.0