From d487bd6bf436ccd37c61681f4f20d5d3520c0bda Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Fri, 16 Aug 2024 09:55:50 +0800
Subject: [PATCH] 弹窗
---
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 299 ++++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 232 insertions(+), 67 deletions(-)
diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
index a4be24d..1002c5d 100644
--- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -1,13 +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, Upload } from '@arco-design/web-react';
+import "@arco-design/web-react/dist/css/arco.css";
+import MyModal from '../../../../components/MyModal';
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, Modal } from '@arco-design/web-react';
+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;
@@ -16,69 +35,121 @@
const VisitorRegister = (props) => {
- const [fakeData, setFakeData] = useState([
- // {
- // id: 3,
- // perClassName: '申请方当事人',
- // trueName: '蓝海科技有限公司',
- // mobile: '9144010188453Z',
- // company: true,
- // companyName: '张晓梅',//公司法人
- // partyType: 'applicant',//申请人
- // },
- // {
- // id: 1,
- // perClassName: '申请方代理人',
- // trueName: '王小明',
- // mobile: '410106198802121125',
- // person: true,
- // personNumber: '13388888888',//联系方式
- // partyType: 'applicant',
- // },
- // {
- // id: 2,
- // perClassName: '被申请方当事人',
- // trueName: '大海科技有限公司',
- // mobile: '13800000002',
- // company: true,
- // companyName: '郭小聪',//公司法人
- // partyType: 'respondent',//被申请方
- // remark: [{ label: '精神障碍', color: '#C64FBE' }, { label: '吸毒', color: '#D8A247' }, { label: '社区矫正', color: '#B82F6E' }, { label: '刑满释放', color: '#199C8F' }, { label: '流浪', color: '#3ECB7A' }, { label: '重点青少年', color: '#117AC1' }, { label: '涉稳涉访', color: '#6865D7' }, { label: '潜在风险', color: '#2661CE' }]
- // },
- // {
- // id: 2,
- // perClassName: '被申请方代理人',
- // trueName: '张三',
- // mobile: '13800000002',
- // person: true,
- // personNumber: '13399999999',//联系方式
- // partyType: 'respondent',
- // remark: [{ label: '精神障碍', color: '#C64FBE' }]
- // },
- // {
- // id: 2,
- // perClassName: '被申请方代理人',
- // trueName: '张三',
- // mobile: '13800000002',
- // person: true,
- // personNumber: '13399999999',//联系方式
- // partyType: 'respondent',
- // remark: [{ label: '精神障碍', color: '#C64FBE' }]
- // },
- // {
- // id: 2,
- // perClassName: '被申请方代理人',
- // trueName: '张三',
- // mobile: '13800000002',
- // person: true,
- // personNumber: '13399999999',//联系方式
- // partyType: 'respondent',
- // remark: [{ label: '精神障碍', color: '#C64FBE' }]
- // },
- ]);//当事人信息数据
const [dialogType, setDialogType] = useState(0);//添加当事人的类型
const [addVisabled, setAddVisabled] = useState(false);//添加当事人弹窗控制
+
+
+
+ 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 [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,
+ perClassName: '申请方当事人',
+ trueName: '蓝海科技有限公司',
+ mobile: '9144010188453Z',
+ company: true,
+ companyName: '张晓梅',//公司法人
+ partyType: 'applicant',//申请人
+ },
+ {
+ id: 1,
+ perClassName: '申请方代理人',
+ trueName: '王小明',
+ mobile: '410106198802121125',
+ person: true,
+ personNumber: '13388888888',//联系方式
+ partyType: 'applicant',
+ },
+ {
+ id: 2,
+ perClassName: '被申请方当事人',
+ trueName: '大海科技有限公司',
+ mobile: '13800000002',
+ company: true,
+ companyName: '郭小聪',//公司法人
+ partyType: 'respondent',//被申请方
+ remark: [{ label: '精神障碍', color: '#C64FBE' }, { label: '吸毒', color: '#D8A247' }, { label: '社区矫正', color: '#B82F6E' }, { label: '刑满释放', color: '#199C8F' }, { label: '流浪', color: '#3ECB7A' }, { label: '重点青少年', color: '#117AC1' }, { label: '涉稳涉访', color: '#6865D7' }, { label: '潜在风险', color: '#2661CE' }]
+ },
+ {
+ id: 2,
+ perClassName: '被申请方代理人',
+ trueName: '张三',
+ mobile: '13800000002',
+ person: true,
+ personNumber: '13399999999',//联系方式
+ partyType: 'respondent',
+ remark: [{ label: '精神障碍', color: '#C64FBE' }]
+ },
+ {
+ id: 2,
+ perClassName: '被申请方代理人',
+ trueName: '张三',
+ mobile: '13800000002',
+ person: true,
+ personNumber: '13399999999',//联系方式
+ partyType: 'respondent',
+ remark: [{ label: '精神障碍', color: '#C64FBE' }]
+ },
+ {
+ id: 2,
+ perClassName: '被申请方代理人',
+ trueName: '张三',
+ mobile: '13800000002',
+ person: true,
+ personNumber: '13399999999',//联系方式
+ partyType: 'respondent',
+ remark: [{ label: '精神障碍', color: '#C64FBE' }]
+ },
+ ];
const peopleMap = {
0: '申请方',
1: '被申请方',
@@ -145,10 +216,10 @@
width: 120,
render: (text) => (
<div style={{ display: 'flex', color: '#1A6FB8', gap: '16px' }}>
- <div>查看</div>
+ <div onClick={() => setFilesCheck(true)}>查看</div>
<div>删除</div>
<div>下载</div>
- <div>上传</div>
+ <div onClick={() => setUpLoad(true)}>上传</div>
</div>
)
},
@@ -211,6 +282,10 @@
setDialogType(type)
setAddVisabled(true)
}
+
+ function handleChangeFile() {
+ }
+
return (
<div className='dataSync-page'>
@@ -342,7 +417,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'
@@ -364,7 +439,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'
@@ -403,6 +478,96 @@
bordered={true}
style={{ marginBottom: '60px' }}
/>
+
+ <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='选择识别范围' 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='识别上传材料' centered>
+ <div style={{ marginTop: '20px', marginBottom: '8px' }}>识别内容</div>
+ <Input.TextArea
+ showWordLimit
+ rows={5}
+ placeholder=''
+ wrapperStyle={{ width: '100%' }}
+ defaultValue='识别内容'
+ />
+ <div style={{ marginTop: '24px' }}><Button type="primary" onClick={() => setScaned(true)}>使用文字</Button></div>
+ </MyModal>
+ <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}
--
Gitblit v1.8.0