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),
|
});
|
|
setScanContent(fileView.response.data.ocrResult.wordsResult[0])
|
};
|
|
console.log(fileView, 'fileView')
|
|
return (
|
<>
|
<Modal style={{ width: '1200px' }} visible={visible} onCancel={onCancel} title='识别上传材料' centered footer={null}>
|
<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={{
|
// 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),
|
|
// });
|
|
// }}
|
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>
|
<img
|
src={fileView?.url}
|
alt=""
|
style={{
|
display: 'block',
|
margin: 'auto',
|
maxWidth: '100%',
|
maxHeight: '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>
|
<Form
|
ref={formRef}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
initialValues={{
|
scanContent: scanContent,
|
}}//默认值
|
>
|
<FormItem
|
label='识别内容'
|
field='scanContent'
|
>
|
<Input.TextArea
|
showWordLimit
|
rows={5}
|
placeholder=''
|
defaultValue={scanContent}
|
wrapperStyle={{ width: '100%' }}
|
onChange={(v) => console.log(v, 'vvvvvv')}
|
/>
|
<div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => { onConfirm(); setScanFile(false); setScanImage(false); setScaned(false); }}>使用文字</Button></div>
|
</FormItem>
|
|
</Form>
|
</Modal>
|
|
</>
|
);
|
};
|
|
export default DocumentScanner;
|
