web-base--/src/pages/Memory/components/UpdateForm.tsx

import React, {useEffect} from 'react';
import {Button, message, Modal} from 'antd';
import {TableListItem} from '../../MemoryList/data.d';
import Quill from "@/pages/Memory/components/Quill";
import service from "@/pages/Memory/service";
import {useSingleState} from "nice-hooks";
import {getTextFromHtml} from "@/utils/utils";

// 表单特殊字段
export interface FormValueType extends Partial<TableListItem> {
}

export interface UpdateFormProps {
  onCancel: (fresh?:boolean) => void;
  modalVisible: boolean;
  values: Partial<TableListItem>;
}


const UpdateForm: React.FC<UpdateFormProps> = (props) => {

  const [formValues, setFormValues] = useSingleState<TableListItem>({
    back: "",
    front: "",
    id: undefined,
    period: 0,
    remindTime: new Date(),
    tag: "",
    updateTime: "",
    userId: 0,...props.values});

  const {
    onCancel: hideModal,
    modalVisible,
  } = props;

  useEffect(()=>{
    console.log(props);
  },[])


  return (
    <Modal
      width={640}
      bodyStyle={{padding: '15px 15px 15px'}}
      destroyOnClose
      title="配置模型"
      visible={modalVisible}
      onCancel={() => hideModal(false)}
      footer={null}
    >
      <div>
        <h4>正面</h4>
        <Quill
          readonly={false}
          onChange={(value) => {
            setFormValues({front: value});
          }}
          value={formValues.front}/>

        <p/>
        <h4>反面</h4>
        <Quill
          readonly={false}
          onChange={(value) => {
            setFormValues({back: value});
          }}
          value={formValues.back}
        />
        <p/>
        <Button
          type="primary"
          onClick={async () => {
            if (getTextFromHtml(formValues.front + formValues.back).length <= 1) {
              message.info("你是不是没有输入文字？");
              return;
            }
            if (formValues.front.length >= 3000 || formValues.back.length >= 3000) {
              message.info("文字太长了，减少一些吧！");
              return;
            }
            let res;
            if (formValues.id != undefined) {
              res = await service.update(formValues);
            } else {
              res = await service.insert(formValues);
            }
            if (res.success) {
              message.info('操作成功');
              if (formValues.id != undefined) {
                hideModal(true);
              } else {
                setFormValues({front:'',back:''})
              }
            } else {
              message.info(`操作失败: ${res.message}`);
            }
          }}
        >
          确定
        </Button>
        <span> </span>
        <Button
          type="primary"
          onClick={() => {
            hideModal(false)
          }}
        >关闭</Button>
      </div>
    </Modal>
  );
};

export default UpdateForm;