From bd1c9d25b6671816532b7bba958d24cc62cddcb0 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Thu, 15 Aug 2024 12:00:33 +0800 Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master --- gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 167 insertions(+), 6 deletions(-) diff --git a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx index 327343f..5e0e010 100644 --- a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx +++ b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx @@ -1,11 +1,172 @@ -import React from 'react' -import { Form, Input, Button, Radio, Select, DatePicker, Cascader } from '@arco-design/web-react'; +import React, { useState, useEffect, useRef, Fragment } from "react"; +import * as $$ from '../../../../utils/utility'; +import { Row, Col } from 'antd'; +import { + CheckOutlined, +} from '@ant-design/icons'; +import { + caseperfection_person, + caseperfection_person_active, + caseperfection_legal, + caseperfection_legal_active, + caseperfection_organize, + caseperfection_organize_active, +} from '../../../../assets/images/icon'; +import { Form, Input, Button, Radio, Select, DatePicker, Cascader, Upload, Message } from '@arco-design/web-react'; -export default function applyDialog(props) { +const FormItem = Form.Item; +const Option = Select.Option; +const InputSearch = Input.Search; + +export default function ApplyDialog(props) { + const formRef = useRef(); + const [perClass, setPerClass] = useState('09_01001-1') + + const personIconType = (v) => { + switch (v) { + case '09_01001-1': + return [caseperfection_person, caseperfection_person_active]; + case '09_01001-2': + return [caseperfection_legal, caseperfection_legal_active]; + case '09_01001-3': + return [caseperfection_organize, caseperfection_organize_active]; + } + } + + //页面返回 + const formType = (type) => { + if (type === '09_01001-1') { + //自然人 + return ( + <> + <Col span={24}> + <FormItem + label='身份证明材料' + field='file' + > + <Upload + drag + multiple + accept='image/*' + action='/' + onDrop={(e) => { + }} + tip='Only pictures can be uploaded' + /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label={(<div style={{ display: 'flex' }}>姓名<div className="must">必填</div></div>)} + field='name' + > + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)} + field='phone' + > + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)} + field='zhengjian' + > + <Select placeholder='请选择' allowClear> + {['居民身份证',].map((option, index) => ( + <Option key={option} value={option}> + {option} + </Option> + ))} + </Select> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label={(<div style={{ display: 'flex' }}>证件号码<div className="must">必填</div></div>)} + rules={[{ required: true }]} + field='peopleNumber' + > + <InputSearch + searchButton='读取卡证' + placeholder='请填写' + /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label='联系地址' field='money'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label='户籍地址' field='money'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label='工作单位' field='money'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label='民族' + field='民族' + > + <Select placeholder='请选择' allowClear> + {['汉族',].map((option, index) => ( + <Option key={option} value={option}> + {option} + </Option> + ))} + </Select> + </FormItem> + </Col> + </> + ) + } + } + return ( - <div> - <div style={{ height: '590px', overflowY: 'scroll' }}> - + <div className="applyDialog"> + <div> + <div className="dialogTitle">当事人类型</div> + <Row gutter={[16, 16]} style={{ margin: '0 2px 0 0' }}> + {$$.options.personClass.map((x, t) => { + return ( + <Col span={8} key={t}> + <div + onClick={() => { setPerClass(x.value) }} + className={`casePerfection-cardTab-tab ${x.value === perClass && 'casePerfection-cardTab-tabActive'}`} + > + <img src={x.value === perClass ? personIconType(x.value)[1] : personIconType(x.value)[0]} alt="" /> + <div className="casePerfection-cardTab-tab-name">{x.label}</div> + {x.value === perClass && ( + <> + <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(perClass)}</Row> + </Form> + </Col> + </Row> </div> <div className='dialogFooter'> <Button -- Gitblit v1.8.0