FEV2 / fw-cms

  import React, { useEffect, useState } from "react";

  import { Modal, Form, Input, message } from "antd";
  import { WorkTypeListVO, saveWorkType } from "../api";

  
  interface Props {
    visible: boolean;
    onCancel: () => void;
    onRefreshing: () => void;

    item: WorkTypeListVO;

  }
  export default function CreateModal({
    visible,
    onCancel,
    item,
    onRefreshing,
  }: Props) {
    const [form] = Form.useForm();
    const [saveLoading, setSaveLoading] = useState(false);

    useEffect(() => {
      if (visible) {
        form.setFieldsValue({
          ...item,
        });
      }
    }, [visible]);

  
    function handleSave(feildValue: any) {
      setSaveLoading(true);

      const params = {
        ...feildValue,

        id: item.id,

        name: (feildValue.name || "").trim(),
      };

      setSaveLoading(false);

      saveWorkType(params)
        .then((res) => {

          message.success("保存成功！");

          onCancel && onCancel();
        })
        .catch((e) => {
          message.error(e.message);

        })
        .finally(() => setSaveLoading(false));

    }
  
    return (
      <Modal
        visible={visible}
        onCancel={onCancel}
        onOk={form.submit}
        title={`${item.name ? "编辑" : "新增"}工作类型`}
        confirmLoading={saveLoading}
        maskClosable={false}

        afterClose={() => {
          form.resetFields();
        }}

      >
        <Form
          form={form}
          onFinish={handleSave}
          wrapperCol={{ span: 18 }}
          labelCol={{ span: 6 }}
        >
          <Form.Item

            label="工作类型名称"
            name="name"
            rules={[{ required: true }]}
          >
            <Input placeholder="请输入工作类型名称" />
          </Form.Item>
        </Form>
      </Modal>
    );
  }