From 5df87dcdbcd6cd34939d43fba9d80b08e61f642b Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Sat, 31 Aug 2024 17:56:45 +0800 Subject: [PATCH] feat: 当事人详情修改、纠纷类型完善 --- gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 531 +++++++++++++++++++++++++++++++++++----------------------- 1 files changed, 323 insertions(+), 208 deletions(-) diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx index 1bb3f3e..2149ce9 100644 --- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx +++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx @@ -1,119 +1,65 @@ 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 "@arco-design/web-react/dist/css/arco.css"; -import MyModal from '../../../../components/MyModal'; -import PersonCard from '../../../../components/personCard'; -import * as $$ from '../../../../utils/utility'; +import { Form, Input, Radio, Select, DatePicker, Cascader, Modal, Upload, InputNumber } from '@arco-design/web-react'; +import PersonCard from '@/components/personCard'; +import * as $$ from '@/utils/utility'; import { - question1, image, link, + question1, applyMaterials, applyMaterials_active, 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 FilesCheck from '../../../filesCheck'; -import { - IconFileAudio, - IconClose, - IconFaceFrownFill, - IconUpload, - IconLink, -} from '@arco-design/web-react/icon'; - +import AgentDialog from "./agentDialog"; +import NewFileCheck from '../../../filesCheck/newFileCheck'; +import { IconLink } from '@arco-design/web-react/icon'; +import MapView from './map' +import { scan } from '@/assets/images/icon' +import { EventLevelDrawer, MattersDetail } from './levelDetail'; const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 const FormItem = Form.Item; -const Option = Select.Option; const InputSearch = Input.Search; + +function getId() { + return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' }); +} const VisitorRegister = (props) => { - const [dialogType, setDialogType] = useState(0);//添加当事人的类型 + const [dialogType, setDialogType] = useState();//添加当事人的类型 const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制 - const [fakeData, setFakeData] = useState([ - // { - // id: 3, - // perClassName: '申请方当事人', - // trueName: '蓝海科技有限公司', - // mobile: '9144010188453Z', - // company: true, - // companyName: '张晓梅',//公司法人 - // partyType: 'applicant',//申请人 - // }, - // { - // id: 1, - // perClassName: '申请方代理人', - // trueName: '王小明', - // mobile: '410106198802121125', - // person: true, - // personNumber: '13388888888',//联系方式 - // partyType: 'applicant', - // }, - // { - // id: 2, - // perClassName: '被申请方当事人', - // trueName: '大海科技有限公司', - // mobile: '13800000002', - // company: true, - // companyName: '郭小聪',//公司法人 - // partyType: 'respondent',//被申请方 - // remark: [{ label: '精神障碍', color: '#C64FBE' }, { label: '吸毒', color: '#D8A247' }, { label: '社区矫正', color: '#B82F6E' }, { label: '刑满释放', color: '#199C8F' }, { label: '流浪', color: '#3ECB7A' }, { label: '重点青少年', color: '#117AC1' }, { label: '涉稳涉访', color: '#6865D7' }, { label: '潜在风险', color: '#2661CE' }] - // }, - // { - // id: 2, - // perClassName: '被申请方代理人', - // trueName: '张三', - // mobile: '13800000002', - // person: true, - // personNumber: '13399999999',//联系方式 - // partyType: 'respondent', - // remark: [{ label: '精神障碍', color: '#C64FBE' }] - // }, - // { - // id: 2, - // perClassName: '被申请方代理人', - // trueName: '张三', - // mobile: '13800000002', - // person: true, - // personNumber: '13399999999',//联系方式 - // partyType: 'respondent', - // remark: [{ label: '精神障碍', color: '#C64FBE' }] - // }, - // { - // id: 2, - // perClassName: '被申请方代理人', - // trueName: '张三', - // mobile: '13800000002', - // person: true, - // personNumber: '13399999999',//联系方式 - // partyType: 'respondent', - // remark: [{ label: '精神障碍', color: '#C64FBE' }] - // }, - ]);//当事人信息数据 + const [fakeData, setFakeData] = useState([]);//当事人信息数据 const [scanFile, setScanFile] = useState(false); - const [filesList, setFilesList] = useState([]); const [scanImage, setScanImage] = useState(false); const [scaned, setScaned] = useState(false); const [upload, setUpLoad] = useState(false); const [sourceType, setSourceType] = useState('09_01010-1'); const [filesCheck, setFilesCheck] = useState(false); - const [file, setFile] = useState(); - const [selectedAddress, setSelectedAddress] = useState(''); + const [fileView, setFileView] = useState(); const [fileTip, setFileTip] = useState('0'); + const [mapView, setMapView] = useState(false); + const [visible, setVisible] = useState(false); + const [apply, setApply] = useState(false); + const [editData, setEditData] = useState(null); + const [agentVisible, setAgentVisible] = useState(false); + const peopleMap = { + '15_020008-1': '申请方', + '15_020008-2': '被申请方', + '24_00006-1': '申请方代理人', + '24_00006-2': '被申请方代理人' + } - const addressOptions = [ - { label: '地址1', value: 'address1' }, - { label: '地址2', value: 'address2' }, - // 更多地址... - ]; - + useEffect(() => { + if (props.formRef.current) { + //引入当事人数据 + props.formRef.current.setFieldValue('fakeData', fakeData) + } + }, [fakeData]) const personIconType = (v) => { switch (v) { @@ -125,12 +71,9 @@ } } - - - const formType = (type) => { if (type === '09_01010-1') { - //自然人 + //申请材料 return ( <> <Col span={24}> @@ -146,22 +89,67 @@ 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' - const peopleMap = { - 0: '申请方', - 1: '被申请方', - 2: '代理人' + > + <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 fakeData1 = [ @@ -170,7 +158,7 @@ caseNo: 'A20230101', judicNo: '申请材料', perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '张三', + inputUserName: '0', mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', @@ -191,7 +179,7 @@ caseNo: 'A20230101', judicNo: '证据材料', perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '张三', + inputUserName: '0', mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', @@ -217,7 +205,7 @@ title: '序号', dataIndex: 'caseNo', key: 'caseNo', - width: 60, + width: 100, render: (text, record, index) => <span>{index + 1}</span>, }, { @@ -232,6 +220,12 @@ dataIndex: 'inputUserName', key: 'perClassName', width: 180, + render: (text) => ( + <> + {text}份 + </> + ) + }, { @@ -242,7 +236,7 @@ }, { - title: '上传时间', + title: '最新上传时间', dataIndex: 'mediateUserName', key: 'mediateUserName', width: 180, @@ -263,41 +257,6 @@ ) }, // 更多列配置... - ]; - - const options = [ - { - value: 'beijing', - label: 'Beijing', - children: [ - { - value: 'Beijing', - label: 'Beijing', - children: [ - { - value: 'chaoyang', - label: 'Chaoyang', - }, - ], - }, - ], - }, - { - value: 'shanghai', - label: 'Shanghai', - children: [ - { - value: 'shanghaishi', - label: 'Shanghai', - children: [ - { - value: 'huangpu', - label: 'Huangpu', - }, - ], - }, - ], - }, ]; const options1 = [ @@ -327,8 +286,15 @@ }, ]; - const handleCheckParty = () => { - console.log('check party'); + //获取id + const getAppId = async (value) => { + const res = await getId() + if (res.type) { + setFakeData([...fakeData, { + ...value, + id: res.data + }]) + } } //获取当前时间 @@ -343,39 +309,74 @@ return `${year}-${month}-${day} ${hours}:${minutes}`; } - - - - //添加申请人: 0、被申请人: 1、代理人: 2 + //添加当事人 const handleAdd = (type) => { + if (type === '24_00006-1' || type === '24_00006-2') { + setAgentVisible(true) + } else { + setAddVisabled(true) + } setDialogType(type) - setAddVisabled(true) + } + + //添加当事人 + const handleAddParty = (value) => { + if (value.id) { + //编辑 + const newList = fakeData.map(item => { + if (item.id === value.id) { + return value + } else { + return item + } + }) + setFakeData(newList) + setEditData(null) + } else { + getAppId(value) + } + } + + //删除当事人 + const handleDeleteParty = (event, value) => { + event.stopPropagation(); + const filterData = fakeData.filter(item => item.id !== value.id) + setFakeData(filterData) + } + + //编辑 + const handleEdit = (value) => { + if (value.perType === '15_020008-1' || value.perType === '15_020008-2') { + //当事人 + setAddVisabled(true) + } else { + //代理人 + setAgentVisible(true) + } + setDialogType(value.perType) + setEditData(value) } - const handleAddressChange = (value) => { - setSelectedAddress(value); - }; - return ( - <div className='dataSync-page'> + <div className='dataSync-page' style={{ ...props.style }}> <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' }}> <PersonCard isCheck={true} - partyType={'applicant'} // 这里设定为申请人 data={fakeData} - 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 @@ -384,25 +385,29 @@ requiredSymbol={false} scrollToFirstError={true} initialValues={{ - level: '三级', - visitingTime: getFormattedDateTime(), - isSerious: '否', + caseLevel: 3, + visitTime: getFormattedDateTime(), + majorStatus: 0, }}//默认值 > <Row gutter={[32, 0]}> <Col span={8}> - <FormItem label='事项等级' field='level' tooltip={<div className='question'>Username is required </div>} > - <Select placeholder='Select city' allowClear> - {['一级', '二级', '三级', '四级'].map((option, index) => ( - <Option key={option} value={option}> - {option} - </Option> - ))} + <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='caseLevel' + > + <Select placeholder='请选择事项等级' allowClear options={$$.options.caseLevelList}> </Select> </FormItem> </Col> <Col span={8}> - <FormItem label='来访时间' field='visitingTime'> + <FormItem label='来访时间' field='visitTime'> <DatePicker style={{ width: '100%' }} format='YYYY-MM-DD HH:mm' @@ -411,23 +416,37 @@ </FormItem> </Col> <Col span={8}> - <FormItem label='来访人数(人)' field='visitingNumber'> - <Input placeholder='请填写' /> + <FormItem label='来访人数(人)' field='visitPeopleNum'> + <InputNumber placeholder='请填写' min={1} /> </FormItem> </Col> <Col span={8}> <FormItem label={(<div style={{ display: 'flex' }}>纠纷类型<div className="must">必填</div></div>)} rules={[{ message: '请选择纠纷类型', required: true }]} - field='disputeType' + field='myCaseType' > <Cascader placeholder='请选择' - options={options1} + options={$$.caseTypeSelect.caseTypeSelect} onChange={(value, option) => { - console.log(value, option); + if (option) { + props.formRef.current.setFieldsValue({ + caseTypeFirst: option[0].value, + caseTypeFirstName: option[0].label, + caseType: option[1].value, + caseTypeName: option[1].label, + }) + } else { + //清除数据 + props.formRef.current.setFieldsValue({ + caseTypeFirst: undefined, + caseTypeFirstName: undefined, + caseType: undefined, + caseTypeName: undefined, + }) + } }} - // defaultValue={['shanghai', 'shanghaishi', 'huangpu']} allowClear /> </FormItem> @@ -436,8 +455,7 @@ <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生时间<div className="must">必填</div></div>)} rules={[{ message: '请选择纠纷发生时间', required: true }]} - field='disputeTime' - + field='occurTime' > <DatePicker style={{ width: '100%' }} @@ -451,57 +469,83 @@ <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生地点<div className="must">必填</div></div>)} rules={[{ message: '请选择纠纷发生地点', required: true }]} - field='disputeAddress' + field='addr' > <InputSearch placeholder='选择纠纷发生地的详细地址' searchButton='选择' readOnly={true} // 设置为只读,防止直接编辑 + onSearch={() => setMapView(true)} /> </FormItem> </Col> <Col span={8}> - <FormItem label='问题属地' field='quesAddress'> + <FormItem label='问题属地' field='myQuesAddress'> <Cascader placeholder='请选择' - options={options} + options={$$.locationOption()} + showSearch onChange={(value, option) => { - console.log(value, option); + if (option) { + props.formRef.current.setFieldsValue({ + queProv: option[0].value, + queProvName: option[0].label, + queCity: option[1].value, + queCityName: option[1].label, + queArea: option[2].value, + queAreaName: option[2].label, + queRoad: option[3] && option[3].value || '', + queRoadName: option[3] && option[3].label || '', + }) + } else { + //清除数据 + props.formRef.current.setFieldsValue({ + queProv: undefined, + queProvName: undefined, + queCity: undefined, + queCityName: undefined, + queArea: undefined, + queAreaName: undefined, + queRoad: undefined, + queRoadName: undefined, + }) + } }} allowClear /> </FormItem> </Col> <Col span={8}> - <FormItem label='涉及人数(人)' field='peopleNumber'> - <Input placeholder='请填写' /> + <FormItem label='涉及人数(人)' field='peopleNum'> + <InputNumber placeholder='请填写' /> </FormItem> </Col> <Col span={8}> - <FormItem label='涉及金额(元)' field='money'> - <Input placeholder='请填写' /> + <FormItem label='涉及金额(元)' field='amount'> + <InputNumber placeholder='请填写' /> </FormItem> </Col> <Col span={24}> <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> } - field='summarize' + field='caseDes' rules={[{ message: '请填写事项概况', required: true }]} > <Input.TextArea maxLength={2000} showWordLimit rows={5} - placeholder='请填写问题发生的起因、过程和结果' + placeholder='请完整描述事项概况,应具备5要素:发生时间+发生地点+人物情况+事项起因+事项经过' wrapperStyle={{ width: '100%' }} /> </FormItem> @@ -510,14 +554,15 @@ <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> } - field='apply' + field='caseClaim' rules={[{ message: '请填写申请请求', required: true }]} > @@ -530,13 +575,16 @@ /> </FormItem> </Col> - <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#EFF8FF', borderRadius: '2px', marginTop: '4px' }}> + <div style={{ marginLeft: '16px', padding: '12px 16px', backgroundColor: '#F2F3F5', borderRadius: '2px', marginTop: '4px', display: 'flex', alignItems: 'center' }}> <FormItem label='是否重大矛盾纠纷' - style={{ marginBottom: '-20px' }} - field='isSerious' + style={{ width: '300px', marginBottom: 0 }} + field='majorStatus' + layout='horizontal' + labelCol={{ span: 11 }} + wrapperCol={{ span: 13 }} > - <RadioGroup options={['否', '是']} style={{ marginBottom: 20 }} /> + <RadioGroup options={[{ value: 0, label: '否' }, { value: 1, label: '是' }]} /> </FormItem> </div> </Row> @@ -544,7 +592,7 @@ </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 @@ -571,7 +619,8 @@ > <Upload drag - multiple + // multiple + limit={1} accept='image/*' // action='/' onDrop={(e) => { @@ -586,7 +635,7 @@ if (info.length > 0) { setScanImage(true); } - setFile({ + setFileView({ ...currentFile, url: URL.createObjectURL(currentFile.originFile), @@ -603,7 +652,7 @@ </Modal> <Modal style={{ width: '944px' }} visible={scanImage} onCancel={() => setScanImage(false)} footer={null} title='选择识别范围' centered> <img - src={file?.url} + src={fileView?.url} alt="" style={{ display: 'block', // 确保图片在容器中居中显示 @@ -630,7 +679,7 @@ <Modal style={{ width: '512px' }} visible={upload} onCancel={() => setUpLoad(false)} footer={null} title='上传材料' centered> <div style={{ paddingTop: '8px' }}> <Row gutter={[30, 24]}> - {$$.options.sourceType.map((x, t) => { + {$$.options.fileOwnerType.map((x, t) => { return ( <Col span={12} key={t}> <div @@ -668,24 +717,90 @@ </Modal> <Modal style={{ width: '1200px' }} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={null} title='查看事件材料' centered> - <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> - <FilesCheck /> + {/* <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> */} + <div style={{ marginTop: '-16px' }}> + <NewFileCheck /> </div> + {/* </div> */} </Modal> <Modal - title={'添加' + peopleMap[dialogType]} + title={(editData ? '修改' : '添加') + peopleMap[dialogType]} visible={addVisabled} onOk={() => setAddVisabled(false)} - onCancel={() => setAddVisabled(false)} + onCancel={() => { + setAddVisabled(false) + setEditData(null) + }} autoFocus={false} focusLock={true} footer={null} - // style={{ width: '1000px' }} + unmountOnExit={true} + maskClosable={false} > - <ApplyDialog /> + <ApplyDialog + dialogType={dialogType} + onClose={() => setAddVisabled(false)} + handleAddParty={handleAddParty} + editData={editData} + /> </Modal> + <Modal + title={(editData ? '修改' : '添加') + peopleMap[dialogType]} + visible={agentVisible} + onOk={() => setAgentVisible(false)} + onCancel={() => { + setAgentVisible(false) + setEditData(null) + }} + autoFocus={false} + focusLock={true} + footer={null} + unmountOnExit={true} + maskClosable={false} + > + <AgentDialog + handleAddParty={handleAddParty} + onClose={() => setAgentVisible(false)} + fakeData={fakeData} + dialogType={dialogType} + editData={editData} + /> + </Modal> + <Modal + style={{ width: '1200px' }} + visible={mapView} + onCancel={() => setMapView(false)} + footer={null} + title='选择纠纷发生地' + centered + unmountOnExit={true} + maskClosable={false} + > + <MapView + selectAdd={(data) => { + props.formRef.current.setFieldsValue({ + addr: data.addName, + lng: data.pt.lng, + lat: data.pt.lat, + }) + setMapView(false) + }} + /> + </Modal> + <MattersDetail + visible={visible} + onClose={() => setVisible(false)} + /> + <EventLevelDrawer + visible={apply} + onClose={() => setApply(false)} + /> </div> ) } -export default VisitorRegister; \ No newline at end of file +export default VisitorRegister; + + + + -- Gitblit v1.8.0