/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-15 20:09:04
|
* @LastEditTime: 2024-12-02 16:27:30
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:表单组件
|
*/
|
import React, { useState, useRef, useEffect } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Picker, List, Space, Form, DatePicker, InputItem, Select, Button, Toast, Checkbox, TextareaItem, Upload, Switch, Empty } from 'dingtalk-design-mobile';
|
// import { Switch } from 'antd';
|
import { confirmModal, dateFormat } from '../../utils/utility';
|
import FileShow from '../../components/FileShow';
|
import { roomForm } from '../../assets/img';
|
import dd from 'gdt-jsapi';
|
import IdcardOCR from '../../components/IdcardOCR';
|
import MyModal from '../../components/MyModal';
|
import { hkRegion, ax, catchApiError, checkTel, showToast, appUrl, setLocal, confirmThreeButtonModal, myTimeFormat, getLocal } from '../../utils/utility';
|
import rule from '../../utils/rules';
|
import { applyForForm_3, applyForForm_4, applyForForm_5, del, rail, add, mediateIdcard, mediateIdcard_1, mediatetel, mediatetel_1, } from '../../assets/cardImg';
|
import { RightArrow2Outlined } from 'dd-icons';
|
import ModalContent from '../ModalLContent';
|
|
function deleteFile(submitData) {
|
return ax.request({ url: `sys/attachment/removeById`, type: 'get', service: 'ninex', data: submitData });
|
}
|
|
// form表单[]
|
// formData表单value对象 {}
|
// handleChange输入事件 fun
|
// rightButtonOnClick 右侧点击按钮 fun
|
// formstatus 表单登记状态是否显示 true flase
|
// tabPage 页签
|
// tabList 表单登记状态提示信息
|
// 是否为新增表单
|
const RenderFormView = ({ form, formData, handleChange, tabPage, tabList, rightButtonOnClick, formstatus, newAdd, metaAddrClick, OCRsuccessCallback }) => {
|
let token = global.postId || getLocal('postId');
|
const history = useHistory();
|
const [data, setData] = useState({ list: [], total: 0 });
|
const [visible, setVisible] = useState(false);
|
const [expiredDateVisible, setExpiredDateVisible] = useState(false);
|
const [expiredDateData, setExpiredDateData] = useState({ visible: false, visible1: false, });
|
// 选择小区异常情况
|
const [diySelectData, setDiySelectData] = useState(false);
|
const [modalImg, setModalImg] = useState({ visible: false, url: '' });
|
|
// 社保卡提示窗口 1。本人办理弹窗 2。他人代办弹窗
|
const [applyTip, setApplyTip] = useState({ visible: false, type: '1' });
|
|
// 删除文件
|
async function handleDeleteFiles(fileId, ownerType) {
|
global.setSpinning(true);
|
const res = await deleteFile({ id: fileId });
|
global.setSpinning(false);
|
if (res.type) {
|
showToast({ type: 'success', content: '删除成功' });
|
return true;
|
}
|
return false;
|
}
|
|
function render(item, i, listIndex, handleChange, rightButtonOnClick, form, formData, formstatus) {
|
const h = (items) => {
|
let { index, key, value } = items;
|
formData[key] = value;
|
handleChange(formData, key);
|
};
|
|
const fileH = (items, type) => {
|
if (type === 'add') {
|
formData.fileList = formData.fileList.concat(items)
|
} else {
|
formData.fileList = formData.fileList.filter(item => item.id !== items.id)
|
}
|
handleChange(formData, 'fileList');
|
}
|
|
const {
|
name,
|
rules,
|
tabs,
|
require,
|
value,
|
type,
|
showTitle,
|
label,
|
list = [],
|
code,
|
extra = null,
|
margin,
|
display,
|
disabled = false,
|
desc,
|
placeholder = null,
|
files,
|
url,
|
img,
|
rightButton,
|
rightArrow,
|
miniLabel,
|
parameter,
|
startTime,
|
endTime,
|
personType,
|
subtitle,
|
} = item;
|
switch (type) {
|
case 'text':
|
case 'password':
|
case 'phone':
|
case 'idcard':
|
case 'digit':
|
return (
|
<div style={subtitle && { backgroundColor: '#fff', height: '72px' }}>
|
<Form.Item
|
key={name}
|
rules={rules}
|
label={
|
<>
|
<div >
|
<Space align="center">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>
|
{miniLabel && <span className="mini-divider-title">{miniLabel}</span>}
|
</>
|
}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
{name === 'idcard' && disabled === true ? (
|
<div
|
style={{ fontSize: '14px', lineHeight: '1.5', color: 'rgba(23, 26, 29, 0.24)' }}
|
onClick={(e) => {
|
Toast.info({
|
content: '不允许修改已登记居民的证件号，如填写错误，请迁出后重新添加',
|
});
|
}}
|
>
|
{formData[name] ? formData[name] : ''}
|
</div>
|
) : (
|
<InputItem
|
className="render-form-view-input"
|
type={type}
|
value={formData[name] ? formData[name] : ''}
|
onChange={(e) => {
|
h({ key: name, value: e.replace(/\s+/g, '') });
|
}}
|
disabled={disabled}
|
placeholder={placeholder}
|
clear
|
maxLength={50}
|
/>
|
)}
|
</Form.Item>
|
{subtitle && <div onClick={() => setApplyTip({ visible: true, type: '1' })} style={{ padding: '0 16px', color: '#007FFF', position: 'relative', top: '-8px', cursor: 'pointer' }}>{subtitle}</div>}
|
</div>
|
);
|
case 'number':
|
return (
|
<Form.Item
|
key={name}
|
name={name}
|
rules={rules}
|
label={
|
<>
|
<Space align="center">
|
{label}
|
</Space>
|
{miniLabel && <span className="mini-divider-title">{miniLabel}</span>}
|
</>
|
}
|
className={`render-form-view-number ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<InputItem
|
className="render-form-view-input"
|
style={{ textAlign: 'right' }}
|
type='number'
|
value={formData[name] ? formData[name] : ''}
|
onChange={(e) => {
|
h({ key: name, value: e.replace(/\s+/g, '') });
|
}}
|
disabled={disabled}
|
placeholder={placeholder}
|
clear
|
maxLength={50}
|
/>
|
</Form.Item>
|
);
|
// 换行文本输入
|
case 'textBrief':
|
return (
|
<Form.Item
|
position="brief"
|
name={name}
|
key={name}
|
rules={rules}
|
// label={
|
// <Space align="center">
|
// {label}
|
// {require && <span className="public-tag4">必填</span>}
|
// </Space>
|
// }
|
disabled={disabled}
|
label={label}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<InputItem
|
value={formData[name] ? formData[name] : ''}
|
onChange={(e) => {
|
h({ key: name, value: e.replace(/\s+/g, '') });
|
}}
|
|
className="render-form-view-input-brief"
|
placeholder={placeholder}
|
clear
|
maxLength={50}
|
/>
|
</Form.Item>
|
);
|
|
// 换行文本输入（选择按钮选择人员）
|
case 'textBriefSelect':
|
return (
|
<Form.Item
|
position="brief"
|
name={name}
|
key={name}
|
rules={rules}
|
label={
|
<Space style={{ width: '100%' }} justify="between">
|
<Space align="center">
|
{label}
|
</Space>
|
<div onClick={() => rightButtonOnClick('selectPerson', url)} className='public-color'>选择</div>
|
</Space>
|
}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<InputItem
|
disabled={disabled}
|
value={formData[name] ? formData[name] : ''}
|
onChange={(e) => {
|
h({ key: name, value: e.replace(/\s+/g, '') });
|
}}
|
className="render-form-view-input-brief"
|
placeholder={placeholder}
|
clear
|
maxLength={50}
|
/>
|
</Form.Item>
|
);
|
// 换行文本输入（选择负责区域及线路）
|
case 'textBriefSelect1':
|
return (
|
<Form.Item
|
position="brief"
|
name={name}
|
key={name}
|
rules={rules}
|
label={
|
<Space style={{ width: '100%' }} justify="between">
|
<Space align="center">
|
{label}
|
</Space>
|
<div onClick={() => rightButtonOnClick('selectPerson', url)} className='public-color'>选择</div>
|
</Space>
|
}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ fontSize: '17px', lineHeight: '25px' }} className="render-form-view-childView-flex">
|
{
|
formData[name] ? <div style={{ display: 'flex' }}>
|
<img style={{ width: '48px', height: '48px', padding: '0 12px 0 0' }} src={rail} alt="" srcset="" />
|
<div>
|
<div><span style={{ color: '#000000' }} className="searchPersonRoomSearch-card-title">{formData.protectRouteName || '-'}</span></div>
|
<div style={{ marginTop: '4px' }}><span className="searchPersonRoomSearch-card-main-flex">{formData.districtName || '-'}{formData.subdistrictName ? `/${formData.subdistrictName}` : ''}{formData.communityName ? `/${formData.communityName}` : ''}</span></div>
|
|
</div>
|
</div> :
|
<span className="select-color">请选择</span>
|
}
|
</div>
|
{/* <InputItem
|
disabled={disabled}
|
value={formData[name] ? formData[name] : ''}
|
onChange={(e) => {
|
h({ key: name, value: e.replace(/\s+/g, '') });
|
}}
|
className="render-form-view-input-brief"
|
placeholder={placeholder}
|
clear
|
maxLength={50}
|
/> */}
|
</Form.Item>
|
);
|
|
|
|
// 多行文本
|
case 'textarea':
|
return (
|
<Form.Item
|
position="brief"
|
name={name}
|
rules={rules}
|
key={name}
|
style={{ height: '22px' }}
|
label={label}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<TextareaItem
|
value={formData[name] ? formData[name] : ''}
|
onChange={(e) => {
|
h({ key: name, value: e.replace(/\s+/g, '') });
|
}}
|
className="render-form-view-input-briefOther"
|
placeholder={placeholder}
|
clear
|
rows={tabs || 5}
|
/>
|
</Form.Item>
|
);
|
// 单选框
|
case 'select':
|
case 'idcardType':
|
return (
|
<Form.Item
|
name={name}
|
key={name}
|
rules={rules}
|
label={label}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<Picker
|
data={[list]}
|
cols={1}
|
key={name}
|
disabled={disabled}
|
title={label}
|
okText="确定"
|
cascade={false}
|
value={formData[name] ? list.find((it) => it.value == formData[name]) ? [formData[name]] : '' : ''}
|
onChange={(e) => {
|
h({ key: name, value: e[0] });
|
h({
|
key: desc,
|
value: list.find((it) => it.value == e[0]) ? list.find((it) => it.value == e[0]).label : '',
|
});
|
}}
|
extra={<span className="select-color">请选择</span>}
|
>
|
<List.Item className="institutions-add-form-picker-new" arrow> </List.Item>
|
</Picker>
|
|
</Form.Item>
|
);
|
|
case 'diySelect':
|
return (
|
<>
|
<div
|
className={`render-form-view-childView ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div>
|
<div className="render-form-view-childView-flex">
|
<div>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>
|
</div>
|
</div>
|
<div className="render-form-view-childView-flex" onClick={() => setDiySelectData(true)}>
|
{formData[name] !== '99' && (formData[desc] ? <div>{formData[desc]}</div> : <div className="select-color">{placeholder}</div>)}
|
{formData[name] === '99' && (formData.groupname ? <div>{formData.groupname}</div> : <div className="select-color">{placeholder}</div>)}
|
<RightArrow2Outlined className="render-form-view-childView-rightArrow" />
|
</div>
|
</div>
|
</div>
|
<Picker
|
data={[list]}
|
cols={1}
|
key={name}
|
visible={diySelectData}
|
disabled={disabled}
|
title={'选择' + label}
|
okText="确定"
|
cascade={false}
|
value={formData[name] ? list.find((it) => it.value == formData[name]) ? [formData[name]] : '' : ''}
|
onVisibleChange={(e) => { setDiySelectData(!diySelectData) }}
|
onChange={(e) => {
|
// 自行填写
|
if (e[0] === '99') {
|
h({ key: name, value: e[0] });
|
delete formData[desc]
|
// h({
|
// key: desc,
|
// value: list.find((it) => it.value == e[0]) ? list.find((it) => it.value == e[0]).label : '',
|
// });
|
rightButtonOnClick('自行填写')
|
} else {
|
h({ key: name, value: e[0] });
|
delete formData.groupname;
|
h({
|
key: desc,
|
value: list.find((it) => it.value == e[0]) ? list.find((it) => it.value == e[0]).label : '',
|
});
|
}
|
}}
|
extra={<span className="select-color">请选择</span>}
|
>
|
</Picker>
|
</>
|
);
|
// 多列单选框(区域，街道)
|
case 'selectCols':
|
return (
|
<Picker
|
key={name}
|
data={list}
|
cols={2}
|
title={label}
|
okText="确定"
|
cascade={true}
|
value={formData[name]}
|
onChange={(e, item) => {
|
h({ index: i, key: name, value: e });
|
}}
|
extra={<span className="select-color">请选择</span>}
|
>
|
<List.Item
|
className={`render-form-view-title ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
arrow="horizontal"
|
>
|
<Space align="center">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</List.Item>
|
</Picker>
|
);
|
// 多选框
|
case 'select_multiple':
|
return (
|
<div
|
key={name}
|
className={`${i == listIndex - 1 && 'render-form-view-multiple-bottom'} ${i == 0 && 'render-form-view-multiple-top'} ${listIndex - 1 == 0 && 'render-form-view-multiple-radius'
|
}`}
|
>
|
<Form.Item
|
label={
|
<Space align="center">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
}
|
className="render-form-view-switch"
|
>
|
<Select
|
mode="multiple"
|
value={formData[name]}
|
placeholder={
|
<div className="render-form-view-select_multiple">
|
<Space align="center">
|
<span style={{ color: '#171a1d' }}>{label}</span>
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
<div
|
className={
|
formData[name] == null || formData[name].length == 0
|
? 'render-form-view-select_multiple-m'
|
: 'render-form-view-select_multiple-value'
|
}
|
>
|
{formData[desc] == null || formData[desc].length == 0 ? (
|
<span className="select-color">请选择</span>
|
) : (
|
<span>{formData[desc].join(',').substr(0, 10) + '...'}</span>
|
)}
|
</div>
|
</div>
|
}
|
renderSelection={(vs) => {
|
return (
|
<div className="render-form-view-select_multiple">
|
<Space align="center">
|
<span style={{ color: '#171a1d' }}>{label}</span>
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
<div
|
className={
|
formData[name] == null || formData[name].length == 0
|
? 'render-form-view-select_multiple-m'
|
: 'render-form-view-select_multiple-value'
|
}
|
>
|
{formData[name] == null || formData[desc].length == 0 ? '请选择' : formData[desc].join(',').substr(0, 10) + '...'}
|
</div>
|
</div>
|
);
|
}}
|
options={list}
|
title={label}
|
onChange={(e) => {
|
h({ key: name, value: e });
|
h({ key: desc, value: e.map((it) => list.find((ite) => ite.value == it) ? list.find((ite) => ite.value == it).label : '') });
|
}}
|
/>
|
</Form.Item>
|
</div>
|
);
|
// 三级联动选择地址
|
case 'district':
|
return (
|
<Form.Item
|
name={name}
|
key={name}
|
rules={rules}
|
label={label}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<Picker
|
data={hkRegion || list}
|
cols={3}
|
title={label}
|
okText="确定"
|
cascade={true}
|
value={formData[name]}
|
onChange={(e) => {
|
h({ index: i, key: name, value: e });
|
}}
|
extra={<span className="select-color">请选择</span>}
|
>
|
<List.Item className="institutions-add-form-picker-new" arrow> </List.Item>
|
</Picker>
|
</Form.Item>
|
);
|
// 开关
|
case 'switch':
|
return (
|
<Form.Item
|
key={name}
|
label={
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<span className="render-form-view-switch-title">{list[formData[name]] || list[0]}</span>
|
<Switch
|
checked={formData[name] == '2' || formData[name] == null ? false : formData[name] == '1' ? true : ''}
|
onChange={(e) => {
|
h({ index: i, key: name, value: e ? '1' : '2' });
|
}}
|
/>
|
</Form.Item>
|
);
|
// 选择开关
|
case 'switchSelect':
|
return (
|
<div
|
className={`render-form-view-childView ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
<div className='switchSelect'>
|
{
|
list?.map(((i, idx) =>
|
<div onClick={() => h({ key: name, value: i.value })} key={`switchSelect${idx}`} className={formData[name] === i.value ? 'switchSelect-name switchSelect-active' : 'switchSelect-name'}>{i.label}</div>
|
))
|
}
|
</div>
|
</div>
|
</div>
|
);
|
case 'checkbox':
|
return (
|
<Form.Item
|
key={name}
|
label={
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<span className="render-form-view-switch-title">{list[formData[name]] || list[0]}</span>
|
<Checkbox.Group
|
// defaultValue={[1]}
|
// onChange={(values) => {
|
// }}
|
>
|
<Checkbox.Item value='1'>仅受理</Checkbox.Item>
|
</Checkbox.Group>
|
</Form.Item>
|
);
|
case 'checkboxDiy':
|
return (
|
<>
|
{list.map((item, idx) => (
|
<div key={`checkboxDiy${idx}`} onClick={() => h({ key: name, value: item.value })} className="infoView-card" style={{ padding: idx === 0 ? '12px 0 12px 16px' : '0 0 12px 16px' }}>
|
<div className={`people-visit-edit-select-title ${formData[name] === item.value && 'people-visit-edit-select-title-no'}`}><Checkbox checked={formData[name] === item.value ? true : false} className='people-visit-edit-select-checkbox'></Checkbox> {item.title}</div>
|
{
|
formData[name] === item.value && <div className='people-visit-edit-select-subtitle'>{item.subTitle}</div>
|
}
|
{
|
idx === list?.length - 1 ? null : <div style={{ height: '1px', backgroundColor: 'rgba(126,134,142,0.16)', marginTop: '8px' }}></div>
|
}
|
</div>
|
))}
|
</>
|
);
|
// 开关
|
case 'personSwitch':
|
return (
|
<Form.Item
|
key={name}
|
label={
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<span className="render-form-view-switch-title">{list[formData[name]] || list[0]}</span>
|
<Switch
|
checked={formData[name] == '2' || formData[name] == null ? false : formData[name] == '1' ? true : ''}
|
disabled={disabled}
|
onChange={(e) => {
|
name === 'personType' && disabled === true ?
|
Toast.info({
|
content: '不允许修改已登记居民的证件号，如填写错误，请迁出后重新添加',
|
}) :
|
h({ index: i, key: name, value: e ? '1' : '2' });
|
}}
|
/>
|
</Form.Item>
|
);
|
// 时间选择器
|
case 'time':
|
case 'date':
|
return (
|
<Form.Item
|
name={name}
|
key={name}
|
rules={rules}
|
label={label}
|
className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<DatePicker
|
mode="date"
|
minDate={new Date(1900, 1, 1, 0, 0, 0)}
|
maxDate={new Date(2100, 1, 1, 0, 0, 0)}
|
extra={<span className="select-color">请选择</span>}
|
value={formData[name] ? new Date(formData[name]) : ''}
|
onChange={(e) => {
|
h({ key: name, value: e });
|
}}
|
>
|
<List.Item className="institutions-add-form-picker-new" arrow> </List.Item>
|
</DatePicker>
|
</Form.Item>
|
);
|
|
case 'expiredDate':
|
return (
|
<div onClick={() => {
|
if (!expiredDateData.visible && expiredDateData.visible1) {
|
setExpiredDateData({ ...expiredDateData, visible: false, visible1: false, startTime: startTime, endTime: endTime })
|
} else {
|
setExpiredDateData({ ...expiredDateData, visible: true, visible1: true, startTime: startTime, endTime: endTime })
|
}
|
}}>
|
<div
|
className={`render-form-view-childView ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>
|
<div className="render-form-view-childView-flex">
|
<div className="render-form-view-childView-flex">
|
{!formData[endTime] && placeholder && <div className="select-color">{placeholder}</div>}
|
{formData[endTime] && placeholder && <div>
|
{myTimeFormat(formData[endTime], 'YYYY-M-D') == '2099-1-1' ? `${myTimeFormat(formData[startTime], 'YYYY-M-D')}~长期` : `${myTimeFormat(formData[startTime], 'YYYY-M-D')}~${myTimeFormat(formData[endTime], 'YYYY-M-D')}`}
|
</div>}
|
{<RightArrow2Outlined className="render-form-view-childView-rightArrow" />}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
);
|
|
case 'timeYear':
|
return (
|
<DatePicker
|
key={name}
|
title={label}
|
mode="year"
|
format={(val) => `${new Date(val).getFullYear()}年`}
|
extra={<span className="select-color">请选择</span>}
|
value={formData[name] ? formData[name] : ''}
|
onChange={(e) => {
|
h({ key: name, value: e });
|
}}
|
>
|
<List.Item
|
className={`render-form-view-title ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
arrow="horizontal"
|
>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</List.Item>
|
</DatePicker>
|
);
|
// 拍照证件回填
|
case 'idcardOCR':
|
return (
|
<div key={name} style={{ display: `${display ? display : 'flex'}` }}>
|
{list.map((x, t) => (
|
<IdcardOCR key={t} data={x} OCRsuccessCallback={OCRsuccessCallback} />
|
))}
|
</div>
|
);
|
case 'files':
|
return (
|
<div key={type} className="render-form-view-files">
|
<Space align="center" className="render-form-view-space" style={{ marginBottom: '12px' }}>
|
{label}
|
{miniLabel && <span className="mini-divider-title">{miniLabel}</span>}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
<div style={{ display: 'flex', flexFlow: 'row wrap', rowGap: '8px', justifyContent: 'space-between' }}>
|
{list.map((x, t) => (
|
<FileShow
|
formData={formData}
|
fileList={formData[name]}
|
callback={(item, type) => { fileH(item, type) }}
|
key={t}
|
data={x}
|
ownerType={x.ownerType}
|
ownerId={x.ownerId ? formData[x.ownerId] : ''}
|
/>
|
))}
|
</div>
|
</div>
|
);
|
|
case 'files1':
|
return (
|
<div key={type} className="render-form-view-files">
|
<Space align="center" className="render-form-view-space" style={{ marginBottom: '8px' }}>
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
{
|
showTitle &&
|
<div style={{ backgroundColor: 'rgba(0,127,255,0.12)', fontSize: '12px', color: '#007fff', border: '1px solid #007fff', padding: '4px 8px', margin: '0 0 12px' }}>该申领人已有公安照片，如本次不上传新的制卡照片，将以公安照片作为制卡照片</div>
|
}
|
<div style={{ display: 'flex', flexFlow: 'row wrap', rowGap: '8px', justifyContent: 'space-between' }}>
|
{list.map((x, t) => (
|
<FileShow
|
formData={formData}
|
fileList={formData[name]}
|
callback={(item, type) => { fileH(item, type) }}
|
key={t}
|
data={x}
|
ownerType={x.ownerType}
|
ownerId={x.ownerId ? formData[x.ownerId] : ''}
|
/>
|
))}
|
</div>
|
<div style={{ display: 'flex', width: '148px', justifyContent: 'space-between', paddingTop: '12px' }}>
|
<div onClick={() => rightButtonOnClick('', '制卡照片要求')} className='public-color'>制卡照片要求</div>
|
<div onClick={() => rightButtonOnClick('', '拍照工具')} className='public-color'>拍照工具</div></div>
|
</div>
|
);
|
case 'childView':
|
// 标准地址选择
|
return (
|
<div
|
className={`render-form-view-childView ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div>
|
<div className="render-form-view-childView-flex">
|
<div>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>
|
{img && <img src={img} alt="" />}
|
</div>
|
{formData[name] && <div>{formData[name]}</div>}
|
</div>
|
<div className="render-form-view-childView-flex" onClick={() => history.push(url)}>
|
{!formData[name] && <div className="select-color">{placeholder}</div>}
|
{rightArrow && <RightArrow2Outlined className="render-form-view-childView-rightArrow" />}
|
</div>
|
</div>
|
</div>
|
);
|
|
case 'childView2':
|
// 跳转页面后回显
|
return (
|
<div
|
className={`render-form-view-childView ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div>
|
<div className="render-form-view-childView-flex">
|
<div>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>
|
{img && <img src={img} alt="" />}
|
</div>
|
</div>
|
<div
|
className="render-form-view-childView-flex"
|
onClick={() => {
|
if (parameter === 'buildingSelect' && formData[desc]?.length) {
|
confirmThreeButtonModal({
|
title: '操作提示',
|
subtitle: '请选择您的操作类型',
|
actions: [
|
{
|
text: '继续选择',
|
onClick: () => {
|
setLocal(parameter, formData[desc] ? formData[desc] : []);
|
history.push(`${url}?id=${formData.id}`);
|
},
|
},
|
{
|
text: '查看已选择',
|
onClick: () => {
|
setLocal(parameter, formData[desc] ? formData[desc] : []);
|
history.push(`/hztGrid/village/buildingSelectDetail?type=edit`);
|
},
|
},
|
{ text: '取消操作' },
|
],
|
});
|
} else {
|
setLocal(parameter, formData[desc] ? formData[desc] : []);
|
history.push(`${url}?id=${formData.id}`);
|
}
|
}}
|
>
|
{formData[name] && <div>{formData[name]}</div>}
|
{!formData[name] && <div className="select-color">{placeholder}</div>}
|
{rightArrow && <RightArrow2Outlined className="render-form-view-childView-rightArrow" />}
|
</div>
|
</div>
|
</div>
|
);
|
|
// 社保卡领卡网点
|
case 'childView3':
|
return (
|
<div
|
className={`render-form-view-childView ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div>
|
<div className="render-form-view-childView-flex">
|
<div>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>
|
{img && <img src={img} alt="" />}
|
</div>
|
</div>
|
<div
|
className="render-form-view-childView-flex"
|
onClick={() => {
|
rightButtonOnClick(name, label)
|
}}
|
>
|
{formData[name] && <div>{formData[name]}</div>}
|
{!formData[name] && <div className="select-color">{placeholder}</div>}
|
{rightArrow && <RightArrow2Outlined className="render-form-view-childView-rightArrow" />}
|
</div>
|
</div>
|
</div>
|
);
|
|
// 单项选择字典值组件
|
case 'childView4':
|
return (
|
<div
|
className={`render-form-view-childView render-form-childView4-relative ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div>
|
<div className="render-form-view-childView-flex">
|
<div>
|
<Space align="center" style={{ '--gap': '0px' }} className="render-form-view-space">
|
{require && <span className="render-form-childView4-absolute"></span>}
|
{label}
|
</Space>
|
</div>
|
{img && <img src={img} alt="" />}
|
</div>
|
</div>
|
</div>
|
<div
|
className="render-form-view-childView-flex"
|
onClick={() => {
|
rightButtonOnClick(name, label)
|
}}
|
>
|
{formData[name] && <div>{formData[desc]}</div>}
|
{!formData[name] && <div style={{ fontSize: '16px' }} className="select-color">{placeholder}</div>}
|
{rightArrow && <RightArrow2Outlined className="render-form-view-childView-rightArrow" />}
|
</div>
|
</div>
|
);
|
|
case 'imgView':
|
return (
|
<div
|
className={`render-form-view-childView ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div>
|
<div className="render-form-view-childView-flex">
|
<div>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>
|
{img && <img src={img} alt="" />}
|
</div>
|
</div>
|
<div
|
className="render-form-view-childView-flex"
|
onClick={() => {
|
setLocal('dutyGridCodeEditFiles', {
|
files: formData[files],
|
});
|
history.push(`${url}?id=${formData[item.id]}&ownerType=${item.ownerType}`);
|
}}
|
>
|
{!formData[name] && <div className="select-color">{placeholder}</div>}
|
{formData[name] && <div>{formData[name]}</div>}
|
{rightArrow && <RightArrow2Outlined className="render-form-view-childView-rightArrow" />}
|
</div>
|
</div>
|
</div>
|
);
|
case 'buildView':
|
return (
|
<div
|
className={`render-form-view-childView ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div>
|
<div className="render-form-view-childView-flex">
|
<div>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>
|
<div style={{ display: 'flex' }}>
|
{img && <img style={{ padding: '4px' }} src={img} alt="" />}
|
{formData[name] && (
|
<div className={`${formData[name] === '地名地址不符合规则，请检查后重新输入' && 'form-font-color-red'}`}>
|
{formData[name]}
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
<div className="render-form-view-childView-flex" onClick={() => rightButtonOnClick(label)}>
|
{!formData[name] && placeholder && <div className="select-color">{placeholder[0]}</div>}
|
{formData[name] && placeholder && <div>{placeholder[1]}</div>}
|
{rightArrow && <RightArrow2Outlined className="render-form-view-childView-rightArrow" />}
|
</div>
|
</div>
|
</div>
|
);
|
// 地名地址
|
case 'addressView':
|
return (
|
<div
|
className={`render-form-view-childView ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}
|
>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div>
|
<div className="render-form-view-childView-flex">
|
<div>
|
<Space align="center" className="render-form-view-space">
|
{label}
|
</Space>
|
</div>
|
<div style={{ display: 'flex' }}>
|
{img && <img style={{ padding: '4px 4px 4px 0' }} src={img} alt="" />}
|
{!formData[name] && <div className="select-color">{placeholder}</div>}
|
{formData[name] && (
|
<div
|
className={`${(formData[name] === '地名地址不符合规则，请检查后重新输入' || formData[name] === '街巷路名和村名只能填写其中一项') &&
|
'form-font-color-red'
|
}`}
|
>
|
{formData[name]}
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
);
|
// 楼栋表单标题
|
case 'title':
|
return (
|
<div className="render-form-view-headtTitle render-form-view-col-top">
|
<div className="render-form-view-headtTitle-flex render-form-view-headtTitle-border ">
|
<div className="render-form-view-headtTitle-flex">
|
<span style={{ fontWeight: '700' }}>{label}</span>
|
{img && (
|
<img
|
onClick={() => {
|
setVisible(true);
|
}}
|
src={img}
|
alt=""
|
/>
|
)}
|
{require && <span className="public-tag4">必填</span>}
|
</div>
|
{rightButton && (
|
<div>
|
<span className="public-tag5 public-tag5-blue" onClick={() => rightButtonOnClick(rightButton)}>
|
{rightButton}
|
</span>
|
</div>
|
)}
|
</div>
|
</div>
|
);
|
|
// 表单分段标题无背景色
|
case 'headerTitle':
|
return (
|
<div style={{ padding: '0 12px 6px' }} className="render-form-view-headtTitle-flex">
|
<span style={{ fontWeight: '400', fontSize: '16px', color: 'rgba(23,26,29,0.60)' }}>{label}</span>
|
</div>
|
);
|
|
// 添加人员并可以删除
|
case 'headerTitleAdd':
|
return (
|
<div>
|
<div style={{ padding: '0 12px 6px' }} className="render-form-view-headtTitle-flex">
|
<span style={{ fontWeight: '400', fontSize: '16px', color: 'rgba(23,26,29,0.60)' }}>{label}</span>
|
{/* {require && <span className="public-tag4">必填</span>} */}
|
<div onClick={() => rightButtonOnClick(label, name)} className='public-color' style={{ fontWeight: '400', display: 'flex', alignItems: 'center', height: '24px' }}>
|
<img style={{ width: '16px', height: '16px', padding: '4px' }} src={add} alt="" srcset="" />
|
<div style={{ fontSize: '16px' }}>添加</div>
|
</div>
|
</div>
|
{
|
formData[name]?.length ?
|
<div>
|
{
|
formData[name]?.map(((item, index) => (
|
<div className="renderFormView-card" key={`${name}${index}`} style={index === 0 ? { marginTop: 0 } : null}>
|
<div className="renderFormView-card-header">
|
{
|
name === 'railwaySecuritys' &&
|
<div className="renderFormView-card-title">{item.caseName || '-'}</div>
|
}
|
{
|
name === 'schoolSecurityList' &&
|
<div className="renderFormView-card-title">{item.caseName || '-'}</div>
|
}
|
{
|
name === 'schoolKeyPeopleList' &&
|
<div className="renderFormView-card-title">{item.personName || '-'}</div>
|
}
|
{
|
name === 'workList' &&
|
<>
|
<div className="renderFormView-card-title">工作汇报</div>
|
</>
|
}
|
{
|
name === 'schoolDefendList' &&
|
<>
|
<div className="renderFormView-card-title">聘任学校</div>
|
</>
|
}
|
{
|
name === 'schoolRenovateList' &&
|
<div className="renderFormView-card-title">{formData.renovateActivity ? [
|
{ value: 10, label: '校园内部安全隐患排查整治' },
|
{ value: 11, label: '校园周边治安隐患排查整治' },
|
{ value: 12, label: '校园周边交通安全隐患排查整治' },
|
{ value: 13, label: '食品安全隐患排查整治' },
|
{ value: 14, label: '消防安全隐患排查整治' },
|
].find(i => i.value === formData.renovateActivity)?.value : '-'}</div>
|
}
|
{
|
name === 'schoolBoardList' &&
|
<div className="renderFormView-card-title">{item.boardName || '-'}</div>
|
}
|
{
|
['fullPersonList', 'partPersonList', 'railwayTeamList'].includes(name) &&
|
<div className="renderFormView-card-title">{item.name || '-'}</div>
|
}
|
{
|
['railwayStationList1', 'railwayStationList2', 'railwayStationList3', 'railwayStationList4', 'railwayStationList5'].includes(name) &&
|
<div className="renderFormView-card-title">{item.stationName || '-'}</div>
|
}
|
</div>
|
<div className="renderFormView-card-body">
|
{
|
name === 'fullPersonList' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">职务：{item.postName || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">责任区段：{item.dutySection || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">联系电话：{item.tel || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'partPersonList' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">职务：{item.postName || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">责任区段：{item.dutySection || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">联系电话：{item.tel || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'railwayTeamList' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">巡护区域：{item.dutySection || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">联系电话：{item.tel || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'railwaySecuritys' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">发生日期：{dateFormat(item.caseTime)}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">发生地点：{item.occurAddress || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">案件性质：{item.caseTypeDesc || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">是否破案：{String(item.whetherSolveCase) === '1' ? '是' : String(item.whetherSolveCase) === '2' ? '否' : '-'}</div>
|
</div>
|
</>
|
}
|
{
|
['railwayStationList1', 'railwayStationList4'].includes(name) &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">区间：{item.stationSection || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
['railwayStationList2', 'railwayStationList3'].includes(name) &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">长度（米）：{item.stationLength || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">区间：{item.stationSection || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'railwayStationList5' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">区间：{item.stationSection || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">存在何种隐患：{item.risk || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'workList' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">汇报时间：{item.reportTime || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">季度工作报告(提示：区、镇、街综治办报告)：<br />{item.report || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'schoolDefendList' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">学校名称：{item.schoolName || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">聘任限期：{myTimeFormat(item.employStart, 'YYYY.M.D') || '-'}至{myTimeFormat(item.employEnd, 'YYYY.M.D') || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'schoolSecurityList' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">发生日期：{item.caseTime || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">发生地点：{item.occurAddress || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">案件性质：{item.caseTypeDesc || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">是否破案：{String(item.whetherSolveCase) === '1' ? '是' : String(item.whetherSolveCase) === '2' ? '否' : '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'schoolKeyPeopleList' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">籍贯：{item.birthPlaceDesc || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">户籍门(楼)详址：{item.censusAddress || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">公民身份证号码：{item.idcard || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">危害程度：{item.hurtDegreeCode ? item.hurtDegreeCode === '01' ? '高' : item.hurtDegreeCode === '02' ? '中' : item.hurtDegreeCode === '03' ? '低' : '' : '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'schoolRenovateList' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">活动开展日期：{item.activityTime || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">活动开展单位：{item.activityUnit || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">活动主要内容：{item.content || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">取得的主要成效：{item.mainEffect || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'schoolBoardList' &&
|
<>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">寄宿站（点）地址：{item.boardAddress || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">寄宿站（点）法人代表姓名：{item.legalPerson || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">寄宿站（点）法人代表电话：{item.legalTel || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">寄宿学生人数：{item.studentNumber || '-'}</div>
|
</div>
|
</>
|
}
|
{
|
name === 'personList' &&
|
<>
|
{
|
String(item.personFlag) === '1' &&
|
<Space style={{ width: '100%' }}>
|
<div className="background-purple">
|
<span className="background-purple-size">{item.personName?.charAt(0)}</span>
|
</div>
|
<>
|
<div className='color-purple color-purple-title'>
|
<div className="color-purple-flex-margin">{item.personName}（申请人）</div>
|
<div className="color-purple-flex color-purple-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediateIdcard} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">{item.permitTypeDesc} | {item.idcard}</div>
|
</div>
|
<div className="color-purple-flex color-purple-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediatetel} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">联系方式：{item.contact}</div>
|
</div>
|
<div className="color-purple-flex color-purple-flex-margin">
|
<div style={{ fontSize: '14px', lineHeight: '22px', padding: '4px 12px' }} className="color-purple-borderRadius building-subtitle">
|
<div onClick={() => rightButtonOnClick(label, name, item, 'detail')} className="public-color color-purple ">查看</div>
|
<div className="public-split" />
|
<div onClick={() => rightButtonOnClick(label, name, item, 'edit', index)} className="public-color color-purple">修改</div>
|
<div className="public-split" />
|
<div onClick={() => h({ key: name, value: formData[name]?.filter((i, idx) => idx !== index) })} className="public-color color-purple">删除</div>
|
</div>
|
</div>
|
</div>
|
</>
|
</Space>
|
}
|
{
|
String(item.personFlag) === '2' &&
|
<Space style={{ width: '100%' }}>
|
<div className="background-orange">
|
<span className="background-orange-size">{item.personName?.charAt(0)}</span>
|
</div>
|
<>
|
<div className='color-orange color-orange-title'>
|
<div className="color-orange-flex-margin">{item.personName}（被申请人）</div>
|
<div className="color-orange-flex color-orange-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediateIdcard_1} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">{item.permitTypeDesc} | {item.idcard}</div>
|
</div>
|
<div className="color-orange-flex color-orange-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediatetel_1} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">联系方式：{item.contact}</div>
|
</div>
|
<div className="color-orange-flex color-orange-flex-margin">
|
<div style={{ fontSize: '14px', lineHeight: '22px', padding: '4px 12px' }} className="color-orange-borderRadius building-subtitle">
|
<div onClick={() => rightButtonOnClick(label, name, item, 'detail')} className="public-color color-orange ">查看</div>
|
<div className="public-split" />
|
<div onClick={() => rightButtonOnClick(label, name, item, 'edit', index)} className="public-color color-orange">修改</div>
|
<div className="public-split" />
|
<div onClick={() => h({ key: name, value: formData[name]?.filter((i, idx) => idx !== index) })} className="public-color color-orange">删除</div>
|
</div>
|
</div>
|
</div>
|
</>
|
</Space>
|
}
|
</>
|
}
|
{
|
name !== 'personList' &&
|
<div style={{ marginTop: '4px', fontSize: '14px', lineHeight: '22px' }} className="building-subtitle">
|
<div onClick={() => rightButtonOnClick(label, name, item, 'detail')} className="public-color">查看</div>
|
<div className="public-split" />
|
<div onClick={() => rightButtonOnClick(label, name, item, 'edit', index)} className="public-color">修改</div>
|
<div className="public-split" />
|
<div onClick={() => h({ key: name, value: formData[name]?.filter((i, idx) => idx !== index) })} className="public-color">删除</div>
|
</div>
|
}
|
|
|
|
</div>
|
</div>
|
)))
|
}
|
</div> :
|
<div className="render-form-view-headtTitle">
|
<div className="render-form-view-headtTitle-flex" style={{ height: '142px' }}>
|
<Empty direction={'row'} type='noContent' title={placeholder} desc={'点击右上方添加按钮添加'} inline />
|
</div>
|
</div>
|
}
|
</div >
|
);
|
// 添加铁路路线基本情况
|
case 'headerTitleAdd1':
|
return (
|
<div>
|
<div style={{ padding: '0 12px 6px' }} className="render-form-view-headtTitle-flex">
|
<span style={{ fontWeight: '400', fontSize: '16px', color: 'rgba(23,26,29,0.60)' }}>{label}</span>
|
<div onClick={() => formData[name]?.name ? showToast({ content: '该项只能添加一个' }) : rightButtonOnClick(label, name)} className='public-color' style={{ fontWeight: '400', display: 'flex', alignItems: 'center', height: '24px' }}>
|
<img style={{ width: '16px', height: '16px', padding: '4px' }} src={add} alt="" srcset="" />
|
<div style={{ fontSize: '16px' }}>添加</div>
|
</div>
|
</div>
|
{
|
formData[name]?.name ?
|
<div className="renderFormView-card" style={{ marginTop: 0 }}>
|
<div className="renderFormView-card-header">
|
<div className="renderFormView-card-title">{formData[name]?.name || '-'}</div>
|
</div>
|
<div className="renderFormView-card-body">
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">铁路线路区间：{formData[name]?.lineSection || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="renderFormView-card-main-flex">铁路线路里程（米）：{formData[name]?.mileage || '-'}</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="building-subtitle renderFormView-card-main-flex">
|
<div>火车站：{formData[name]?.railwayStationList?.filter(i => i.type === '1')?.length}</div>
|
<div className="public-split" />
|
<div>铁路桥：{formData[name]?.railwayStationList?.filter(i => i.type === '2')?.length}</div>
|
<div className="public-split" />
|
<div>隧道：{formData[name]?.railwayStationList?.filter(i => i.type === '3')?.length}</div>
|
</div>
|
</div>
|
<div className="renderFormView-card-main">
|
<div className="building-subtitle renderFormView-card-main-flex">
|
<div>涵洞：{formData[name]?.railwayStationList?.filter(i => i.type === '4')?.length}</div>
|
<div className="public-split" />
|
<div >平交道口：{formData[name]?.railwayStationList?.filter(i => i.type === '5')?.length}</div>
|
</div>
|
</div>
|
<div style={{ marginTop: '4px', fontSize: '14px', lineHeight: '22px' }} className="building-subtitle">
|
<div onClick={() => rightButtonOnClick(label, name, formData[name], 'detail')} className="public-color">查看</div>
|
<div className="public-split" />
|
<div onClick={() => rightButtonOnClick(label, name, formData[name], 'edit')} className="public-color">修改</div>
|
<div className="public-split" />
|
<div onClick={() => h({ key: name, value: {} })} className="public-color">删除</div>
|
</div>
|
</div>
|
</div> :
|
<div className="render-form-view-headtTitle">
|
<div className="render-form-view-headtTitle-flex" style={{ height: '142px' }}>
|
<Empty direction={'row'} type='noContent' title={placeholder} desc={'点击右上方添加按钮添加'} inline />
|
</div>
|
</div>
|
}
|
</div >
|
);
|
|
// 添加人员并可以删除
|
case 'headerTitleAdd2':
|
return (
|
<div>
|
<div style={{ padding: '0 12px 6px' }} className="render-form-view-headtTitle-flex">
|
<span style={{ fontWeight: '400', fontSize: '16px', color: 'rgba(23,26,29,0.60)' }}>{label}</span>
|
<div onClick={() => rightButtonOnClick(label, name)} className='public-color' style={{ fontWeight: '400', display: 'flex', alignItems: 'center', height: '24px' }}>
|
<img style={{ width: '16px', height: '16px', padding: '4px' }} src={add} alt="" srcset="" />
|
<div style={{ fontSize: '16px' }}>添加</div>
|
</div>
|
</div>
|
{
|
formData[name]?.length ?
|
<div>
|
{
|
formData[name]?.map(((item, index) => (
|
<div className="renderFormView-card" key={`${name}${index}`} style={index === 0 ? { marginTop: 0 } : null}>
|
<div className="renderFormView-card-body">
|
<>
|
{
|
String(item.isSuspect) === '1' &&
|
<Space style={{ width: '100%' }}>
|
<div className="background-purple">
|
<span className="background-purple-size">{item.personName?.charAt(0)}</span>
|
</div>
|
<>
|
<div className='color-purple color-purple-title'>
|
<div className="color-purple-flex-margin">{item.personName}</div>
|
<div className="color-purple-flex color-purple-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediateIdcard} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">居民身份证 | {item.idcard}</div>
|
</div>
|
<div className="color-purple-flex color-purple-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediatetel} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">联系方式：{item.contact || '-'}</div>
|
</div>
|
<div className="color-purple-flex color-purple-flex-margin">
|
<div style={{ fontSize: '14px', lineHeight: '22px', padding: '4px 12px' }} className="color-purple-borderRadius building-subtitle">
|
<div onClick={() => rightButtonOnClick(label, name, item, 'detail')} className="public-color color-purple ">查看</div>
|
{/* <div className="public-split" />
|
<div onClick={() => rightButtonOnClick(label, name, item, 'edit', index)} className="public-color color-purple">修改</div> */}
|
<div className="public-split" />
|
{/* personType */}
|
<div onClick={() => h({ key: name, value: formData[name]?.filter(item => item.isSuspect === personType)?.filter((i, idx) => idx !== index) })} className="public-color color-purple">删除</div>
|
</div>
|
</div>
|
</div>
|
</>
|
</Space>
|
}
|
{
|
String(item.isSuspect) === '0' &&
|
<Space style={{ width: '100%' }}>
|
<div className="background-orange">
|
<span className="background-orange-size">{item.personName?.charAt(0)}</span>
|
</div>
|
<>
|
<div className='color-orange color-orange-title'>
|
<div className="color-orange-flex-margin">{item.personName}</div>
|
<div className="color-orange-flex color-orange-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediateIdcard_1} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">居民身份证 | {item.idcard}</div>
|
</div>
|
<div className="color-orange-flex color-orange-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediatetel_1} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">联系方式：{item.contact || '-'}</div>
|
</div>
|
<div className="color-orange-flex color-orange-flex-margin">
|
<div style={{ fontSize: '14px', lineHeight: '22px', padding: '4px 12px' }} className="color-orange-borderRadius building-subtitle">
|
<div onClick={() => rightButtonOnClick(label, name, item, 'detail')} className="public-color color-orange ">查看</div>
|
{/* <div className="public-split" />
|
<div onClick={() => rightButtonOnClick(label, name, item, 'edit', index)} className="public-color color-orange">修改</div> */}
|
<div className="public-split" />
|
<div onClick={() => h({ key: name, value: formData[name]?.filter((i, idx) => idx !== index) })} className="public-color color-orange">删除</div>
|
</div>
|
</div>
|
</div>
|
</>
|
</Space>
|
}
|
</>
|
|
</div>
|
</div>
|
)))
|
}
|
</div> :
|
<div className="render-form-view-headtTitle">
|
<div className="render-form-view-headtTitle-flex" style={{ height: '142px' }}>
|
<Empty direction={'row'} type='noContent' title={placeholder} desc={'点击右上方添加按钮添加'} inline />
|
</div>
|
</div>
|
}
|
</div >
|
);
|
|
// 添加人员并可以删除
|
case 'headerTitleAdd3':
|
return (
|
<div>
|
<div style={{ padding: '0 12px 6px' }} className="render-form-view-headtTitle-flex">
|
|
<span style={{ fontWeight: '400', fontSize: '16px', color: 'rgba(23,26,29,0.60)' }}>{require && <span className="require-red">* </span>}{label}</span>
|
<div onClick={() => rightButtonOnClick(label, name)} className='public-color' style={{ fontWeight: '400', display: 'flex', alignItems: 'flex-end', height: '24px' }}>
|
<img style={{ width: '16px', height: '16px', padding: '4px' }} src={add} alt="" srcset="" />
|
<div style={{ fontSize: '16px' }}>添加</div>
|
</div>
|
</div>
|
{
|
formData[name]?.length ?
|
<div>
|
{
|
formData[name]?.map(((item, index) => (
|
<div className="renderFormView-card" key={`${name}${index}`} style={index === 0 ? { marginTop: 0 } : null}>
|
<div className="renderFormView-card-body">
|
<Space style={{ width: '100%' }}>
|
<div className="background-purple">
|
<span className="background-purple-size">{item.name?.charAt(0)}</span>
|
</div>
|
<div className='color-purple color-purple-title'>
|
<div className="color-purple-flex-margin">{item.name}</div>
|
<div className="color-purple-flex color-purple-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediateIdcard} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">证件号码 {item.idcard}</div>
|
</div>
|
<div className="color-purple-flex color-purple-flex-margin">
|
<div className='searchPersonRoomSearch-card-main-img'>
|
<img src={mediatetel} alt="" />
|
</div>
|
<div className="renderFormView-card-main-flex">户籍地：{item.householdAddress}</div>
|
</div>
|
<div className="color-purple-flex color-purple-flex-margin">
|
<div style={{ fontSize: '14px', lineHeight: '22px', padding: '4px 12px' }} className="color-purple-borderRadius building-subtitle">
|
<div onClick={() => rightButtonOnClick(label, name, item, 'detail')} className="public-color color-purple ">查看</div>
|
<div className="public-split" />
|
<div onClick={() => rightButtonOnClick(label, name, item, 'edit', index)} className="public-color color-purple">修改</div>
|
<div className="public-split" />
|
<div onClick={() => h({ key: name, value: formData[name]?.filter((i, idx) => idx !== index) })} className="public-color color-purple">删除</div>
|
</div>
|
</div>
|
</div>
|
</Space>
|
</div>
|
</div>
|
)))
|
}
|
</div> :
|
<div className="render-form-view-headtTitle">
|
<div className="render-form-view-headtTitle-flex" style={{ height: '142px' }}>
|
<Empty direction={'row'} type='noContent' title={placeholder} desc={'点击右上方添加按钮添加'} inline />
|
</div>
|
</div>
|
}
|
</div >
|
);
|
case 'subTitle':
|
return (
|
<div className="render-form-view-headtTitle">
|
<div className="render-form-view-headtTitle-flex render-form-view-headtTitle-border ">
|
<div className="render-form-view-headtTitle-flex">
|
<span >{label}</span>
|
{img && (
|
<img
|
onClick={() => {
|
setVisible(true);
|
}}
|
src={img}
|
alt=""
|
/>
|
)}
|
{require && <span className="public-tag4">必填</span>}
|
</div>
|
{
|
formData[name] ?
|
<div className="render-form-view-childView-flex" onClick={() => rightButtonOnClick(rightButton, label)}>
|
<div>已签名</div>
|
<RightArrow2Outlined className="render-form-view-childView-rightArrow" />
|
</div> :
|
<div>
|
<span className="public-tag5 public-tag5-blue" onClick={() => rightButtonOnClick(rightButton, label)}>
|
{rightButton}
|
</span>
|
</div>
|
}
|
</div>
|
</div>
|
);
|
|
// 地名地址头部
|
case 'addressTitle':
|
return (
|
<div className="render-form-view-headtTitle render-form-view-col-top">
|
<div className="render-form-view-headtTitle-flex render-form-view-headtTitle-border ">
|
<div className="render-form-view-headtTitle-flex">
|
<span style={{ fontWeight: '700' }}>{label}</span>
|
<div style={{ display: 'flex', alignItems: 'center' }} onClick={() => {
|
setVisible(true);
|
}}>
|
<img
|
src={img}
|
alt=""
|
/>
|
<span style={{ fontSize: '12px', color: '#007FFF' }}>查看规则</span>
|
</div>
|
</div>
|
{rightButton && (
|
<div>
|
<span className="public-tag5 public-tag5-blue" onClick={() => rightButtonOnClick(rightButton)}>
|
{rightButton}
|
</span>
|
</div>
|
)}
|
</div>
|
</div>
|
);
|
|
// 标签带按钮的
|
case 'selectTitle':
|
return (
|
<div className="render-form-view-headtTitle render-form-view-col-top">
|
<div className="render-form-view-headtTitle-flex render-form-view-headtTitle-border ">
|
<div className="render-form-view-headtTitle-flex">
|
<span style={{ fontWeight: '700' }}>{label}</span>
|
</div>
|
{rightButton && (
|
<div>
|
<span className="public-tag5 public-tag5-blue" onClick={() => rightButtonOnClick(rightButton)}>
|
<img
|
style={{ width: '12px', paddingLeft: '0' }}
|
src={img}
|
alt=""
|
/> {rightButton}
|
</span>
|
</div>
|
)}
|
</div>
|
</div>
|
);
|
|
case 'selectPerson':
|
return (
|
<div className="render-form-view-headtTitle">
|
<div>
|
<div className="render-form-view-headtTitle-flex">
|
<div className="render-form-view-headtTitle-flex">
|
<Space align="center" className="render-form-view-space">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>
|
{rightButton && (
|
<div>
|
<span style={{ border: 'none' }} className="public-tag5 public-tag5-blue" onClick={() => rightButtonOnClick(label, name)}>
|
{rightButton}
|
</span>
|
</div>
|
)}
|
</div>
|
<div style={{ paddingTop: '4px', paddingLeft: '0' }} className='people-visit-edit-select-subtitle'>{item.subTitle}</div>
|
|
{/* {
|
label === '处理人' &&
|
<Space wrap={true} direction={'vertical'}>
|
{formData[name]?.map((item, idx) => (
|
<div className='render-form-view-headtTitle-select' style={{ justifyContent: 'space-between' }} key={`selectPerson${idx}`}>
|
<div className='render-form-view-headtTitle-select-person'>{item.objectName}</div><img src={del} />
|
</div>
|
))}
|
</Space>
|
}
|
{
|
label === '处理部门' &&
|
<Space wrap={true}>
|
{formData[name]?.map((item, idx) => (
|
<div className='render-form-view-headtTitle-select' key={`selectPerson${idx}`}>
|
<div className='render-form-view-headtTitle-select-person'>{item.objectName}</div><img src={del} />
|
</div>
|
))}
|
</Space>
|
} */}
|
{
|
formData[name]?.length > 0 &&
|
<Space style={{ paddingTop: '8px' }} wrap={true}>
|
{formData[name]?.map((item, idx) => (
|
<div className='render-form-view-headtTitle-select' onClick={() => {
|
h({ key: name, value: formData[name].filter(i => i.objectId !== item.objectId) })
|
}} key={`selectPerson${idx}`}>
|
<div className='render-form-view-headtTitle-select-person'>{item.objectName}</div><img src={del} />
|
</div>
|
))}
|
</Space>
|
}
|
</div>
|
</div>
|
);
|
|
case 'dingUpload':
|
return (
|
<Form.Item key={name} className={`render-form-view-switch ${i == listIndex - 1 && 'render-form-view-col-bottom'} ${i == 0 && 'render-form-view-col-top'} ${listIndex - 1 == 0 && 'render-form-view-col-radius'
|
}`}>
|
<Upload
|
label={<div>
|
<Space align="center">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
</div>}
|
onPreview={async (res) => {
|
let src = ''
|
if (!res.response) {
|
src = `${appUrl.baseUrl}${appUrl.ninex}${res?.showUrl}`
|
} else {
|
src = `${appUrl.baseUrl}${appUrl.ninex}${res.response?.data?.showUrl}`
|
}
|
setModalImg({ visible: true, url: src })
|
}}
|
fileList={formData[item.fileList]}
|
type="form-upload"
|
accept="*"
|
previewContent="预览"
|
action={`${appUrl.baseUrl}${appUrl.ninex}/dingTalk/api/sys/attachment/uploadFile?ownerId=${formData[item.ownerId]}&ownerType=${item.ownerType}`}
|
headers={{ Authorization: token }}
|
onChange={res => {
|
if (res?.file?.status === 'error') {
|
return catchApiError({ content: "抱歉! 网络错误" });
|
}
|
h({ key: item.fileList, value: res.fileList });
|
}}
|
onRemove={(file) => {
|
handleDeleteFiles(file.id ? file.id : formData[item.ownerId])
|
h({ key: item.fileList, value: formData[item.fileList].filter((x, t) => x.id !== file.id) });
|
}}
|
uploadLabel="支持扩展名：.rar .zip .doc .docx .pdf .jpg，30M以内"
|
uploadBtnLabel="上传文件"
|
/>
|
</Form.Item>
|
)
|
default:
|
return null;
|
}
|
}
|
|
// 登记状态判断
|
function newTest(tabPage, tabList) {
|
if (tabList.find((item, x) => x === tabPage - 1).type === 'red') {
|
return (
|
<div className="divider-Tabtitle-tabs-red">
|
<span></span>
|
{'异常登记'}
|
</div>
|
);
|
}
|
if (tabList.find((item, x) => x === tabPage - 1).type === 'green') {
|
return (
|
<div className="divider-Tabtitle-tabs-green">
|
<span></span>
|
{'已登记'}
|
</div>
|
);
|
}
|
if (tabList.find((item, x) => x === tabPage - 1).type === 'normal') {
|
return (
|
<div className="divider-Tabtitle-tabs">
|
<span></span>
|
{'未登记'}
|
</div>
|
);
|
}
|
}
|
|
return (
|
<div className="render-form-view-main">
|
{form.map((items, i) => {
|
return (
|
<div key={i}>
|
{items.titleTab && (
|
<div className="divider-Tabtitle">
|
<div>{items.titleTab}</div>
|
{formstatus && newTest(tabPage, tabList)}
|
</div>
|
)}
|
{
|
items.selectTitle &&
|
<div className="divider-title" style={{ marginBottom: '0px' }}>
|
<div>{items.selectTitle}</div>
|
<div>
|
<span className="public-tag5 public-tag5-blue" onClick={() => rightButtonOnClick({}, items.selectTitle)}>
|
<img
|
style={{ width: '12px', paddingLeft: '0' }}
|
src={applyForForm_3}
|
alt=""
|
/> 选择
|
</span>
|
</div>
|
</div>
|
}
|
{(items.title !== 'ocr') && (
|
<div className={items.title ? 'divider-title' : (items.list.length > 0 ? 'divider-title-new' : 'divider-title-new111')}>
|
{items.title}
|
{items.title === '公安标准地址关联' && formData.metaAddr && (
|
<div onClick={() => metaAddrClick()} style={{ display: 'flex', alignItems: 'center' }} className="divider-Tabtitle-tabs-red">
|
<img style={{ width: '14px', height: '14px', marginRight: '4px' }} src={roomForm} alt="" />
|
{'取消关联'}
|
</div>
|
)}
|
</div>
|
)}
|
<div className="render-form-view-col">
|
{items.list.map((item, index) => {
|
return <div key={item.name + index}>{render(item, index, items.list.length, handleChange, rightButtonOnClick, form, formData)}</div>;
|
})}
|
</div>
|
</div>
|
);
|
})}
|
{/* 地名地址说明 */}
|
<MyModal visible={visible} center title="地名地址规范说明" onClose={() => setVisible(false)}>
|
<div style={{ height: '1px', width: '100%', backgroundColor: 'rgba(126, 134, 142, 0.16)' }}></div>
|
<div style={{ height: '300px' }}>
|
<div className="from-long-main-body-in">
|
<p>{`地名是人们对具有特定方位、地域范围的地理实体赋予的专有名称。`}</p>
|
<p>{`地址是有地名的详细表述，包括国家、省份、城市或乡村、街道、门牌号码、屋邨、大厦等建筑物名称，或者再加楼层数目、房间编号等。`}</p>
|
<p>{`<行政区划名><街巷路名|村名>[门牌号][小区名][标志物名][单元名][楼栋名（号）]。其中<>表示必填项，|表示或者，[]表示可选项。地名地址描述组合规则共有五大类十小类`}</p>
|
<div className="form-font-weight">{`A.<行政区划名><街巷路名><门牌号>[小区名][楼栋名][附属物/特殊类][铺面名称]`}</div>
|
<div>{`1.行政区划名+街巷路名+门牌号`}</div>
|
<div className="form-font-color-blue">{`示例：美兰区海甸五西路30号 `}</div>
|
<div>{`2.行政区划名+街巷路名+门牌号+小区名+楼栋名（号）+商铺号 `}</div>
|
<div className="form-font-color-blue">{`示例：美兰区和平大道61号都市海岸8栋海景阁铺面1`}</div>
|
<br />
|
<div className="form-font-weight">{`B.<行政区划名><街巷路名><小区名>[楼栋名][附属物/特殊类][铺面名称]`}</div>
|
<div>{`3.行政区划名+街巷路名+小区名`}</div>
|
<div className="form-font-color-blue">{`示例：美兰区海府路海南热带农作物局宿舍`}</div>
|
<div>{`4.行政区划名+街巷路名+小区名+楼栋名（号）+商铺号`}</div>
|
<div className="form-font-color-blue">{`示例：美兰区海府路海南热带农作物局宿舍1栋铺面1`}</div>
|
<br />
|
<div className="form-font-weight">{`C.<行政区划名><街巷路名><门牌号><标志物名>[楼栋名][附属物/特殊类][铺面名称]`}</div>
|
<div>{`5.行政区划名+街巷路名+门牌号+标志物名`}</div>
|
<div className="form-font-color-blue">{`示例：美兰区海甸二西路2号金源大厦`}</div>
|
<div>{`6.行政区划名+街巷路名+门牌号+标志物名+楼栋名（号）+商铺号`}</div>
|
<div className="form-font-color-blue">{`示例：美兰区人民大道58号海南大学海甸校区学生宿舍11栋铺面1`}</div>
|
<br />
|
<div className="form-font-weight">{`D.<行政区划名><街巷路名><标志物名>[楼栋名][附属物/特殊类][铺面名称]`}</div>
|
<div>{`7.行政区划名+街巷路名+标志物名`}</div>
|
<div className="form-font-color-blue">{`示例：美兰区海涛大道琼台师范高等专科学校`}</div>
|
<div>{`8.行政区划名+街巷路名+标志物名+楼栋名（号）+商铺号`}</div>
|
<div className="form-font-color-blue">{`示例：美兰区海涛大道琼台师范高等专科学校美术楼铺面1`}</div>
|
<br />
|
<div className="form-font-weight">{`E.<行政区划名><村名><门牌号>[楼栋名][附属物/特殊类][铺面名称]`}</div>
|
<div>{`9.行政区划名+村名+门牌号`}</div>
|
<div className="form-font-color-blue">{`示例：美兰区拦海中村165号`}</div>
|
<div>{`10.行政区划名+村名+门牌号+楼栋名（号）+商铺号`}</div>
|
<div className="form-font-color-blue">{`示例：琼山区高登里二横97号1栋铺面1`}</div>
|
</div>
|
</div>
|
<div>
|
<div style={{ height: '1px', width: '100%', margin: '8px 0', backgroundColor: 'rgba(126, 134, 142, 0.16)' }}></div>
|
<Button
|
onClick={() => {
|
setVisible(false);
|
}}
|
style={{ width: '100%' }}
|
type="primary"
|
>
|
我知道了
|
</Button>
|
</div>
|
</MyModal>
|
|
<MyModal visible={modalImg.visible} center title="查看图片" onClose={() => setModalImg({ visible: false, url: '' })}>
|
<div style={{ height: '1px', width: '100%', backgroundColor: 'rgba(126, 134, 142, 0.16)' }}></div>
|
<div style={{ height: '300px' }}>
|
<img src={modalImg.url} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
|
</div>
|
</MyModal>
|
<ModalContent
|
headStyle={{ textAlign: 'center' }}
|
title={applyTip.type === '1' ? '如何查看身份证签发机关' : '如何查看身份证签发机关/户口簿登记机关'}
|
buttonTitle='我知道了'
|
visible={applyTip.visible}
|
visibleOnClick={(item) => {
|
setApplyTip({ ...applyTip, visible: false })
|
}}
|
content={
|
<div style={{ padding: '12px' }}>
|
{
|
applyTip.type === '1' ?
|
<div>根据省社保平台工作要求，社保卡申领<span className='public-color'>本人办理</span>时，需补充填写身份证签发机关，可查阅身份证国徽面获取相关信息（参考下图）</div> :
|
<div>根据省社保平台工作要求，社保卡申领<span className='public-color'>他人代办</span>时，当<span className='public-color'>选择上传身份证申领社保卡</span>，需补充填写身份证签发机关，可查阅身份证国徽面获取相关信息(参考下图)</div>
|
|
}
|
<img src={applyForForm_4} alt="" srcset="" />
|
{
|
applyTip.type === '2' &&
|
<>
|
<div>当选择<span className='public-color'>上传户口簿申领社保卡</span>，需补充填写户口簿登记机关，可查阅户口簿获取相关信息（参考下图:儋州市公安局南丰派出所）</div>
|
<img src={applyForForm_5} alt="" srcset="" />
|
</>
|
}
|
</div>
|
}
|
/>
|
{
|
formData[expiredDateData.startTime] &&
|
<Picker
|
// data={[[{ label: myTimeFormat((new Date(formData.icExpiredStartTime).getTime() + 157680000000), `YYYY年M月D日`), value: new Date(new Date(formData.icExpiredDate).getTime() + 86400000) }, { label: '长期', value: '2' }]]}
|
data={[[
|
{ label: (Number(myTimeFormat(formData[expiredDateData.startTime], `YYYY`)) + 5 + '年') + (myTimeFormat(formData[expiredDateData.startTime], `M月D日`)), value: (Number(myTimeFormat(formData[expiredDateData.startTime], `YYYY`)) + 5) + (myTimeFormat(formData[expiredDateData.startTime], `-M-D`)) },
|
{ label: (Number(myTimeFormat(formData[expiredDateData.startTime], `YYYY`)) + 10 + '年') + (myTimeFormat(formData[expiredDateData.startTime], `M月D日`)), value: (Number(myTimeFormat(formData[expiredDateData.startTime], `YYYY`)) + 10) + (myTimeFormat(formData[expiredDateData.startTime], `-M-D`)) },
|
{ label: (Number(myTimeFormat(formData[expiredDateData.startTime], `YYYY`)) + 20 + '年') + (myTimeFormat(formData[expiredDateData.startTime], `M月D日`)), value: (Number(myTimeFormat(formData[expiredDateData.startTime], `YYYY`)) + 20) + (myTimeFormat(formData[expiredDateData.startTime], `-M-D`)) },
|
{ label: '长期', value: myTimeFormat(new Date('2099-1-1'), `YYYY-M-D`) }]]}
|
visible={expiredDateData.visible}
|
title="证件有效期"
|
okText="确定"
|
cascade={false}
|
onDismiss={() => setExpiredDateData({ ...expiredDateData, visible: false })}
|
onChange={(e) => {
|
setExpiredDateData({ ...expiredDateData, visible: false, visible1: false })
|
formData[expiredDateData.endTime] = new Date(e)
|
handleChange(formData, expiredDateData.endTime)
|
}
|
}
|
>
|
</Picker>
|
|
}
|
<DatePicker
|
visible={expiredDateData.visible1}
|
title={'证件有效期开始日期'}
|
mode="date"
|
minDate={new Date(1900, 1, 1, 0, 0, 0)}
|
maxDate={new Date(2100, 1, 1, 0, 0, 0)}
|
extra={<span className="select-color">请选择</span>}
|
cascade={true}
|
onChange={(e) => {
|
formData[expiredDateData.startTime] = e;
|
handleChange(formData, expiredDateData.startTime)
|
}}
|
onDismiss={() => setExpiredDateData({ ...expiredDateData, visible: false, visible1: false })}
|
onOk={(e) => {
|
setExpiredDateData({ ...expiredDateData, visible: true, visible1: false })
|
}}
|
>
|
</DatePicker>
|
</div >
|
);
|
};
|
|
function FullScreenImageViewer({ src }) {
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
const toggleFullscreen = () => {
|
setIsFullscreen(!isFullscreen);
|
};
|
|
return (
|
<div>
|
<button onClick={toggleFullscreen}>查看全屏图片</button>
|
{isFullscreen && (
|
<div
|
style={{
|
position: 'fixed',
|
top: 0,
|
left: 0,
|
right: 0,
|
bottom: 0,
|
background: 'rgba(0, 0, 0, 0.75)',
|
display: 'flex',
|
justifyContent: 'center',
|
alignItems: 'center',
|
zIndex: 1000
|
}}
|
>
|
<img src={src} alt="预览图片" style={{ maxWidth: '100%', maxHeight: '100%' }} />
|
<button onClick={toggleFullscreen} style={{ position: 'absolute', top: 10, right: 10 }}>
|
关闭
|
</button>
|
</div>
|
)}
|
</div>
|
);
|
}
|
|
export default RenderFormView;
|
