| | |
| | | import React, { useState, useEffect, useRef } from "react"; |
| | | import { Row, Col, Space, Tooltip, Button } from 'antd'; |
| | | 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 PersonCard from '../../../../components/personCard'; |
| | | import * as $$ from '../../../../utils/utility'; |
| | | import PersonCard from '@/components/personCard'; |
| | | import * as $$ from '@/utils/utility'; |
| | | import { |
| | | question1, |
| | | applyMaterials, |
| | |
| | | evidenceMaterials, |
| | | evidenceMaterials_active, |
| | | |
| | | } from '../../../../assets/images'; |
| | | } from '@/assets/images'; |
| | | import { CheckOutlined, } from '@ant-design/icons'; |
| | | import "@arco-design/web-react/dist/css/arco.css"; |
| | | import TableView from '../../../../components/TableView'; |
| | | import TableView from '@/components/TableView'; |
| | | import '../../index.less'; |
| | | import ApplyDialog from "./applyDialog"; |
| | | import AgentDialog from "./agentDialog"; |
| | | import DetailDialog from "./detailDialog"; |
| | | import ApplyDialog from "./ApplyDialog"; |
| | | import AgentDialog from "./AgentDialog"; |
| | | import DetailDialog from "./DetailDialog"; |
| | | import FilesCheck from '../../../filesCheck'; |
| | | import NewFileCheck from '../../../filesCheck/newFileCheck'; |
| | | import { IconLink } from '@arco-design/web-react/icon'; |
| | | import MapView from './map' |
| | | import MapView from './Map' |
| | | import { scan } from '@/assets/images/icon' |
| | | import MyDrawer from '@/components/MyDrawer'; |
| | | import { EventLevelDrawer, MattersDetail } from './LevelDetail' |
| | | |
| | | const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 |
| | | const FormItem = Form.Item; |
| | |
| | | const [fileTip, setFileTip] = useState('0'); |
| | | const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制 |
| | | const [mapView, setMapView] = useState(false); |
| | | const [flagId, setFlagId] = useState(0);//赋予当事人唯一id,用于删除 |
| | | const formRef = useRef(); |
| | | |
| | | const [flagId, setFlagId] = useState(1);//赋予当事人唯一id,用于删除 |
| | | const [visible, setVisible] = useState(false); |
| | | const [apply, setApply] = useState(false); |
| | | const [editData, setEditData] = useState(null); |
| | | |
| | | const addressOptions = [ |
| | | { label: '地址1', value: 'address1' }, |
| | |
| | | |
| | | }, |
| | | { |
| | | title: '上传时间', |
| | | title: '最新上传时间', |
| | | dataIndex: 'mediateUserName', |
| | | key: 'mediateUserName', |
| | | width: 180, |
| | |
| | | |
| | | //添加当事人 |
| | | const handleAddParty = (value) => { |
| | | console.log(value); |
| | | setFakeData([...fakeData, { |
| | | ...value, |
| | | id: flagId |
| | | }]) |
| | | setFlagId(flagId + 1) |
| | | console.log(value,'value1'); |
| | | if (value.id) { |
| | | //编辑 |
| | | const newList = fakeData.map(item => { |
| | | if (item.id === value.id) { |
| | | return value |
| | | } else { |
| | | return item |
| | | } |
| | | }) |
| | | setFakeData(newList) |
| | | setEditData(null) |
| | | } else { |
| | | setFakeData([...fakeData, { |
| | | ...value, |
| | | id: flagId |
| | | }]) |
| | | setFlagId(flagId + 1) |
| | | } |
| | | } |
| | | |
| | | //删除当事人 |
| | |
| | | setFakeData(filterData) |
| | | } |
| | | |
| | | //编辑 |
| | | const handleEdit = (value) => { |
| | | console.log(value); |
| | | if (value.partyType === 0 || value.partyType === 1) { |
| | | //当事人 |
| | | setAddVisabled(true) |
| | | } else { |
| | | //代理人 |
| | | setAgentVisible(true) |
| | | } |
| | | setEditData(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> |
| | | <div className='MediationInfo-subTitle' style={{ marginTop: '-9px', }}></div><h4>当事人信息</h4> |
| | | </Space> |
| | | </Col> |
| | | <div style={{ margin: '16px 0' }}> |
| | |
| | | handleCheckParty={handleCheckParty} |
| | | handleAdd={handleAdd} |
| | | handleDeleteParty={handleDeleteParty} |
| | | handleEdit={handleEdit} |
| | | /> |
| | | </div> |
| | | <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}> |
| | | <Space size='small'> |
| | | <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>纠纷基本情况</h5> |
| | | <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>纠纷基本情况</h4> |
| | | </Space> |
| | | </Col> |
| | | <Form |
| | |
| | | > |
| | | <Row gutter={[32, 0]}> |
| | | <Col span={8}> |
| | | <FormItem label='事项等级' field='level' tooltip={<div className='question'>Username is required </div>} > |
| | | <FormItem label={<div style={{ display: 'flex' }}> |
| | | 事项等级 |
| | | <Tooltip onClick={() => setApply(true)}> |
| | | <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} /> |
| | | </Tooltip> |
| | | </div> |
| | | } |
| | | field='level' > |
| | | <Select placeholder='Select city' allowClear> |
| | | {['一级', '二级', '三级', '四级'].map((option, index) => ( |
| | | <Option key={option} value={option}> |
| | |
| | | <FormItem |
| | | label={<div style={{ display: 'flex' }}> |
| | | 事项概况 |
| | | <Tooltip title='1111'> |
| | | <img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} /> |
| | | <Tooltip onClick={() => setVisible(true)}> |
| | | <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} /> |
| | | </Tooltip> |
| | | <div className="must">必填</div> |
| | | <div className="must" style={{ marginLeft: '4px' }}>必填</div> |
| | | <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} /> |
| | | <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div> |
| | | </div> |
| | | } |
| | |
| | | maxLength={2000} |
| | | showWordLimit |
| | | rows={5} |
| | | placeholder='请填写问题发生的起因、过程和结果' |
| | | placeholder='请完整描述事项概况,应具备5要素:发生时间+发生地点+人物情况+事项起因+事项经过' |
| | | wrapperStyle={{ width: '100%' }} |
| | | /> |
| | | </FormItem> |
| | |
| | | <FormItem |
| | | label={<div style={{ display: 'flex' }}> |
| | | 申请请求 |
| | | <Tooltip title='1111'> |
| | | <img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} /> |
| | | </Tooltip> |
| | | {/* <Tooltip onClick={() => setApply(true)}> |
| | | <img src={question1} alt="" style={{ width: '13px', height: '13px', margin:'4px 4px 0px 4px' }} /> |
| | | </Tooltip> */} |
| | | <div className="must">必填</div> |
| | | <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} /> |
| | | <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div> |
| | | </div> |
| | | } |
| | |
| | | /> |
| | | </FormItem> |
| | | </Col> |
| | | <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#F2F3F5', borderRadius: '2px', marginTop: '4px',display:'flex',alignItems:'center' }}> |
| | | <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#F2F3F5', borderRadius: '2px', marginTop: '4px', display: 'flex', alignItems: 'center' }}> |
| | | <FormItem |
| | | label='是否重大矛盾纠纷' |
| | | style={{ marginBottom: '-20px' }} |
| | | style={{ width: '300px', marginBottom: 0 }} |
| | | field='isSerious' |
| | | // layout='inline' |
| | | layout='horizontal' |
| | | labelCol={{ span: 11 }} |
| | | wrapperCol={{ span: 13 }} |
| | | > |
| | | <RadioGroup options={['否', '是']} style={{ marginBottom: 20 }} /> |
| | | <RadioGroup options={['否', '是']} /> |
| | | </FormItem> |
| | | </div> |
| | | </Row> |
| | |
| | | </Form> |
| | | <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> |
| | | <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>事件材料</h4> |
| | | </Space> |
| | | </Col> |
| | | <TableView |
| | |
| | | </Modal> |
| | | <Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered> |
| | | {/* <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> */} |
| | | <div style={{marginTop:'-16px'}}> |
| | | <div style={{ marginTop: '-16px' }}> |
| | | <NewFileCheck /> |
| | | </div> |
| | | {/* </div> */} |
| | |
| | | autoFocus={false} |
| | | focusLock={true} |
| | | footer={null} |
| | | unmountOnExit={true} |
| | | maskClosable={false} |
| | | > |
| | | <ApplyDialog |
| | | dialogType={dialogType} |
| | | onClose={() => setAddVisabled(false)} |
| | | handleAddParty={handleAddParty} |
| | | editData={editData} |
| | | /> |
| | | </Modal> |
| | | <Modal |
| | |
| | | onClose={() => setAgentVisible(false)} |
| | | fakeData={fakeData} |
| | | dialogType={dialogType} |
| | | editData={editData} |
| | | /> |
| | | </Modal> |
| | | <Modal |
| | |
| | | autoFocus={false} |
| | | focusLock={true} |
| | | footer={null} |
| | | unmountOnExit={true} |
| | | maskClosable={false} |
| | | > |
| | | <DetailDialog /> |
| | | </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: '515px' }} /> |
| | | </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 |
| | | style={{ width: '1200px' }} |
| | | visible={mapView} |
| | | onCancel={() => setMapView(false)} |
| | | footer={null} |
| | | title='选择纠纷发生地' |
| | | centered |
| | | unmountOnExit={true} |
| | | maskClosable={false} |
| | | > |
| | | <MapView |
| | | selectAdd={(value) => { |
| | | props.formRef.current.setFieldValue('disputeAddress', value) |
| | | setMapView(false) |
| | | }} |
| | | /> |
| | | </Modal> |
| | | <MattersDetail |
| | | visible={visible} |
| | | onClose={() => setVisible(false)} |
| | | /> |
| | | <EventLevelDrawer |
| | | visible={apply} |
| | | onClose={() => setApply(false)} |
| | | /> |
| | | </div> |
| | | ) |
| | | } |