YPZZBWG/houtai/src/pages/B6Smart/SmartAutoAdd/index.tsx

import { Button, Form, FormInstance, Input, Modal, Popconfirm } from "antd";
import React, { useCallback, useEffect, useRef } from "react";
import TextArea from "antd/es/input/TextArea";
import { getSmartDetailAPI, smartSaveAPI } from "@/store/action/B6Smart";
import { MessageFu } from "@/utils/message";
import { SmartSaveDataType } from "@/types";
import styles from "./index.module.scss";

type Props = {
  id: number;
  closeMoalFu: () => void;
  addTableFu: () => void;
  editTableFu: () => void;
};

function SmartAutoAdd({ id, closeMoalFu, addTableFu, editTableFu }: Props) {
  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null);

  // 是编辑，通过id获取详情
  const getInfoByIdFu = useCallback(async (id: number) => {
    const res = await getSmartDetailAPI(id);
    FormBoxRef.current?.setFieldsValue(res.data);
  }, []);

  useEffect(() => {
    if (id > 0) getInfoByIdFu(id);
  }, [getInfoByIdFu, id]);

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

  // 通过校验点击确定
  const onFinish = useCallback(
    async (value: SmartSaveDataType) => {
      const obj: SmartSaveDataType = {
        ...value,
        id: id > 0 ? id : null,
        type: "play",
      };
      const res = await smartSaveAPI(obj);
      if (res.code === 0) {
        MessageFu.success(id > 0 ? "编辑成功!" : "新增成功!");
        if (id < 0) addTableFu();
        else editTableFu();
        closeMoalFu();
      }

      console.log("通过校验，点击确定");
    },
    [addTableFu, closeMoalFu, editTableFu, id]
  );

  return (
    <Modal
      wrapClassName={styles.SmartAutoAdd}
      destroyOnClose
      open={true}
      title={id > 0 ? "编辑播报" : "新增播报"}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="main">
        <Form
          ref={FormBoxRef}
          name="basic"
          labelCol={{ span: 2 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="标题"
            name="name"
            rules={[{ required: true, message: "请输入标题!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input maxLength={25} showCount placeholder="请输入内容" />
          </Form.Item>

          <Form.Item
            label="正文"
            name="description"
            rules={[{ required: true, message: "请输入简介!" }]}
            getValueFromEvent={(e) => e.target.value.trim()}
          >
            <TextArea
              rows={10}
              placeholder="请输入内容"
              showCount
              maxLength={2000}
            />
          </Form.Item>

          {/* 确定和取消按钮 */}
          <br />
          <Form.Item wrapperCol={{ offset: 10, span: 20 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            &emsp; &emsp;
            <Popconfirm
              title="放弃编辑后，信息将不会保存!"
              okText="放弃"
              cancelText="取消"
              onConfirm={closeMoalFu}
            >
              <Button>取消</Button>
            </Popconfirm>
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
}

const MemoSmartAutoAdd = React.memo(SmartAutoAdd);

export default MemoSmartAutoAdd;