From d44e0bd425b2b99e4198afc96ba37d9888e0512e Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Sun, 15 Sep 2024 20:34:57 +0800
Subject: [PATCH] fix：流转进度完善
---
gz-customerSystem/src/components/ProgressStep/VisitStep.jsx | 268 ++++++++++++++++++++---------------------------------
1 files changed, 101 insertions(+), 167 deletions(-)
diff --git a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
index eb4460a..44d86ea 100644
--- a/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
+++ b/gz-customerSystem/src/components/ProgressStep/VisitStep.jsx
@@ -2,206 +2,140 @@
* @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 { feedback, ledger_8, ledger_7 } from '../../assets/images';
-import NameCard from '../NameCard';
+import React, { Fragment, useEffect, useState } from 'react';
+import { Tooltip } from 'antd';
+import { ledger_8, ledger_7, ledger_12, ledger_13 } from '../../assets/images';
import * as $$ from '../../utils/utility';
-import FilesDrawer from '../FilesDrawer';
import './index.less';
-// 获取调度处理进度数据
-function getDispProgressDataApi(caseId) {
- return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' });
-}
-
-// 获取调解处理进度数据
-function getProgressDataApi(caseId) {
- return $$.ax.request({ url: 'caseTask/transferRecord?caseId=' + caseId, type: 'get', service: 'mediate' });
-}
-// 获取司法确认处理进度数据
-function getJudicProgressDataApi(caseId) {
- return $$.ax.request({ url: 'judicTask/getTaskProcess?caseId=' + caseId, type: 'get', service: 'mediate' });
-}
-
/**
- * caseId:'', // 案件id
- * pageFrom:'', // 判断那个页面展示
+ * progressData: {
+ * assistCaseFlowList: [],//配合部门流程数组
+ * handleCaseFlowList: [],//承办部门流程数组
+ * }, // 流程数据
+ * hasTab: false,//是否有部门切换
*/
-const ProgressStep = ({ caseId, pageFrom }) => {
- const [data, setData] = useState([]);
-
- // 提交调解 案件调度 案件签收 纠纷调解 指派网格员
-
- // 已处理列表第一个元素
- const dom1 = (x) => (
- <div>
- <div className="myStep-item-p">
- <span>{x.handlerUserName || '-'}</span>
- {/* <span className={`public-nameCard-tag public-nameCard-tag-grey`}>
- {x.canalName || '-'}
- </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>
- <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>
- );
-
- const fakeData = [
+const ProgressStep = ({ progressData, hasTab }) => {
+ const [proType, setProType] = useState('handleCaseFlowList')
+ const iconMap = {
+ 1: ledger_7,//完成
+ 2: ledger_12,//回退
+ 3: ledger_13//上报
+ }
+ const btnList = [
{
- handlerUserName: '天河区棠下街综治中心',
- canalName: '来访登记',
- finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间
- handleResult: '1',
- status: '2',
- taskNodeName: '来访登记',
- mediResult: '22_00025-1',
- handleContent: '调解成功，双方达成一致意见。',
- operationName: '李晓明'
+ value: 'handleCaseFlowList',
+ label: '承办部门'
},
{
- handlerUserName: '天河区棠下街综治中心',
- canalName: '事件流转',
- finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间
- handleResult: '1',
- status: '2',
- taskNodeName: '案件调度',
- mediResult: '22_00025-1',
- handleContent: '自行受理',
- operationName: '李晓明'
-
+ value: 'assistCaseFlowList',
+ label: '配合部门'
},
- {
- handlerUserName: '天河区棠下街综治中心',
- canalName: '办理反馈',
- finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间
- handleResult: '2',
- status: '3',
- taskNodeName: '案件签收',
- mediResult: '22_00025-1',
- handleContent: '案件已被签收，准备开始调解。',
- operationName: '李晓明'
-
- },
- ];
+ ]
useEffect(() => {
- if (pageFrom === 'dispatchRecord') {
- setData(fakeData || [])
- }
- }, [pageFrom]);
+ setProType('handleCaseFlowList')
+ }, [progressData])
- function splitByLine(str, len = 10) {
- let strLen = str.length,
- num = 0,
- multiple = Math.floor(strLen / len),
- arrStr = str.split(''),
- space = strLen % len > 0 ? multiple + 1 : multiple
- for (let i = 1; i <= space; i++) {
- arrStr.splice((len * i + num), 0, '\n')
- num++
+ //详细结果的处理
+ const typeDom = (data) => {
+ //审核结果同意
+ if (data.auditResult && data.auditResult == '24_00004-1') {
+ return <span>审核结果：<span style={{ color: '#00B42A' }}>{data.auditResultName}</span></span>
}
- return arrStr.join('')
+ //审核结果不同意
+ 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 (
- <>
- {data.length !== 0
- ? data.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 === data.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 === '2' ? 'success1' : 'noStarted1'}`}>
- <div className="myStep-item-title">{splitByLine(x.taskNodeName || '', 2)}</div>
- <img className='myStep-item-img' src={x.status === '1' ? ledger_8 : (x.handleResult === '2' ? feedback : ledger_7)} alt="" />
- {/* <Icon className='myStep-item-img' component={x.handleResult === '2' ? RollbackOutlined : CheckOutlined} /> */}
+ <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 === progressData[proType].length - 1 ? null : <div className='myStep-item-divider' />}
</div>
<div className="myStep-item-right">
- {/* {dom1(x || {})} */}
- {
- t === 0 && dom1(x || {})
- }
- {
- t !== 0 && <>
- {
- x.status === '2' ? dom2(x || {}) : dom3(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 className="myStep-item-title">{x.taskNodeName}</div> */}
- {/* {
- <StepContent x={x || {}} t={t || 0} />} */}
</div>
</div>
</div>
);
})
: <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>}
- </>
+ </Fragment>
);
};
--
Gitblit v1.8.0