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/views/register/eventFlow/component/EventFlow.jsx | 338 +++++++++++++++++++++++++++++++------------------------ 1 files changed, 189 insertions(+), 149 deletions(-) diff --git a/gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx b/gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx index 96ba746..c87f76f 100644 --- a/gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx +++ b/gz-customerSystem/src/views/register/eventFlow/component/EventFlow.jsx @@ -1,5 +1,5 @@ -import React, { useState, useRef, useEffect } from 'react'; -import { Button, Modal, Tabs, Badge } from '@arco-design/web-react'; +import React, { useState, useRef, useEffect, Fragment } from 'react'; +import { Button, Modal, Tabs, Badge, Steps } from '@arco-design/web-react'; import { Space } from 'antd'; import ProgressStep from '@/components/ProgressStep/VisitStep'; import BackModel from "./BackModel"; @@ -7,178 +7,218 @@ import { getOffset, getSize } from '@/utils/utility'; import EscalationModel from './EscalationModel'; import AssignedModel from './AssignedModel'; +import MatterDetail from '../../matterDetail'; +import SupervisingView from "../../matterDetail/Supervising"; +import * as $$ from '@/utils/utility'; +import { useNavigate } from 'react-router-dom'; const TabPane = Tabs.TabPane; +const Step = Steps.Step; -const fakeData = [ - { - handlerUserName: '天河区棠下街综治中心', - finishTime: new Date().getTime() - 24 * 60 * 60 * 1000, // 一天前的时间 - handleResult: '1', - status: '2', - taskNodeName: '来访登记', - mediResult: '22_00025-1', - handleContent: '调解成功,双方达成一致意见。', - operationName: '李晓明' - }, - { - handlerUserName: '系统派单', - finishTime: new Date().getTime() - 12 * 60 * 60 * 1000, // 半天前的时间 - handleResult: '1', - status: '2', - taskNodeName: '事件流转', - mediResult: '22_00025-1', - handleContent: '派单至:白云区新市街市场监管所', - }, - { - handlerUserName: '白云区新市街市场监管所', - finishTime: new Date().getTime() - 11 * 60 * 60 * 1000, // 半天前的时间 - handleResult: '1', - status: '2', - taskNodeName: '事件流转', - mediResult: '22_00025-1', - handleContent: '已签收', - operationName: '赵菲菲' - }, - { - handlerUserName: '白云区新市街市场监管所', - finishTime: new Date().getTime() - 10 * 60 * 60 * 1000, // 半天前的时间 - handleResult: '1', - status: '3', - taskNodeName: '事件回退', - mediResult: '22_00025-1', - // handleContent: '已签收', - operationName: '赵菲菲' - }, - { - handlerUserName: '白云区新市街综治中心', - finishTime: new Date().getTime() - 9 * 60 * 60 * 1000, // 半天前的时间 - handleResult: '1', - status: '2', - taskNodeName: '回退审核', - mediResult: '22_00025-1', - handleContent: '通过', - operationName: '赵菲菲' - }, - { - handlerUserName: '天河区棠下街综治中心', - finishTime: new Date().getTime() - 6 * 60 * 60 * 1000, // 6小时前的时间 - handleResult: '2', - status: '1', - taskNodeName: '事件流转', - mediResult: '22_00025-1', - handleContent: '案件已被签收,准备开始调解。', - operationName: '李晓明' - }, -]; +function getListCaseFlow(caseId) { + return $$.ax.request({ url: `caseTask/listCaseFlow?caseId=${caseId}`, type: 'get', service: 'mediate' }); +} + +function accept(data) { + return $$.ax.request({ url: `caseTask/accept`, type: 'post', service: 'mediate', data }); +} export default function EventFlow(props) { + const myButton = [ + { + label: '受理', + type: 'primary', + click: () => { + Modal.confirm({ + title: '受理确认', + content: '确认受理该事件?', + onOk: async () => { + const res = await accept({ + caseTaskId: props.caseTaskId + }) + if (res.type) { + $$.infoSuccess({ content: '受理成功!' }); + navigate(`/mediate/visit/handleFeedback?caseTaskId=${res.data}&caseId=${props.caseId}`) + } + }, + }); + }, + key: 'sl', + }, + { + label: '自行受理', + type: 'primary', + click: () => { }, + key: 'zxsl', + }, + { + label: '回退', + type: 'outline', + click: () => setBackVisible(true), + key: 'ht', + status: 'danger' + }, + { + label: '交办', + type: 'outline', + click: () => setAssignedVisible(true), + key: 'jb', + }, + { + label: '上报', + type: 'outline', + click: () => setEscalationVisible(true), + key: 'sb', + }, + ] const scrollRef = useRef(null) + const navigate = useNavigate(); const [backVisible, setBackVisible] = useState(false) const [height, setHeight] = useState(500) const [escalationVisible, setEscalationVisible] = useState(false) const [assignedVisible, setAssignedVisible] = useState(false) + const [staticButtonList, setStaticButtonList] = useState([]) + const [progressData, setProgressData] = useState({}) useEffect(() => { + if (props.authorData) { + const { buttonList } = props.authorData; + setStaticButtonList(myButton.filter(item => { + const flag = buttonList.some(result => { + if (result.id === item.key) { + return true + } + }) + return flag + })) + } + }, [props.authorData]) + + useEffect(() => { + getData() onWindowResize() window.addEventListener("resize", onWindowResize); + // 返回一个函数,该函数会在组件卸载前执行 + return () => { + // 组件销毁时执行 + window.removeEventListener("resize", onWindowResize); + }; }, []) const onWindowResize = () => { - let offsetLeft = 0; let offsetTop = 0; if (scrollRef.current.container) { - offsetLeft = getOffset(scrollRef.current.container).left; offsetTop = getOffset(scrollRef.current.container).top; } - setHeight(getSize().windowH - offsetTop - 65) + setHeight(getSize().windowH - offsetTop - 16) }; - return ( - <div className='dataSync'> - <div className='dataSync-hasTabPage' > - <Tabs defaultActiveTab='1' > - <TabPane - key='1' - title={ - <span style={{ fontSize: '15px' }}> - 流转进度 - </span> - } - > - <Scrollbars - style={{ height: height }} - ref={scrollRef} - autoHide - > - <ProgressStep progressData={fakeData} /> - </Scrollbars> - </TabPane> - <TabPane - key='2' - title={ - <span style={{ fontSize: '15px' }}> - 督办信息 - <Badge maxCount={99} count={1000} /> - </span> - } - > - <Scrollbars - style={{ height: height }} - ref={scrollRef} - ></Scrollbars> - </TabPane> - </Tabs> + //获取流程信息 + const getData = async () => { + const res = await getListCaseFlow( + props.caseId + ) + if (res.type) { + setProgressData(res.data) + } + } + + + + return ( + <Fragment> + <div style={{ backgroundColor: '#fff', margin: '0 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}> + <Steps type='navigation' current={2}> + <Step title='来访登记' disabled /> + <Step title='事件流转' disabled /> + <Step title='办理反馈' disabled /> + <Step title='结案审核' disabled /> + <Step title='当事人评价' disabled /> + <Step title='结案归档' disabled /> + </Steps> </div> - <div className="dataSync-excel"> - <Space size="large" style={{ margin: '4px 14px' }}> - <Button type="primary" >受理</Button> - <Button type="primary" >提交</Button> - <Button type="primary" >自行受理</Button> - <Button type='outline' status='danger' onClick={() => setBackVisible(true)}>回退</Button> - <Button type='outline' onClick={() => setAssignedVisible(true)}>交办</Button> - <Button type='outline' onClick={() => setEscalationVisible(true)}>上报</Button> - <Button type='secondary' >返回上级页面</Button> - </Space> + + <div className='dataSync' style={{ marginTop: '8px' }}> + <Scrollbars + style={{ height: height }} + ref={scrollRef} + autoHide + > + <MatterDetail caseId={props.caseId} /> + <div className='dataSync-hasTabPage' style={{ marginTop: '-8px', paddingBottom: '64px' }}> + <Tabs defaultActiveTab='1' > + <TabPane + key='1' + title={ + <span style={{ fontSize: '15px' }}> + 流转进度 + </span> + } + > + <ProgressStep progressData={progressData} /> + </TabPane> + <TabPane + key='2' + title={ + <span style={{ fontSize: '15px' }}> + 督办信息 + {/* <Badge maxCount={99} count={1000} /> */} + </span> + } + > + <div style={{ marginBottom: '20px' }}> + <SupervisingView id={''} /> + </div> + </TabPane> + </Tabs> + </div> + </Scrollbars> + <Modal + title='回退' + visible={backVisible} + onOk={() => setBackVisible(false)} + onCancel={() => { setBackVisible(false) }} + footer={null} + unmountOnExit={true} + maskClosable={false} + > + <BackModel caseId={props.caseId} caseTaskId={props.caseTaskId} onCancel={() => { setBackVisible(false) }} /> + </Modal> + <Modal + title='上报' + visible={escalationVisible} + onOk={() => setEscalationVisible(false)} + onCancel={() => { setEscalationVisible(false) }} + footer={null} + unmountOnExit={true} + maskClosable={false} + > + <EscalationModel caseId={props.caseId} caseTaskId={props.caseTaskId} onCancel={() => { setEscalationVisible(false) }} /> + </Modal> + <Modal + title='交办' + visible={assignedVisible} + onOk={() => setAssignedVisible(false)} + onCancel={() => { setAssignedVisible(false) }} + footer={null} + unmountOnExit={true} + maskClosable={false} + autoFocus={false} + focusLock={false} + > + <AssignedModel caseId={props.caseId} caseTaskId={props.caseTaskId} onCancel={() => { setAssignedVisible(false) }} /> + </Modal> + <div className="dataSync-excel"> + <Space size="middle" style={{ margin: '4px 14px' }}> + {staticButtonList?.map(item => { + const { label, key, click, ...rest } = item; + return <Button key={key} onClick={click} {...rest} >{label}</Button> + })} + <Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button> + </Space> + </div> </div> - <Modal - title='回退' - visible={backVisible} - onOk={() => setBackVisible(false)} - onCancel={() => { setBackVisible(false) }} - autoFocus={false} - focusLock={true} - footer={null} - unmountOnExit={true} - maskClosable={false} - > - <BackModel /> - </Modal> - <Modal - title='上报' - visible={escalationVisible} - onOk={() => setEscalationVisible(false)} - onCancel={() => { setEscalationVisible(false) }} - autoFocus={false} - focusLock={true} - footer={null} - unmountOnExit={true} - maskClosable={false} - > - <EscalationModel /> - </Modal> - <Modal - title='交办' - visible={assignedVisible} - onOk={() => setAssignedVisible(false)} - onCancel={() => { setAssignedVisible(false) }} - footer={null} - unmountOnExit={true} - maskClosable={false} - > - <AssignedModel /> - </Modal> - </div> + </Fragment> ) } -- Gitblit v1.8.0