督办

dminyi

2024-09-05 d6d093ad43e214364937d24083ff08d45fda827d

 gz-customerSystem/src/views/register/handleFeedback/component/FileUpLoad.jsx

@@ -1,92 +1,86 @@
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 { Form, Input, Modal, Upload } from '@arco-design/web-react';
import { IconLink } from '@arco-design/web-react/icon';


const { TextArea } = Input;
const { Text } = Typography;
const FormItem = Form.Item;

const DocumentScanner = ({
  visible,
  onCancel,
  onConfirm,
  formRef,
  onCancel

}) => {

  const [scanFile, setScanFile] = useState(false);
  const [scanImage, setScanImage] = useState(false);
  const [scaned, setScaned] = useState(false);
  const [fileView, setFileView] = useState(null);
  const [fileView, setFileView] = useState();

  useEffect(() => {
    if (!visible) {
      setScanImage(false);
      setScaned(false);
      setFileView(null);
    }
  }, [visible]);

  const handleUploadChange = (info) => {
    if (info.fileList.length > 0) {
  const handleUploadChange = (info, currentFile) => {
    if (info.length > 0) {
      setScanImage(true);
    }
    setFileView({
      ...info.fileList[0],
      url: URL.createObjectURL(info.fileList[0].originFile),
      ...currentFile,
      url: URL.createObjectURL(currentFile.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}
      >
      <Modal style={{ width: '1200px' }} visible={visible} onCancel={onCancel} title='识别上传材料' centered footer={null}>
        <Form
          ref={formRef}
          layout='vertical'
          requiredSymbol={false}
          initialValues={{
          }}//默认值
          style={{ marginTop: '4px' }}
        >
          <Form.Item label='选择图片' name='file'>
          <FormItem
            label='选择图片'
            field='file'
          >
            <Upload
              drag
              // multiple
              limit={1}
              accept='image/*'
              onDrop={() => {}}
              tip='支持png、jpg、pdf等格式文件上传，每次上传大小不超过10M'
              // 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),

              //   });

              // }}
              onChange={handleUploadChange}
            >
              <Text>点击或者拖拽文件到这里</Text>
            </Upload>
          </Form.Item>
            // onSuccess={() => setScanImage(true)}
            />
            {/* <img src={file?.url} alt=""/> */}
          </FormItem>

        </Form>

      </Modal>
      <Modal
        style={{ width: '944px' }}
        visible={visible && scanImage}
        onCancel={() => setScanImage(false)}
        footer={null}
        title='选择识别范围'
        centered
      >
      <Modal style={{ width: '944px' }} visible={scanImage} onCancel={() => setScanImage(false)} footer={null} title='选择识别范围' centered>
        <img
          src={fileView?.url}
          alt=""
@@ -98,35 +92,21 @@
            objectFit: 'contain',
          }}
        />
        <div style={{ marginTop: '20px' }}>
          <Button type="primary" onClick={handleStartRecognition}>
            开始识别
          </Button>
        </div>
        <div><Button type="primary" onClick={() => setScaned(true)} style={{ marginTop: '20px' }}>开始识别</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
      <Modal style={{ width: '1200px' }} visible={scaned} onCancel={() => setScaned(false)} footer={null} title='识别上传材料' centered>
        <div style={{  marginBottom: '8px' }}>识别内容</div>
        <Input.TextArea
          showWordLimit
          rows={5}
          placeholder=''
          wrapperStyle={{ width: '100%' }}
          defaultValue='识别内容'
          onChange={(e) => handleUseText(e.target.value)}
          onChange={(v) => console.log(v, 'vvvvvv')}
        />
        <div style={{ marginTop: '24px' }}>
          <Button type="primary" onClick={() => handleUseText('识别内容')}>
            使用文字
          </Button>
        </div>
        <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => { onConfirm(); setScanFile(false); setScanImage(false); setScaned(false); }}>使用文字</Button></div>
      </Modal>

    </>
  );
};