import { useState } from 'react';
|
import { App as AntdApp, Button, Card, Form, Input, Space } from 'antd';
|
import { saveXxx } from './service';
|
import type { XxxFormValues } from './types';
|
import './Xxx.scss';
|
|
const Xxx = () => {
|
const [submitting, setSubmitting] = useState(false);
|
const [form] = Form.useForm<XxxFormValues>();
|
const { message } = AntdApp.useApp();
|
|
const handleFinish = (values: XxxFormValues) => {
|
setSubmitting(true);
|
saveXxx(values)
|
.then(() => {
|
message.success('保存成功');
|
form.resetFields();
|
})
|
.catch((error) => {
|
message.error(error instanceof Error ? error.message : '保存失败，请稍后重试');
|
})
|
.finally(() => {
|
setSubmitting(false);
|
});
|
};
|
|
return (
|
<div className="xxx-page">
|
<Card variant="borderless">
|
<Form<XxxFormValues>
|
form={form}
|
layout="vertical"
|
requiredMark={false}
|
onFinish={handleFinish}
|
>
|
<Form.Item
|
name="name"
|
label="名称"
|
rules={[{ required: true, message: '请输入名称' }]}
|
>
|
<Input placeholder="请输入名称" />
|
</Form.Item>
|
|
<Form.Item>
|
<Space>
|
<Button type="primary" htmlType="submit" loading={submitting}>
|
保存
|
</Button>
|
<Button onClick={() => form.resetFields()}>重置</Button>
|
</Space>
|
</Form.Item>
|
</Form>
|
</Card>
|
</div>
|
);
|
};
|
|
export default Xxx;
|
