| | |
| | | * @Author: dminyi 1301963064@qq.com |
| | | * @Date: 2024-08-13 15:19:57 |
| | | * @LastEditors: dminyi 1301963064@qq.com |
| | | * @LastEditTime: 2024-08-14 14:59:10 |
| | | * @LastEditTime: 2024-08-16 17:09:12 |
| | | * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx |
| | | * @Description: 预览信息 |
| | | */ |
| | | import React from "react"; |
| | | import React, { useState } from "react"; |
| | | import { Row, Col, Space } from 'antd'; |
| | | import { person, question, link } from '../../../assets/images' |
| | | import '../index.less'; |
| | | import TableView from '../../../components/TableView'; |
| | | import { Modal } from '@arco-design/web-react'; |
| | | import FilesCheck from '../../filesCheck'; |
| | | import * as $$ from '../../../utils/utility'; |
| | | |
| | | |
| | | |
| | | const Preview = () => { |
| | | const [filesCheck, setFilesCheck] = useState(false); |
| | | |
| | | const fakeColumns = [ |
| | | { |
| | | title: '序号', |
| | | dataIndex: 'caseNo', |
| | | key: 'caseNo', |
| | | }, |
| | | { |
| | | title: '材料类型', |
| | | dataIndex: 'judicNo', |
| | | key: 'judicNo', |
| | | }, |
| | | { |
| | | title: '材料数量', |
| | | dataIndex: 'perClassName', |
| | | key: 'perClassName', |
| | | }, |
| | | { |
| | | title: '材料名称', |
| | | dataIndex: 'perClassName', |
| | | key: 'perClassName', |
| | | }, |
| | | { |
| | | title: '上传时间', |
| | | dataIndex: 'perClassName', |
| | | key: 'perClassName', |
| | | }, |
| | | { |
| | | title: '操作', |
| | | dataIndex: 'perClassName', |
| | | key: 'perClassName', |
| | | render: (text) => ( |
| | | <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}> |
| | | <div>查看</div> |
| | | <div>删除</div> |
| | | <div>下载</div> |
| | | <div>上传</div> |
| | | </div> |
| | | ) |
| | | }, |
| | | // 更多列配置... |
| | | ]; |
| | | |
| | | const fakeData1 = [ |
| | | { |
| | | id: 1, |
| | | caseNo: 'A20230101', |
| | | judicNo: 'J20230101', |
| | | perClassName: '自然人', |
| | | judicNo: '申请材料', |
| | | perClassName: '李晓明的纠纷化解申请表、身份证...', |
| | | inputUserName: '张三', |
| | | mediateUserName: '李四', |
| | | mediateUserName: '2024-7-12 12:00', |
| | | judgeName: '王五', |
| | | mediator: '赵六', |
| | | handlerUserName: '钱七', |
| | |
| | | serieStatus: '1', // 1 表示非系列案,2 表示系列案 |
| | | // 更多字段... |
| | | }, |
| | | { |
| | | id: 2, |
| | | caseNo: 'A20230101', |
| | | judicNo: '证据材料', |
| | | perClassName: '李晓明的纠纷化解申请表、身份证...', |
| | | inputUserName: '张三', |
| | | 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 fakeColumns = [ |
| | | { |
| | | title: '序号', |
| | | dataIndex: 'caseNo', |
| | | key: 'caseNo', |
| | | width: 60, |
| | | render: (text, record, index) => <span>{index + 1}</span>, |
| | | }, |
| | | { |
| | | title: '材料类型', |
| | | dataIndex: 'judicNo', |
| | | key: 'judicNo', |
| | | width: 60, |
| | | |
| | | }, |
| | | { |
| | | title: '材料数量', |
| | | dataIndex: 'inputUserName', |
| | | key: 'perClassName', |
| | | width: 180, |
| | | |
| | | }, |
| | | { |
| | | 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> |
| | | ) |
| | | }, |
| | | // 更多列配置... |
| | | ]; |
| | | |
| | | |
| | | return ( |
| | |
| | | <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>3级</div> |
| | | <div style={{ display: 'flex' }}><div style={{ backgroundColor: '#1A6FB8', marginRight: '4px', borderRadius: '4px' }}><div style={{ color: '#FFFFFF', padding: '0px 6px' }}>3</div></div>级</div> |
| | | </Col> |
| | | <Col span={8}> |
| | | <div><div className="title-text">来访时间</div></div> |
| | |
| | | </Col> |
| | | <Col span={8}> |
| | | <div ><div className="title-text">涉及金额(元)</div></div> |
| | | <div>20,000</div> |
| | | <div>{$$.thousands(20000)}</div> |
| | | </Col> |
| | | <Col span={8}> |
| | | <div ><div className="title-text">事项来源</div></div> |
| | |
| | | <div>否</div> |
| | | </Col> |
| | | </Row> |
| | | <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', marginTop: '20px' }}> |
| | | <Space size='small'> |
| | | <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: '60px' }} |
| | | style={{ marginBottom: '65px' }} |
| | | /> |
| | | |
| | | <Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered> |
| | | <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> |
| | | <FilesCheck /> |
| | | </div> |
| | | </Modal> |
| | | |
| | | |
| | | </div> |
| | | ) |
| | | } |