From c1d6dff8bf8340fe030d3089cf5dff0e9cffcf58 Mon Sep 17 00:00:00 2001 From: zhangyongtian <1181606322@qq.com> Date: Thu, 29 Aug 2024 10:24:12 +0800 Subject: [PATCH] Revert "更改命名" --- gz-customerSystem/src/views/register/visit/component/applyDialog.jsx | 366 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 361 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..95eca5e 100644 --- a/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx +++ b/gz-customerSystem/src/views/register/visit/component/applyDialog.jsx @@ -1,23 +1,379 @@ -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, Modal, Cascader, Upload, Message } from '@arco-design/web-react'; +import KeyVisits from "./keyVisits"; +import SelectUnitDialog from "./selectUnitDialog"; +import { + IconLink, +} from '@arco-design/web-react/icon'; -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 [visible, setVisible] = useState(false); + + useEffect(() => { + if (props.editData) { + //编辑 + formRef.current.setFieldsValue({ + ...props.editData + }) + } + }, []) + + + 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' + showUploadList={{ + fileIcon: <IconLink style={{ color: '#1D2129' }} />, + }} + /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label={(<div style={{ display: 'flex' }}>姓名<div className="must">必填</div></div>)} + field='trueName' + rules={[{ required: true, message: '请输入姓名' }]} + > + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)} + field='personNumber' + rules={[ + { required: true, message: '请输入联系方式' }, + { match: /^\+?(\d{1,3})?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})$/, message: '请输入正确的电话号码' }, + ]} + > + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)} + field='docType' + rules={[{ required: true, message: '请选择证件类型' }]} + > + <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, message: '请输入证件号码' }, + { match: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X)$/, message: '请输入正确的证件号码' } + ]} + field='mobile' + > + <InputSearch + searchButton='读取卡证' + placeholder='请填写' + /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label='联系地址' field='phoneAddress'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label='户籍地址' field='domicileAddress'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label='工作单位' field='workUnit'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label='民族' + field='nation' + > + <Select + placeholder='请选择' + allowClear + showSearch + options={$$.options.nation} + filterOption={(inputValue, option) => + option.props.value.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0 || + option.props.children.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0 + } + > + </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 { + //法人、非法人组织 + let isLegal = type === '09_01001-2' + return ( + <> + <Col span={24}> + <FormItem + label={isLegal ? '企业登记材料' : '机构登记材料'} + field='file' + > + <Upload + drag + multiple + accept='image/*' + action='/' + onDrop={(e) => { + }} + tip='支持png、jpg、pdf格式的图片上传,每次上传大小不超过10M' + /> + </FormItem> + </Col> + <Col span={24}> + <FormItem + label={isLegal ? '法定代表人身份证明材料' : '机构代表人身份证明材料'} + field='file1' + > + <Upload + drag + multiple + accept='image/*' + action='/' + onDrop={(e) => { + }} + tip='支持png、jpg、pdf格式的图片上传,每次上传大小不超过10M' + /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label={isLegal ? '企业名称' : '机构名称'} + rules={[{ required: true }]} + field='trueName' + > + <InputSearch + searchButton='选择' + placeholder='请填写' + onSearch={handleSelect} + /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label='联系方式' field='phoneNumber'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label={isLegal ? '企业所在地' : '机构所在地'} field='money'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label={isLegal ? '统一社会信用代码' : '组织机构代码'} field='mobile'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem label={isLegal ? '法定代表人' : '机构代表人'} field='companyName'> + <Input placeholder='请填写' /> + </FormItem> + </Col> + <Col span={12}> + <FormItem + label={isLegal ? '企业类型' : '机构类型'} + 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) => { + if (!errors) { + if (props.editData) { + props.handleAddParty({ + ...props.editData, + ...values + }) + } else { + props.handleAddParty({ + ...values, + partyType: props.dialogType, + perClass: perClass, + perClassName: props.dialogType === 0 ? '申请方当事人' : '被申请方当事人' + }) + } + props.onClose() + } + }); + } + } + + //选择 + const handleSelect = (value) => { + setVisible(true) + } + 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={formRef} + layout='vertical' + requiredSymbol={false} + initialValues={{ + }}//默认值 + scrollToFirstError + > + <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>{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> <Button className="dialogBack"> 重置 </Button> </div> + <Modal + title={'选择单位'} + visible={visible} + onOk={() => setVisible(false)} + onCancel={() => setVisible(false)} + autoFocus={false} + focusLock={true} + footer={null} + > + <SelectUnitDialog /> + </Modal> </div> ) } -- Gitblit v1.8.0