KLMYMuseum/src/pages/A4news/A4add/index.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import classNames from 'classnames'
import { A1EditInfoType } from '../data'
import { Button, Form, FormInstance, Input, DatePicker } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import { A4_APIgetInfo, A4_APIadd, A4_APIedit } from '@/store/action/A4news'
import { MessageFu } from '@/utils/message'
import ZupOne from '@/components/ZupOne'
import MyPopconfirm from '@/components/MyPopconfirm'
import dayjs from 'dayjs'
import ZRichTexts from '@/components/ZRichTexts'
import { A4AddType, A4tableType } from '@/types/api/A4news'

type Props = {
  editInfo: A1EditInfoType
  closeFu: () => void
  addTableFu: () => void
  editTableFu: () => void
}

function A4add({ editInfo, closeFu, addTableFu, editTableFu }: Props) {
  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null)

  // 封面图的ref
  const ZupThumbRef1 = useRef<any>(null)
  const ZupThumbRef2 = useRef<any>(null)
  // 正文的ref
  const ZRichTextRef = useRef<any>(null)

  // 回显数据的方法调用
  const dataShow = useCallback((info: A4tableType) => {
    let editObj = null
    if (info.status === 0) {
      editObj = {
        ...info,
        title: info.titleB,
        publish: info.publishB,
        remark: info.remarkB,
        context: info.contextB,
        indexImg: info.indexImgB,
        indexImgTh: info.indexImgThB,
        infoImg: info.infoImgB,
        infoImgTh: info.infoImgThB
      }
    } else {
      editObj = { ...info }
    }
    FormBoxRef.current?.setFieldsValue({ ...editObj, publish: dayjs(editObj.publish) })

    // 设置封面图
    ZupThumbRef1.current?.setFileComFileFu({
      fileName: '',
      thUrl: editObj.indexImgTh,
      url: editObj.indexImg
    })
    ZupThumbRef2.current?.setFileComFileFu({
      fileName: '',
      thUrl: editObj.infoImgTh,
      url: editObj.infoImg
    })

    // 设置正文
    ZRichTextRef.current?.ritxtShowFu({
      txtArr: [
        {
          id: editObj.informationId,
          name: '正文',
          txt: editObj.context,
          fileInfo: { fileName: '', filePath: '' }
        }
      ]
    })
  }, [])

  // 编辑 进入页面 获取信息
  const getInfoFu = useCallback(
    async (id: number) => {
      if (editInfo.info) dataShow(editInfo.info)
      else {
        const res = await A4_APIgetInfo(id)
        if (res.code === 0) {
          dataShow(res.data)
        }
      }
    },
    [dataShow, editInfo.info]
  )

  // 附件 是否 已经点击过确定
  const [fileCheck, setFileCheck] = useState(false)

  // 编辑填入数据
  useEffect(() => {
    if (editInfo.id > 0) {
      getInfoFu(editInfo.id)
    }
  }, [editInfo.id, getInfoFu])

  // 没有通过校验
  const onFinishFailed = useCallback(() => {
    setFileCheck(true)
  }, [])

  //  通过校验点击确定
  const onFinish = useCallback(
    async (values: any) => {
      setFileCheck(true)

      const coverUrl1 = ZupThumbRef1.current?.fileComFileResFu()
      const coverUrl2 = ZupThumbRef2.current?.fileComFileResFu()
      const context = ZRichTextRef.current?.fatherBtnOkFu()
      // 没有传 封面图
      if (!coverUrl1.url) return MessageFu.warning('请上传首页封面图!')
      if (!coverUrl2.url) return MessageFu.warning('请上传详情封面图!')
      if (!context.val.txtArr[0].txt) return MessageFu.warning('请输入正文!')

      // 发布
      const obj1: A4AddType = {
        ...values,
        indexImg: coverUrl1.url,
        indexImgTh: coverUrl1.thUrl,
        infoImg: coverUrl2.url,
        infoImgTh: coverUrl2.thUrl,
        context: context.val.txtArr[0].txt,
        publish: values.publish?.format('YYYY-MM-DD') || '',
        publishB: '',
        status: 1,
        titleB: '',
        urlB: ''
      }

      // 预发布
      const obj2: A4AddType = {
        indexImg: '',
        indexImgB: coverUrl1.url,
        indexImgTh: '',
        indexImgThB: coverUrl1.thUrl,
        infoImg: '',
        infoImgB: coverUrl2.url,
        infoImgTh: '',
        infoImgThB: coverUrl2.thUrl,
        publish: '',
        publishB: values.publish?.format('YYYY-MM-DD') || '',
        status: 0,
        title: '',
        titleB: values.title,
        remark: '',
        remarkB: values.remark,
        context: '',
        contextB: context.val.txtArr[0].txt
      }

      let res: any
      if (btnRef.current === '1') {
        res =
          editInfo.txt === '新增'
            ? await A4_APIadd(obj1)
            : await A4_APIedit({ ...obj1, informationId: editInfo.id })
      } else {
        res =
          editInfo.txt === '新增'
            ? await A4_APIadd(obj2)
            : await A4_APIedit({ ...obj2, informationId: editInfo.id })
      }

      if (res.code === 0) {
        MessageFu.success(`${editInfo.txt}成功!`)
        editInfo.id > 0 ? editTableFu() : addTableFu()
        closeFu()
      }
    },
    [addTableFu, closeFu, editInfo.id, editInfo.txt, editTableFu]
  )

  const formOkBtnRef = useRef<any>(null)

  const btnRef = useRef('')

  return (
    <div className={styles.A4add}>
      <div className={classNames('A4aMain')}>
        <Form
          ref={FormBoxRef}
          name='basic'
          labelCol={{ span: 3 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete='off'
          scrollToFirstError
        >
          <Form.Item
            label='标题'
            name='title'
            rules={[{ required: true, message: '请输入标题！' }]}
          >
            <Input placeholder='请输入内容，不超过30个字' maxLength={30} showCount />
          </Form.Item>

          <Form.Item
            label='发布日期'
            name='publish'
            rules={[{ required: true, message: '请选择日期！' }]}
            initialValue={dayjs()}
          >
            <DatePicker
              defaultValue={dayjs()}
              allowClear
              placeholder='请选择日期'
              style={{ width: 200 }}
            />
          </Form.Item>

          <Form.Item label='摘要' name='remark'>
            <TextArea maxLength={200} showCount placeholder='请输入内容，不超过200个字' />
          </Form.Item>

          <Form.Item label='正文' name='context'>
            <ZRichTexts
              check={true}
              dirCode={'A4news'}
              isLook={false}
              ref={ZRichTextRef}
              myUrl='museum/upload/upload'
              isOne={true}
              upAudioBtnNone={true}
              video={false}
            />
          </Form.Item>

          {/* 封面 */}
          <div className='formRow'>
            <div className='formLeft'>
              <span>* </span>
              首页封面：
            </div>
            <div className='formRight'>
              <ZupOne
                ref={ZupThumbRef1}
                fileCheck={fileCheck}
                size={5}
                dirCode={'A1banner'}
                myUrl='museum/upload/uploadImg'
                format={['image/jpg', 'image/png']}
                inchTxt='7:2'
                formatTxt='png、jpg'
                checkTxt='请上传封面图!'
                upTxt='最多1张'
                myType='thumb'
              />
            </div>
          </div>

          <div className='formRow'>
            <div className='formLeft'>
              <span>* </span>
              详情封面：
            </div>
            <div className='formRight'>
              <ZupOne
                ref={ZupThumbRef2}
                fileCheck={fileCheck}
                size={5}
                dirCode={'A1banner'}
                myUrl='museum/upload/uploadImg'
                format={['image/jpg', 'image/png']}
                inchTxt='5:7'
                formatTxt='png、jpg'
                checkTxt='请上传封面图!'
                upTxt='最多1张'
                myType='thumb'
              />
            </div>
          </div>

          {/* 确定和取消按钮 */}
          <Form.Item className='A4abtn'>
            <div className='A4abtnBox'>
              <Button
                type='primary'
                htmlType='submit'
                onClick={() => {
                  btnRef.current = '1'
                  formOkBtnRef.current?.click()
                }}
              >
                发布
              </Button>
              <Button
                type='primary'
                htmlType='submit'
                onClick={() => {
                  btnRef.current = '0'
                  formOkBtnRef.current?.click()
                }}
              >
                预发布
              </Button>
              <MyPopconfirm txtK='取消' onConfirm={closeFu} />
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

const MemoA4add = React.memo(A4add)

export default MemoA4add