识别上传材料

dminyi

2024-08-15 12c4ffda1ed8477c4997d9630796365c72fa9f7c

识别上传材料

 gz-customerSystem/src/api/appUrl.js

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-02-16 11:25:57
 * @LastEditTime: 2024-08-13 14:17:29
 * @LastEditTime: 2024-08-15 09:36:44
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: api地址

 gz-customerSystem/src/assets/images/check.png

 gz-customerSystem/src/assets/images/image.png

 gz-customerSystem/src/assets/images/index.js

@@ -35,6 +35,8 @@
import question1 from "./question1.png";
import person from "./person.png";
import link from "./link.png";
import check from "./check.png";
import image from './image.png'

export {
  ledger_1,
@@ -65,4 +67,6 @@
  question1,
  person,
  link,
  check,
  image
};

 gz-customerSystem/src/components/ModalView/index.less

 gz-customerSystem/src/components/MyUpload/index.jsx

@@ -2,8 +2,8 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-03-05 17:14:00
 * @LastEditTime: 2023-04-25 19:26:31
 * @LastEditors: lwh
 * @LastEditTime: 2024-08-15 09:56:54
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: 公共上传组件
 * 附件类型对照
@@ -22,8 +22,9 @@
import React, { useEffect, useState, useImperativeHandle } from 'react';
import PropTypes from 'prop-types';
import { Upload, Image } from 'antd';
import { CloudUploadOutlined } from '@ant-design/icons';
import { CloudUploadOutlined, PlusOutlined } from '@ant-design/icons';
import * as $$ from '../../utils/utility';
import { add } from '../../assets/images'

const { Dragger } = Upload;

@@ -41,7 +42,7 @@
 * handleChangeFile, // 附件成功新增和成功删除触发事件，用于更新附件列表
 * formatType, // 附件格式类型，用于限制上传文件格式
 */
const MyUpload = ({ ledgerType = false, type, accept, fileId, fileType, showFileList = true, fileList, handleChangeFile, myUploadRef, children, formatType = '格式支持PNG、JPG、PDF、DOC、DOCX、XLS、XLSX' }) => {
const MyUpload = ({ ledgerType = false, type, accept, fileId, fileType, showFileList = true, fileList, handleChangeFile, fileIcon, myUploadRef, children, formatType = '格式支持PNG、JPG、PDF、DOC、DOCX、XLS、XLSX' }) => {
  let appUrl = $$.appUrl;

  // 单个预览图片控制
@@ -163,7 +164,8 @@
      ) : (
        <Dragger {...props}>
          <p className="ant-upload-drag-icon">
            <CloudUploadOutlined />
            {fileIcon ? <PlusOutlined style={{ color: 'rgba(0, 0, 0, 0.65)' }} /> :
              <CloudUploadOutlined />}
          </p>
          <p style={{ fontSize: '14px' }}>点击上传图标或拖拽文件至此区域上传</p>
          <p className="ant-upload-hint">{formatType}</p>

 gz-customerSystem/src/views/register/visit/index.jsx

@@ -13,7 +13,7 @@
import * as $$ from '../../../utils/utility';
import "@arco-design/web-react/dist/css/arco.css";
import '../index.less';
import { Space } from 'antd';
import { message, Space } from 'antd';
import {Button } from '@arco-design/web-react';
import VisitorRegister from './visitorRegister';
import Preview from './preview';
@@ -43,6 +43,7 @@

    //保存信息
  const handleSubmit = async () => {
    message.success({top:100, content: (<><span style={{fontSize:'16px',fontWeight:'bold'}}>登记成功</span><div>大厅来访登记成功</div></>),})
  }

    //预览信息
@@ -84,7 +85,7 @@
                                <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} >保存信息</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleReview}>预览信息</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={handleSubmit}>提交信息</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>自行受理</Button>
                                <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} onClick={() => selfAcceptance()}>自行受理</Button>
                                <Button type='secondary' onClick={handleReview}>返回上级页面</Button>
                            </Space>
                        </div>

 gz-customerSystem/src/views/register/visit/visitorRegister.jsx

