|
|
@@ -1,22 +1,33 @@
|
|
|
-import React, { useEffect, useState } from 'react'
|
|
|
+import React, { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
import styles from './index.module.scss'
|
|
|
import { useParams } from 'react-router-dom'
|
|
|
// 待完善 上个页面的数组接口
|
|
|
import { listTemp } from '../B3start'
|
|
|
import ZexhiBtn from '@/components/ZexhiBtn'
|
|
|
+import { Button, Form, FormInstance, Input } from 'antd'
|
|
|
+import ZinfoPop from '@/components/ZinfoPop'
|
|
|
+import history from '@/utils/history'
|
|
|
+import classNames from 'classnames'
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
+import delImg from '@/assets/img/exhibit/del.png'
|
|
|
+import MyPopconfirm from '@/components/MyPopconfirm'
|
|
|
|
|
|
function B4form() {
|
|
|
- // 获取路由参数 bookId待完善（存疑）
|
|
|
+ useEffect(() => {
|
|
|
+ FormBoxRef.current?.setFieldsValue({
|
|
|
+ name1: '王大锤',
|
|
|
+ phone1: '18702025091',
|
|
|
+ identity1: '421083199504071212'
|
|
|
+ })
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ // 获取路由参数
|
|
|
const [urlObj, setUrlObj] = useState({
|
|
|
bookDate: '',
|
|
|
bookId: 0,
|
|
|
time: ''
|
|
|
})
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- console.log('获取参数', urlObj)
|
|
|
- }, [urlObj])
|
|
|
-
|
|
|
const urlObjTemp: any = useParams()
|
|
|
|
|
|
useEffect(() => {
|
|
|
@@ -29,6 +40,54 @@ function B4form() {
|
|
|
})
|
|
|
}, [urlObjTemp])
|
|
|
|
|
|
+ // 表单的ref
|
|
|
+ const FormBoxRef = useRef<FormInstance>(null)
|
|
|
+
|
|
|
+ const [formArr, setFormArr] = useState([{ id: 1 }])
|
|
|
+ const formArrNumRef = useRef(1)
|
|
|
+
|
|
|
+ // 点击新增 参观人
|
|
|
+ const addFormFu = useCallback(() => {
|
|
|
+ if (formArr.length >= 3) return MessageFu.warning('最多3位!')
|
|
|
+ setFormArr([...formArr, { id: formArrNumRef.current + 1 }])
|
|
|
+ formArrNumRef.current += 1
|
|
|
+ }, [formArr])
|
|
|
+
|
|
|
+ // 点击删除 参观人
|
|
|
+ const delFormFu = useCallback(
|
|
|
+ (id: number) => {
|
|
|
+ setFormArr(formArr.filter(v => v.id !== id))
|
|
|
+ },
|
|
|
+ [formArr]
|
|
|
+ )
|
|
|
+
|
|
|
+ // 没有通过校验
|
|
|
+ const onFinishFailed = useCallback(() => {}, [])
|
|
|
+
|
|
|
+ // 打开提示弹窗
|
|
|
+ const [titPop, setTitPop] = useState('')
|
|
|
+
|
|
|
+ // 通过校验点击确定
|
|
|
+ const onFinish = useCallback(
|
|
|
+ async (values: any) => {
|
|
|
+ const arr: any = []
|
|
|
+
|
|
|
+ formArr.forEach(v => {
|
|
|
+ arr.push({
|
|
|
+ bookDate: urlObj.bookDate,
|
|
|
+ bookId: urlObj.bookId,
|
|
|
+ time: urlObj.time,
|
|
|
+ name: values[`name${v.id}`],
|
|
|
+ phone: values[`phone${v.id}`],
|
|
|
+ identity: values[`identity${v.id}`]
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ setTitPop('succ')
|
|
|
+ },
|
|
|
+ [formArr, urlObj]
|
|
|
+ )
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.B4form}>
|
|
|
<div className='B4main'>
|
|
|
@@ -44,12 +103,101 @@ function B4form() {
|
|
|
</div>
|
|
|
|
|
|
{/* 按钮 */}
|
|
|
- <div className='B4addBtn'>新增参观人（最多3位）</div>
|
|
|
+ <div
|
|
|
+ className={classNames('B4addBtn', formArr.length >= 3 ? 'myBtnNo' : '')}
|
|
|
+ onClick={addFormFu}
|
|
|
+ >
|
|
|
+ 新增参观人（最多3位）
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className='B4KaBox'>
|
|
|
+ <Form
|
|
|
+ ref={FormBoxRef}
|
|
|
+ name='basic'
|
|
|
+ // labelCol={{ span: 3 }}
|
|
|
+ onFinish={onFinish}
|
|
|
+ onFinishFailed={onFinishFailed}
|
|
|
+ autoComplete='off'
|
|
|
+ scrollToFirstError
|
|
|
+ >
|
|
|
+ {/* 卡片 */}
|
|
|
+ {formArr.map((item, index) => (
|
|
|
+ <div className='B4Ka' key={item.id}>
|
|
|
+ <div className='B4tit'>
|
|
|
+ <div className='B4titTxt'>参观人信息{index + 1}</div>
|
|
|
|
|
|
- <div>1234564</div>
|
|
|
+ {formArr.length <= 1 ? (
|
|
|
+ <div></div>
|
|
|
+ ) : (
|
|
|
+ <MyPopconfirm
|
|
|
+ txtK='删除'
|
|
|
+ onConfirm={() => delFormFu(item.id)}
|
|
|
+ Dom={
|
|
|
+ <div className='B4titDel'>
|
|
|
+ <img src={delImg} alt='' /> 删除
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label='姓名'
|
|
|
+ name={`name${item.id}`}
|
|
|
+ rules={[{ required: true, message: '请输入负责人姓名!' }]}
|
|
|
+ getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
|
|
|
+ >
|
|
|
+ <Input placeholder='请输入内容，不超过6个字' maxLength={6} />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label='联系方式'
|
|
|
+ name={`phone${item.id}`}
|
|
|
+ rules={[
|
|
|
+ { required: true, message: '请输入联系方式!' },
|
|
|
+ {
|
|
|
+ pattern: /^1[3-9][0-9]{9}$/,
|
|
|
+ message: '请输入正确格式的手机号!'
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Input placeholder='请输入11位数字' maxLength={11} />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label='身份证号'
|
|
|
+ name={`identity${item.id}`}
|
|
|
+ rules={[
|
|
|
+ { required: true, message: '请输入身份证号!' },
|
|
|
+ {
|
|
|
+ pattern:
|
|
|
+ /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
|
|
|
+ message: '请输入正确格式的身份证号!'
|
|
|
+ }
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ <Input placeholder='请输入18位证件编码' maxLength={18} />
|
|
|
+ </Form.Item>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+
|
|
|
+ {/* 底部按钮 */}
|
|
|
+ <ZexhiBtn
|
|
|
+ nextFu={() => {}}
|
|
|
+ FormBtn={
|
|
|
+ <Button className='FormBtn' type='primary' htmlType='submit'>
|
|
|
+ 提交
|
|
|
+ </Button>
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <ZexhiBtn nextFu={() => {}} />
|
|
|
+ {/* 预约成功的弹窗 */}
|
|
|
+ {titPop ? (
|
|
|
+ <ZinfoPop txt2='' type={titPop as 'succ'} callFu={() => history.push('/exhiMy')} />
|
|
|
+ ) : null}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
