feat: menu

src/components/DrawerForm/index.tsx

@@ -0,0 +1,122 @@
+import React, { useImperativeHandle, forwardRef } from "react";
+import { DrawerForm } from "@ant-design/pro-components";
+import type { ProFormColumnsType } from "@ant-design/pro-components";
+import { BetaSchemaForm } from "@ant-design/pro-components";
+import { Button, Drawer, Space, Typography } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+const { Title } = Typography;
+interface ConfigurableDrawerFormProps {
+  title?: string;
+  columns: ProFormColumnsType[];
+  onSubmit?: (values: any) => Promise<boolean>;
+  initialValues?: Record<string, any>;
+  width?: number;
+}
+
+export interface ConfigurableDrawerFormRef {
+  open: (data?: Record<string, any>) => void;
+  close: () => void;
+}
+
+const ConfigurableDrawerForm = forwardRef<
+  ConfigurableDrawerFormRef,
+  ConfigurableDrawerFormProps
+>(({ title = "表单", 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<any>(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={{ span: 4 }}
+        wrapperCol={{ span: 20 }}
+        submitter={false}
+      />
+    </Drawer>
+  );
+});
+
+export default ConfigurableDrawerForm;