128 lines
4.5 KiB
TypeScript
128 lines
4.5 KiB
TypeScript
|
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 {
|
||
|
|
invoiceInfoId: string;
|
||
|
|
handleOk: () => void;
|
||
|
|
handleCancel: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function InvoiceInfoSave(props: EditProps) {
|
||
|
|
const [messageApi, messageContext] = useMessage();
|
||
|
|
const [modal, modalContext] = useModal();
|
||
|
|
const [form] = useForm<FormDataType>()
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!props.invoiceInfoId) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
get<FormDataType>({
|
||
|
|
messageApi,
|
||
|
|
url: `/api/invoice-info/get/${props.invoiceInfoId}`,
|
||
|
|
onSuccess({data}) {
|
||
|
|
form.setFieldsValue(data);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, [props.invoiceInfoId]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Form
|
||
|
|
name="basic"
|
||
|
|
layout="vertical"
|
||
|
|
form={form}
|
||
|
|
onFinish={(values) => {
|
||
|
|
modal.confirm({
|
||
|
|
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();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Form.Item
|
||
|
|
label="公司名称"
|
||
|
|
name="invoiceTitle"
|
||
|
|
rules={[{required: true, message: '请输入公司名称'}]}
|
||
|
|
>
|
||
|
|
<Input placeholder="请输入公司名称"/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item
|
||
|
|
label="纳税人识别号"
|
||
|
|
name="invoiceNo"
|
||
|
|
rules={[{required: true, message: '请输入纳税人识别号'}]}
|
||
|
|
>
|
||
|
|
<Input placeholder="请输入纳税人识别号"/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item
|
||
|
|
label="公司地址"
|
||
|
|
name="invoiceAddress"
|
||
|
|
rules={[{required: true, message: '请输入公司地址'}]}
|
||
|
|
>
|
||
|
|
<Input placeholder="请输入公司地址"/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item
|
||
|
|
label="公司电话"
|
||
|
|
name="invoicePhone"
|
||
|
|
rules={[{required: true, message: '请输入公司电话'}]}
|
||
|
|
>
|
||
|
|
<Input placeholder="请输入公司电话"/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item
|
||
|
|
label="开户行"
|
||
|
|
name="invoiceBank"
|
||
|
|
rules={[{required: true, message: '请输入开户行'}]}
|
||
|
|
>
|
||
|
|
<Input placeholder="请输入开户行"/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item
|
||
|
|
label="开户行账号"
|
||
|
|
name="invoiceAccount"
|
||
|
|
rules={[{required: true, 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}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|