From 564bfb399c4bf4d9a59d7d5d2f2bf56f75f5b220 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Mon, 02 Sep 2024 14:22:47 +0800 Subject: [PATCH] 流转办理 --- gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx | 121 ++++++++++++++++++++++++++-------------- 1 files changed, 79 insertions(+), 42 deletions(-) diff --git a/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx b/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx index 4b4fbcc..59e43c9 100644 --- a/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx +++ b/gz-customerSystem/src/views/register/handleFeedback/component/handle.jsx @@ -1,7 +1,7 @@ import React, { useState, useRef, useEffect } from 'react'; -import { Col, Space, Row, Tooltip, Button } from 'antd'; +import { Col, Space, Row, Tooltip } from 'antd'; import { register, fold, down, empty, link } from '@/assets/images'; -import { Form, Input, Tabs, Typography, Empty } from '@arco-design/web-react'; +import { Form, Input, Tabs, Typography, Empty, Upload, Button, Modal } from '@arco-design/web-react'; import { question1, } from '@/assets/images'; import ProgressStep from '@/components/ProgressStep/VisitStep'; import SelectObjModal from '@/components/SelectObjModal/selectPerson'; @@ -9,6 +9,9 @@ import { scan } from '@/assets/images/icon' import DocumentScanner from './FileUpLoad' import * as $$ from '@/utils/utility'; +import { + IconLink, +} from '@arco-design/web-react/icon'; const InputSearch = Input.Search; @@ -77,7 +80,8 @@ const Handle = () => { const [selectedTab, setSelectedTab] = useState('1'); // 默认选中第一个 tab const [wantUser, setWantUser] = useState({}); - // const [scanFile, setScanFile] = useState(false); + const [formView, setFormView] = useState(false); + const [personView, setPersonView] = useState(false); const tabs = [ { index: '1', label: '承办部门' }, @@ -177,20 +181,20 @@ const [scannerVisible, setScannerVisible] = useState(false); - const handleConfirm = (text) => { - console.log('识别完成:', text); + const handleConfirm = () => { + // 处理确认逻辑 + setScannerVisible(false); + }; + + const handleCancel = () => { + // 处理取消逻辑 setScannerVisible(false); }; const openScanner = () => { setScannerVisible(true); - formRef.current?.resetFields(); - formRef.current?.setFieldsValue({}); }; - const onCancel = () => { - setScannerVisible(false); - }; @@ -245,7 +249,7 @@ <FormItem label={<div style={{ display: 'flex' }}> <span style={{ color: '#86909C' }}>经办人</span> <Tooltip> - <img src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} /> + <img onClick={() => setPersonView(!personView)} src={question1} alt="" style={{ width: '13px', height: '13px', margin: '4px 4px 0px 4px' }} /> </Tooltip> </div> } @@ -309,38 +313,67 @@ description='暂无数据' /> } - <div className='Form'> - <Col span={24} style={{ marginBottom: '8px' }}> - <Space size='small'> - <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>添加办理记录</h5> + {formView && + <div className='Form'> + <Col span={24} style={{ marginBottom: '8px' }}> + <Space size='small'> + <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>添加办理记录</h5> + </Space> + </Col> + <Col span={24}> + <FormItem + label={<div style={{ display: 'flex' }}> + 办理意见 + <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} /> + <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={openScanner}>识别材料</div> + </div> + } + field='caseDes' + rules={[{ message: '请填写事项概况', required: true }]} + > + <Input.TextArea + maxLength={2000} + showWordLimit + rows={5} + placeholder='请完整描述事项概况,应具备5要素:发生时间+发生地点+人物情况+事项起因+事项经过' + wrapperStyle={{ width: '100%' }} + /> + </FormItem> + </Col> + <Col span={24}> + <FormItem + label={<div style={{ display: 'flex' }}> + 办理附件 + </div> + } + field='caseDes' + rules={[{ message: '请填写事项概况', required: true }]} + > + <Upload + drag + multiple + accept='image/*' + action='/' + onDrop={(e) => { + }} + tip='支持png、jpg、pdf格式的图片上传,每次上传大小不超过10M' + showUploadList={{ + fileIcon: <IconLink style={{ color: '#1D2129' }} />, + }} + /> + </FormItem> + </Col> + <Space size='middle'> + <Button type='primary'>保存</Button> + <Button type='secondary'>取消添加</Button> </Space> - </Col> - <Col span={24}> - <FormItem - label={<div style={{ display: 'flex' }}> - 办理意见 - <img src={scan} alt="" style={{ marginRight: '-2px', marginLeft: '8px' }} /> - <div style={{ marginLeft: '8px', color: '#1A6FB8', fontSize: '14px', cursor: 'pointer' }} onClick={openScanner}>识别材料</div> - </div> - } - field='caseDes' - rules={[{ message: '请填写事项概况', required: true }]} - > - <Input.TextArea - maxLength={2000} - showWordLimit - rows={5} - placeholder='请完整描述事项概况,应具备5要素:发生时间+发生地点+人物情况+事项起因+事项经过' - wrapperStyle={{ width: '100%' }} - /> - </FormItem> - </Col> + </div> - </div> + } </Col> </Form> - <Space style={{ marginTop: '38px', position: 'absolute', bottom: '4px' }}> - <Button type="primary" style={{ backgroundColor: '#1A6FB8' }}>添加办理记录</Button> + <Space style={{ marginTop: '38px', bottom: '4px' }}> + <Button type="primary" style={{ backgroundColor: '#1A6FB8' }} onClick={() => setFormView(!formView)}>添加办理记录</Button> <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }} >结案申请</Button> <Button type='outline' style={{ color: '#1A6FB8', border: '1px solid #1A6FB8' }}>联合处置申请</Button> <Button type='secondary'>返回上级页面</Button> @@ -409,11 +442,15 @@ <DocumentScanner visible={scannerVisible} - onCancel={onCancel} onConfirm={handleConfirm} - formRef={formRef} + onCancel={handleCancel} /> - </div > + + <Modal visible={personView} onCancel={() => setPersonView(false)} title='工作人员信息' centered footer={null}> + + </Modal> + + </div> </> ) -- Gitblit v1.8.0