import React, { useState, useEffect, useRef, Fragment } from "react";
|
import * as $$ from '@/utils/utility';
|
import { Row, Col, Tooltip } from 'antd';
|
import {
|
PlusOutlined,
|
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 "@/components/personCard/KeyVisits";
|
import SelectUnitDialog from "./selectUnitDialog";
|
import ArcoUpload from '@/components/ArcoUpload';
|
import { Scrollbars } from "react-custom-scrollbars";
|
import { majorStatus_1 } from '@/assets/images'
|
import BasicUpload from "../../../../components/basicUpload";
|
import { checkIdCard } from "../../../../utils/utility";
|
|
const FormItem = Form.Item;
|
const Option = Select.Option;
|
const InputSearch = Input.Search;
|
const RadioGroup = Radio.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 } });
|
}
|
|
// 重点人员信息
|
function getLabelInfoApi(data) {
|
return $$.ax.request({ url: `special/getLabelInfo`, type: 'post', serviceType: 'thrid', service: 'sys', data });
|
}
|
// 个人案件统计
|
function countPersonApi(data) {
|
return $$.ax.request({ url: `caseInfo/countPerson`, type: 'get', service: 'mediate', data });
|
}
|
// 个人案件查询
|
function pagePersonApi(data) {
|
return $$.ax.request({ url: `/caseInfo/pagePerson`, type: 'get', service: 'mediate', data });
|
}
|
|
|
export default function ApplyDialog(props) {
|
const formRef = useRef();
|
const myUploadRef = useRef();
|
const [perClass, setPerClass] = useState('09_01001-1');
|
const [visible, setVisible] = useState(false);
|
const [id, setId] = useState()
|
const [certiNo, setCertiNo] = useState('');
|
const [certiShow, setCertiShow] = useState(false);
|
const [formPrivateData, setFormPrivateData] = useState({});//处理form表单切换当事人类型的操作以及缓存数据
|
// 反应诉求记录
|
const [hisData, setHisData] = useState({});
|
const [labelInfo, setLabelInfo] = useState([]);
|
const [fakeData, setFakeData] = useState({ tableData: [] });
|
const [search, setSearch] = useState({ page: 1, size: 5 });
|
|
|
|
useEffect(() => {
|
if (props.editData) {
|
//编辑
|
formRef.current.setFieldsValue({
|
...props.editData
|
})
|
setPerClass(props.editData.perClass)
|
setId(props.editData.id)
|
if (props.editData?.certiNo) {
|
setCertiShow(true)
|
getAllApi(props.editData?.certiNo)
|
}
|
} else {
|
getAppId()
|
}
|
}, [])
|
|
//获取id
|
const getAppId = async () => {
|
const res = await getId()
|
if (res.type) {
|
setId(res.data)
|
}
|
}
|
|
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 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
|
})
|
setCertiNo(rest.certiNo)
|
setCertiShow(true)
|
getAllApi(rest.certiNo)
|
}
|
}
|
}
|
|
//有身份证号后展示对应的重点人员标签及诉求记录
|
function idCardChange(value) {
|
setCertiNo(value)
|
}
|
|
//输入身份证号失去焦点后
|
function idCardOnBlur() {
|
if (checkIdCard(certiNo)) {
|
let sexName = $$.getGenderByIdCard(certiNo);
|
formRef.current.setFieldsValue({ sex: sexName === '男' ? '09_00003-1' : sexName === '女' ? '09_00003-2' : '' })
|
setCertiShow(true)
|
getAllApi(certiNo)
|
}
|
}
|
function getAllApi(num) {
|
getLabelInfo(num)
|
countPerson(num)
|
pagePerson({ ...search, certiNo: num })
|
}
|
|
|
// 根据个人身份证号查询重点人员信息
|
async function getLabelInfo(idCard) {
|
const res = await getLabelInfoApi({ idNumber: idCard })
|
if (res.type) {
|
let data = res.data || {};
|
console.log('res.data', res.data);
|
setLabelInfo(data?.labelList)
|
}
|
}
|
|
// 根据个人身份证号查询个人案件统计
|
async function countPerson(idCard) {
|
const res = await countPersonApi({ certiNo: idCard })
|
if (res.type) {
|
setHisData(res.data || {})
|
}
|
}
|
|
|
// 根据个人身份证号查询个人案件查询
|
async function pagePerson(submitData) {
|
global.setSpinning(true);
|
const res = await pagePersonApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setSearch(submitData);
|
setFakeData({
|
total: res?.data?.totalElements || 0,
|
tableData: res?.data?.content || [],
|
});
|
}
|
}
|
|
// 页码修改
|
function handleChangePage(page, pageSize, field, order) {
|
let paramsObj = Object.assign(search, { page, size: pageSize });
|
paramsObj = { ...paramsObj }
|
setSearch(paramsObj);
|
|
pagePerson(paramsObj);
|
}
|
|
//删除文件
|
const handleDelFile = async (id) => {
|
const res = await delFile(id)
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功！' });
|
}
|
}
|
|
//页面返回
|
const formType = (type) => {
|
if (type === '09_01001-1') {
|
//自然人
|
return (
|
<>
|
<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}
|
ownerType='22_00018-202'
|
/>
|
</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>
|
{props.canal === '22_00001-1' ?
|
<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>)}
|
field='mobile'
|
>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>}
|
{props.canal === '22_00001-1' ?
|
<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>)}
|
field='certiType'
|
>
|
<Select
|
placeholder='请选择'
|
allowClear
|
options={$$.options.cardType}
|
onChange={(value, options) => {
|
formRef.current.setFieldValue('certiTypeName', options && options.children)
|
}}
|
/>
|
</FormItem>
|
</Col>
|
}
|
|
{props.canal === '22_00001-1' ?
|
<Col span={12}>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>证件号码<div className="must">必填</div></div>)}
|
rules={[{ required: true, message: '请输入证件号码' },
|
{ validator(value, cb) { if (!checkIdCard(value)) { return cb('请输入正确的证件号码') } return cb() } },
|
]}
|
field='certiNo'
|
|
>
|
<InputSearch
|
searchButton='读取卡证'
|
placeholder='请填写'
|
onChange={(v) => idCardChange(v)}
|
onBlur={idCardOnBlur}
|
onSearch={(v) => { $$.info({ type: 'warning', content: '该功能正在开发中...' }) }}
|
/>
|
</FormItem>
|
</Col> : <Col span={12}>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>证件号码</div>)}
|
field='certiNo'
|
|
>
|
<InputSearch
|
searchButton='读取卡证'
|
placeholder='请填写'
|
onChange={(v) => idCardChange(v)}
|
onBlur={idCardOnBlur}
|
onSearch={(v) => { $$.info({ type: 'warning', content: '该功能正在开发中...' }) }}
|
/>
|
</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)
|
}}
|
>
|
</Select>
|
</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={<div style={{ borderRadius: '2px', display: 'flex', alignItems: 'center', gap: '8px' }}><img src={majorStatus_1} alt="" srcset="" /><Tooltip content='是否有个人极端倾向'>{$$.ellipsis('是否有个人极端倾向', 9)}</Tooltip></div>}
|
field='extreme'
|
>
|
<RadioGroup>
|
<Radio value={0}>否</Radio>
|
<Radio value={1}>是</Radio>
|
</RadioGroup>
|
</FormItem>
|
</Col>
|
</>
|
)
|
} else {
|
//法人、非法人组织
|
let isLegal = type === '09_01001-2'
|
return (
|
<>
|
<Col span={24} className="doubleFile">
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${props.mainId}&ownerId=${id}&ownerType=22_00018-203`,
|
}}
|
field='file'
|
label={isLegal ? '企业登记材料' : '机构登记材料'}
|
editData={props.editData}
|
handleDelFile={handleDelFile}
|
ownerType='22_00018-203'
|
/>
|
</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-204`,
|
}}
|
field='file1'
|
label={isLegal ? '法定代表人身份证明材料' : '机构代表人身份证明材料'}
|
editData={props.editData}
|
handleDelFile={handleDelFile}
|
ownerType='22_00018-204'
|
/>
|
</Col>
|
<Col span={12}>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>{isLegal ? '企业名称' : '机构名称'}<div className="must">必填</div></div>)}
|
// 要求企业名称或机构名称输入字数不能少于4个字
|
rules={[
|
{ required: true, message: '请输入' + isLegal ? '企业名称' : '机构名称' },
|
{ validator(value, cb) { if (value?.length < 4) { return cb('请输入至少4个字') } return cb() } },
|
]}
|
field='trueName'
|
>
|
<InputSearch
|
searchButton='选择'
|
placeholder='请填写'
|
// readOnly
|
onSearch={handleSelect}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem
|
label={(<div style={{ display: 'flex' }}>联系方式<div className="must">必填</div></div>)}
|
field='mobile'
|
rules={[
|
{ required: true, message: '请输入联系方式' },
|
{
|
validator(value, cb) {
|
var isPhone = /^\+?(\d{1,3})?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})$/;
|
var isMob = /^(\(\d{3}\)\s|\d{3}-)?\d{8}$/;
|
if (isMob.test(value) || isPhone.test(value)) {
|
return cb();
|
} else {
|
return cb('请输入正确的联系方式');
|
}
|
},
|
},
|
]}
|
>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={isLegal ? '企业所在地' : '机构所在地'} field='addr'>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={isLegal ? '统一社会信用代码' : '组织机构代码'} field='orgaCode'>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label={isLegal ? '法定代表人' : '机构代表人'} field='deputy'>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem
|
label={isLegal ? '企业类型' : '机构类型'}
|
field='orgaType'
|
>
|
<Select
|
placeholder='请选择'
|
allowClear
|
options={isLegal ? $$.options.enterpriseType : $$.options.orgaType}
|
onChange={(value, options) => {
|
formRef.current.setFieldValue('orgaTypeName', options && options.children)
|
}}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={12}>
|
<FormItem label='住所' field='placeAddr'>
|
<Input placeholder='请填写' />
|
</FormItem>
|
</Col>
|
</>
|
)
|
}
|
}
|
|
//保存信息
|
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,
|
perClass: perClass,
|
perTypeName: $$.options.personType.find(item => item.value === props.dialogType).label,
|
perClassName: $$.options.personClass.find(item => item.value === perClass).label,
|
id: id
|
}, false)
|
}
|
props.onClose()
|
}
|
});
|
}
|
}
|
|
//选择
|
const handleSelect = (value) => {
|
if (perClass == '09_01001-3') {
|
Message.warning('该功能暂未开放')
|
return
|
}
|
setVisible(true)
|
}
|
|
//选择数据
|
const selectData = (record) => {
|
formRef.current.setFieldsValue(record)
|
setVisible(false)
|
}
|
|
return (
|
<div className="applyDialog">
|
<Scrollbars style={{ height: '590px' }} autoHide>
|
<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={() => {
|
setFormPrivateData({
|
...formPrivateData,
|
[perClass]: formRef.current.getFields()
|
})
|
setPerClass(x.value)
|
formRef.current.resetFields()
|
formRef.current.setFieldsValue(formPrivateData[x.value])
|
}}
|
className={`redisterPerson-cardTab-tab ${x.value === perClass && 'redisterPerson-cardTab-tabActive'}`}
|
>
|
<img src={x.value === perClass ? personIconType(x.value)[1] : personIconType(x.value)[0]} alt="" />
|
<div className="redisterPerson-cardTab-tab-name">{x.label}</div>
|
{x.value === perClass && (
|
<>
|
<div className="redisterPerson-cardTab-tab-triangle" />
|
<CheckOutlined className="redisterPerson-cardTab-tab-check" />
|
</>
|
)}
|
</div>
|
</Col>
|
);
|
})}
|
<Col span={24}>
|
<Form
|
ref={formRef}
|
layout='vertical'
|
requiredSymbol={false}
|
initialValues={{
|
extreme: 0,
|
nation: '09_00005-1',
|
nationName: '汉族',
|
sex: '09_00003-1',
|
sexName: '男',
|
}}//默认值
|
scrollToFirstError
|
>
|
<Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>{formType(perClass)}</Row>
|
</Form>
|
</Col>
|
</Row>
|
|
{/* 重复来访重点人员 */}
|
{
|
certiShow &&
|
<div style={{ width: 'calc(100% - 9px)', background: '#f2f3f5', padding: '12px' }}>
|
<KeyVisits labelInfo={labelInfo} data={hisData} fakeData={fakeData} search={search} handleChangePage={handleChangePage} />
|
</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
|
})
|
setPerClass(props.editData.perClass)
|
} else {
|
formRef.current.resetFields();
|
setPerClass('09_01001-1')
|
}
|
}}
|
>
|
重置
|
</Button>
|
</div>
|
<Modal
|
title={'选择单位'}
|
visible={visible}
|
onOk={() => setVisible(false)}
|
onCancel={() => setVisible(false)}
|
autoFocus={false}
|
focusLock={false}
|
footer={null}
|
unmountOnExit={true}
|
maskClosable={false}
|
>
|
<SelectUnitDialog perClass={perClass} selectData={selectData} />
|
</Modal>
|
</div>
|
)
|
}
|
