From e4a96c9f1d07f283c0205f8306ccdf892bddf9e8 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Fri, 16 Aug 2024 09:56:12 +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 | 301 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 296 insertions(+), 5 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..78003e0 100644 --- a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx +++ b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx @@ -1,16 +1,307 @@ -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, Space } 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'; +import KeyVisits from "./keyVisits"; -export default function applyDialog(props) { +const FormItem = Form.Item; +const Option = Select.Option; +const InputSearch = Input.Search; +const RadioGroup = Radio.Group; + +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='支持png、jpg、pdf格式的图片上传,每次上传大小不超过10M' + /> + </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='minzu' + > + <Select placeholder='请选择' allowClear> + {['汉族',].map((option, index) => ( + <Option key={option} value={option}> + {option} + </Option> + ))} + </Select> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label='性别' + field='sex' + > + <RadioGroup + type='button' + > + <Radio value='0'>男</Radio> + <Radio value='1'>女</Radio> + </RadioGroup> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label='是否极具个人极端倾向' + field='isBad' + > + <RadioGroup> + <Radio value='0'>否</Radio> + <Radio value='1'>是</Radio> + </RadioGroup> + </FormItem> + </Col> + </> + ) + } else { + //法人、非法人组织 + return ( + <> + <Col span={24}> + <FormItem + label='企业登记材料' + field='file' + > + <Upload + drag + multiple + accept='image/*' + action='/' + onDrop={(e) => { + }} + tip='支持png、jpg、pdf格式的图片上传,每次上传大小不超过10M' + /> + </FormItem> + </Col> + <Col span={24}> + <FormItem + label='法定代表人身份证明材料' + field='file1' + > + <Upload + drag + multiple + accept='image/*' + action='/' + onDrop={(e) => { + }} + tip='支持png、jpg、pdf格式的图片上传,每次上传大小不超过10M' + /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label='企业名称' + 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='money'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label='企业类型' + field='minzu' + > + <Select placeholder='请选择' allowClear> + {['餐饮服务',].map((option, index) => ( + <Option key={option} value={option}> + {option} + </Option> + ))} + </Select> + </FormItem> + </Col> + <Col span={12}> + <FormItem label='住所' field='money'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + </> + ) + } + } + + //保存信息 + const handleSave = () => { + if (formRef.current) { + formRef.current.validate(undefined, (errors, values) => { + console.log(errors, values); + }); + } + } + return ( - <div> + <div className="applyDialog"> <div style={{ height: '590px', overflowY: 'scroll' }}> - + <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 style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}> + <KeyVisits /> + </div> </div> <div className='dialogFooter'> <Button type="primary" className="dialogPrimary" + onClick={handleSave} > 保存信息 </Button> -- Gitblit v1.8.0