From 6be5ac069c5673ed0f1208d823ac0d3f3b86f27f Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Thu, 05 Sep 2024 19:40:36 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master --- gz-customerSystem/src/views/register/closingReview/component/AssignedModel.jsx | 130 ++++++++ gz-customerSystem/src/views/register/closingReview/component/EscalationModel.jsx | 91 +++++ gz-customerSystem/src/views/register/closingReview/component/Examine.jsx | 186 +++++++++++ gz-customerSystem/src/views/register/closingReview/component/EventFlow.jsx | 184 +++++++++++ gz-customerSystem/src/views/register/index.less | 47 ++ gz-customerSystem/src/views/register/closingReview/component/BackModel.jsx | 95 +++++ gz-customerSystem/src/views/register/closingReview/index.jsx | 93 +++++ gz-customerSystem/src/views/register/closingReview/component/ReviewProgress.jsx | 95 +++++ gz-customerSystem/src/router/router.js | 3 9 files changed, 924 insertions(+), 0 deletions(-) diff --git a/gz-customerSystem/src/router/router.js b/gz-customerSystem/src/router/router.js index e130197..c6d277a 100644 --- a/gz-customerSystem/src/router/router.js +++ b/gz-customerSystem/src/router/router.js @@ -142,6 +142,8 @@ import HandleFeedback from "../views/register/handleFeedback"; //档案信息 import FileMessage from "../views/register/matterDetail/fileMessage"; +//结案审核 +import ClosingReview from "../views/register/closingReview"; import Test from "../views/test"; @@ -218,6 +220,7 @@ <Route path="visit/eventFlow" element={<EventFlow />} /> <Route path="visit/handleFeedback" element={<HandleFeedback />} /> <Route path="visit/fileMessage" element={<FileMessage />} /> + <Route path="visit/closingReview" element={<ClosingReview />}/> diff --git a/gz-customerSystem/src/views/register/closingReview/component/AssignedModel.jsx b/gz-customerSystem/src/views/register/closingReview/component/AssignedModel.jsx new file mode 100644 index 0000000..caf18e2 --- /dev/null +++ b/gz-customerSystem/src/views/register/closingReview/component/AssignedModel.jsx @@ -0,0 +1,130 @@ +import React, { useRef, useState } from 'react' +import { Row, Col } from 'antd'; +import { Form, Input, Button, Select } from '@arco-design/web-react'; +import ArcoUpload from '@/components/ArcoUpload'; +import { Scrollbars } from "react-custom-scrollbars"; +import SelectObjModal from '@/components/SelectObjModal/selectPerson'; + +const FormItem = Form.Item; +const TextArea = Input.TextArea; +const Option = Select.Option; +const options = ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen', 'Chengdu', 'Wuhan']; + +export default function BackModel(props) { + const formRef = useRef(); + const [isModalVisible, setIsModalVisible] = useState(false); + const [wantUser, setWantUser] = useState({}); + + const handleSubmit = () => { + formRef.current.validate(undefined, (errors, values) => { + console.log(errors, values); + }) + } + + const handleTemplate = (type) => { + if (type === 1) { + formRef.current.setFieldValue('trueName', '本事项经初步核实,认为属于贵部门职责范围内的矛盾纠纷化解工作。请组织专门人员负责此事,尽快查明事实真相,依法依规进行处理,并在处理过程中充分考虑当事人的合理诉求,确保公平公正,维护当事人的合法权益。同时,请务必保持与当事人的沟通畅通,及时反馈办理进展,以增强矛盾纠纷化解工作的透明度和公信力。') + } else { + formRef.current.setFieldValue('trueName', '') + } + } + + const handleFocus = (e) => { + e.stopPropagation() + setIsModalVisible(true) + } + + return ( + <div> + <Scrollbars style={{ height: '550px' }} autoHide> + <Form + ref={formRef} + layout='vertical' + requiredSymbol={false} + initialValues={{ + }}//默认值 + scrollToFirstError + > + <Row> + <Col span={24}> + <FormItem + label={(<div style={{ display: 'flex' }}>承办部门<div className="must">必填</div></div>)} + field='bumen' + > + <Select + mode='multiple' + placeholder='请选择承办部门' + allowClear + onFocus={handleFocus} + > + </Select> + </FormItem> + </Col> + <Col span={24}> + <FormItem + label={(<div style={{ display: 'flex' }}>配合部门<div style={{ color: '#86909C' }}>(可多选)</div></div>)} + field='peihe' + > + <Select + mode='multiple' + placeholder='请选择配合部门' + allowClear + > + {options.map((option) => ( + <Option key={option} value={option}> + {option} + </Option> + ))} + </Select> + </FormItem> + </Col> + <Col span={24} style={{ position: 'relative' }}> + <div style={{ position: 'absolute', display: 'flex ', top: '28px', zIndex: 1 }}> + <div className='myTag' style={{ marginRight: '22px' }} onClick={() => { handleTemplate(1) }}>公共模板1:通用上报意见范本</div> + <div className='myTag' onClick={() => { handleTemplate(2) }}>个人模板1:张三的交办意见范本</div> + </div> + <FormItem + label={(<div style={{ display: 'flex' }}>交办意见<div className="must">必填</div></div>)} + field='trueName' + rules={[{ required: true, message: '请选择回退理由' }]} + > + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder='请填写回退的具体理由' + style={{ marginTop: '40px' }} + /> + </FormItem> + </Col> + <Col span={24} className="doubleFile"> + <ArcoUpload + params={{ + action: ``, + }} + field='file' + label='附件材料' + /> + </Col> + </Row> + </Form> + </Scrollbars> + <div className='dialogFooter'> + <Button + type="primary" + className="dialogPrimary" + onClick={handleSubmit} + > + 提交 + </Button> + </div> + <SelectObjModal + visible={isModalVisible} + checkKeys={wantUser.wantUserId ? [{ label: wantUser.wantUserName, value: wantUser.wantUserId }] : undefined} + onOk={(value) => { + setIsModalVisible(false); + setWantUser({ wantUserId: value.keys[0], wantUserName: value.items[0].name }); + }} + onClose={() => setIsModalVisible(false)} + /> + </div> + ) +} \ No newline at end of file diff --git a/gz-customerSystem/src/views/register/closingReview/component/BackModel.jsx b/gz-customerSystem/src/views/register/closingReview/component/BackModel.jsx new file mode 100644 index 0000000..a353b0c --- /dev/null +++ b/gz-customerSystem/src/views/register/closingReview/component/BackModel.jsx @@ -0,0 +1,95 @@ +import React, { useRef } from 'react' +import { Row, Col } from 'antd'; +import { Form, Input, Button, Radio } from '@arco-design/web-react'; +import ArcoUpload from '@/components/ArcoUpload'; +import { Scrollbars } from "react-custom-scrollbars"; + +const RadioGroup = Radio.Group; +const FormItem = Form.Item; +const TextArea = Input.TextArea; + +export default function BackModel(props) { + const formRef = useRef(); + const options = [ + { + label: '不属于本部门的职能范围', + value: 1 + }, + { + label: '超出本部门管辖范围', + value: 2 + }, + { + label: '重复上报', + value: 3 + }, + { + label: '无法与当事人取得联系', + value: 4 + }, + { + label: '其他', + value: 5 + }, + ] + const handleSubmit = () => { + + } + return ( + <div> + <Scrollbars style={{ height: '550px' }} autoHide> + <Form + ref={formRef} + layout='vertical' + requiredSymbol={false} + initialValues={{ + }}//默认值 + scrollToFirstError + > + <Row> + <Col span={24}> + <FormItem + label={(<div style={{ display: 'flex' }}>回退理由<div className="must">必填</div></div>)} + field='trueName' + rules={[{ required: true, message: '请选择回退理由' }]} + > + <RadioGroup direction='vertical' options={options}> + </RadioGroup> + </FormItem> + </Col> + <Col span={24}> + <FormItem + label=' ' + field='luyou' + rules={[{ required: true, message: '回退理由不能为空' }]} + > + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder='请填写回退的具体理由' + /> + </FormItem> + </Col> + <Col span={24} className="doubleFile"> + <ArcoUpload + params={{ + action: ``, + }} + field='file' + label='附件材料' + /> + </Col> + </Row> + </Form> + </Scrollbars> + <div className='dialogFooter'> + <Button + type="primary" + className="dialogPrimary" + onClick={handleSubmit} + > + 提交 + </Button> + </div> + </div> + ) +} diff --git a/gz-customerSystem/src/views/register/closingReview/component/EscalationModel.jsx b/gz-customerSystem/src/views/register/closingReview/component/EscalationModel.jsx new file mode 100644 index 0000000..6ccf1a5 --- /dev/null +++ b/gz-customerSystem/src/views/register/closingReview/component/EscalationModel.jsx @@ -0,0 +1,91 @@ +import React, { useRef } from 'react' +import { Row, Col } from 'antd'; +import { Form, Input, Button } from '@arco-design/web-react'; +import ArcoUpload from '@/components/ArcoUpload'; +import { Scrollbars } from "react-custom-scrollbars"; +import { escalation } from '@/assets/images/icon'; + +const FormItem = Form.Item; +const TextArea = Input.TextArea; + +export default function BackModel(props) { + const formRef = useRef(); + + const handleSubmit = () => { + formRef.current.validate(undefined, (errors, values) => { + console.log(errors, values); + }) + } + + const handleTemplate = (type) => { + if(type === 1) { + formRef.current.setFieldValue('trueName', '经初步核查,该事项较为复杂,且涉及多个相关部门的协调配合,为确保能够高效、妥善地解决当事人的问题,特此请求上级给予指导和支持。') + } else { + formRef.current.setFieldValue('trueName', '') + } + } + + return ( + <div> + <Scrollbars style={{ height: '550px' }} autoHide> + <Form + ref={formRef} + layout='vertical' + requiredSymbol={false} + initialValues={{ + }}//默认值 + scrollToFirstError + > + <Row> + <Col span={24}> + <FormItem + label='上报至' + field='trueName' + > + <div className='myTag' > + <img src={escalation} alt="" className="title-file" />白云区综治中心 + </div> + </FormItem> + </Col> + <Col span={24} style={{ position: 'relative' }}> + <div style={{ position: 'absolute', display: 'flex ', top: '28px', zIndex: 1 }}> + <div className='myTag' style={{ marginRight: '22px' }} onClick={() => { handleTemplate(1) }}>公共模板1:通用上报意见范本</div> + <div className='myTag' onClick={() => { handleTemplate(2) }}>个人模板1:超过处置范围的上报意见</div> + </div> + <FormItem + label={(<div style={{ display: 'flex' }}>上报意见<div className="must">必填</div></div>)} + field='trueName' + rules={[{ required: true, message: '请选择回退理由' }]} + > + + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder='请填写回退的具体理由' + style={{ marginTop: '40px' }} + /> + </FormItem> + </Col> + <Col span={24} className="doubleFile"> + <ArcoUpload + params={{ + action: ``, + }} + field='file' + label='附件材料' + /> + </Col> + </Row> + </Form> + </Scrollbars> + <div className='dialogFooter'> + <Button + type="primary" + className="dialogPrimary" + onClick={handleSubmit} + > + 提交 + </Button> + </div> + </div> + ) +} \ No newline at end of file diff --git a/gz-customerSystem/src/views/register/closingReview/component/EventFlow.jsx b/gz-customerSystem/src/views/register/closingReview/component/EventFlow.jsx new file mode 100644 index 0000000..96ba746 --- /dev/null +++ b/gz-customerSystem/src/views/register/closingReview/component/EventFlow.jsx @@ -0,0 +1,184 @@ +import React, { useState, useRef, useEffect } from 'react'; +import { Button, Modal, Tabs, Badge } from '@arco-design/web-react'; +import { Space } from 'antd'; +import ProgressStep from '@/components/ProgressStep/VisitStep'; +import BackModel from "./BackModel"; +import { Scrollbars } from "react-custom-scrollbars"; +import { getOffset, getSize } from '@/utils/utility'; +import EscalationModel from './EscalationModel'; +import AssignedModel from './AssignedModel'; + +const TabPane = Tabs.TabPane; + +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: '李晓明' + }, +]; + +export default function EventFlow(props) { + const scrollRef = useRef(null) + const [backVisible, setBackVisible] = useState(false) + const [height, setHeight] = useState(500) + const [escalationVisible, setEscalationVisible] = useState(false) + const [assignedVisible, setAssignedVisible] = useState(false) + + useEffect(() => { + onWindowResize() + window.addEventListener("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) + }; + + 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> + + </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> + <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> + ) +} diff --git a/gz-customerSystem/src/views/register/closingReview/component/Examine.jsx b/gz-customerSystem/src/views/register/closingReview/component/Examine.jsx new file mode 100644 index 0000000..913bd84 --- /dev/null +++ b/gz-customerSystem/src/views/register/closingReview/component/Examine.jsx @@ -0,0 +1,186 @@ +import React, { useRef, useState } from 'react' +import { Row, Col, Space } from 'antd'; +import { link, register } from '@/assets/images'; +import { Form, Input, Button, Radio } from '@arco-design/web-react'; +import ArcoUpload from '@/components/ArcoUpload'; +import { Scrollbars } from "react-custom-scrollbars"; +import ReviewProgress from './ReviewProgress'; + +const RadioGroup = Radio.Group; +const FormItem = Form.Item; +const TextArea = Input.TextArea; + +export default function Examine(props) { + const formRef = useRef(); + const [result, setResult] = useState() + const infoData = { + result: '化解不成功', + time: '2024-7-21 12:00', + people: '白云区新市街市场监管所', + person: '张晓霞', + reason: '当事人拒绝参加调解,对调解工作极为抗拒', + opinion: `针对该事项,我部门高度重视并立即启动了调解程序。然而,在调解过程中遇到的主要困难是当事人李晓明未能积极配合我们的工作,具体表现为: + 1、拒绝提供必要的证据材料; + 2、不接听我们拨打的相关电话; + 3、拒绝到场参加任何调解行为 + 由于上述原因,我们目前无法进一步查清事实真相,也无法制定出切实可行的解决方案。为了保障当事人的合法权益得到维护,已引导当事人走司法途径,目前已在法院立案,特申请结案。`, + isProceeding: '是', + proceeding: '(粤)云调20240811号' + } + + const handleSubmit = () => { + + } + + return ( + <div className='dataSync'> + <div className='dataSync-noBackTabPage'> + <Scrollbars style={{ height: '100%' }} autoHide> + <div className='whiteBox'> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>结案申请</h5> + </Space> + <Row gutter={[16, 16]}> + <Col span={24}> + <div><div className="title-text">化解结果</div></div> + <div>{infoData?.result || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">无法化解理由</div></div> + <div>{infoData?.reason || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">结案意见</div></div> + <div>{infoData?.opinion || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">是否转诉讼案件</div></div> + <div>{infoData?.isProceeding || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">诉讼案号</div></div> + <div>{infoData?.proceeding || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">申请时间</div></div> + <div>{infoData?.time || '-'}</div> + </Col> + <Col span={24}> + <div><div className="title-text">申请人</div></div> + <div>{infoData?.people} {infoData?.person}<img src={register} alt="" className="title-register" /></div> + </Col> + </Row> + </div> + <div style={{ display: 'flex', marginTop: '8px' }}> + <div className='whiteBox' style={{ flex: 1, marginRight: '8px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>审核</h5> + </Space> + <Form + ref={formRef} + layout='vertical' + requiredSymbol={false} + initialValues={{ + }}//默认值 + scrollToFirstError + > + <Row> + <Col span={24}> + <FormItem + label={(<div style={{ display: 'flex' }}>审核结果</div>)} + field='result' + > + <RadioGroup + direction='vertical' + options={[ + { + label: '同意', + value: 1 + }, + { + label: '不同意', + value: 0 + }, + ]} + onChange={(v) => { setResult(v) }} + > + </RadioGroup> + </FormItem> + </Col> + {result === 0 && + <> + <Col span={24}> + <FormItem + label={(<div style={{ display: 'flex' }}>理由说明<div className="must">必填</div></div>)} + field='trueName' + rules={[{ required: true, message: '请选择理由说明' }]} + > + <RadioGroup direction='vertical' options={[ + { + label: '材料不完整', + value: '0' + }, + { + label: '办理流程有问题', + value: '1' + }, + { + label: '当事人不满意调解结果', + value: '2' + }, + { + label: '其他', + value: '3' + }, + ]}> + </RadioGroup> + </FormItem> + </Col> + <Col span={24}> + <FormItem + label=' ' + field='luyou' + rules={[{ required: true, message: '理由不能为空' }]} + > + <TextArea + autoSize={{ minRows: 4, maxRows: 8 }} + placeholder='请填写回退的具体理由' + /> + </FormItem> + </Col> + <Col span={24} className="doubleFile"> + <ArcoUpload + params={{ + action: ``, + }} + field='file' + label='附件材料' + /> + </Col> + </> + } + </Row> + </Form> + <div className='dialogFooter'> + <Button + type="primary" + className="dialogPrimary" + onClick={handleSubmit} + > + 提交 + </Button> + </div> + </div> + <div className='whiteBox' style={{ width: '400px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>审核进度</h5> + </Space> + <ReviewProgress /> + </div> + </div> + + </Scrollbars> + </div> + </div> + ) +} diff --git a/gz-customerSystem/src/views/register/closingReview/component/ReviewProgress.jsx b/gz-customerSystem/src/views/register/closingReview/component/ReviewProgress.jsx new file mode 100644 index 0000000..9ffec8f --- /dev/null +++ b/gz-customerSystem/src/views/register/closingReview/component/ReviewProgress.jsx @@ -0,0 +1,95 @@ +import React from 'react'; +import { register } from '@/assets/images'; + +export default function ReviewProgress(props) { + 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: '李晓明' + }, + ]; + return ( + <div className='reviewProgress'> + {fakeData.map((item, index) => { + const flag = index + 1 === fakeData.length + return <div style={{ display: 'flex' }}> + <div style={{ marginRight: '10px' }}> + <div className='reviewCircle' style={flag ? { borderColor: '#EF6C24' } : {}}></div> + {!flag && <div className='reviewLine'></div>} + </div> + <div> + <div className='deepTitle'>{item.handlerUserName}({item.taskNodeName})</div> + {!flag && + <> + <div className='shallowTitle'> + 操作人:<span>{item.operationName}<img src={register} alt="" className="title-register" /></span> + </div> + <div className='shallowTitle'> + 操作时间:<span>{item.mediResult}</span> + </div> + <div style={{ height: '34px' }}></div> + </> + } + </div> + </div> + + })} + + </div> + ) +} diff --git a/gz-customerSystem/src/views/register/closingReview/index.jsx b/gz-customerSystem/src/views/register/closingReview/index.jsx new file mode 100644 index 0000000..746f3ba --- /dev/null +++ b/gz-customerSystem/src/views/register/closingReview/index.jsx @@ -0,0 +1,93 @@ +/* + * @Author: dminyi 1301963064@qq.com + * @Date: 2024-08-09 09:59:43 + * @LastEditors: dminyi 1301963064@qq.com + * @LastEditTime: 2024-08-31 17:13:53 + * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\index.jsx + * @Description: 来访登记 + */ + +import React, { useState, useRef, Fragment } from "react"; +import NewPage from '@/components/NewPage'; +import * as $$ from '@/utils/utility'; +import "@arco-themes/react-gzzz/css/arco.css"; +import '../index.less'; +import { Steps, Tabs } from '@arco-design/web-react'; +import { examine, Matter, transfer } from '@/assets/images' +import EventFlow from './component/EventFlow'; +import MatterDetail from '../matterDetail'; +import Examine from "./component/Examine"; + +const Step = Steps.Step; +const TabPane = Tabs.TabPane; + + +const Organization = () => { + const [current, setCurrent] = useState(2); + const [tabsActive, setTabsActive] = useState('3'); + const [tabsList, setTabList] = useState([ + { + img: Matter, + label: '事项详情', + key: '1' + }, + { + img: transfer, + label: '流转办理', + key: '2', + isNeedStep: true,//加上这个就有进度条 + }, + { + img: examine, + label: '审核', + key: '3', + }, + ]) + + + return ( + <div style={{ position: 'relative' }}> + <NewPage + pageHead={ + { breadcrumbData: [{ title: '工作台' }, { title: '事件中心' }], title: '处理' } + } + > + <Tabs + activeTab={tabsActive} + onChange={(v) => setTabsActive(v)} + className='myTabContent' + > + {tabsList?.map(item => { + return <TabPane + key={item.key} + title={ + <span> + {tabsActive === item.key && <img src={item.img} alt="" style={{ width: '16px', height: '16px', margin: '-5px 12px 0px 0px' }} />} + <span style={{ fontSize: '16px' }}>{item.label}</span> + </span> + } + > + { + item.isNeedStep && <div style={{ backgroundColor: '#fff', margin: '0 16px 0px 16px', paddingTop: '16px', paddingLeft: '91px' }}> + <Steps type='navigation' current={current}> + <Step title='来访登记' disabled /> + <Step title='事件流转' disabled /> + <Step title='办理反馈' disabled /> + <Step title='结案审核' disabled /> + <Step title='当事人评价' disabled /> + <Step title='结案归档' disabled /> + </Steps> + </div> + } + {tabsActive === '1' && <MatterDetail />} + {tabsActive === '2' && <EventFlow />} + {tabsActive === '3' && <Examine />} + </TabPane> + })} + </Tabs> + </NewPage> + </div> + ) +} + +export default Organization; \ No newline at end of file diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less index 00d51b3..56881e5 100644 --- a/gz-customerSystem/src/views/register/index.less +++ b/gz-customerSystem/src/views/register/index.less @@ -493,6 +493,53 @@ margin: 16px -18px 0px -16px; } +.reviewProgress { + .reviewCircle { + width: 14px; + height: 14px; + border: 2px solid #3491fa; + border-radius: 50%; + margin-top: 4px; + } + + .reviewLine { + height: calc(100% - 19px); + width: 14px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + &::before { + content: ''; + height: 100%; + width: 1px; + background-color: #e5e6eb; + position: absolute; + left: 50%; + transform: translateX(-50%); + } + } + + .deepTitle { + font-size: 14px; + font-family: PingFang SC, PingFang SC-400; + font-weight: 400; + text-align: LEFT; + color: #1d2129; + line-height: 22px; + } + + .shallowTitle { + font-size: 14px; + font-family: PingFang SC, PingFang SC-400; + font-weight: 400; + text-align: LEFT; + color: #86909c; + line-height: 22px; + } +} + .Supervising { background: #ffffff; border: 1px solid #e5e6eb; -- Gitblit v1.8.0