import React, { useState, useEffect } from 'react';
|
import { Typography, Button } from 'antd';
|
import { CheckOutlined, } from '@ant-design/icons';
|
import { Form, Input, Modal,Upload } from '@arco-design/web-react';
|
import { IconLink } from '@arco-design/web-react/icon';
|
|
|
const { TextArea } = Input;
|
const { Text } = Typography;
|
|
const DocumentScanner = ({
|
visible,
|
onCancel,
|
onConfirm,
|
formRef,
|
}) => {
|
const [scanImage, setScanImage] = useState(false);
|
const [scaned, setScaned] = useState(false);
|
const [fileView, setFileView] = useState(null);
|
|
useEffect(() => {
|
if (!visible) {
|
setScanImage(false);
|
setScaned(false);
|
setFileView(null);
|
}
|
}, [visible]);
|
|
const handleUploadChange = (info) => {
|
if (info.fileList.length > 0) {
|
setScanImage(true);
|
}
|
setFileView({
|
...info.fileList[0],
|
url: URL.createObjectURL(info.fileList[0].originFile),
|
});
|
};
|
|
const handleStartRecognition = () => {
|
setScaned(true);
|
setScanImage(false);
|
};
|
|
const handleUseText = (text) => {
|
onConfirm(text);
|
onCancel(); // 关闭弹窗
|
};
|
|
return (
|
<>
|
<Modal
|
style={{ width: '1200px' }}
|
visible={visible && !scanImage && !scaned}
|
onCancel={onCancel}
|
title='识别上传材料'
|
centered
|
footer={null}
|
>
|
<Form
|
ref={formRef}
|
layout='vertical'
|
requiredSymbol={false}
|
style={{ marginTop: '4px' }}
|
>
|
<Form.Item label='选择图片' name='file'>
|
<Upload
|
drag
|
limit={1}
|
accept='image/*'
|
onDrop={() => {}}
|
tip='支持png、jpg、pdf等格式文件上传，每次上传大小不超过10M'
|
showUploadList={{
|
fileIcon: <IconLink style={{ color: '#1D2129' }} />,
|
}}
|
onChange={handleUploadChange}
|
>
|
<Text>点击或者拖拽文件到这里</Text>
|
</Upload>
|
</Form.Item>
|
</Form>
|
</Modal>
|
<Modal
|
style={{ width: '944px' }}
|
visible={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 style={{ marginTop: '20px' }}>
|
<Button type="primary" onClick={handleStartRecognition}>
|
开始识别
|
</Button>
|
</div>
|
</Modal>
|
<Modal
|
style={{ width: '1200px' }}
|
visible={visible && scaned}
|
onCancel={() => setScaned(false)}
|
footer={null}
|
title='识别上传材料'
|
centered
|
>
|
<div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
|
<TextArea
|
showWordLimit
|
rows={5}
|
placeholder=''
|
wrapperStyle={{ width: '100%' }}
|
defaultValue='识别内容'
|
onChange={(e) => handleUseText(e.target.value)}
|
/>
|
<div style={{ marginTop: '24px' }}>
|
<Button type="primary" onClick={() => handleUseText('识别内容')}>
|
使用文字
|
</Button>
|
</div>
|
</Modal>
|
</>
|
);
|
};
|
|
export default DocumentScanner;
|
