feat: 邮箱账号

src/components/DrawerForm/index.tsx

@@ -1,9 +1,9 @@
-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";
+import { CloseOutlined } from '@ant-design/icons';
+import type { ProFormColumnsType } from '@ant-design/pro-components';
+import { BetaSchemaForm, DrawerForm } from '@ant-design/pro-components';
+import { Button, type ColProps, Drawer, Space, Typography } from 'antd';
+import React, { forwardRef, useImperativeHandle } from 'react';
+
 const { Title } = Typography;
 interface ConfigurableDrawerFormProps {
   title?: string;
@@ -11,6 +11,8 @@ interface ConfigurableDrawerFormProps {
   onSubmit?: (values: any) => Promise<boolean>;
   initialValues?: Record<string, any>;
   width?: number;
+  labelCol?: ColProps;
+  wrapperCol?: ColProps;
 }
 
 export interface ConfigurableDrawerFormRef {
@@ -21,102 +23,115 @@ export interface ConfigurableDrawerFormRef {
 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);
+>(
+  (
+    {
+      title = '表单',
+      labelCol = { span: 4 },
+      wrapperCol = { span: 20 },
+      columns,
+      onSubmit,
+      initialValues,
+      width = 600,
     },
-    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;
+    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);
         }
-        return false;
+        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);
       }
-      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)}
+    };
+    const customHeader = (
+      <div
         style={{
-          border: "none",
-          boxShadow: "none",
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '0 0px 16px 0px',
+          borderBottom: '1px solid #f0f0f0',
+          marginBottom: '16px',
         }}
-      />
-    </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>
-  );
-});
+      >
+        <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;