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";
|
|
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);
|
|
|
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 {
|
//法人、非法人组织
|
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='peopleNumber'
|
>
|
<InputSearch
|
searchButton='选择'
|
placeholder='请填写'
|
onSearch={handleSelect}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label='联系方式' field='money'>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={isLegal ? '企业所在地' : '机构所在地'} field='money'>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={isLegal ? '统一社会信用代码' : '组织机构代码'} field='money'>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={isLegal ? '法定代表人' : '机构代表人'} field='money'>
|
<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) => {
|
console.log(errors, values);
|
});
|
}
|
}
|
|
//选择
|
const handleSelect = (value) => {
|
setVisible(true)
|
}
|
|
return (
|
<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]} 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>
|
)
|
}
|
