Yansen 2 年 前
コミット
f88355610a
共有1 個のファイルを変更した83 個の追加0 個の削除を含む
  1. 83
    0
      src/components/Page/Curd.jsx

+ 83
- 0
src/components/Page/Curd.jsx ファイルの表示

@@ -0,0 +1,83 @@
1
+import React from 'react';
2
+import { DrawerForm } from '@ant-design/pro-components';
3
+import { Form } from 'antd';
4
+import List from './List';
5
+
6
+const drawerProps = {
7
+  destroyOnClose: true
8
+}
9
+export default (props) => {
10
+  const { rowKey, columns, request, formProps, renderFormItems, ...leftProps } = props;
11
+
12
+  const [form] = Form.useForm();
13
+  const listRef = React.useRef();
14
+  const rowRef = React.useRef();
15
+  const [open, setOpen] = React.useState(false);
16
+  
17
+  const onAdd = () => {
18
+    rowRef.current = undefined;
19
+    form.resetFields();
20
+    setOpen(true);
21
+  }
22
+
23
+  const onEdit = (row) => {
24
+    rowRef.current = row;
25
+    form.setFieldsValue(row);
26
+    setOpen(true);
27
+  }
28
+
29
+  const onDelete = (row) => {
30
+    rowRef.current = row;
31
+
32
+    listRef.current.showLoading('正在操作, 请稍候...');
33
+    request.del(row[rowKey]).then(() => {
34
+      listRef.current.hideLoading();
35
+      listRef.current.reload();
36
+    }).catch(() => {
37
+      listRef.current.hideLoading();
38
+    });
39
+  }
40
+
41
+  const onFinish = async (values) => {
42
+    if (rowRef.current) {
43
+      await request.update(rowRef.current[rowKey], {
44
+        ...rowRef.current,
45
+        ...values,
46
+      });
47
+    } else {
48
+      await request.save(values);
49
+    }
50
+    listRef.current.reload();
51
+
52
+    return true;
53
+  }
54
+
55
+  return (
56
+    <>
57
+      <List
58
+        ref={listRef}
59
+        rowKey={rowKey}
60
+        columns={columns}
61
+        request={request.list}
62
+        onAdd={onAdd}
63
+        onDelete={onDelete}
64
+        onEdit={onEdit}
65
+        {...leftProps}
66
+      />
67
+
68
+      <DrawerForm
69
+        submitTimeout={3000}
70
+        open={open}
71
+        form={form}
72
+        drawerProps={drawerProps}
73
+        onOpenChange={setOpen}
74
+        onFinish={onFinish}
75
+        {...formProps}
76
+      >
77
+        {
78
+          renderFormItems && renderFormItems()
79
+        }
80
+      </DrawerForm>
81
+    </>
82
+  )
83
+}