From 0485e2c28f0d62ec1026d385f992145b639a95ab Mon Sep 17 00:00:00 2001 From: liuwh <964324856@qq.com> Date: Sat, 07 Sep 2024 21:59:19 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master --- gz-customerSystem/src/views/register/matterDetail/fileMessage.jsx | 642 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 624 insertions(+), 18 deletions(-) diff --git a/gz-customerSystem/src/views/register/matterDetail/fileMessage.jsx b/gz-customerSystem/src/views/register/matterDetail/fileMessage.jsx index 7038876..2bb5a4f 100644 --- a/gz-customerSystem/src/views/register/matterDetail/fileMessage.jsx +++ b/gz-customerSystem/src/views/register/matterDetail/fileMessage.jsx @@ -1,8 +1,17 @@ -import React,{useState} from 'react'; +import React, { useState } from 'react'; import NewPage from '@/components/NewPage'; -import { Steps, Tabs } from '@arco-design/web-react'; -import {apply} from '@/assets/images'; -import {result} from '@/assets/images/icon'; +import { Row, Col, Space } from 'antd'; +import { Steps, Tabs, Typography, Rate,Button } from '@arco-design/web-react'; +import { apply } from '@/assets/images'; +import { result } from '@/assets/images/icon'; +import * as $$ from '@/utils/utility'; +import { ApplyDialog, AgentDialog, Respondent } from '../visit/component/previewTable'; +import TableView from '../../../components/TableView'; +import { register, fold, down, empty, link } from '@/assets/images'; +import ProgressStep from '@/components/ProgressStep/VisitStep'; + + + const Step = Steps.Step; const TabPane = Tabs.TabPane; @@ -11,20 +20,316 @@ const FileMessage = (props) => { const [tabsActive, setTabsActive] = useState('1'); - const [current, setCurrent] = useState(6); + const [current, setCurrent] = useState(7); + const [filesCheck, setFilesCheck] = useState(false); + const [infoData, setInfoData] = useState({}); const [tabsList, setTabList] = useState([ - { - img: result, - label: '档案信息', - key: '1' - }, - { - img: apply, - label: '申请记录', - key: '2', - isNeedStep: true,//加上这个就有进度条 - }, - ]) + { + img: result, + label: '档案信息', + key: '1', + isNeedStep: true + }, + { + img: apply, + label: '申请记录', + key: '2', + isNeedStep: true,//加上这个就有进度条 + }, + ]) + const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab + + + const tabs = [ + { index: '1', label: '承办部门' }, + { index: '2', label: '配合部门' }, + ]; + 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() - 11 * 60 * 60 * 1000, // 半天前的时间 + handleResult: '1', + status: '3', + 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: '李晓明' + }, + ]; + + const handleTabChange = (newTabIndex) => { + setSelectedTab(newTabIndex); + }; + + const applyDialog = [ + { + trueName: '李四', + perClassName: '高级', + phone: '13700137000', + sex: '女', + certiTypeName: '护照', + certiNo: 'G12345678', + nationName: '满', + addr: '上海市浦东新区某公寓2号楼2单元202室', + placeAddr: '上海市黄浦区某路3号', + extreme: '否', + workUnit: '上海某金融公司', + person: '/path/to/anotherPerson.jpg', // 这应该是图片的实际路径 + link: '/path/to/anotherLink.png', // 这应该是链接图标的实际路径 + } + // 可以根据需要添加更多的对象来模拟更多条目的数据 + ]; + + const agentDialog = [ + { + trueName: '王五', + perClassName: '自然人', + phone: '13600136000', + sex: '男', + certiTypeName: '身份证', + certiNo: '110101199501012345', + nationName: '汉', + addr: '广州市天河区某大厦A座501室', + placeAddr: '广州市越秀区某街4号', + extreme: '否', + workUnit: '广州某贸易公司', + agentRelateName: '配偶', + agentTypeName: '法定代理人', + perTypeName: '成年人', + person: '/path/to/person.jpg', // 应该是图片的实际路径 + link: '/path/to/link.png', // 应该是链接图标的实际路径 + }, + ]; + + const respondent = [ + { + orgaType: '广东好又多贸易有限公司', + perClassName: '企业法人', + phone: '020-12345678', + address: '广州市天河区珠江新城花城大道66号', + companyType: '有限责任公司', + legalPerson: '江照月', + creditCode: '914401011234567890', + president: '广州市天河区珠江新城花城大道66号A座20层', + link: '/path/to/link.png', // 应该是链接图标的实际路径 + }, + ]; + + const fakeColumns = [ + { + title: '序号', + dataIndex: 'caseNo', + key: 'caseNo', + width: 100, + render: (text, record, index) => <span>{index + 1}</span>, + }, + { + title: '材料类型', + dataIndex: 'judicNo', + key: 'judicNo', + width: 60, + + }, + { + title: '材料数量', + dataIndex: 'inputUserName', + key: 'perClassName', + width: 180, + render: (text) => ( + <> + {text}份 + </> + ) + + }, + { + title: '最新上传时间', + dataIndex: 'perClassName', + key: 'perClassName', + width: 180, + + }, + { + title: '操作', + dataIndex: 'perClassName', + key: 'perClassName', + width: 200, + render: (text) => ( + <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}> + <div onClick={() => setFilesCheck(true)}>查看</div> + <div>下载</div> + </div> + ) + }, + // 更多列配置... + ]; + const fakeData1 = [ + { + id: 1, + caseNo: 'A20230101', + judicNo: '申请材料', + perClassName: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + mediateUserName: '2024-7-12 12:00', + judgeName: '王五', + mediator: '赵六', + handlerUserName: '钱七', + returnUserName: '孙八', + expireTime: '2023-08-10T08:00:00.000Z', + processName: '进行中', + otherMediator: '周九', + canalName: '网络', + judicResult: '通过', + assistName: '吴十', + mediTypeName: '民事调解', + serieStatus: '1', // 1 表示非系列案,2 表示系列案 + // 更多字段... + }, + { + id: 2, + caseNo: 'A20230101', + judicNo: '证据材料', + perClassName: '李晓明的纠纷化解申请表、身份证...', + inputUserName: '0', + mediateUserName: '2024-7-12 12:00', + judgeName: '王五', + mediator: '赵六', + handlerUserName: '钱七', + returnUserName: '孙八', + expireTime: '2023-08-10T08:00:00.000Z', + processName: '进行中', + otherMediator: '周九', + canalName: '网络', + judicResult: '通过', + assistName: '吴十', + mediTypeName: '民事调解', + serieStatus: '1', // 1 表示非系列案,2 表示系列案 + // 更多字段... + }, + + // 更多数据... + ]; + const [records, setRecords] = useState([ + { + id: 1, + date: '2024 - 7 - 1 10:00', + location: '天河区棠下街综治中心', + remark: '配合部门', + showView: false, + details: [ + { + title: '操作人', + content: ( + <div style={{ display: 'flex' }}> + <div>李晓明</div> + <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} /> + </div> + ), + }, + { + title: '办理意见', + content: ( + <div> + 调解开始,我首先安抚双方情绪,确保对话在一个平和的氛围中展开。随后,我引导王先生详细说明了他的财务困境及还款意愿,同时让银行代表理解其处境,强调长期合作的重要性。经过反复沟通,银行同意调整还款计划,降低利率,并给予王先生一定的宽限期。王先生则承诺按新计划履行还款义务,双方最终达成一致,签署了调解协议。 + </div> + ), + }, + { + title: '办理附件', + content: ( + <a href="your-link-here.html" target="_blank"> + <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf + </a> + ), + }, + ], + }, + { + id: 2, + date: '2024 - 7 - 2 14:00', + location: '天河区天河南街道办事处', + remark: '承办部门', + showView: false, + details: [ + { + title: '操作人', + content: ( + <div style={{ display: 'flex' }}> + <div>张伟</div> + <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} /> + </div> + ), + }, + { + title: '办理意见', + content: ( + <div> + 在本次协调会议中,我们成功解决了双方之间的纠纷,确保了所有参与方的利益得到了妥善处理。通过深入交流,各方达成了共识,同意采取一系列措施来解决现存的问题。 + </div> + ), + }, + { + title: '办理附件', + content: '广州市天河区天河南路200号', + }, + ], + }, + ]); + const toggleView = (id) => { + setRecords(records.map(record => { + if (record.id === id) { + return { + ...record, + showView: !record.showView, + }; + } + return record; + })); + }; + + + + + return ( @@ -62,7 +367,308 @@ </div> } {tabsActive === '1' && - <></> + <> + <div style={{ backgroundColor: '#ffff', margin: '8px 8px 0px 16px', padding: '12px 18px 16px 16px', height: 'calc(100vh - 278px)', overflowY: 'scroll' }}> + <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人信息</h4> + </Space> + </Col> + + <div style={{ marginBottom: '8px' }}>申请方</div> + <div className="line-container" style={{ marginBottom: '20px' }}> + <div className="line left-line"></div> + <div className="line middle-line"></div> + <div className="line right-line"></div> + </div> + <ApplyDialog applyDialog={applyDialog} /> + <AgentDialog agentDialog={agentDialog} /> + <div style={{ marginBottom: '8px' }}>被申请方</div> + <div className="line-container" style={{ marginBottom: '20px' }}> + <div className="line left-line"></div> + <div className="line middle-line"></div> + <div className="line right-line"></div> + </div> + <Respondent respondent={respondent} /> + <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5> + </Space> + </Col> + <Row gutter={[16, 16]}> + <Col span={8}> + <div><div className="title-text">事项状态</div></div> + <div style={{ color: '#1A6FB8' }}>{infoData?.statusName || '-'}</div> + </Col> + <Col span={16}> + <div><div className="title-text">事项编号</div></div> + <div>{infoData?.caseRef || '-'}</div> + </Col> + {/*事项等级分为三级,颜色需要做判断*/} + <Col span={8}> + <div className="title"><div className="title-text">事项等级</div></div> + <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#00B42A', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>{infoData.caseLevel || '-'}</div></div>级</div> + </Col> + <Col span={8}> + <div><div className="title-text">来访时间</div></div> + <div>{infoData.visitTime || '-'}</div> + </Col> + <Col span={8}> + <div ><div className="title-text">来访人数(人)</div></div> + <div>{infoData.visitPeopleNum || '-'}</div> + </Col> + <Col span={8}> + <div ><div className="title-text">纠纷类型</div></div> + <div>{infoData.caseType || '-'}</div> + </Col> + <Col span={8}> + <div ><div className="title-text">纠纷发生时间</div></div> + <div>{infoData.occurTime || '-'}</div> + </Col> + <Col span={8}> + <div ><div className="title-text">纠纷发生地点</div></div> + <div>{infoData.addr || '-'}</div> + </Col> + <Col span={8}> + <div ><div className="title-text">问题属地</div></div> + <div>{infoData.questionName || '-'}</div> + </Col> + <Col span={8}> + <div ><div className="title-text">涉及人数(人)</div></div> + <div>{infoData.peopleNum || '-'}</div> + </Col> + <Col span={8}> + <div ><div className="title-text">涉及金额(元)</div></div> + <div>{$$.thousands(infoData.amount) || '-'}</div> + </Col> + <Col span={8}> + <div ><div className="title-text">事项来源</div></div> + <div>{infoData.canalName || '-'}</div> + </Col> + <Col span={16}> + <div ><div className="title-text">来访形式</div></div> + <div>{infoData.visitWayName || '-'}</div> + </Col> + <Col span={24}> + <div className="title"><div className="title-text">事项概况</div></div> + <div>{infoData.caseDes || '-'}</div> + </Col> + <Col span={24}> + <div className="title"><div className="title-text">事项申请</div></div> + <div>{infoData.caseClaim || '-'}</div> + </Col> + <Col span={16}> + <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div> + <div>{infoData.majorStatus === '0' ? '否' : '是'}</div> + </Col> + </Row> + <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', marginTop: '20px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>办理结果</h4> + </Space> + </Col> + <table border="1" align="center" cellpadding="8" className="table" > + <tr> + <th bgcolor="#F7F8FA" className="table-title" width="120">化解结果</th> + <td width='380'>化解成功</td> + <th bgcolor="#F7F8FA" className="table-title" width="120">经办人</th> + <td width='380'>李晓明</td> + </tr> + <tr> + <th bgcolor="#F7F8FA" className="table-title">承办部门</th> + <td>天河区棠下街综治中心</td> + <th bgcolor="#F7F8FA" className="table-title">配合部门</th> + <td>-</td> + </tr> + <tr> + <th bgcolor="#F7F8FA" className="table-title" width="120">受理时间</th> + <td width='380'>2024-7-1 10:00</td> + <th bgcolor="#F7F8FA" className="table-title" width="120">办结时间</th> + <td width='380'>2024-7-15 11:45</td> + </tr> + <tr> + <th bgcolor="#F7F8FA" className="table-title" width="120">办理意见</th> + <td width='380' colspan='3'>调解开始,我首先安抚双方情绪,确保对话在一个平和的氛围中展开。随后,我引导被申请人详细说明了他的财务困境及还款意愿,同时让银行代表理解其处境,强调长期合作的重要性。经过反复沟通,被申请人理解了自身行为给申请人带来的不便,在相关证据的出示下,被申请人同意了申请方的申请请求,双方最终达成一致,签署了调解协议。</td> + </tr> + <tr> + <th bgcolor="#F7F8FA" className="table-title" width="120">协议要点</th> + <td width='380' colspan='3'>经过协商,李女士同意承担主要维修费用,但考虑到水管老化属自然磨损,张先生也表示愿意承担一小部分费用以示友好特申请结案。</td> + </tr> + <tr> + <th bgcolor="#F7F8FA" className="table-title" width="120">结案意见</th> + <td width='380' colspan='3'>考虑到事项已经得到平息,过程材料也都比较完善,现申请结案</td> + </tr> + <tr> + <th bgcolor="#F7F8FA" className="table-title" width="120">协议文书</th> + <td colspan='3'> + <a href="your-link-here.html" target="_blank"> + <img src={link} alt="" className="title-file" />申请人张三丰的人民调解协议书.pdf + </a> + </td> + </tr> + </table> + <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '16px', marginTop: '20px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>事件材料</h4> + </Space> + </Col> + <TableView + columns={fakeColumns} + dataSource={fakeData1} + size="small" + rowKey="id" + bordered={true} + style={{marginBottom:'16px'}} + /> + <div className='gap'></div> + <Col span={24} style={{marginTop:'12px'}}> + <div style={{ color: 'rgb(134, 144, 156)' }}>办理记录</div> + <div> + {records.map(record => ( + <div key={record.id} className='container-bottom-left-record'> + <div className='container-bottom-left-record-top'> + { + record.showView ? ( + <img src={down} alt='' style={{ width: '18px', marginRight: '6px' }} onClick={() => toggleView(record.id)} /> + ) : ( + <img src={fold} alt='' className='container-bottom-left-record-top-icon' onClick={() => toggleView(record.id)} /> + ) + } + <div>{`${record.date} ${record.location}`}</div> + <div className={`container-bottom-left-record-top-${record.remark === '配合部门' ? 'remark' : 'hostOrg'}`}>{record.remark}</div> + </div> + <div className='container-bottom-left-record-bottom' style={{ display: record.showView ? 'block' : 'none' }}> + <table border="1" cellpadding="8" className='container-bottom-left-record-bottom-table'> + {record.details.map(detail => ( + <tr key={detail.title}> + <th bgcolor="#F7F8FA" className="table-title" width="120">{detail.title}</th> + <td>{detail.content}</td> + </tr> + ))} + </table> + </div> + </div> + ))} + </div> + </Col> + <div className='gap'></div> + <div style={{ marginLeft: '-16px' }}> + <Tabs defaultActiveTab='1'> + <TabPane + key='1' + title={ + <span style={{ fontSize: '15px' }}> + 流转进度 + </span> + } + > + <Typography.Paragraph> + <div style={{ display: 'flex', marginLeft: '16px', gap: '16px' }}> + {tabs.map((tab) => ( + <div + key={tab.index} + style={{ + color: selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(0,0,0,0.45)', + padding: '6px 12px', + border: `1px solid ${selectedTab === tab.index ? 'rgba(26,111,184,1)' : 'rgba(229,230,235,1)'}`, + borderRadius: '4px', + cursor: 'pointer', + }} + onClick={() => handleTabChange(tab.index)} + > + {tab.label} + </div> + ))} + </div> + {selectedTab === '1' && + <div className='progress'> + <ProgressStep progressData={fakeData} /> + </div> + } + </Typography.Paragraph> + </TabPane> + <TabPane + key='2' + title={ + <span style={{ fontSize: '15px' }}> + 督办信息 + </span> + } + > + <Typography.Paragraph>Content of Tab Panel 2</Typography.Paragraph> + </TabPane> + </Tabs> + + </div> + <div className='gap'></div> + <Col span={24} style={{ display: 'flex', alignItems: 'center', margin:'12px 0px 4px 0px'}}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>当事人评价</h4> + </Space> + </Col> + <Row gutter={[16, 16]}> + <Col span={8}> + <div className="title"> + <div className="title-text">评价等级</div> + </div> + <div style={{ display: 'flex' }}><Rate defaultValue={3} disabled /></div> + </Col> + <Col span={8}> + <div className="title"> + <div className="title-text">评价时间</div> + </div> + <div>2024-8-1 12:00</div> + </Col> + <Col span={8}> + <div className="title"> + <div className="title-text">评价人</div> + </div> + <div>张梦雨</div> + </Col> + <Col span={12}> + <div className="title"> + <div className="title-text">评语</div> + </div> + <div>实名表扬天河区棠下街综治中心,真的很有耐心处置我提出的问题,得到满意的答复。</div> + </Col> + </Row> + <div className='gap'></div> + <Col span={24} style={{ display: 'flex', alignItems: 'center', margin:'12px 0px 4px 0px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>登记信息</h4> + </Space> + </Col> + <Row gutter={[16, 16]} style={{marginBottom:'90px'}}> + <Col span={8}> + <div className="title"> + <div className="title-text">登记机构</div> + </div> + <div>天河区棠下街道综治中心</div> + </Col> + <Col span={8}> + <div className="title"> + <div className="title-text">登记人</div> + </div> + <div> + 李晓明 + <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} /> + </div> + </Col> + <Col span={8}> + <div className="title"> + <div className="title-text">登记时间</div> + </div> + <div>2024-7-8 10:00</div> + </Col> + </Row> + </div> + <div className="dataSync-excel"> + <Space size="large" style={{ margin: '4px 14px' }}> + <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} >导出</Button> + <Button type='secondary'>返回上级页面</Button> + </Space> + </div> + </> } { tabsActive === '2' && -- Gitblit v1.8.0