|
@@ -7,23 +7,31 @@ import TextArea from 'antd/es/input/TextArea'
|
|
|
import { EyeOutlined, CloseOutlined } from '@ant-design/icons'
|
|
|
import MyPopconfirm from '@/components/MyPopconfirm'
|
|
|
import { ImageViewer } from 'antd-mobile'
|
|
|
-import { domShowFu } from '@/utils/domShow'
|
|
|
+import { domShowFu, fileDomInitialFu } from '@/utils/domShow'
|
|
|
import dayjs from 'dayjs'
|
|
|
import htmlToPdf2 from '@/utils/htmlToPdf2'
|
|
|
import { MessageFu } from '@/utils/message'
|
|
|
import ZinfoPop from '@/components/ZinfoPop'
|
|
|
import history from '@/utils/history'
|
|
|
import { useParams } from 'react-router-dom'
|
|
|
-import { A5_APIgetInfo } from '@/store/action/all'
|
|
|
+import {
|
|
|
+ A5_APIgetInfo,
|
|
|
+ A5_APIgetTemplateUrl,
|
|
|
+ A5_APIsave,
|
|
|
+ API_upFile,
|
|
|
+ upFileFu
|
|
|
+} from '@/store/action/all'
|
|
|
+import { FileType } from '@/types'
|
|
|
+import { baseURL } from '@/utils/http'
|
|
|
|
|
|
type FormType = {
|
|
|
name: string
|
|
|
phone: string
|
|
|
ID: string
|
|
|
- num1: null | number
|
|
|
- num2: null | null
|
|
|
- jigou: string
|
|
|
- miaoshu: string
|
|
|
+ pcsStudent: null | number
|
|
|
+ pcsTeacher: null | null
|
|
|
+ unit: string
|
|
|
+ remark: string
|
|
|
}
|
|
|
|
|
|
function A5order() {
|
|
@@ -35,9 +43,9 @@ function A5order() {
|
|
|
name: ''
|
|
|
})
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- console.log('获取参数', urlObj)
|
|
|
- }, [urlObj])
|
|
|
+ // useEffect(() => {
|
|
|
+ // console.log('获取参数', urlObj)
|
|
|
+ // }, [urlObj])
|
|
|
|
|
|
const urlObjTemp: any = useParams()
|
|
|
|
|
@@ -57,18 +65,33 @@ function A5order() {
|
|
|
getInfo()
|
|
|
}, [getInfo])
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- FormBoxRef.current?.setFieldsValue({
|
|
|
- name: '王大锤',
|
|
|
- phone: '18702025091',
|
|
|
- ID: '421083199504071212',
|
|
|
- num1: 3,
|
|
|
- num2: null,
|
|
|
- jigou: '机构机构',
|
|
|
- miaoshu: ''
|
|
|
- })
|
|
|
+ // 获取模板下载地址
|
|
|
+ const [templateUrl, setTemplateUrl] = useState('')
|
|
|
+
|
|
|
+ const getTemplateUrlFu = useCallback(async () => {
|
|
|
+ const res = await A5_APIgetTemplateUrl()
|
|
|
+ if (res.code === 0) {
|
|
|
+ const obj = JSON.parse(res.data.rtf)
|
|
|
+ setTemplateUrl(obj.filePath)
|
|
|
+ }
|
|
|
}, [])
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
+ getTemplateUrlFu()
|
|
|
+ }, [getTemplateUrlFu])
|
|
|
+
|
|
|
+ // useEffect(() => {
|
|
|
+ // FormBoxRef.current?.setFieldsValue({
|
|
|
+ // name: '王大锤',
|
|
|
+ // phone: '18702025091',
|
|
|
+ // identity: '421083199504071212',
|
|
|
+ // pcsStudent: 3,
|
|
|
+ // pcsTeacher: null,
|
|
|
+ // unit: '机构机构',
|
|
|
+ // remark: ''
|
|
|
+ // })
|
|
|
+ // }, [])
|
|
|
+
|
|
|
// 表单的ref
|
|
|
const FormBoxRef = useRef<FormInstance>(null)
|
|
|
|
|
@@ -83,48 +106,105 @@ function A5order() {
|
|
|
2: ''
|
|
|
})
|
|
|
|
|
|
+ // 附件图片信息
|
|
|
+ const [fileObj, setFileObj] = useState({} as FileType)
|
|
|
+
|
|
|
// 打开提示弹窗
|
|
|
const [titPop, setTitPop] = useState('')
|
|
|
|
|
|
// 通过校验点击确定
|
|
|
- const onFinish = useCallback(async (values: FormType) => {
|
|
|
- setTitPop('succ')
|
|
|
-
|
|
|
- console.log(123, values)
|
|
|
- // domShowFu('#AsyncSpinLoding', true)
|
|
|
-
|
|
|
- // setText({
|
|
|
- // 1: values.jigou.replaceAll(/(\n|\r|\r\n)/g, '<br />'),
|
|
|
- // 2: values.miaoshu.replaceAll(/(\n|\r|\r\n)/g, '<br />')
|
|
|
- // })
|
|
|
-
|
|
|
- // const time = dayjs(new Date()).format('YYYY-MM-DD HH:mm')
|
|
|
- // setTime(time)
|
|
|
- // window.setTimeout(() => {
|
|
|
- // const dom = document.querySelector('.A5listMain') as HTMLDivElement
|
|
|
- // if (dom) {
|
|
|
- // const name = '预约申请单'
|
|
|
-
|
|
|
- // htmlToPdf2(dom, name, () => {
|
|
|
- // // 打开预约成功的弹窗
|
|
|
- // // setTime('')
|
|
|
- // // domShowFu('#AsyncSpinLoding', false)
|
|
|
- // })
|
|
|
- // } else {
|
|
|
- // MessageFu.warning('找不到元素!')
|
|
|
- // setTime('')
|
|
|
- // domShowFu('#AsyncSpinLoding', false)
|
|
|
- // }
|
|
|
- // }, 500)
|
|
|
- }, [])
|
|
|
+ const onFinish = useCallback(
|
|
|
+ async (values: FormType) => {
|
|
|
+ domShowFu('#AsyncSpinLoding', true)
|
|
|
|
|
|
- const [fileUrl, setFileUrl] = useState({
|
|
|
- src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
|
- name: ''
|
|
|
- })
|
|
|
+ setText({
|
|
|
+ 1: values.unit.replaceAll(/(\n|\r|\r\n)/g, '<br />'),
|
|
|
+ 2: values.remark.replaceAll(/(\n|\r|\r\n)/g, '<br />')
|
|
|
+ })
|
|
|
+
|
|
|
+ const time = dayjs(new Date()).format('YYYY-MM-DD HH:mm')
|
|
|
+ setTime(time)
|
|
|
+ window.setTimeout(() => {
|
|
|
+ const dom = document.querySelector('.A5listMain') as HTMLDivElement
|
|
|
+ if (dom) {
|
|
|
+ const name = '预约申请单.pdf'
|
|
|
+
|
|
|
+ // 成功之后的回调
|
|
|
+ htmlToPdf2(dom, name, async myfile => {
|
|
|
+ domShowFu('#AsyncSpinLoding', false)
|
|
|
+ // 创建FormData对象
|
|
|
+ const fd = new FormData()
|
|
|
+ fd.append('type', 'doc')
|
|
|
+ fd.append('dirCode', 'orderDoc')
|
|
|
+ fd.append('moduleName', 'apply')
|
|
|
+ fd.append('isDb', 'true')
|
|
|
+ fd.append('file', myfile)
|
|
|
+
|
|
|
+ // for (var [a, b] of fd.entries()) {
|
|
|
+ // console.log(a, b)
|
|
|
+ // }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const res = await API_upFile(fd, 'wx/upload')
|
|
|
+ if (res.code === 0) {
|
|
|
+ const obj = {
|
|
|
+ ...values,
|
|
|
+ bookDate: urlObj.bookDate,
|
|
|
+ bookTime: urlObj.bookTime,
|
|
|
+ subjectName: urlObj.name,
|
|
|
+ fileIds: res.data.id + '',
|
|
|
+ pcsTeacher: values.pcsTeacher === null ? 0 : values.pcsTeacher
|
|
|
+ }
|
|
|
+
|
|
|
+ if (fileObj.id) obj.fileIds += `,${fileObj.id}`
|
|
|
+
|
|
|
+ const res2 = await A5_APIsave(obj)
|
|
|
+ if (res2.code === 0) {
|
|
|
+ // 打开预约成功的弹窗
|
|
|
+ setTitPop('succ')
|
|
|
+ } else setTime('')
|
|
|
+ }
|
|
|
+ fileDomInitialFu()
|
|
|
+ } catch (error) {
|
|
|
+ setTime('')
|
|
|
+ fileDomInitialFu()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ MessageFu.warning('找不到元素!')
|
|
|
+ setTime('')
|
|
|
+ domShowFu('#AsyncSpinLoding', false)
|
|
|
+ }
|
|
|
+ }, 500)
|
|
|
+ },
|
|
|
+ [fileObj.id, urlObj]
|
|
|
+ )
|
|
|
+
|
|
|
+ const myInput = useRef<HTMLInputElement>(null)
|
|
|
+
|
|
|
+ // 上传图片
|
|
|
+ const handeUpPhoto = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
|
+ upFileFu(
|
|
|
+ e,
|
|
|
+ 'wx/upload',
|
|
|
+ 5,
|
|
|
+ ['image/jpeg', 'image/png'],
|
|
|
+ '.jpg,.png',
|
|
|
+ data => setFileObj(data),
|
|
|
+ { type: 'img', dirCode: 'orderImg', moduleName: 'apply', isDb: 'true' }
|
|
|
+ )
|
|
|
+ }, [])
|
|
|
|
|
|
return (
|
|
|
<div className={styles.A5order}>
|
|
|
+ <input
|
|
|
+ id='upInput'
|
|
|
+ type='file'
|
|
|
+ accept='.jpg,.png'
|
|
|
+ ref={myInput}
|
|
|
+ onChange={e => handeUpPhoto(e)}
|
|
|
+ />
|
|
|
+
|
|
|
<TopCom txt='填写信息' />
|
|
|
<div className={classNames('A5main')}>
|
|
|
<div className='A5list'>
|
|
@@ -185,7 +265,7 @@ function A5order() {
|
|
|
|
|
|
<Form.Item
|
|
|
label='身份证号'
|
|
|
- name='ID'
|
|
|
+ name='identity'
|
|
|
rules={[
|
|
|
{ required: true, message: '请输入身份证号!' },
|
|
|
{
|
|
@@ -205,13 +285,13 @@ function A5order() {
|
|
|
|
|
|
<Form.Item
|
|
|
label='参观学生人数'
|
|
|
- name='num1'
|
|
|
+ name='pcsStudent'
|
|
|
rules={[{ required: true, message: '请输入参观学生人数!' }]}
|
|
|
>
|
|
|
<InputNumber min={0} max={999} precision={0} placeholder='请输入数字' />
|
|
|
</Form.Item>
|
|
|
|
|
|
- <Form.Item className='A5llmove' label='随堂老师人数' name='num2'>
|
|
|
+ <Form.Item className='A5llmove' label='随堂老师人数' name='pcsTeacher'>
|
|
|
<InputNumber
|
|
|
min={0}
|
|
|
max={999}
|
|
@@ -241,14 +321,14 @@ function A5order() {
|
|
|
<Form.Item
|
|
|
className='A5Text20'
|
|
|
label='所属机构'
|
|
|
- name='jigou'
|
|
|
+ name='unit'
|
|
|
rules={[{ required: true, message: '请输入所属机构!' }]}
|
|
|
getValueFromEvent={e => e.target.value.replace(/\s+/g, '')}
|
|
|
>
|
|
|
<TextArea autoSize placeholder='请输入内容,不超过20个字' maxLength={20} />
|
|
|
</Form.Item>
|
|
|
|
|
|
- <Form.Item label='团队描述' name='miaoshu' className='A5Text'>
|
|
|
+ <Form.Item label='团队描述' name='remark' className='A5Text'>
|
|
|
<TextArea
|
|
|
autoSize
|
|
|
maxLength={200}
|
|
@@ -267,13 +347,13 @@ function A5order() {
|
|
|
</Form>
|
|
|
|
|
|
{/* 第三个卡片 */}
|
|
|
- <div className='A5lKa' hidden={!!time && !fileUrl}>
|
|
|
+ <div className='A5lKa' hidden={!!time && !fileObj.filePath}>
|
|
|
<div className='A5tit'>健康生活教育课程预约单</div>
|
|
|
|
|
|
{time ? null : (
|
|
|
<div className='A5LA1'>
|
|
|
预约单模板
|
|
|
- <a className='A5LA1btn' href='xxx' download='预约单模板'>
|
|
|
+ <a className='A5LA1btn' href={baseURL + templateUrl} download='预约单模板'>
|
|
|
下载
|
|
|
</a>
|
|
|
</div>
|
|
@@ -285,22 +365,28 @@ function A5order() {
|
|
|
<p>上传填写结果</p>
|
|
|
<span>仅限jpg,png格式;大小不超过5M;最多1个文件</span>
|
|
|
</div>
|
|
|
- <div className='A5LA1btn' hidden={!!fileUrl}>
|
|
|
+ <div
|
|
|
+ className='A5LA1btn'
|
|
|
+ onClick={() => myInput.current?.click()}
|
|
|
+ hidden={!!fileObj.filePath}
|
|
|
+ >
|
|
|
上传
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
|
|
|
- {fileUrl.src ? (
|
|
|
+ {fileObj.filePath ? (
|
|
|
<div className='A5file'>
|
|
|
- <img src={fileUrl.src} alt='' />
|
|
|
+ <img src={baseURL + fileObj.filePath} alt='' />
|
|
|
{time ? null : (
|
|
|
<div className='A5file2'>
|
|
|
- <EyeOutlined onClick={() => ImageViewer.show({ image: fileUrl.src })} />
|
|
|
+ <EyeOutlined
|
|
|
+ onClick={() => ImageViewer.show({ image: baseURL + fileObj.filePath })}
|
|
|
+ />
|
|
|
|
|
|
<MyPopconfirm
|
|
|
txtK='删除'
|
|
|
- onConfirm={() => setFileUrl({ src: '', name: '' })}
|
|
|
+ onConfirm={() => setFileObj({} as FileType)}
|
|
|
Dom={<CloseOutlined className='clearCover' />}
|
|
|
/>
|
|
|
</div>
|