| | |
| | | import React, { useState, useEffect } from 'react'; |
| | | import { Row, Col, Space, Button, Switch } from 'antd'; |
| | | import PersonCard from '@/components/personCard'; |
| | | import TableView from '@/components/TableView'; |
| | | import * as $$ from '@/utils/utility'; |
| | | import { Typography, Steps } from '@arco-design/web-react'; |
| | | import { question, register, Matter, transfer } from '@/assets/images' |
| | | import { Typography } from '@arco-design/web-react'; |
| | | import { question, register } from '@/assets/images'; |
| | | import FileTable from "./FileTable"; |
| | | |
| | | function getCaseInfoApi(id) { |
| | | return $$.ax.request({ url: 'caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' }); |
| | | return $$.ax.request({ url: '/caseInfo/getCaseInfo?id=' + id, type: 'get', service: 'mediate' }); |
| | | } |
| | | |
| | | |
| | | export default function MatterDetail() { |
| | | const [fakeData, setFakeData] = useState([{ |
| | | "trueName": "王大锤", |
| | | "mobile": "13380313412", |
| | | "certiType": "09_00015-1", |
| | | "certiTypeName": "身份证", |
| | | "certiNo": "440981199902025123", |
| | | "perType": "15_020008-1", |
| | | "perClass": "09_01001-1", |
| | | "perTypeName": "申请方当事人", |
| | | "perClassName": "自然人", |
| | | "id": "24083010053310002" |
| | | }, { |
| | | "trueName": "刘俊峰", |
| | | "mobile": "13380313412", |
| | | "certiType": "09_00015-1", |
| | | "certiTypeName": "身份证", |
| | | "certiNo": "440981199902023234", |
| | | "perType": "15_020008-2", |
| | | "perClass": "09_01001-1", |
| | | "perTypeName": "被申请方当事人", |
| | | "perClassName": "自然人", |
| | | "id": "24083010054710003" |
| | | }]);//当事人信息数据 |
| | | const [upload, setUpLoad] = useState(false); |
| | | const [filesCheck, setFilesCheck] = useState(false); |
| | | export default function MatterDetail(props) { |
| | | const [fakeData, setFakeData] = useState([]);//当事人信息数据 |
| | | const [infoData, setInfoData] = useState({}); |
| | | |
| | | 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: 'mediateUserName', |
| | | key: 'mediateUserName', |
| | | 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>下载</div> |
| | | <div onClick={() => setUpLoad(true)}>上传</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 表示系列案 |
| | | // 更多字段... |
| | | }, |
| | | |
| | | // 更多数据... |
| | | ]; |
| | | useEffect(() => { |
| | | console.log(props); |
| | | getCaseInfo(props.caseId) |
| | | }, [props.caseId]) |
| | | |
| | | |
| | | //获取id |
| | | const getCaseInfo = async () => { |
| | | const res = await getCaseInfoApi('24083010062110001') |
| | | |
| | | const getCaseInfo = async (id) => { |
| | | const res = await getCaseInfoApi(props.caseId) |
| | | if (res.type) { |
| | | let data = res.data |
| | | const partyList = data.personList.concat(data.agentList) |
| | | setInfoData({ |
| | | ...data, |
| | | questionName: data.queProvName === null ? '-' : data.queProvName + '/' + data.queCityName + '/' + data.queAreaName + '/' + data.queRoadName + '/' + data.queVillageName, |
| | | questionName: data.queProvName === null ? '-' : data.queProvName + '/' + data.queCityName + '/' + data.queAreaName + '/' + data.queRoadName, |
| | | caseType: data.caseTypeFirstName === null ? '-' : data.caseTypeFirstName + '/' + data.caseTypeName |
| | | }) |
| | | setFakeData(data.personList.concat(data.agentList)) |
| | | setFakeData(partyList.map(item => { |
| | | const fileInfoList = item.fileInfoList |
| | | let file = [];//身份证明材料、企业登记材料 |
| | | let file1 = [];//法人、机构身份证明材料、代理人授权委托书 |
| | | if (fileInfoList && fileInfoList.length != 0) { |
| | | fileInfoList.forEach(item => { |
| | | if (item.ownerType == '22_00018-202' || item.ownerType == '22_00018-203') { |
| | | file.push({ |
| | | name: item.fileList[0].trueName, |
| | | uid: item.fileList[0].id, |
| | | }) |
| | | } |
| | | if (item.ownerType == '22_00018-204' || item.ownerType == '22_00018-207') { |
| | | file1.push({ |
| | | name: item.fileList[0].trueName, |
| | | uid: item.fileList[0].id, |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | return { |
| | | ...item, |
| | | file, |
| | | file1 |
| | | } |
| | | })) |
| | | } |
| | | |
| | | } |
| | | |
| | | |
| | | // useEffect(() => { |
| | | // getCaseInfo() |
| | | // }, []) |
| | | |
| | | return ( |
| | | <div style={{ position: 'relative' }}> |
| | | <Typography.Paragraph> |
| | | <div className='dataSync-page'> |
| | | <div className='dataSync-noScrollPage'> |
| | | |
| | | <Col span={24} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
| | | <Space size='small'> |
| | | <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5> |
| | | </Space> |
| | | <div> |
| | | {props.hasApplet && <div> |
| | | <Switch checkedChildren="当事人小程序可见" unCheckedChildren="当事人小程序不可见" defaultChecked /> |
| | | </div> |
| | | } |
| | | </Col> |
| | | <div style={{ margin: '16px 0' }}> |
| | | <PersonCard |
| | |
| | | data={fakeData} |
| | | /> |
| | | </div> |
| | | <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}> |
| | | <Col span={24} className='title'> |
| | | <Space size='small'> |
| | | <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5> |
| | | </Space> |
| | |
| | | </Col> |
| | | <Col span={16}> |
| | | <div className="title"><div className="title-text">是否重大矛盾纠纷</div></div> |
| | | <div>{infoData.majorStatus === '0' ? '否' : '是'}</div> |
| | | <div>{infoData.majorStatus === '1' ? '是' : '否'}</div> |
| | | </Col> |
| | | </Row> |
| | | <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}> |
| | |
| | | <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>事件材料</h5> |
| | | </Space> |
| | | </Col> |
| | | |
| | | <TableView |
| | | columns={fakeColumns} |
| | | dataSource={fakeData1} |
| | | size="small" |
| | | rowKey="id" |
| | | bordered={true} |
| | | style={{ marginBottom: '20px' }} |
| | | /> |
| | | <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 className="title"><div className="title-text">登记机构</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div> |
| | | <div>{infoData.inputUnitName || '-'}</div> |
| | | </Col> |
| | | <Col span={8}> |
| | | <div><div className="title-text">登记人</div></div> |
| | | <div style={{ display: 'flex' }}> |
| | | <div>{infoData.inputUserName || '-'}</div> |
| | | <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} /> |
| | | </div> |
| | | </Col> |
| | | <Col span={8}> |
| | | <div ><div className="title-text">登记时间</div></div> |
| | | <div>{infoData.createTime || '-'}</div> |
| | | </Col> |
| | | </Row> |
| | | <Button type='primary' style={{ marginTop: '20px' }}>修改</Button> |
| | | <FileTable mainId={props.caseId} fileInfoList={infoData.fileInfoList} isReview={true} /> |
| | | {infoData?.canal === '22_00001-1' && |
| | | <> |
| | | <Col span={24} style={{ marginTop: '12px' }}> |
| | | <Space size='small'> |
| | | <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>登记信息</h5> |
| | | </Space> |
| | | </Col> |
| | | <Row gutter={[16, 16]}> |
| | | {/*事项等级分为三级,颜色需要做判断*/} |
| | | <Col span={8}> |
| | | <div className="title"><div className="title-text">登记机构</div><img src={question} alt="" style={{ width: '14px', height: '14px', marginTop: '4px', marginLeft: '4px' }} /></div> |
| | | <div>{infoData.inputUnitName || '-'}</div> |
| | | </Col> |
| | | <Col span={8}> |
| | | <div><div className="title-text">登记人</div></div> |
| | | <div style={{ display: 'flex' }}> |
| | | <div>{infoData.inputUserName || '-'}</div> |
| | | <img src={register} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} /> |
| | | </div> |
| | | </Col> |
| | | <Col span={8}> |
| | | <div ><div className="title-text">登记时间</div></div> |
| | | <div>{infoData.createTime || '-'}</div> |
| | | </Col> |
| | | </Row> |
| | | </> |
| | | } |
| | | {/* {props.hasEditBtn && <Button type='primary' style={{ marginTop: '20px' }}>修改</Button>} */} |
| | | </div> |
| | | |
| | | </Typography.Paragraph> |