system-copyright-react/src/components/invoice/info/InvoiceInfoEdit.tsx

import { Button, Flex, Form, Input, Space } from "antd";
import { useForm } from "antd/es/form/Form";
import useModal from "antd/es/modal/useModal";
// import { get, post } from "../../../util/AjaxUtils.ts";
import useMessage from "antd/es/message/useMessage";
import { useEffect } from "react";

type FormDataType = {
    invoiceTitle: string;
    invoicePhone: string;
    invoiceNo: string;
    invoiceBank: string;
    invoiceAddress: string;
    invoiceAccount: string;
}

interface EditProps {
    invoiceId: string;
    handleOk: () => void;
    handleCancel: () => void;
}
import { getInvoiceInfo, updateInvoiceInfo } from '../../../request/api.ts'
export default function InvoiceInfoSave(props: EditProps) {
    const [messageApi, messageContext] = useMessage();
    const [modal, modalContext] = useModal();
    const [form] = useForm<FormDataType>()
    const getInfoData = async () => {
        try {
            const res: any = await getInvoiceInfo(props.invoiceId)
            // console.log(res);

            form.setFieldsValue(res)
        } catch (error: any) {
            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }

        }

    }
    const upInfoData = async () => {
        try {

            await updateInvoiceInfo(props.invoiceId, { ...form.getFieldsValue(), invoiceType: '企业' });

            messageApi.success('保存成功');

            props.handleOk();
        } catch (error: any) {
            if (error.response) {
                const data = error.response.data;
                messageApi.open({
                    type: 'error',
                    content: data.msg ? data.msg : `${data.path}(${data.status})`,
                });
            } else {
                console.error(error)
            }
        }

    }
    useEffect(() => {
        if (!props.invoiceId) {
            return;
        }
        getInfoData();

        // get<FormDataType>({
        //     messageApi,
        //     url: `/api/invoice-info/get/${props.invoiceInfoId}`,
        //     onSuccess({data}) {
        //         form.setFieldsValue(data);
        //     }
        // })

    }, [props.invoiceId]);

    return (
        <>
            <Form
                name="basic"
                layout="vertical"
                form={form}
                onFinish={() => {
                    modal.confirm({
                        centered: true,
                        title: '提示',
                        content: '确定保存吗',
                        okText: '确定',
                        cancelText: '取消',
                        okButtonProps: {
                            style: {
                                backgroundColor: 'var(--color-primary)'
                            }
                        },
                        onOk: () => {
                            // post<any>({
                            //     messageApi,
                            //     url: `/api/invoice-info/update/${props.invoiceInfoId}`,
                            //     body: values,
                            //     onSuccess() {
                            //         messageApi.success('保存成功');
                            //         props.handleOk();
                            //     }
                            // })
                            upInfoData()
                        }
                    })
                }}
            >
                <Form.Item
                    label="公司名称"
                    name="invoiceName"
                    rules={[{ required: true, message: '请输入公司名称' }]}
                >
                    <Input placeholder="请输入公司名称" />
                </Form.Item>
                <Form.Item
                    label="纳税人识别号"
                    name="invoiceNumber"
                    rules={[{ required: true, message: '请输入纳税人识别号' }]}
                >
                    <Input placeholder="请输入纳税人识别号" />
                </Form.Item>
                <Form.Item
                    label="公司地址"
                    name="invoiceOrgaddress"
                    rules={[{ required: false, message: '请输入公司地址' }]}
                >
                    <Input placeholder="请输入公司地址" />
                </Form.Item>
                <Form.Item
                    label="公司电话"
                    name="invoiceOrgtel"
                    rules={[{ required: false, message: '请输入公司电话' }]}
                >
                    <Input placeholder="请输入公司电话" />
                </Form.Item>
                <Form.Item
                    label="开户行"
                    name="invoiceBank"
                    rules={[{ required: false, message: '请输入开户行' }]}
                >
                    <Input placeholder="请输入开户行" />
                </Form.Item>
                <Form.Item
                    label="开户行账号"
                    name="invoiceBanknumber"
                    rules={[{ required: false, message: '请输入开户行账号' }]}
                >
                    <Input placeholder="请输入开户行账号" />
                </Form.Item>
                <Flex justify="center">
                    <Space size={5}>
                        <Button type="primary" htmlType="submit"
                            style={{ backgroundColor: 'var(--color-primary)' }}>保存</Button>
                        <Button type="default" onClick={() => {
                            props.handleCancel();
                        }}>关闭</Button>
                    </Space>
                </Flex>
            </Form>
            {messageContext}
            {modalContext}
        </>
    )
}