From b2434de9e541031c17fabe06b3d294ed4823d903 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Fri, 06 Sep 2024 09:40:48 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master --- gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 533 +++++++++++++++++++++++------------------------------------ 1 files changed, 209 insertions(+), 324 deletions(-) diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx index e5b5b59..99aec0e 100644 --- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx +++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx @@ -9,161 +9,145 @@ applyMaterials_active, evidenceMaterials, evidenceMaterials_active, - } from '@/assets/images'; import { CheckOutlined, } from '@ant-design/icons'; import TableView from '@/components/TableView'; import '../../index.less'; -import ApplyDialog from "./ApplyDialog"; -import AgentDialog from "./AgentDialog"; -import DetailDialog from "./DetailDialog"; -import FilesCheck from '../../../filesCheck'; +import ApplyDialog from "./applyDialog"; +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 MyDrawer from '@/components/MyDrawer'; -import { EventLevelDrawer, MattersDetail } from './LevelDetail' +import MapView from './map'; +import { scan } from '@/assets/images/icon'; +import { EventLevelDrawer, MattersDetail } from './levelDetail'; +import DocumentScanner from '../../matterDetail/FileUpLoad'; +import ArcoUpload from '@/components/ArcoUpload'; + const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 const FormItem = Form.Item; -const Option = Select.Option; const InputSearch = Input.Search; +const appUrl = $$.appUrl; + +function delFile(id) { + return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } }); +} const VisitorRegister = (props) => { - const [dialogType, setDialogType] = useState(0);//添加当事人的类型 + const formRef = useRef(); + const [dialogType, setDialogType] = useState();//添加当事人的类型 const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制 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 [sourceType, setSourceType] = useState('1'); const [filesCheck, setFilesCheck] = useState(false); - const [fileView, setFileView] = useState(); - const [selectedAddress, setSelectedAddress] = useState(''); - const [fileTip, setFileTip] = useState('0'); - const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制 const [mapView, setMapView] = useState(false); - 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' }, - { label: '地址2', value: 'address2' }, - // 更多地址... - ]; - const [agentVisible, setAgentVisible] = useState(false); + const [fileLength, setFileLength] = useState(''); + const [evidenceLength, SetEvidenceLength] = useState(null); + const [matterNumber, setMatterNumber] = useState(''); + const [evidenceNumber, setEvidenceNumber] = useState(''); + const [applyFile, setApplyFile] = useState([]); + const [evidenceFile, setEvidenceFile] = useState([]); + const peopleMap = { + '15_020008-1': '申请方', + '15_020008-2': '被申请方', + '24_00006-1': '申请方代理人', + '24_00006-2': '被申请方代理人' + } + + const fileType = [ + { value: '1', label: '申请材料' }, + { value: '2', label: '证据材料' }, + ] + + useEffect(() => { + if (props.formRef.current) { + //引入当事人数据 + props.formRef.current.setFieldValue('fakeData', fakeData) + } + }, [fakeData]) const personIconType = (v) => { switch (v) { - case '09_01010-1': + case '1': return [applyMaterials, applyMaterials_active, ]; - case '09_01010-2': + case '2': return [evidenceMaterials, evidenceMaterials_active]; } } + const handleChangeFile = (data) => { + console.log(data, 'handleChangeFile') + setApplyFile(data) + + } + + const handleChangeFile1 = (data) => { + console.log(data, 'handleChangeFile1') + setEvidenceFile(data) + } + + + //删除文件 + const handleDelFile = async (id) => { + const res = await delFile(id) + if (res.type) { + $$.infoSuccess({ content: '删除成功!' }); + } + } + + const formType = (type) => { - if (type === '09_01010-1') { + if (type === '1') { //申请材料 return ( <> <Col span={24}> - <FormItem + <ArcoUpload + params={{ + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00018-101`, + }} 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>} + handleChangeFile={handleChangeFile} + label='' + editData={props.editData} + handleDelFile={handleDelFile} + onFileListChange={(v) => { setFileLength(v); console.log(v, 'vvsetFileLength') }} + /> + {fileLength?.length > 0 && <div style={{ position: 'absolute', top: '198px', left: '16px', color: '#86909C' }}>申请材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileLength?.length}</span></div>} </Col> </> ) } - if (type === '09_01010-2') { + if (type === '2') { //证据材料 return ( <> <Col span={24}> - <FormItem - field='file' + <ArcoUpload + params={{ + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00018-102`, + }} + field='file1' + handleChangeFile={handleChangeFile1} + label='' + editData={props.editData} + handleDelFile={handleDelFile} + onFileListChange={(v) => { SetEvidenceLength(v); console.log(v, 'vvsetFileLength') }} - > - <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>} + /> + {evidenceLength?.length > 0 && <div style={{ position: 'absolute', top: '198px', left: '16px', color: '#86909C' }}>申请材料累计上传:<span style={{ color: '#1A6FB8' }}>{evidenceLength?.length}</span></div>} </Col> </> ) } - } - - const formItemLayout = { - labelCol: { - span: 4, - }, - wrapperCol: { - span: 17, - }, - }; - - const peopleMap = { - 0: '申请方', - 1: '被申请方', - 2: '代理人' } const fakeData1 = [ @@ -234,10 +218,11 @@ dataIndex: 'inputUserName', key: 'perClassName', width: 180, - render: (text) => ( - <> - {text}份 - </> + render: (text,index) => ( + <div onClick={() => console.log(text,index)}> + 1 + {/* {sourceType === '1' ? matterNumber : sourceType === '2' ? evidenceNumber : 0}份 */} + </div> ) @@ -273,75 +258,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 = [ - { - value: 'jingjijiufen', - label: '经济纠纷', - children: [ - { - value: 'laodongjiufen', - label: '劳动纠纷', - }, - { - value: 'laodongzhengyijiufen', - label: '劳动争议纠纷', - }, - ], - }, - { - value: 'linlijiufen', - label: '邻里纠纷', - children: [ - { - value: 'linlijiufen', - label: '邻里纠纷', - }, - ], - }, - ]; - - //查看 - const handleCheckParty = (value) => { - console.log(value); - setDialogType(value.partyType) - setDetailVisabled(true) - } - //获取当前时间 const getFormattedDateTime = () => { let now = new Date(); @@ -354,9 +270,9 @@ return `${year}-${month}-${day} ${hours}:${minutes}`; } - //添加申请人: 0、被申请人: 1、申请代理人: 2、被申请代理人:3 + //添加当事人 const handleAdd = (type) => { - if (type === 2 || type === 3) { + if (type === '24_00006-1' || type === '24_00006-2') { setAgentVisible(true) } else { setAddVisabled(true) @@ -364,15 +280,20 @@ setDialogType(type) } + const handleConfirm = () => { + // 处理确认逻辑 + setScanFile(false); + }; - const handleAddressChange = (value) => { - setSelectedAddress(value); + const handleCancel = () => { + // 处理取消逻辑 + setScanFile(false); }; //添加当事人 - const handleAddParty = (value) => { - console.log(value,'value1'); - if (value.id) { + const handleAddParty = (value, isEdit) => { + console.log(value, isEdit); + if (isEdit) { //编辑 const newList = fakeData.map(item => { if (item.id === value.id) { @@ -385,10 +306,8 @@ setEditData(null) } else { setFakeData([...fakeData, { - ...value, - id: flagId + ...value }]) - setFlagId(flagId + 1) } } @@ -401,21 +320,23 @@ //编辑 const handleEdit = (value) => { - console.log(value); - if (value.partyType === 0 || value.partyType === 1) { + if (value.perType === '15_020008-1' || value.perType === '15_020008-2') { //当事人 setAddVisabled(true) } else { //代理人 setAgentVisible(true) } + setDialogType(value.perType) setEditData(value) } + // console.log(sourceType, 'sourceType') + // console.log(props.formRef?.current?.getFields(),'formRef.current.getFields()') + return ( - <div className='dataSync-page'> - + <div className='dataSync-page' style={{ ...props.style, marginTop: '8px' }}> <Col span={24} style={{ display: 'flex', alignItems: 'center' }}> <Space size='small'> <div className='MediationInfo-subTitle' style={{ marginTop: '-9px', }}></div><h4>当事人信息</h4> @@ -424,9 +345,7 @@ <div style={{ margin: '16px 0' }}> <PersonCard isCheck={true} - partyType={'applicant'} // 这里设定为申请人 data={fakeData} - handleCheckParty={handleCheckParty} handleAdd={handleAdd} handleDeleteParty={handleDeleteParty} handleEdit={handleEdit} @@ -443,32 +362,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={<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}> - {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' @@ -477,23 +393,37 @@ </FormItem> </Col> <Col span={8}> - <FormItem label='来访人数(人)' field='visitingNumber'> - <InputNumber 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> @@ -502,8 +432,7 @@ <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生时间<div className="must">必填</div></div>)} rules={[{ message: '请选择纠纷发生时间', required: true }]} - field='disputeTime' - + field='occurTime' > <DatePicker style={{ width: '100%' }} @@ -517,7 +446,7 @@ <FormItem label={(<div style={{ display: 'flex' }}>纠纷发生地点<div className="must">必填</div></div>)} rules={[{ message: '请选择纠纷发生地点', required: true }]} - field='disputeAddress' + field='addr' > <InputSearch placeholder='选择纠纷发生地的详细地址' @@ -528,25 +457,49 @@ </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'> + <FormItem label='涉及人数(人)' field='peopleNum'> <InputNumber placeholder='请填写' /> </FormItem> </Col> <Col span={8}> - <FormItem label='涉及金额(元)' field='money'> + <FormItem label='涉及金额(元)' field='amount'> <InputNumber placeholder='请填写' /> </FormItem> </Col> @@ -562,7 +515,7 @@ <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 @@ -586,7 +539,7 @@ <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div> </div> } - field='apply' + field='caseClaim' rules={[{ message: '请填写申请请求', required: true }]} > @@ -603,12 +556,12 @@ <FormItem label='是否重大矛盾纠纷' style={{ width: '300px', marginBottom: 0 }} - field='isSerious' + field='majorStatus' layout='horizontal' labelCol={{ span: 11 }} wrapperCol={{ span: 13 }} > - <RadioGroup options={['否', '是']} /> + <RadioGroup options={[{ value: 0, label: '否' }, { value: 1, label: '是' }]} /> </FormItem> </div> </Row> @@ -628,82 +581,15 @@ style={{ marginBottom: '65px' }} /> - <Modal style={{ width: '1200px' }} visible={scanFile} onCancel={() => setScanFile(false)} title='识别上传材料' centered footer={null}> - <Form - ref={props.formRef} - layout='vertical' - requiredSymbol={false} - initialValues={{ - }}//默认值 - style={{ marginTop: '4px' }} - > - <FormItem - label='选择图片' - field='file' - > - <Upload - drag - // multiple - limit={1} - accept='image/*' - // action='/' - onDrop={(e) => { - }} - tip='支持png、 jpg、pdf等格式文件上传,每次上传大小不超过10M' - showUploadList={{ - // Please dont remove this comment - fileIcon: <IconLink style={{ color: '#1D2129' }} />, - }} - onChange={(info, currentFile) => { - console.log(currentFile, info, 'info', 'currentFile') - if (info.length > 0) { - setScanImage(true); - } - setFileView({ - ...currentFile, - url: URL.createObjectURL(currentFile.originFile), - - }); - - }} - onSuccess={() => setScanImage(true)} - /> - {/* <img src={file?.url} alt=""/> */} - </FormItem> - - </Form> - - </Modal> - <Modal style={{ width: '944px' }} visible={scanImage} onCancel={() => setScanImage(false)} footer={null} title='选择识别范围' centered> - <img - src={fileView?.url} - alt="" - style={{ - display: 'block', // 确保图片在容器中居中显示 - margin: 'auto', // 居中显示 - maxWidth: '100%', // 图片最大宽度为容器宽度的100% - maxHeight: '100%', // 图片最大高度为容器高度的100% - objectFit: 'contain', // 图片缩放以适应容器,保持原图比例 - }} - /> - <div><Button type="primary" onClick={() => setScaned(true)} style={{ marginTop: '20px' }}>开始识别</Button></div> - </Modal> - <Modal style={{ width: '1200px' }} visible={scaned} onCancel={() => setScaned(false)} footer={null} title='识别上传材料' centered> - <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div> - <Input.TextArea - showWordLimit - rows={5} - placeholder='' - wrapperStyle={{ width: '100%' }} - defaultValue='识别内容' - onChange={(v) => console.log(v, 'vvvvvv')} - /> - <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => { setScanFile(false); setScanImage(false); setScaned(false) }}>使用文字</Button></div> - </Modal> + <DocumentScanner + visible={scanFile} + onConfirm={handleConfirm} + onCancel={handleCancel} + /> <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) => { + {fileType.map((x, t) => { return ( <Col span={12} key={t}> <div @@ -735,11 +621,11 @@ <Row gutter={[32, 0]}>{formType(sourceType)}</Row> </Form> </Col> - <Button type="primary" style={{ marginTop: '-20px', marginLeft: '16px' }}>上传完成</Button> + <Button type="primary" style={{ marginTop: '-20px', marginLeft: '16px' }} onClick={() => { setMatterNumber(fileLength?.length); setEvidenceNumber(evidenceLength?.length); setUpLoad(false) }}>上传完成</Button> </Row> </div> - </Modal> + </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' }}> @@ -748,10 +634,13 @@ {/* </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} @@ -763,13 +652,17 @@ onClose={() => setAddVisabled(false)} handleAddParty={handleAddParty} editData={editData} + mainId={props.mainId} /> </Modal> <Modal - title={'添加代理人'} + title={(editData ? '修改' : '添加') + peopleMap[dialogType]} visible={agentVisible} onOk={() => setAgentVisible(false)} - onCancel={() => setAgentVisible(false)} + onCancel={() => { + setAgentVisible(false) + setEditData(null) + }} autoFocus={false} focusLock={true} footer={null} @@ -782,20 +675,8 @@ fakeData={fakeData} dialogType={dialogType} editData={editData} + mainId={props.mainId} /> - </Modal> - <Modal - title={'查看' + peopleMap[dialogType]} - visible={detailVisabled} - onOk={() => setDetailVisabled(false)} - onCancel={() => setDetailVisabled(false)} - autoFocus={false} - focusLock={true} - footer={null} - unmountOnExit={true} - maskClosable={false} - > - <DetailDialog /> </Modal> <Modal style={{ width: '1200px' }} @@ -808,8 +689,12 @@ maskClosable={false} > <MapView - selectAdd={(value) => { - props.formRef.current.setFieldValue('disputeAddress', value) + selectAdd={(data) => { + props.formRef.current.setFieldsValue({ + addr: data.addName, + lng: data.pt.lng, + lat: data.pt.lat, + }) setMapView(false) }} /> @@ -822,7 +707,7 @@ visible={apply} onClose={() => setApply(false)} /> - </div> + </div > ) } -- Gitblit v1.8.0