From e4a96c9f1d07f283c0205f8306ccdf892bddf9e8 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Fri, 16 Aug 2024 09:56:12 +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 | 290 +++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 195 insertions(+), 95 deletions(-) diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx index 428a66d..eca3244 100644 --- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx +++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx @@ -1,16 +1,32 @@ import React, { useState, useEffect, useRef } from "react"; import { Row, Col, Space, Tooltip, Button } from 'antd'; -import { Form, Input, Radio, Select, DatePicker, Cascader,Modal } from '@arco-design/web-react'; +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 MyUpload from '../../../../components/MyUpload'; import PersonCard from '../../../../components/personCard'; import * as $$ from '../../../../utils/utility'; -import { question1,image } from '../../../../assets/images'; +import { + question1, image, link, + applyMaterials, + applyMaterials_active, + evidenceMaterials, + evidenceMaterials_active, + +} from '../../../../assets/images'; +import { CheckOutlined, } from '@ant-design/icons'; import "@arco-design/web-react/dist/css/arco.css"; 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'; + const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 const FormItem = Form.Item; @@ -21,76 +37,112 @@ const VisitorRegister = (props) => { const [dialogType, setDialogType] = useState(0);//添加当事人的类型 const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制 - - - - - const formRef = useRef(); + 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 [scanFile, setScanFile] = useState(false); const [filesList, setFilesList] = useState([]); const [scanImage, setScanImage] = useState(false); const [scaned, setScaned] = useState(false); const [upload, setUpLoad] = useState(false); - const fakeData = [ - { - 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 [sourceType, setSourceType] = useState('09_01010-1'); + const [filesCheck, setFilesCheck] = useState(false); + + const personIconType = (v) => { + switch (v) { + case '09_01010-1': + return [applyMaterials, applyMaterials_active, + ]; + case '09_01010-2': + return [evidenceMaterials, evidenceMaterials_active]; + } + } + + const formType = (type) => { + if (type === '09_01010-1') { + //自然人 + return ( + <> + <Col span={24}> + <FormItem + field='file' + > + <Upload + drag + multiple + accept='image/*' + action='/' + height={158} + onDrop={(e) => { + }} + tip='支持png、 jpg、excel、word、pdf等格式的文件上传,每次上传大小不超过10M' + /> + + + </FormItem> + </Col> + </> + ) + } + } + const peopleMap = { 0: '申请方', 1: '被申请方', @@ -157,7 +209,7 @@ width: 120, render: (text) => ( <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}> - <div>查看</div> + <div onClick={() => setFilesCheck(true)}>查看</div> <div>删除</div> <div>下载</div> <div onClick={() => setUpLoad(true)}>上传</div> @@ -420,47 +472,95 @@ style={{ marginBottom: '60px' }} /> - <MyModal width={1200} visible={scanFile} onCancel={() => setScanFile(false)} footer={false} title='识别上传材料'> - <div style={{ marginTop: '20px', marginBottom: '8px' }}>选择图片</div> - <MyUpload - ledgerType={true} - fileId={'10001'} - handleChangeFile={(type, info, apiResult) => { - handleChangeFile(type, info, apiResult); - }} - accept="XLS、XLSX" - formatType='格式支持XLS、XLSX' - fileType="22_00018-504" - fileList={filesList} - fileIcon={true} - /> + <MyModal width={1200} visible={scanFile} onCancel={() => setScanFile(false)} footer={false} title='识别上传材料' centered> + <Form + ref={props.formRef} + layout='vertical' + requiredSymbol={false} + style={{ marginTop: '20px' }} + initialValues={{ + }}//默认值 + > + <FormItem + label='选择图片' + field='file' + > + <Upload + drag + multiple + accept='image/*' + action='/' + onDrop={(e) => { + }} + tip='支持png、 jpg、pdf等格式文件上传,每次上传大小不超过10M' + showUploadList={{ + // Please dont remove this comment + fileIcon: <IconLink />, + }} + /> + </FormItem> + </Form> </MyModal> - <MyModal width={944} visible={scanImage} onCancel={() => setScanImage(false)} footer={false} title='选择识别范围'> + <MyModal width={944} visible={scanImage} onCancel={() => setScanImage(false)} footer={false} title='选择识别范围' centered> <img src={image} alt="" style={{ margin: '20px 0px' }} /> <div><Button type="primary" onClick={() => setScaned(true)}>开始识别</Button></div> </MyModal> - <MyModal width={1200} visible={scaned} onCancel={() => setScaned(false)} footer={false} title='识别上传材料'> + <MyModal width={1200} visible={scaned} onCancel={() => setScaned(false)} footer={false} title='识别上传材料' centered> <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div> <Input.TextArea showWordLimit rows={5} placeholder='' wrapperStyle={{ width: '100%' }} + defaultValue='识别内容' /> <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => setScaned(true)}>使用文字</Button></div> </MyModal> - <MyModal width={1200} visible={upload} onCancel={() => setUpLoad(false)} footer={false} title='识别上传材料'> - <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div> - <Input.TextArea - showWordLimit - rows={5} - placeholder='' - wrapperStyle={{ width: '100%' }} - /> - <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => setScaned(true)}>上传完成</Button></div> + <MyModal width={512} visible={upload} onCancel={() => setUpLoad(false)} footer={false} title='上传材料' centered> + <div style={{ paddingTop: '24px' }}> + <Row gutter={[30, 24]} style={{ margin: '0 2px 0 0' }}> + {$$.options.sourceType.map((x, t) => { + return ( + <Col span={12} key={t}> + <div + onClick={() => { setSourceType(x.value) }} + className={`casePerfection-cardTab-tab ${x.value === sourceType && 'casePerfection-cardTab-tabActive'}`} + > + <img src={x.value === sourceType ? personIconType(x.value)?.[1] : personIconType(x.value)?.[0]} alt="" style={{ width: '40px', height: '40px' }} /> + <div className="casePerfection-cardTab-tab-name">{x.label}</div> + {x.value === sourceType && ( + <> + <div className="casePerfection-cardTab-tab-triangle" /> + <CheckOutlined className="casePerfection-cardTab-tab-check" /> + </> + )} + </div> + </Col> + ); + })} + <Col span={24}> + <Form + ref={props.formRef} + layout='vertical' + requiredSymbol={false} + initialValues={{ + }}//默认值 + > + <Row gutter={[32, 0]}>{formType(sourceType)}</Row> + </Form> + </Col> + <Button type="primary">上传完成</Button> + + </Row> + </div> + </MyModal> - + <MyModal width={1200} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={false} title='查看事件材料' centered> + <div className="mediationWindow-modal-main" style={{ display: 'flex' }}> + <FilesCheck /> + </div> + </MyModal> <Modal title={'添加' + peopleMap[dialogType]} visible={addVisabled} -- Gitblit v1.8.0