feat: 订单列表

src/components/DrawerForm/index.tsx

@@ -1,17 +1,20 @@
 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 { Button, type ColProps, Drawer, Space } from 'antd';
 import type { FormInstance } from 'antd/lib';
 import React, { forwardRef, useImperativeHandle } from 'react';
 
 interface ConfigurableDrawerFormProps {
   title?: string;
-  columns: ProFormColumnsType[];
+  columns?: ProFormColumnsType[];
   onSubmit?: (values: any) => Promise<boolean>;
   initialValues?: Record<string, any>;
   width?: number | string;
   labelCol?: ColProps;
   wrapperCol?: ColProps;
+  footer: React.ReactNode;
+  children?: React.ReactNode;
+  bodyStyle: React.CSSProperties;
 }
 
 export interface ConfigurableDrawerFormRef {
@@ -32,6 +35,9 @@ const ConfigurableDrawerForm = forwardRef<
       onSubmit,
       initialValues,
       width = 600,
+      footer,
+      children,
+      bodyStyle = {},
     },
     ref,
   ) => {
@@ -69,31 +75,7 @@ const ConfigurableDrawerForm = forwardRef<
         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>
-    // );
+    console.log(footer);
     return (
       <Drawer
         title={title}
@@ -102,6 +84,11 @@ const ConfigurableDrawerForm = forwardRef<
             textAlign: 'left',
             position: 'relative',
           },
+          body: {
+            background: 'var(--ant-background-color)',
+            padding: 'var(--ant-padding-lg)',
+            ...bodyStyle,
+          },
         }}
         destroyOnHidden
         closable={true} // 隐藏默认关闭按钮
@@ -110,24 +97,33 @@ const ConfigurableDrawerForm = forwardRef<
         width={width}
         footer={
           <Space style={{ width: '100%', justifyContent: 'end' }}>
-            <Button onClick={() => setOpen(false)}>取消</Button>
-            <Button loading={loading} type="primary" onClick={handleSubmit}>
-              保存
-            </Button>
+            {footer ? (
+              footer
+            ) : (
+              <>
+                <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}
-        />
+        {columns ? (
+          <BetaSchemaForm
+            initialValues={formData}
+            layoutType="Form"
+            formRef={formRef}
+            columns={columns}
+            layout="horizontal"
+            labelCol={labelCol}
+            wrapperCol={wrapperCol}
+            submitter={false}
+          />
+        ) : (
+          children
+        )}
       </Drawer>
     );
   },