From 47e16d0a56559916c5fb9c4de08838e7a1d457d8 Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Mon, 09 Sep 2024 18:10:50 +0800 Subject: [PATCH] feat: 完善功能 --- gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 403 ++++++++------------------------------------------------- 1 files changed, 58 insertions(+), 345 deletions(-) diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx index cab3cc3..0a883e8 100644 --- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx +++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx @@ -5,21 +5,16 @@ import * as $$ from '@/utils/utility'; import { question1, - applyMaterials, - 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 NewFileCheck from '../../../filesCheck/newFileCheck'; -import { IconLink } from '@arco-design/web-react/icon'; -import MapView from './map' -import { scan } from '@/assets/images/icon' +import MapView from './map'; +import { scan } from '@/assets/images/icon'; import { EventLevelDrawer, MattersDetail } from './levelDetail'; +import DocumentScanner from '../../matterDetail/FileUpLoad'; +import FileTable from "../../matterDetail/FileTable"; + const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 const FormItem = Form.Item; @@ -31,18 +26,14 @@ const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制 const [fakeData, setFakeData] = useState([]);//当事人信息数据 const [scanFile, setScanFile] = useState(false); - 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 [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': '被申请方', @@ -57,203 +48,34 @@ } }, [fakeData]) - 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) => { - }} - 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> - </> - ) - } - 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 fakeData1 = [ - { - id: 1, - caseNo: 'A20230101', - judicNo: '申请材料', - perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '0', - mediateUserName: '2024-7-12 12:00', - judgeName: '王五', - mediator: '赵六', - handlerUserName: '钱七', - returnUserName: '孙八', - expireTime: '2023-08-10T08:00:00.000Z', - processName: '进行中', - otherMediator: '周九', - canalName: '网络', - judicResult: '通过', - assistName: '吴十', - mediTypeName: '民事调解', - serieStatus: '1', // 1 表示非系列案,2 表示系列案 - // 更多字段... - }, - { - id: 2, - caseNo: 'A20230101', - judicNo: '证据材料', - perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '0', - mediateUserName: '2024-7-12 12:00', - judgeName: '王五', - mediator: '赵六', - handlerUserName: '钱七', - returnUserName: '孙八', - expireTime: '2023-08-10T08:00:00.000Z', - processName: '进行中', - otherMediator: '周九', - canalName: '网络', - judicResult: '通过', - assistName: '吴十', - mediTypeName: '民事调解', - serieStatus: '1', // 1 表示非系列案,2 表示系列案 - // 更多字段... - }, - - // 更多数据... - ]; - - // 列配置 - const fakeColumns = [ - { - title: '序号', - dataIndex: 'caseNo', - key: 'caseNo', - width: 100, - render: (text, record, index) => <span>{index + 1}</span>, - }, - { - title: '材料类型', - dataIndex: 'judicNo', - key: 'judicNo', - width: 60, - - }, - { - title: '材料数量', - dataIndex: 'inputUserName', - key: 'perClassName', - width: 180, - render: (text) => ( - <> - {text}份 - </> - ) - - - }, - { - title: '材料名称', - dataIndex: 'perClassName', - key: 'perClassName', - width: 180, - - }, - { - title: '最新上传时间', - dataIndex: 'mediateUserName', - key: 'mediateUserName', - width: 180, - - }, - { - title: '操作', - dataIndex: 'perClassName', - key: 'perClassName', - width: 200, - render: (text) => ( - <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}> - <div onClick={() => setFilesCheck(true)}>查看</div> - <div>删除</div> - <div>下载</div> - <div onClick={() => setUpLoad(true)}>上传</div> - </div> - ) - }, - // 更多列配置... - ]; + useEffect(() => { + setFakeData(props.partyList?.map(item => { + const fileInfoList = item.fileInfoList + let file = [];//身份证明材料、企业登记材料 + let file1 = [];//法人、机构身份证明材料、代理人授权委托书 + if (fileInfoList && fileInfoList.length != 0) { + fileInfoList.forEach(item => { + if (item.ownerType == '22_00018-202' || item.ownerType == '22_00018-203') { + file.push({ + name: item.fileList[0].trueName, + uid: item.fileList[0].id, + }) + } + if (item.ownerType == '22_00018-204' || item.ownerType == '22_00018-207') { + file1.push({ + name: item.fileList[0].trueName, + uid: item.fileList[0].id, + }) + } + }) + } + return { + ...item, + file, + file1 + } + }) || []) + }, [props.partyList]) //获取当前时间 const getFormattedDateTime = () => { @@ -277,9 +99,22 @@ setDialogType(type) } + const handleConfirm = (scanContent) => { + // 处理确认逻辑 + props.formRef.current.setFieldValue('caseDes', scanContent) + setScanFile(false); + console.log(scanContent, 'scanContent') + + }; + + const handleCancel = () => { + // 处理取消逻辑 + setScanFile(false); + }; + //添加当事人 const handleAddParty = (value, isEdit) => { - console.log(value, isEdit); + console.log(value); if (isEdit) { //编辑 const newList = fakeData.map(item => { @@ -318,9 +153,8 @@ setEditData(value) } - return ( - <div className='dataSync-page' style={{ ...props.style }}> + <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> @@ -556,134 +390,13 @@ <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h4>事件材料</h4> </Space> </Col> - <TableView - columns={fakeColumns} - dataSource={fakeData1} - size="small" - rowKey="id" - bordered={true} - style={{ marginBottom: '65px' }} + <FileTable mainId={props.mainId} fileInfoList={props.fileInfoList} isReview={false}/> + + <DocumentScanner + visible={scanFile} + onConfirm={handleConfirm} + onCancel={handleCancel} /> - - <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> - <Modal style={{ width: '512px' }} visible={upload} onCancel={() => setUpLoad(false)} footer={null} title='上传材料' centered> - <div style={{ paddingTop: '8px' }}> - <Row gutter={[30, 24]}> - {$$.options.fileOwnerType.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={{ - }}//默认值 - style={{ position: 'relative' }} - > - - <Row gutter={[32, 0]}>{formType(sourceType)}</Row> - </Form> - </Col> - <Button type="primary" style={{ marginTop: '-20px', marginLeft: '16px' }}>上传完成</Button> - </Row> - </div> - - </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' }}> - <NewFileCheck /> - </div> - {/* </div> */} - </Modal> <Modal title={(editData ? '修改' : '添加') + peopleMap[dialogType]} visible={addVisabled} @@ -758,7 +471,7 @@ visible={apply} onClose={() => setApply(false)} /> - </div> + </div > ) } -- Gitblit v1.8.0