AddCollection.jsx

import React from "react";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  useDisclosure,
  Input,
  Avatar,
  Textarea,
} from "@nextui-org/react";
import { AiFillPlusSquare } from "react-icons/ai";
import { useForm } from "react-hook-form";
import { doFetch } from "@/lib/doFetch";
import UploadImage from "./UploadImage";

export default function AddCollection({ refresh, parentId, type }) {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();
  const { register, handleSubmit, control, setValue } = useForm();

  const handleButtonClick = async (close) => {
    // 手动触发表单提交
    handleSubmit(onSubmit)();
    await refresh();
    close();
  };

  const onSubmit = async (data) => {
    return await doFetch({
      url: "/api/collection",
      params: { ...data, parentId:parentId ?parseInt(parentId): null },
    });
  };

  return (
    <>
      {type === "icon" ? (
        <Button
          isIconOnly
          color="primary"
          variant="faded"
          aria-label="Take a add"
          onPress={onOpen}
        >
          <AiFillPlusSquare style={{ fontSize: "20px" }} />
        </Button>
      ) : (
        <Button
          radius="full"
          className="bg-gradient-to-tr from-green-500 to-blue-500 text-white shadow-lg mb-4"
          onPress={onOpen}
        >
          <AiFillPlusSquare />
          添加知识库
        </Button>
      )}
      <Modal
        isOpen={isOpen}
        backdrop={"blur"}
        onOpenChange={onOpenChange}
        motionProps={{
          variants: {
            enter: {
              y: 0,
              opacity: 1,
              transition: {
                duration: 0.3,
                ease: "easeOut",
              },
            },
            exit: {
              y: -20,
              opacity: 0,
              transition: {
                duration: 0.2,
                ease: "easeIn",
              },
            },
          },
        }}
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">
                添加知识库
              </ModalHeader>
              <ModalBody>
                <form action="" className="flex flex-col gap-4">
                  <Input
                    type="text"
                    label="知识库名称"
                    name="name"
                    isRequired
                    {...register("name", { required: true, maxLength: 20 })}
                  />
                  <Input
                    type="text"
                    label="编码"
                    name="code"
                    {...register("code", { required: true, maxLength: 20 })}
                  />

                  <Input
                    type="text"
                    label="故障类型"
                    name="faultType"
                    {...register("faultType", {
                      required: true,
                      maxLength: 20,
                    })}
                  />

                  <Input
                    type="text"
                    label="故障"
                    name="fault"
                    {...register("fault", { required: true, maxLength: 20 })}
                  />
                  <Textarea
                    type="text"
                    label="判断条件"
                    name="faultJudge"
                    {...register("faultJudge", {
                      required: true,
                      maxLength: 20,
                    })}
                  />
                  <Textarea
                    type="text"
                    label="故障原因"
                    name="faultReason"
                    {...register("faultReason", {
                      required: true,
                      maxLength: 20,
                    })}
                  />

                  <Textarea
                    type="text"
                    label="解决方案"
                    name="faultFn"
                    {...register("faultFn", { required: true, maxLength: 20 })}
                  />
                  <Textarea
                    type="text"
                    label="故障描述"
                    name="faultMessage"
                    {...register("faultMessage", {
                      required: true,
                      maxLength: 20,
                    })}
                  />
                </form>
              </ModalBody>
              <ModalFooter>
                <Button color="danger" variant="light" onPress={onClose}>
                  取消
                </Button>
                <Button
                  color="primary"
                  onPress={() => {
                    handleButtonClick(onClose);
                  }}
                >
                  提交
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}