From c7835eac66cc4a322dd71a79610f5f4f351f304b Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Tue, 03 Sep 2024 11:40:40 +0800 Subject: [PATCH] 文件上传接口 --- gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 270 +++++++++++++++++------------------------------------ 1 files changed, 88 insertions(+), 182 deletions(-) diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx index 2149ce9..7f00626 100644 --- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx +++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx @@ -17,20 +17,25 @@ 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 '../../handleFeedback/component/FileUpLoad'; +import ArcoUpload from '@/components/ArcoUpload'; + const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 const FormItem = Form.Item; const InputSearch = Input.Search; +const appUrl = $$.appUrl; -function getId() { - return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' }); +function delFile(id) { + return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } }); } const VisitorRegister = (props) => { + const formRef = useRef(); const [dialogType, setDialogType] = useState();//添加当事人的类型 const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制 const [fakeData, setFakeData] = useState([]);//当事人信息数据 @@ -38,7 +43,7 @@ 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 [fileTip, setFileTip] = useState('0'); @@ -47,12 +52,18 @@ const [apply, setApply] = useState(false); const [editData, setEditData] = useState(null); const [agentVisible, setAgentVisible] = useState(false); + const [fileLength, setFileLength] = 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) { @@ -63,89 +74,74 @@ 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') + if (data.data && data.data.length != 0) { + if (data.data[0].idcardOcrResult) { + const { birthday, ...rest } = data.data[0].idcardOcrResult + //回填信息 + formRef.current.setFieldsValue({ + ...rest + }) + } + } + } + + //删除文件 + 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_00014-1`, + }} 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> + handleChangeFile={handleChangeFile} + label='身份证明材料' + editData={props.editData} + handleDelFile={handleDelFile} + onFileListChange={(v) => setFileLength(v)} + fileTip + /> + {fileLength && <div style={{ position: 'absolute', top: '233px', left: '16px', color: '#86909C' }} > 申请材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileLength}</span></div>} + </Col > </> ) } - if (type === '09_01010-2') { + if (type === '2') { //证据材料 return ( <> <Col span={24}> - <FormItem + <ArcoUpload + params={{ + action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&&ownerId=${props.mainId}&ownerType=22_00014-2`, + }} 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} + /> </Col> </> ) @@ -259,44 +255,6 @@ // 更多列配置... ]; - const options1 = [ - { - value: 'jingjijiufen', - label: '经济纠纷', - children: [ - { - value: 'laodongjiufen', - label: '劳动纠纷', - }, - { - value: 'laodongzhengyijiufen', - label: '劳动争议纠纷', - }, - ], - }, - { - value: 'linlijiufen', - label: '邻里纠纷', - children: [ - { - value: 'linlijiufen', - label: '邻里纠纷', - }, - ], - }, - ]; - - //获取id - const getAppId = async (value) => { - const res = await getId() - if (res.type) { - setFakeData([...fakeData, { - ...value, - id: res.data - }]) - } - } - //获取当前时间 const getFormattedDateTime = () => { let now = new Date(); @@ -319,9 +277,20 @@ setDialogType(type) } + const handleConfirm = () => { + // 处理确认逻辑 + setScanFile(false); + }; + + const handleCancel = () => { + // 处理取消逻辑 + setScanFile(false); + }; + //添加当事人 - const handleAddParty = (value) => { - if (value.id) { + const handleAddParty = (value, isEdit) => { + console.log(value, isEdit); + if (isEdit) { //编辑 const newList = fakeData.map(item => { if (item.id === value.id) { @@ -333,7 +302,9 @@ setFakeData(newList) setEditData(null) } else { - getAppId(value) + setFakeData([...fakeData, { + ...value + }]) } } @@ -604,82 +575,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.fileOwnerType.map((x, t) => { + {fileType.map((x, t) => { return ( <Col span={12} key={t}> <div @@ -742,6 +646,7 @@ onClose={() => setAddVisabled(false)} handleAddParty={handleAddParty} editData={editData} + mainId={props.mainId} /> </Modal> <Modal @@ -764,6 +669,7 @@ fakeData={fakeData} dialogType={dialogType} editData={editData} + mainId={props.mainId} /> </Modal> <Modal -- Gitblit v1.8.0