/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-08-15 20:09:04
|
* @LastEditTime: 2025-04-30 10:55:32
|
* @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>
|
);
|
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;
|
