/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-15 20:09:04
|
* @LastEditTime: 2023-07-31 15:33:45
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:表单组件
|
*/
|
import React, { useState, useRef, useEffect } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import { Picker, List, Space, Switch, Form, DatePicker, Input, Select, Button, Toast, Checkbox } from 'dingtalk-design-mobile';
|
import { confirmModal } from '../../utils/utility';
|
import FileShow from '../../components/FileShow';
|
import { roomForm } from '../../assets/img';
|
import IdcardOCR from '../../components/IdcardOCR';
|
import MyModal from '../../components/MyModal';
|
import { region, checkIdCard, checkTel, setLocal, confirmThreeButtonModal, myTimeFormat } from '../../utils/utility';
|
import rule from '../../utils/rules';
|
// import { applyForForm_3 } from '../../assets/cardImg';
|
import { RightArrow2Outlined } from 'dd-icons';
|
|
// form表单[]
|
// formData表单value对象 {}
|
// handleChange输入事件 fun
|
// rightButtonOnClick 右侧点击按钮 fun
|
// formstatus 表单登记状态是否显示 true flase
|
// tabPage 页签
|
// tabList 表单登记状态提示信息
|
// 是否为新增表单
|
const RenderFormView = ({ form, formData, handleChange, tabPage, tabList, rightButtonOnClick, formstatus, newAdd, metaAddrClick, OCRsuccessCallback }) => {
|
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);
|
|
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,
|
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,
|
} = item;
|
switch (type) {
|
case 'text':
|
case 'password':
|
case 'phone':
|
case 'idcard':
|
case 'digit':
|
return (
|
<Form.Item
|
key={name}
|
label={
|
<>
|
<Space align="center">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
{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>
|
) : (
|
<Input
|
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>
|
);
|
case 'number':
|
return (
|
<Form.Item
|
key={name}
|
label={
|
<>
|
<Space align="center">
|
{label}
|
{require && <span className="public-tag4">必填</span>}
|
</Space>
|
{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'
|
}`}
|
>
|
<Input
|
className="render-form-view-input"
|
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"
|
key={name}
|
label={
|
<Space align="center">
|
{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'
|
}`}
|
>
|
<Input
|
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 'select':
|
case 'idcardType':
|
return (
|
<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={`render-form-view-title ${disabled && 'select-color-disabled'} ${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 '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) => {
|
console.log(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 (
|
<Picker
|
key={name}
|
data={region}
|
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={`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 '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] == '0' || formData[name] == null ? false : formData[name] == '1' ? true : ''}
|
onChange={(e) => {
|
h({ index: i, key: name, value: e ? '1' : '0' });
|
}}
|
/>
|
</Form.Item>
|
);
|
// 开关
|
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 (
|
<DatePicker
|
key={name}
|
title={label}
|
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={`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 'expiredDate':
|
return (
|
<div onClick={() => {
|
console.log('startTime', startTime);
|
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 'expiredDate':
|
// return (
|
// <div onClick={() => {
|
// if (!expiredDateData.visible && expiredDateData.visible1) {
|
// setExpiredDateData({ visible: false, visible1: false })
|
// } else {
|
// setExpiredDateData({ visible: false, visible1: true })
|
// }
|
// }}>
|
|
// {
|
// myTimeFormat(formData[name], 'YYYY-M-D') == '2099-1-1' ?
|
// <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 style={{ display: 'flex' }}>
|
// 长期
|
// </div>
|
// <div className="render-form-view-childView-flex">
|
// {!formData[name] && placeholder && <div className="select-color">{placeholder[0]}</div>}
|
// {formData[name] && placeholder && <div>{placeholder[1]}</div>}
|
// {<RightArrow2Outlined className="render-form-view-childView-rightArrow" />}
|
// </div>
|
// </div>
|
// </div>
|
// </div> :
|
// <DatePicker
|
// key={name}
|
// 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>}
|
// value={formData[name] ? new Date(formData[name]) : ''}
|
// onOk={(e) => {
|
// setExpiredDateData({ visible: true, visible1: false })
|
// }}
|
// onDismiss={(e) => {
|
// setExpiredDateData({ visible: true, visible1: false })
|
// }}
|
// 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>
|
// }
|
// </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 '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 '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>
|
);
|
|
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>
|
{
|
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)
|
console.log('expiredDateData.startTime', expiredDateData.endTime);
|
console.log('formData', formData);
|
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;
|
console.log('expiredDateData.startTime', expiredDateData);
|
console.log('formData', formData)
|
handleChange(formData, expiredDateData.startTime)
|
}}
|
onDismiss={() => setExpiredDateData({ ...expiredDateData, visible: false, visible1: false })}
|
onOk={(e) => {
|
setExpiredDateData({ ...expiredDateData, visible: true, visible1: false })
|
}}
|
>
|
</DatePicker>
|
</div >
|
);
|
};
|
|
export default RenderFormView;
|
