137 lines
3.6 KiB
TypeScript
137 lines
3.6 KiB
TypeScript
import type { ProFormColumnsType } from '@ant-design/pro-components';
|
|
import { BetaSchemaForm } from '@ant-design/pro-components';
|
|
import { Button, type ColProps, Drawer, Space, Typography } from 'antd';
|
|
import type { FormInstance } from 'antd/lib';
|
|
import React, { forwardRef, useImperativeHandle } from 'react';
|
|
|
|
interface ConfigurableDrawerFormProps {
|
|
title?: string;
|
|
columns: ProFormColumnsType[];
|
|
onSubmit?: (values: any) => Promise<boolean>;
|
|
initialValues?: Record<string, any>;
|
|
width?: number | string;
|
|
labelCol?: ColProps;
|
|
wrapperCol?: ColProps;
|
|
}
|
|
|
|
export interface ConfigurableDrawerFormRef {
|
|
open: (data?: Record<string, any>) => void;
|
|
close: () => void;
|
|
}
|
|
|
|
const ConfigurableDrawerForm = forwardRef<
|
|
ConfigurableDrawerFormRef,
|
|
ConfigurableDrawerFormProps
|
|
>(
|
|
(
|
|
{
|
|
title = '表单',
|
|
labelCol = { span: 4 },
|
|
wrapperCol = { span: 20 },
|
|
columns,
|
|
onSubmit,
|
|
initialValues,
|
|
width = 600,
|
|
},
|
|
ref,
|
|
) => {
|
|
const [open, setOpen] = React.useState(false);
|
|
const [formData, setFormData] = React.useState(initialValues || {});
|
|
const [loading, setLoading] = React.useState<boolean>(false);
|
|
// 添加表单实例引用
|
|
const formRef = React.useRef<FormInstance>(null);
|
|
useImperativeHandle(ref, () => ({
|
|
open: (data) => {
|
|
if (data) {
|
|
setFormData(data);
|
|
}
|
|
console.log('open');
|
|
setOpen(true);
|
|
},
|
|
close: () => setOpen(false),
|
|
}));
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
if (onSubmit) {
|
|
await formRef.current?.validateFields();
|
|
setLoading(true);
|
|
const values = formRef.current?.getFieldsValue();
|
|
const success = await onSubmit(values);
|
|
if (success) {
|
|
setOpen(false);
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
return true;
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
// const customHeader = (
|
|
// <div
|
|
// style={{
|
|
// display: "flex",
|
|
// justifyContent: "space-between",
|
|
// alignItems: "center",
|
|
// padding: "0 0px 16px 0px",
|
|
// borderBottom: "1px solid #f0f0f0",
|
|
// marginBottom: "16px",
|
|
// }}
|
|
// >
|
|
// <Title level={4} style={{ margin: 0 }}>
|
|
// {title}
|
|
// </Title>
|
|
// <Button
|
|
// type="text"
|
|
// icon={<CloseOutlined />}
|
|
// onClick={() => setOpen(false)}
|
|
// style={{
|
|
// border: "none",
|
|
// boxShadow: "none",
|
|
// }}
|
|
// />
|
|
// </div>
|
|
// );
|
|
return (
|
|
<Drawer
|
|
title={title}
|
|
styles={{
|
|
header: {
|
|
textAlign: 'left',
|
|
position: 'relative',
|
|
},
|
|
}}
|
|
destroyOnHidden
|
|
closable={true} // 隐藏默认关闭按钮
|
|
open={open}
|
|
onClose={() => setOpen(false)}
|
|
width={width}
|
|
footer={
|
|
<Space style={{ width: '100%', justifyContent: 'end' }}>
|
|
<Button onClick={() => setOpen(false)}>取消</Button>
|
|
<Button loading={loading} type="primary" onClick={handleSubmit}>
|
|
保存
|
|
</Button>
|
|
</Space>
|
|
}
|
|
>
|
|
{/* {customHeader} */}
|
|
<BetaSchemaForm
|
|
initialValues={formData}
|
|
layoutType="Form"
|
|
formRef={formRef}
|
|
columns={columns}
|
|
layout="horizontal"
|
|
labelCol={labelCol}
|
|
wrapperCol={wrapperCol}
|
|
submitter={false}
|
|
/>
|
|
</Drawer>
|
|
);
|
|
},
|
|
);
|
|
|
|
export default ConfigurableDrawerForm;
|