From 0e851bfec21faa84a838bf0bab2f0a7de00e9b85 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Sat, 17 Aug 2024 17:13:47 +0800 Subject: [PATCH] 百度地图的引入+弹窗的修改+假数据的修改 --- gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 143 +++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 129 insertions(+), 14 deletions(-) diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx index f8413d3..6d50eca 100644 --- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx +++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef } from "react"; import { Row, Col, Space, Tooltip, Button } from 'antd'; -import { Form, Input, Radio, Select, DatePicker, Cascader, Modal, Upload } from '@arco-design/web-react'; +import { Form, Input, Radio, Select, DatePicker, Cascader, Modal, Upload, InputNumber } from '@arco-design/web-react'; import "@arco-design/web-react/dist/css/arco.css"; import MyModal from '../../../../components/MyModal'; import PersonCard from '../../../../components/personCard'; @@ -27,7 +27,7 @@ IconUpload, IconLink, } from '@arco-design/web-react/icon'; - +import MapView from './map' const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 const FormItem = Form.Item; @@ -108,6 +108,9 @@ const [fileView, setFileView] = useState(); const [selectedAddress, setSelectedAddress] = useState(''); const [fileTip, setFileTip] = useState('0'); + const [mapView, setMapView] = useState(false); + const formRef = useRef(); + const addressOptions = [ { label: '地址1', value: 'address1' }, @@ -132,7 +135,7 @@ const formType = (type) => { if (type === '09_01010-1') { - //自然人 + //申请材料 return ( <> <Col span={24}> @@ -148,17 +151,77 @@ height={158} onDrop={(e) => { }} - onChange={(v) => { v.length > 0 && setFileTip(v.length); console.log(v, 'vvvvvvv') }} + showUploadList={{ + // Please dont remove this comment + fileIcon: <IconLink style={{ color: '#1D2129' }} />, + }} + onChange={(v) => { + setFileTip((prevLength) => { + if (v.length > 0) { + console.log(v, 'vvvvvvv'); + return v.length; + } + return v.length; + }); + }} tip='支持png、 jpg、excel、word、pdf等格式的文件上传,每次上传大小不超过10M' /> </FormItem> - {fileTip && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 申请材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>} + {fileTip > 0 && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 申请材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>} + </Col> + </> + ) + } + if (type === '09_01010-2') { + //证据材料 + return ( + <> + <Col span={24}> + <FormItem + field='file' + + > + <Upload + drag + multiple + accept='image/*' + action='/' + height={158} + onDrop={(e) => { + }} + showUploadList={{ + // Please dont remove this comment + fileIcon: <IconLink style={{ color: '#1D2129' }} />, + }} + onChange={(v) => { + setFileTip((prevLength) => { + if (v.length > 0) { + console.log(v, 'vvvvvvv'); + return v.length; + } + return v.length; + }); + }} + tip='支持png、 jpg、excel、word、pdf等格式的文件上传,每次上传大小不超过10M' + /> + + </FormItem> + {fileTip > 0 && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 证据材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>} </Col> </> ) } } + + const formItemLayout = { + labelCol: { + span: 4, + }, + wrapperCol: { + span: 17, + }, + }; const peopleMap = { 0: '申请方', @@ -172,7 +235,7 @@ caseNo: 'A20230101', judicNo: '申请材料', perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '张三', + inputUserName: '0', mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', @@ -193,7 +256,7 @@ caseNo: 'A20230101', judicNo: '证据材料', perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '张三', + inputUserName: '0', mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', @@ -219,7 +282,7 @@ title: '序号', dataIndex: 'caseNo', key: 'caseNo', - width: 60, + width: 100, render: (text, record, index) => <span>{index + 1}</span>, }, { @@ -234,6 +297,12 @@ dataIndex: 'inputUserName', key: 'perClassName', width: 180, + render: (text) => ( + <> + {text}份 + </> + ) + }, { @@ -350,7 +419,7 @@ //添加申请人: 0、被申请人: 1、代理人: 2 const handleAdd = (type) => { - if(type === 2) { + if (type === 2) { setAgentVisible(true) } else { setAddVisabled(true) @@ -363,8 +432,13 @@ setSelectedAddress(value); }; + + + + return ( <div className='dataSync-page'> + <Col span={24} style={{ display: 'flex', alignItems: 'center' }}> <Space size='small'> <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5> @@ -418,7 +492,7 @@ </Col> <Col span={8}> <FormItem label='来访人数(人)' field='visitingNumber'> - <Input placeholder='请填写' /> + <InputNumber placeholder='请填写' /> </FormItem> </Col> <Col span={8}> @@ -463,6 +537,7 @@ placeholder='选择纠纷发生地的详细地址' searchButton='选择' readOnly={true} // 设置为只读,防止直接编辑 + onSearch={() => setMapView(true)} /> </FormItem> </Col> @@ -480,13 +555,13 @@ </Col> <Col span={8}> <FormItem label='涉及人数(人)' field='peopleNumber'> - <Input placeholder='请填写' /> + <InputNumber placeholder='请填写' /> </FormItem> </Col> <Col span={8}> <FormItem label='涉及金额(元)' field='money'> - <Input placeholder='请填写' /> + <InputNumber placeholder='请填写' /> </FormItem> </Col> <Col span={24}> @@ -577,7 +652,8 @@ > <Upload drag - multiple + // multiple + limit={1} accept='image/*' // action='/' onDrop={(e) => { @@ -701,8 +777,47 @@ > <AgentDialog /> </Modal> + <Modal style={{ width: '1200px' }} visible={mapView} onCancel={() => setMapView(false)} footer={null} title='选择纠纷发生地' centered> + <Row gutter={[16, 0]}> + <Col span={16}> + <Form + ref={formRef} + requiredSymbol={false} + layout='inline' + {...formItemLayout} + style={{ marginBottom: '8px' }} + > + <FormItem + label='查询位置:' + field='name' + onChange={(e) => console.log(e.target.value, 'vvv')} + > + <Input placeholder='请输入' style={{ width: '510px' }} /> + </FormItem> + <Button style={{ marginRight: '20px' }}> + 重置 + </Button> + <Button + type="primary" + // onClick={handleSave} + > + 查询 + </Button> + </Form> + <MapView /> + </Col> + <Col span={8}> + <div style={{ color: '#86909C', marginTop: '43px' }}>附近地址</div> + </Col> + + </Row> + </Modal> </div> ) } -export default VisitorRegister; \ No newline at end of file +export default VisitorRegister; + + + + -- Gitblit v1.8.0