import React, { useState, useRef } from 'react';
|
import { Button } from 'antd';
|
import * as $$ from '@/utils/utility';
|
import { Form, Input, Modal, Upload } from '@arco-design/web-react';
|
import { IconLink } from '@arco-design/web-react/icon';
|
|
|
const FormItem = Form.Item;
|
const appUrl = $$.appUrl;
|
|
|
const DocumentScanner = ({
|
visible,
|
onConfirm,
|
onCancel
|
|
}) => {
|
const formRef = useRef();
|
const [scanFile, setScanFile] = useState(false);
|
const [scanImage, setScanImage] = useState(false);
|
const [scaned, setScaned] = useState(false);
|
const [fileView, setFileView] = useState();
|
const [scanContent, setScanContent] = useState('');
|
|
const handleUploadChange = (info, currentFile) => {
|
if (info.length > 0) {
|
setScanImage(true);
|
}
|
setFileView({
|
...currentFile,
|
url: URL.createObjectURL(currentFile.originFile),
|
});
|
};
|
|
const handleScaned = () => {
|
setScaned(true)
|
const content = fileView.response.data.ocrResult.wordsResult.join('\n')
|
setTimeout(() => {
|
console.log(formRef.current, content);
|
formRef.current.setFieldValue('scanContent', content)
|
}, 0)
|
setScanContent(content)
|
}
|
|
const handleText = () => {
|
onConfirm(scanContent);
|
setScanFile(false);
|
setScanImage(false);
|
setScaned(false);
|
}
|
|
return (
|
<>
|
<Modal
|
style={{ width: '1200px' }}
|
visible={visible}
|
onCancel={onCancel}
|
title='识别上传材料'
|
centered
|
footer={null}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<Form
|
layout='vertical'
|
requiredSymbol={false}
|
initialValues={{
|
}}//默认值
|
style={{ marginTop: '4px' }}
|
>
|
<FormItem
|
label='选择图片'
|
field='file'
|
>
|
<Upload
|
drag
|
// multiple
|
limit={1}
|
accept='image/*'
|
headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
|
action={`${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/recognitionText`}
|
onDrop={(e) => {
|
}}
|
tip='支持png、 jpg、pdf等格式文件上传，每次上传大小不超过10M'
|
showUploadList={{
|
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),
|
|
// });
|
|
// }}
|
onChange={handleUploadChange}
|
// onSuccess={() => setScanImage(true)}
|
/>
|
{/* <img src={file?.url} alt=""/> */}
|
</FormItem>
|
|
</Form>
|
|
</Modal>
|
<Modal
|
style={{ width: '944px' }}
|
visible={scanImage}
|
onCancel={() => setScanImage(false)}
|
footer={null}
|
title='选择识别范围'
|
centered
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<img
|
src={fileView?.url}
|
alt=""
|
style={{
|
display: 'block',
|
margin: 'auto',
|
maxWidth: '100%',
|
maxHeight: '100%',
|
objectFit: 'contain',
|
}}
|
/>
|
<div><Button type="primary" onClick={() => handleScaned()} style={{ marginTop: '20px' }}>开始识别</Button></div>
|
</Modal>
|
<Modal
|
style={{ width: '1200px' }}
|
visible={scaned}
|
onCancel={() => setScaned(false)}
|
footer={null}
|
title='识别上传材料'
|
centered
|
unmountOnExit={true}
|
maskClosable={false}
|
mountOnEnter={false}
|
>
|
<Form
|
ref={formRef}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
initialValues={{
|
}}//默认值
|
>
|
<FormItem
|
label='识别内容'
|
field='scanContent'
|
>
|
<Input.TextArea
|
showWordLimit
|
rows={5}
|
placeholder=''
|
wrapperStyle={{ width: '100%' }}
|
onChange={(v) => console.log(v, 'vvvvvv')}
|
/>
|
</FormItem>
|
<div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => { handleText() }}>使用文字</Button></div>
|
</Form>
|
</Modal>
|
|
</>
|
);
|
};
|
|
export default DocumentScanner;
|
