| | |
| | | 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 "./KeyVisits"; |
| | | import { |
| | | IconLink, |
| | | } from '@arco-design/web-react/icon'; |
| | | 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: 'get', service: 'sys', data: { id } }); |
| | | } |
| | | |
| | | export default function AgentDialog(props) { |
| | | const formRef = useRef(); |
| | | const [visitList, setVisitList] = useState([]) |
| | | const [id, setId] = useState() |
| | | |
| | | useEffect(() => { |
| | | if (props.editData) { |
| | |
| | | }) |
| | | //过滤代理人 |
| | | setVisitList(props.fakeData.filter(item => { |
| | | if (props.editData.dialogType === 2) { |
| | | return item.partyType === 0 |
| | | if (props.editData.perType === '24_00006-1') { |
| | | return item.perType === '15_020008-1' |
| | | } else { |
| | | return item.partyType === 1 |
| | | return item.perType === '15_020008-2' |
| | | } |
| | | })) |
| | | } else { |
| | | //过滤代理人 |
| | | setVisitList(props.fakeData.filter(item => { |
| | | if (props.dialogType === 2) { |
| | | return item.partyType === 0 |
| | | if (props.dialogType === '24_00006-1') { |
| | | return item.perType === '15_020008-1' |
| | | } else { |
| | | return item.partyType === 1 |
| | | 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({ |
| | | ...props.editData, |
| | | ...values, |
| | | }) |
| | | ...fieldValue |
| | | }, true) |
| | | } else { |
| | | props.handleAddParty({ |
| | | ...values, |
| | | partyType: props.dialogType, |
| | | perClassName: props.dialogType === 2 ? '申请方代理人' : '被申请方代理人', |
| | | }) |
| | | ...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"> |
| | | <div style={{ height: '590px', overflowY: 'scroll' }}> |
| | | <Scrollbars style={{ height: '590px' }} autoHide> |
| | | <Row gutter={[16, 16]} style={{ margin: '0 2px 0 0' }}> |
| | | <Col span={24}> |
| | | <Form |
| | |
| | | scrollToFirstError |
| | | > |
| | | <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}> |
| | | <Col span={24}> |
| | | <FormItem |
| | | label='身份证明材料' |
| | | <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' |
| | | > |
| | | <Upload |
| | | drag |
| | | multiple |
| | | accept='image/*' |
| | | action='/' |
| | | onDrop={(e) => { |
| | | }} |
| | | tip='支持png、jpg、pdf格式的图片上传,每次上传大小不超过10M' |
| | | showUploadList={{ |
| | | fileIcon: <IconLink style={{ color: '#1D2129' }} />, |
| | | }} |
| | | /> |
| | | </FormItem> |
| | | handleChangeFile={handleChangeFile} |
| | | label='身份证明材料' |
| | | editData={props.editData} |
| | | handleDelFile={handleDelFile} |
| | | ownerType='22_00018-202' |
| | | /> |
| | | </Col> |
| | | <Col span={24}> |
| | | <FormItem |
| | | label='代理人委托书' |
| | | <Col span={24} className="doubleFile"> |
| | | <ArcoUpload |
| | | params={{ |
| | | action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-207`, |
| | | }} |
| | | field='file1' |
| | | > |
| | | <Upload |
| | | drag |
| | | multiple |
| | | accept='image/*' |
| | | action='/' |
| | | onDrop={(e) => { |
| | | }} |
| | | tip='支持png、jpg、pdf格式的图片上传,每次上传大小不超过10M' |
| | | /> |
| | | </FormItem> |
| | | label='代理人委托书' |
| | | editData={props.editData} |
| | | ownerType='22_00018-207' |
| | | /> |
| | | </Col> |
| | | <Col span={12}> |
| | | <FormItem |
| | |
| | | <Col span={12}> |
| | | <FormItem |
| | | label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)} |
| | | field='personNumber' |
| | | field='mobile' |
| | | rules={[ |
| | | { required: true, message: '请输入联系方式' }, |
| | | { match: /^\+?(\d{1,3})?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})$/, message: '请输入正确的电话号码' }, |
| | |
| | | <Col span={12}> |
| | | <FormItem |
| | | label={(<div style={{ display: 'flex' }}>证件类型<div className="must">必填</div></div>)} |
| | | field='docType' |
| | | field='certiType' |
| | | rules={[{ required: true, message: '请选择证件类型' }]} |
| | | > |
| | | <Select placeholder='请选择' allowClear> |
| | | {['居民身份证',].map((option, index) => ( |
| | | <Option key={option} value={option}> |
| | | {option} |
| | | </Option> |
| | | ))} |
| | | </Select> |
| | | <Select |
| | | placeholder='请选择' |
| | | allowClear |
| | | options={$$.options.cardType} |
| | | onChange={(value, options) => { |
| | | formRef.current.setFieldValue('certiTypeName', options && options.children) |
| | | }} |
| | | /> |
| | | </FormItem> |
| | | </Col> |
| | | <Col span={12}> |
| | |
| | | { 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' |
| | | field='certiNo' |
| | | > |
| | | <InputSearch |
| | | searchButton='读取卡证' |
| | |
| | | </FormItem> |
| | | </Col> |
| | | <Col span={12}> |
| | | <FormItem label='联系地址' field='money'> |
| | | <FormItem label='联系地址' field='addr'> |
| | | <Input placeholder='请填写' /> |
| | | </FormItem> |
| | | </Col> |
| | | <Col span={12}> |
| | | <FormItem label='户籍地址' field='money'> |
| | | <FormItem label='户籍地址' field='placeAddr'> |
| | | <Input placeholder='请填写' /> |
| | | </FormItem> |
| | | </Col> |
| | | <Col span={12}> |
| | | <FormItem label='工作单位' field='money'> |
| | | <FormItem label='工作单位' field='workUnit'> |
| | | <Input placeholder='请填写' /> |
| | | </FormItem> |
| | | </Col> |
| | | <Col span={12}> |
| | | <FormItem |
| | | label='民族' |
| | | field='minzu' |
| | | field='nation' |
| | | > |
| | | <Select placeholder='请选择' allowClear> |
| | | {['汉族',].map((option, index) => ( |
| | | <Option key={option} value={option}> |
| | | {option} |
| | | </Option> |
| | | ))} |
| | | </Select> |
| | | <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}> |
| | |
| | | > |
| | | <RadioGroup |
| | | type='button' |
| | | options={$$.options.sex} |
| | | onChange={(value, options) => { |
| | | if (value) { |
| | | formRef.current.setFieldValue('sexName', value === '09_00003-1' ? '男' : '女') |
| | | } else { |
| | | formRef.current.setFieldValue('sexName', '') |
| | | } |
| | | }} |
| | | > |
| | | <Radio value='0'>男</Radio> |
| | | <Radio value='1'>女</Radio> |
| | | </RadioGroup> |
| | | </FormItem> |
| | | </Col> |
| | | <Col span={12}> |
| | | <FormItem |
| | | label='是否极具个人极端倾向' |
| | | field='isBad' |
| | | field='extreme' |
| | | > |
| | | <RadioGroup> |
| | | <Radio value='0'>否</Radio> |
| | | <Radio value='1'>是</Radio> |
| | | <Radio value={0}>否</Radio> |
| | | <Radio value={1}>是</Radio> |
| | | </RadioGroup> |
| | | </FormItem> |
| | | </Col> |
| | | <Col span={12}> |
| | | <FormItem |
| | | label='委托关系' |
| | | field='weituo' |
| | | field='agentRelate' |
| | | > |
| | | <Select placeholder='请选择' allowClear> |
| | | {['亲属',].map((option, index) => ( |
| | | <Option key={option} value={option}> |
| | | {option} |
| | | </Option> |
| | | ))} |
| | | </Select> |
| | | <Select |
| | | placeholder='请选择' |
| | | allowClear |
| | | options={$$.options.agentRelate} |
| | | onChange={(value, options) => { |
| | | formRef.current.setFieldValue('agentRelateName', options && options.children) |
| | | }} |
| | | /> |
| | | </FormItem> |
| | | </Col> |
| | | <Col span={12}> |
| | | <FormItem |
| | | label='委托类型' |
| | | field='type' |
| | | field='agentType' |
| | | > |
| | | <Select placeholder='请选择' allowClear> |
| | | {['一般授权代理',].map((option, index) => ( |
| | | <Option key={option} value={option}> |
| | | {option} |
| | | </Option> |
| | | ))} |
| | | </Select> |
| | | <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='dailimap' |
| | | field='personId' |
| | | > |
| | | <CheckboxGroup |
| | | direction='vertical' |
| | | options={visitList.map(x => ({ |
| | | label: <span>{x.trueName} <span style={{ color: '#86909c' }}>({x.perClassName})</span></span>, |
| | | 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> |
| | |
| | | </Row> |
| | | |
| | | {/* 重复来访重点人员 */} |
| | | <div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}> |
| | | {/* <div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', marginBottom: '20px', padding: '12px' }}> |
| | | <KeyVisits /> |
| | | </div> |
| | | </div> |
| | | </div> */} |
| | | </Scrollbars> |
| | | <div className='dialogFooter'> |
| | | <Button |
| | | type="primary" |
| | |
| | | > |
| | | 保存 |
| | | </Button> |
| | | <Button className="dialogBack"> |
| | | <Button |
| | | className="dialogBack" |
| | | onClick={() => { |
| | | if (props.editData) { |
| | | formRef.current.resetFields(); |
| | | formRef.current.setFieldsValue({ |
| | | ...props.editData |
| | | }) |
| | | } else { |
| | | formRef.current.resetFields(); |
| | | } |
| | | }} |
| | | > |
| | | 重置 |
| | | </Button> |
| | | </div> |