feats

src/components/Page/Curd.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { DrawerForm } from '@ant-design/pro-components';
+import { Form } from 'antd';
+import List from './List';
+
+const drawerProps = {
+  destroyOnClose: true
+}
+export default (props) => {
+  const { rowKey, columns, request, formProps, renderFormItems, ...leftProps } = props;
+
+  const [form] = Form.useForm();
+  const listRef = React.useRef();
+  const rowRef = React.useRef();
+  const [open, setOpen] = React.useState(false);
+  
+  const onAdd = () => {
+    rowRef.current = undefined;
+    form.resetFields();
+    setOpen(true);
+  }
+
+  const onEdit = (row) => {
+    rowRef.current = row;
+    form.setFieldsValue(row);
+    setOpen(true);
+  }
+
+  const onDelete = (row) => {
+    rowRef.current = row;
+
+    listRef.current.showLoading('正在操作, 请稍候...');
+    request.del(row[rowKey]).then(() => {
+      listRef.current.hideLoading();
+      listRef.current.reload();
+    }).catch(() => {
+      listRef.current.hideLoading();
+    });
+  }
+
+  const onFinish = async (values) => {
+    if (rowRef.current) {
+      await request.update(rowRef.current[rowKey], {
+        ...rowRef.current,
+        ...values,
+      });
+    } else {
+      await request.save(values);
+    }
+    listRef.current.reload();
+
+    return true;
+  }
+
+  return (
+    <>
+      <List
+        ref={listRef}
+        rowKey={rowKey}
+        columns={columns}
+        request={request.list}
+        onAdd={onAdd}
+        onDelete={onDelete}
+        onEdit={onEdit}
+        {...leftProps}
+      />
+
+      <DrawerForm
+        submitTimeout={3000}
+        open={open}
+        form={form}
+        drawerProps={drawerProps}
+        onOpenChange={setOpen}
+        onFinish={onFinish}
+        {...formProps}
+      >
+        {
+          renderFormItems && renderFormItems()
+        }
+      </DrawerForm>
+    </>
+  )
+}