@@ -1,11 +1,13 @@
import React, { useState, useEffect, useRef } from "react";
import PersonCard from '../../../components/personCard';
import * as $$ from '../../../utils/utility';
import { question1 } from '../../../assets/images';
import { Row, Col, Space, Tooltip } from 'antd';
import { Form, Input, Button, Radio, Select, DatePicker, Cascader } from '@arco-design/web-react';
import { question1, image } from '../../../assets/images';
import { Row, Col, Space, Tooltip, Button } from 'antd';
import { Form, Input, Radio, Select, DatePicker, Cascader } from '@arco-design/web-react';
import "@arco-design/web-react/dist/css/arco.css";
import TableView from '../../../components/TableView';
import MyModal from '../../../components/MyModal';
import MyUpload from '../../../components/MyUpload';
import '../index.less';

const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息
@@ -23,8 +25,11 @@

const Organization = () => {
  const formRef = useRef();


  const [scanFile, setScanFile] = useState(false);
  const [filesList, setFilesList] = useState([]);
  const [scanImage, setScanImage] = useState(false);
  const [scaned, setScaned] = useState(false);
  const [upload, setUpLoad] = useState(false);
  const fakeData = [
    {
      id: 3,
@@ -149,7 +154,7 @@
          <div>查看</div>
          <div>删除</div>
          <div>下载</div>
          <div>上传</div>
          <div onClick={() => setUpLoad(true)}>上传</div>
        </div>
      )
    },
@@ -221,6 +226,9 @@
        // Message.error('校验失败，请检查字段！');
      }
    }
  }

  function handleChangeFile() {
  }


@@ -353,7 +361,7 @@
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} />
                </Tooltip>
                <div className="must">必填</div>
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }}>识别上传材料</div>
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanFile(true)}>识别上传材料</div>
              </div>
              }
              field='summarize'
@@ -375,7 +383,7 @@
                  <img src={question1} alt="" style={{ width: '13px', height: '13px', marginTop: '4px', marginLeft: '4px' }} />
                </Tooltip>
                <div className="must">必填</div>
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }}>识别上传材料</div>
                <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={() => setScanImage(true)}>识别上传材料</div>
              </div>
              }
              field='apply'
@@ -414,6 +422,48 @@
        bordered={true}
        style={{ marginBottom: '60px' }}
      />

      <MyModal width={1200} visible={scanFile} onCancel={() => setScanFile(false)} footer={false} title='识别上传材料'>
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>选择图片</div>
        <MyUpload
          ledgerType={true}
          fileId={'10001'}
          handleChangeFile={(type, info, apiResult) => {
            handleChangeFile(type, info, apiResult);
          }}
          accept="XLS、XLSX"
          formatType='格式支持XLS、XLSX'
          fileType="22_00018-504"
          fileList={filesList}
          fileIcon={true}
        />

      </MyModal>
      <MyModal width={944} visible={scanImage} onCancel={() => setScanImage(false)} footer={false} title='选择识别范围'>
        <img src={image} alt="" style={{ margin: '20px 0px' }} />
        <div><Button type="primary" onClick={() => setScaned(true)}>开始识别</Button></div>
      </MyModal>
      <MyModal width={1200} visible={scaned} onCancel={() => setScaned(false)} footer={false} title='识别上传材料'>
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
        <Input.TextArea
          showWordLimit
          rows={5}
          placeholder=''
          wrapperStyle={{ width: '100%' }}
        />
        <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => setScaned(true)}>使用文字</Button></div>
      </MyModal>
      <MyModal width={1200} visible={upload} onCancel={() => setUpLoad(false)} footer={false} title='识别上传材料'>
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
        <Input.TextArea
          showWordLimit
          rows={5}
          placeholder=''
          wrapperStyle={{ width: '100%' }}
        />
        <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => setScaned(true)}>上传完成</Button></div>
      </MyModal>
      
    </div>
  )
}