弹窗

dminyi

2024-08-15 ae22a9f162196c6c7ba2085c3e246dc9101c48e4

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

@@ -1,16 +1,32 @@
import React, { useState, useEffect, useRef } from "react";
import { Row, Col, Space, Tooltip, Button } from 'antd';
import { Form, Input, Radio, Select, DatePicker, Cascader,Modal } from '@arco-design/web-react';
import { Form, Input, Radio, Select, DatePicker, Cascader, Modal, Upload } from '@arco-design/web-react';
import "@arco-design/web-react/dist/css/arco.css";
import MyModal from '../../../../components/MyModal';
import MyUpload from '../../../../components/MyUpload';
import PersonCard from '../../../../components/personCard';
import * as $$ from '../../../../utils/utility';
import { question1,image } from '../../../../assets/images';
import {
  question1, image, link,
  applyMaterials,
  applyMaterials_active,
  evidenceMaterials,
  evidenceMaterials_active,

} from '../../../../assets/images';
import { CheckOutlined, } from '@ant-design/icons';
import "@arco-design/web-react/dist/css/arco.css";
import TableView from '../../../../components/TableView';
import '../../index.less';
import ApplyDialog from "./applyDialog";
import FilesCheck from '../../../filesCheck';
import {
  IconFileAudio,
  IconClose,
  IconFaceFrownFill,
  IconUpload,
  IconLink,
} from '@arco-design/web-react/icon';


const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息
const FormItem = Form.Item;
@@ -31,6 +47,47 @@
  const [scanImage, setScanImage] = useState(false);
  const [scaned, setScaned] = useState(false);
  const [upload, setUpLoad] = useState(false);
  const [sourceType, setSourceType] = useState('09_01010-1');
  const [filesCheck, setFilesCheck] = useState(false);

  const personIconType = (v) => {
    switch (v) {
      case '09_01010-1':
        return [applyMaterials, applyMaterials_active,
        ];
      case '09_01010-2':
        return [evidenceMaterials, evidenceMaterials_active];
    }
  }

  const formType = (type) => {
    if (type === '09_01010-1') {
      //自然人
      return (
        <>
          <Col span={24}>
            <FormItem
              field='file'
            >
              <Upload
                drag
                multiple
                accept='image/*'
                action='/'
                height={158}
                onDrop={(e) => {
                }}
                tip='支持png、 jpg、excel、word、pdf等格式的文件上传，每次上传大小不超过10M'
              />
            </FormItem>
          </Col>
        </>
      )
    }
  }



  const fakeData = [
    {
      id: 3,
@@ -157,7 +214,7 @@
      width: 120,
      render: (text) => (
        <div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
          <div>查看</div>
          <div onClick={() => setFilesCheck(true)}>查看</div>
          <div>删除</div>
          <div>下载</div>
          <div onClick={() => setUpLoad(true)}>上传</div>
@@ -420,27 +477,41 @@
        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 width={1200} visible={scanFile} onCancel={() => setScanFile(false)} footer={false} title='识别上传材料' centered>
        <Form
          ref={props.formRef}
          layout='vertical'
          requiredSymbol={false}
          style={{ marginTop: '20px' }}
          initialValues={{
          }}//默认值
        >
          <FormItem
            label='选择图片'
            field='file'
          >
            <Upload
              drag
              multiple
              accept='image/*'
              action='/'
              onDrop={(e) => {
              }}
              tip='支持png、 jpg、pdf等格式文件上传，每次上传大小不超过10M'
              showUploadList={{
                // Please dont remove this comment
                fileIcon: <IconLink />,
              }}
            />
          </FormItem>
        </Form>

      </MyModal>
      <MyModal width={944} visible={scanImage} onCancel={() => setScanImage(false)} footer={false} title='选择识别范围'>
      <MyModal width={944} visible={scanImage} onCancel={() => setScanImage(false)} footer={false} title='选择识别范围' centered>
        <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='识别上传材料'>
      <MyModal width={1200} visible={scaned} onCancel={() => setScaned(false)} footer={false} title='识别上传材料' centered>
        <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
        <Input.TextArea
          showWordLimit
@@ -450,17 +521,50 @@
        />
        <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 width={512} visible={upload} onCancel={() => setUpLoad(false)} footer={false} title='上传材料' centered>
        <div style={{ paddingTop: '24px' }}>
          <Row gutter={[30, 24]} style={{ margin: '0 2px 0 0' }}>
            {$$.options.sourceType.map((x, t) => {
              return (
                <Col span={12} key={t}>
                  <div
                    onClick={() => { setSourceType(x.value) }}
                    className={`casePerfection-cardTab-tab ${x.value === sourceType && 'casePerfection-cardTab-tabActive'}`}
                  >
                    <img src={x.value === sourceType ? personIconType(x.value)?.[1] : personIconType(x.value)?.[0]} alt="" style={{ width: '40px', height: '40px' }} />
                    <div className="casePerfection-cardTab-tab-name">{x.label}</div>
                    {x.value === sourceType && (
                      <>
                        <div className="casePerfection-cardTab-tab-triangle" />
                        <CheckOutlined className="casePerfection-cardTab-tab-check" />
                      </>
                    )}
                  </div>
                </Col>
              );
            })}
            <Col span={24}>
              <Form
                ref={props.formRef}
                layout='vertical'
                requiredSymbol={false}
                initialValues={{
                }}//默认值
              >
                <Row gutter={[32, 0]}>{formType(sourceType)}</Row>
              </Form>
            </Col>
            <Button type="primary">上传完成</Button>

          </Row>
        </div>

      </MyModal>
      
      <MyModal width={1200} visible={filesCheck} onCancel={() => setFilesCheck(false)} footer={false} title='查看事件材料' centered>
        <div className="mediationWindow-modal-main" style={{ display: 'flex' }}>
          <FilesCheck />
        </div>
      </MyModal>
      <Modal
        title={'添加' + peopleMap[dialogType]}
        visible={addVisabled}