| | |
| | | import React, { Fragment, useState } from 'react'; |
| | | import { register, downO, up } from '@/assets/images'; |
| | | import { register, downO, up, link } from '@/assets/images'; |
| | | import { Row, Col, Space } from 'antd'; |
| | | |
| | | export default function ApplyInfo(props) { |
| | | const [list, setList] = useState([ |
| | |
| | | status: 1, |
| | | statusName: '审核通过', |
| | | id: 1, |
| | | fileInfo: '上报至白云区综治中心的说明材料.pdf', |
| | | }, |
| | | { |
| | | appType: '上报申请', |
| | | appType: '结案申请', |
| | | time: '2024-7-12 10:00', |
| | | addr: '白云区新市街汇桥北社区委员会 ', |
| | | people: '李晓明', |
| | |
| | | id: 2, |
| | | }, |
| | | { |
| | | appType: '上报申请', |
| | | appType: '回退申请', |
| | | time: '2024-7-12 10:00', |
| | | addr: '白云区新市街汇桥北社区委员会 ', |
| | | people: '李晓明', |
| | |
| | | id: 3, |
| | | } |
| | | ]); |
| | | |
| | | const map = { |
| | | '上报申请': [ |
| | | [{ |
| | | value: 'subTitle', |
| | | label: '申请信息', |
| | | }, |
| | | { |
| | | value: 'bumen', |
| | | label: '上报至', |
| | | }, |
| | | { |
| | | value: 'opinion', |
| | | label: '上报意见', |
| | | }, |
| | | { |
| | | value: 'fileInfo', |
| | | label: '附件材料', |
| | | }, |
| | | { |
| | | value: 'shijian', |
| | | label: '申请时间', |
| | | }, |
| | | { |
| | | value: 'people', |
| | | label: '申请人', |
| | | }, |
| | | ], |
| | | [ |
| | | { |
| | | value: 'subTitle', |
| | | label: '审核信息', |
| | | }, |
| | | { |
| | | value: 'statusName', |
| | | label: '审核结果', |
| | | color: '#00B42A' |
| | | }, |
| | | { |
| | | value: 'people', |
| | | label: '理由说明', |
| | | }, |
| | | { |
| | | value: 'fileInfo', |
| | | label: '附件材料', |
| | | }, |
| | | { |
| | | value: 'shijian', |
| | | label: '审核时间', |
| | | }, |
| | | { |
| | | value: 'people', |
| | | label: '审核人', |
| | | }, |
| | | ] |
| | | ] |
| | | } |
| | | |
| | | const toggleView = (id) => { |
| | | setList(list.map(record => { |
| | |
| | | })); |
| | | }; |
| | | |
| | | const handleDom = (data, item) => { |
| | | console.log(data); |
| | | if (data.value === 'subTitle') { |
| | | return <Col span={24} key={data.value}> |
| | | <Space size='small'> |
| | | <div className='MediationInfo-subTitle' style={{ marginTop: '-8px' }}></div><h5>{data.label}</h5> |
| | | </Space> |
| | | </Col> |
| | | } else if (data.label === '附件材料') { |
| | | return <Col span={24} key={data.value}> |
| | | <div><div className="title-text">{data.label}</div></div> |
| | | <div style={{ color: '#1A6FB8' }}><img src={link} alt="" className="title-file" />{item[data.value] || '-'}</div> |
| | | </Col> |
| | | } else { |
| | | return <Col span={24} key={data.value}> |
| | | <div><div className="title-text">{data.label}</div></div> |
| | | <div style={{ color: data.color }}>{item[data.value] || '-'}</div> |
| | | </Col> |
| | | } |
| | | } |
| | | |
| | | return ( |
| | | <div style={{ margin: '0 16px' }}> |
| | | <div> |
| | | {list?.map(item => { |
| | | return <div className='applyInfoClass'> |
| | | return <div className='applyInfoClass' style={{ background: item.showView ? '#eff8ff' : '#fff' }} key={item.id}> |
| | | <div className='applyInfoClass-img' onClick={() => { toggleView(item.id) }}> |
| | | <img src={item.showView ? up : downO} alt="" className="title-downUp" /> |
| | | </div> |
| | |
| | | <div className='applyInfoClass-title-txt'>{item.appType}</div> |
| | | <div className={`applyInfoClass-title-tag-${item.status}`} >{item.statusName}</div> |
| | | </div> |
| | | <div> |
| | | {item.showView ? <div> |
| | | { |
| | | map[item.appType]?.map((res, index) => { |
| | | return <Row gutter={[16, 16]} key={index}> |
| | | {res.map(data => { |
| | | return handleDom(data, item) |
| | | })} |
| | | </Row> |
| | | }) |
| | | } |
| | | </div> : <div> |
| | | <span style={{ marginRight: '32px' }}> |
| | | <span style={{ color: '#86909C' }}>申请时间:</span><span>{item.time}</span> |
| | | </span> |
| | |
| | | <span style={{ color: '#86909C' }}>申请人:</span><span>{item.addr}</span> |
| | | </span> |
| | | <span><span>{item.people}<img src={register} alt="" className="title-register" /></span></span> |
| | | </div> |
| | | </div>} |
| | | |
| | | </div> |
| | | })} |
| | | </div> |