From f6efc465e8f5633313afc8da54c17988722073eb Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Sat, 14 Sep 2024 15:55:07 +0800
Subject: [PATCH] fix: 审核页面逻辑调整、滚动调整
---
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..47faac2 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=${props.caseTaskId}&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