import React, { useState, useEffect, useRef, Fragment } from "react";
|
import { Row, Col, Space } from 'antd';
|
import { Form, Input, Button, Radio, Select, Checkbox, Upload } from '@arco-design/web-react';
|
import KeyVisits from "@/components/personCard/KeyVisits";
|
import * as $$ from '@/utils/utility';
|
import ArcoUpload from '@/components/ArcoUpload';
|
import { Scrollbars } from "react-custom-scrollbars";
|
|
const FormItem = Form.Item;
|
const Option = Select.Option;
|
const InputSearch = Input.Search;
|
const RadioGroup = Radio.Group;
|
const CheckboxGroup = Checkbox.Group;
|
const appUrl = $$.appUrl;
|
|
function getId() {
|
return $$.ax.request({ url: `caseUtils/getNewTimeId`, type: 'get', service: 'utils' });
|
}
|
|
function delFile(id) {
|
return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'delete', service: 'sys', data: { id } });
|
}
|
|
export default function AgentDialog(props) {
|
const formRef = useRef();
|
const [visitList, setVisitList] = useState([])
|
const [id, setId] = useState()
|
|
useEffect(() => {
|
if (props.editData) {
|
//编辑
|
formRef.current.setFieldsValue({
|
...props.editData
|
})
|
//过滤代理人
|
setVisitList(props.fakeData.filter(item => {
|
if (props.editData.perType === '24_00006-1') {
|
return item.perType === '15_020008-1'
|
} else {
|
return item.perType === '15_020008-2'
|
}
|
}))
|
} else {
|
//过滤代理人
|
setVisitList(props.fakeData.filter(item => {
|
if (props.dialogType === '24_00006-1') {
|
return item.perType === '15_020008-1'
|
} else {
|
return item.perType === '15_020008-2'
|
}
|
}))
|
//获取id
|
getAppId()
|
}
|
}, [])
|
|
//获取id
|
const getAppId = async () => {
|
const res = await getId()
|
if (res.type) {
|
setId(res.data)
|
}
|
}
|
|
//保存信息
|
const handleSave = () => {
|
if (formRef.current) {
|
formRef.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
const fieldValue = formRef.current.getFields()
|
if (props.editData) {
|
props.handleAddParty({
|
...fieldValue
|
}, true)
|
} else {
|
props.handleAddParty({
|
...fieldValue,
|
perType: props.dialogType,
|
perTypeName: $$.options.personType.find(item => item.value === props.dialogType).label,
|
id: id
|
}, false)
|
}
|
props.onClose()
|
}
|
});
|
}
|
}
|
|
//上传身份证识别
|
const handleChangeFile = (data) => {
|
if (data.data && data.data.length != 0) {
|
if (data.data[0].idcardOcrResult) {
|
const { birthday, ...rest } = data.data[0].idcardOcrResult
|
//回填信息
|
formRef.current.setFieldsValue({
|
...rest
|
})
|
}
|
}
|
}
|
|
//删除文件
|
const handleDelFile = async (id) => {
|
const res = await delFile(id)
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功！' });
|
}
|
}
|
|
return (
|
<div className="applyDialog">
|
<Scrollbars style={{ height: '590px' }} autoHide>
|
<Row gutter={[16, 16]} style={{ margin: '0 2px 0 0' }}>
|
<Col span={24}>
|
<Form
|
ref={formRef}
|
layout='vertical'
|
requiredSymbol={false}
|
initialValues={{
|
}}//默认值
|
scrollToFirstError
|
>
|
<Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>
|
<Col span={24} className="doubleFile">
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
|
}}
|
field='file'
|
handleChangeFile={handleChangeFile}
|
label='身份证明材料'
|
editData={props.editData}
|
handleDelFile={handleDelFile}
|
/>
|
</Col>
|
<Col span={24} className="doubleFile">
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-202`,
|
}}
|
field='file1'
|
label='代理人委托书'
|
editData={props.editData}
|
/>
|
</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='mobile'
|
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='certiType'
|
rules={[{ required: true, message: '请选择证件类型' }]}
|
>
|
<Select
|
placeholder='请选择'
|
allowClear
|
options={$$.options.cardType}
|
onChange={(value, options) => {
|
formRef.current.setFieldValue('certiTypeName', options && options.children)
|
}}
|
/>
|
</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='certiNo'
|
>
|
<InputSearch
|
searchButton='读取卡证'
|
placeholder='请填写'
|
/>
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label='联系地址' field='addr'>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label='户籍地址' field='placeAddr'>
|
<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
|
}
|
onChange={(value, options) => {
|
formRef.current.setFieldValue('nationName', options && options.children)
|
}}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem
|
label='性别'
|
field='sex'
|
>
|
<RadioGroup
|
type='button'
|
options={$$.options.sex}
|
onChange={(value, options) => {
|
if (value) {
|
formRef.current.setFieldValue('sexName', value === '09_00003-1' ? '男' : '女')
|
} else {
|
formRef.current.setFieldValue('sexName', '')
|
}
|
}}
|
>
|
</RadioGroup>
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem
|
label='是否极具个人极端倾向'
|
field='extreme'
|
>
|
<RadioGroup>
|
<Radio value={0}>否</Radio>
|
<Radio value={1}>是</Radio>
|
</RadioGroup>
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem
|
label='委托关系'
|
field='agentRelate'
|
>
|
<Select
|
placeholder='请选择'
|
allowClear
|
options={$$.options.agentRelate}
|
onChange={(value, options) => {
|
formRef.current.setFieldValue('agentRelateName', options && options.children)
|
}}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem
|
label='委托类型'
|
field='agentType'
|
>
|
<Select
|
placeholder='请选择'
|
allowClear
|
options={$$.options.agentType}
|
onChange={(value, options) => {
|
formRef.current.setFieldValue('agentTypeName', options && options.children)
|
}}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>代理对象<div className="must">必填</div></div>)}
|
rules={[{ required: true, message: '请选择代理对象' }]}
|
field='personId'
|
>
|
<CheckboxGroup
|
direction='vertical'
|
options={visitList.map(x => ({
|
label: <span>{x.trueName} <span style={{ color: '#86909c' }}>({x.perTypeName})</span></span>,
|
value: x.id,
|
}))}
|
onChange={(value) => {
|
if (value) {
|
const personList = visitList.filter(item => value.indexOf(item.id) != -1).map(item => item.trueName)
|
formRef.current.setFieldValue('personNameList', personList)
|
}
|
}}
|
>
|
</CheckboxGroup>
|
</FormItem>
|
</Col>
|
</Row>
|
</Form>
|
</Col>
|
</Row>
|
|
{/* 重复来访重点人员 */}
|
<div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}>
|
<KeyVisits />
|
</div>
|
</Scrollbars>
|
<div className='dialogFooter'>
|
<Button
|
type="primary"
|
className="dialogPrimary"
|
onClick={handleSave}
|
>
|
保存
|
</Button>
|
<Button
|
className="dialogBack"
|
onClick={() => {
|
if (props.editData) {
|
formRef.current.resetFields();
|
formRef.current.setFieldsValue({
|
...props.editData
|
})
|
} else {
|
formRef.current.resetFields();
|
}
|
}}
|
>
|
重置
|
</Button>
|
</div>
|
</div>
|
)
|
}
|
