From 3a2cd57a3ab0aee051da9dab313ab5a3706fc74d Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Sat, 07 Sep 2024 09:16:12 +0800 Subject: [PATCH] feat: 办理记录静态 --- gz-customerSystem/src/views/register/matterDetail/ApplyInfo.jsx | 161 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 158 insertions(+), 3 deletions(-) diff --git a/gz-customerSystem/src/views/register/matterDetail/ApplyInfo.jsx b/gz-customerSystem/src/views/register/matterDetail/ApplyInfo.jsx index 6baf619..9c3b5c6 100644 --- a/gz-customerSystem/src/views/register/matterDetail/ApplyInfo.jsx +++ b/gz-customerSystem/src/views/register/matterDetail/ApplyInfo.jsx @@ -1,9 +1,164 @@ -import React from 'react' +import React, { Fragment, useState } from 'react'; +import { register, downO, up, link } from '@/assets/images'; +import { Row, Col, Space } from 'antd'; export default function ApplyInfo(props) { + const [list, setList] = useState([ + { + appType: '上报申请', + time: '2024-7-12 10:00', + addr: '白云区新市街汇桥北社区委员会 ', + people: '李晓明', + status: 1, + statusName: '审核通过', + id: 1, + fileInfo: '上报至白云区综治中心的说明材料.pdf', + }, + { + appType: '结案申请', + time: '2024-7-12 10:00', + addr: '白云区新市街汇桥北社区委员会 ', + people: '李晓明', + status: 2, + statusName: '审核中', + id: 2, + }, + { + appType: '回退申请', + time: '2024-7-12 10:00', + addr: '白云区新市街汇桥北社区委员会 ', + people: '李晓明', + status: 3, + statusName: '审核不通过', + 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 => { + if (record.id === id) { + return { + ...record, + showView: !record.showView, + }; + } + return 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> - + <div style={{ margin: '0 16px' }}> + <div> + {list?.map(item => { + 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'> + <div className='applyInfoClass-title-txt'>{item.appType}</div> + <div className={`applyInfoClass-title-tag-${item.status}`} >{item.statusName}</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={{ marginRight: '8px' }}> + <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> ) } -- Gitblit v1.8.0