|
@@ -0,0 +1,216 @@
|
|
|
+import React, { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
+import styles from './index.module.scss'
|
|
|
+import { B1ListType } from '@/pages/B1panorama/data'
|
|
|
+import { Button, Form, FormInstance, Input, InputNumber, Modal, Select } from 'antd'
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
+import { B1_APIsave } from '@/store/action/B1panorama'
|
|
|
+import { useDispatch, useSelector } from 'react-redux'
|
|
|
+import { B4_APIgetDictList } from '@/store/action/B4video'
|
|
|
+import { RootState } from '@/store'
|
|
|
+import ZupOne from '@/components/ZupOne'
|
|
|
+import MyPopconfirm from '@/components/MyPopconfirm'
|
|
|
+
|
|
|
+type Props = {
|
|
|
+ info: B1ListType
|
|
|
+ closeFu: () => void
|
|
|
+ addTableFu: () => void
|
|
|
+ upTableFu: (type: string) => void
|
|
|
+}
|
|
|
+
|
|
|
+function B4add({ info, closeFu, addTableFu, upTableFu }: Props) {
|
|
|
+ const dispatch = useDispatch()
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ dispatch(B4_APIgetDictList())
|
|
|
+ }, [dispatch])
|
|
|
+
|
|
|
+ const { dictList } = useSelector((state: RootState) => state.B4video)
|
|
|
+
|
|
|
+ const getInfoFu = useCallback((info: B1ListType) => {
|
|
|
+ FormBoxRef.current?.setFieldsValue({ ...info, type: Number(info.type) })
|
|
|
+ // 设置封面图
|
|
|
+ ZupThumbRef.current?.setFileComFileFu({
|
|
|
+ fileName: '',
|
|
|
+ filePath: info.thumbPc,
|
|
|
+ thumb: info.thumb
|
|
|
+ })
|
|
|
+ // 设置音频
|
|
|
+ ZupVideoRef.current?.setFileComFileFu({
|
|
|
+ fileName: info.content,
|
|
|
+ filePath: info.mediaPath,
|
|
|
+ thumb: info.mediaPath
|
|
|
+ })
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (info.id > 0) getInfoFu(info)
|
|
|
+ else FormBoxRef.current?.setFieldsValue({ sort: 999 })
|
|
|
+ }, [getInfoFu, info])
|
|
|
+
|
|
|
+ // 表单的ref
|
|
|
+ const FormBoxRef = useRef<FormInstance>(null)
|
|
|
+
|
|
|
+ // 封面图的ref
|
|
|
+ const ZupThumbRef = useRef<any>(null)
|
|
|
+
|
|
|
+ // 视频的ref
|
|
|
+ const ZupVideoRef = useRef<any>(null)
|
|
|
+
|
|
|
+ // 附件 是否 已经点击过确定
|
|
|
+ const [fileCheck, setFileCheck] = useState(false)
|
|
|
+
|
|
|
+ // 没有通过校验
|
|
|
+ const onFinishFailed = useCallback(() => {
|
|
|
+ setFileCheck(true)
|
|
|
+ }, [])
|
|
|
+
|
|
|
+ // 通过校验点击确定
|
|
|
+ const onFinish = useCallback(
|
|
|
+ async (values: any) => {
|
|
|
+ setFileCheck(true)
|
|
|
+
|
|
|
+ const coverUrl1 = ZupThumbRef.current?.fileComFileResFu()
|
|
|
+ // 没有传 封面图
|
|
|
+ if (!coverUrl1.filePath) return MessageFu.warning('请上传封面')
|
|
|
+
|
|
|
+ const videoInfo = ZupVideoRef.current?.fileComFileResFu()
|
|
|
+
|
|
|
+ if (!videoInfo.filePath) return MessageFu.warning('请上传视频')
|
|
|
+
|
|
|
+ const obj = {
|
|
|
+ ...values,
|
|
|
+ id: info.id > 0 ? info.id : null,
|
|
|
+ thumb: coverUrl1.thumb || '',
|
|
|
+ thumbPc: coverUrl1.filePath || '',
|
|
|
+ content: videoInfo.fileName || '',
|
|
|
+ mediaPath: videoInfo.filePath || '',
|
|
|
+ module: 'video'
|
|
|
+ }
|
|
|
+
|
|
|
+ // if (1 + 1 === 2) {
|
|
|
+ // console.log('------222', obj)
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+
|
|
|
+ const res = await B1_APIsave(obj)
|
|
|
+
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success(`${info.id > 0 ? '编辑' : '新增'}成功`)
|
|
|
+ info.id > 0 ? upTableFu(values.type) : addTableFu()
|
|
|
+
|
|
|
+ closeFu()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [addTableFu, closeFu, info.id, upTableFu]
|
|
|
+ )
|
|
|
+
|
|
|
+ return (
|
|
|
+ <Modal
|
|
|
+ wrapClassName={styles.B4add}
|
|
|
+ open={true}
|
|
|
+ title={info.id > 0 ? '编辑' : '新增'}
|
|
|
+ footer={
|
|
|
+ [] // 设置footer为空,去掉 取消 确定默认按钮
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <div className='B4Amain'>
|
|
|
+ <Form
|
|
|
+ ref={FormBoxRef}
|
|
|
+ name='basic'
|
|
|
+ onFinish={onFinish}
|
|
|
+ onFinishFailed={onFinishFailed}
|
|
|
+ autoComplete='off'
|
|
|
+ scrollToFirstError
|
|
|
+ >
|
|
|
+ <Form.Item
|
|
|
+ label='标题'
|
|
|
+ getValueFromEvent={e => e.target.value.trim()}
|
|
|
+ name='name'
|
|
|
+ rules={[{ required: true, message: '请输入标题' }]}
|
|
|
+ >
|
|
|
+ <Input maxLength={20} showCount placeholder='请输入内容' />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item label='板块' name='type' rules={[{ required: true, message: '请选择板块' }]}>
|
|
|
+ <Select
|
|
|
+ style={{ width: 300 }}
|
|
|
+ options={dictList.map(v => ({ value: v.id, label: v.name }))}
|
|
|
+ placeholder='请选择'
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ {/* 封面 */}
|
|
|
+ <div className='formRow'>
|
|
|
+ <div className='formLeft'>
|
|
|
+ <span>* </span>
|
|
|
+ 封面:
|
|
|
+ </div>
|
|
|
+ <div className='formRight'>
|
|
|
+ <ZupOne
|
|
|
+ ref={ZupThumbRef}
|
|
|
+ isLook={false}
|
|
|
+ fileCheck={fileCheck}
|
|
|
+ size={5}
|
|
|
+ dirCode='B4videoImg'
|
|
|
+ myUrl='cms/content/upload'
|
|
|
+ format={['image/jpeg', 'image/png']}
|
|
|
+ formatTxt='png、jpg和jpeg'
|
|
|
+ checkTxt='请上传封面'
|
|
|
+ upTxt='最多1张;建议尺寸:600 X 350'
|
|
|
+ myType='thumb'
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 视频 */}
|
|
|
+ <div className='formRow'>
|
|
|
+ <div className='formLeft'>
|
|
|
+ <span>* </span>视频:
|
|
|
+ </div>
|
|
|
+ <div className='formRight'>
|
|
|
+ <ZupOne
|
|
|
+ ref={ZupVideoRef}
|
|
|
+ isLook={false}
|
|
|
+ fileCheck={fileCheck}
|
|
|
+ size={500}
|
|
|
+ dirCode='B4video'
|
|
|
+ myUrl='cms/content/upload'
|
|
|
+ format={['video/mp4']}
|
|
|
+ formatTxt='mp4'
|
|
|
+ checkTxt='请上传视频'
|
|
|
+ upTxt='最多1个。'
|
|
|
+ myType='video'
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className='A3fromRow'>
|
|
|
+ <Form.Item
|
|
|
+ label='排序值'
|
|
|
+ name='sort'
|
|
|
+ rules={[{ required: true, message: '请输入排序值' }]}
|
|
|
+ >
|
|
|
+ <InputNumber min={1} max={999} precision={0} placeholder='请输入' />
|
|
|
+ </Form.Item>
|
|
|
+ <div className='A3_6Frow'>
|
|
|
+ 请输入1~999的数字。数字越小,排序越靠前。数字相同时,更新发布的内容排在前面
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 确定和取消按钮 */}
|
|
|
+ <Form.Item className='B4Abtn'>
|
|
|
+ <Button type='primary' htmlType='submit'>
|
|
|
+ 提交
|
|
|
+ </Button>
|
|
|
+  
|
|
|
+ <MyPopconfirm txtK='取消' onConfirm={closeFu} />
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+const MemoB4add = React.memo(B4add)
|
|
|
+
|
|
|
+export default MemoB4add
|