From ed4397e112b939eeedafe96ce95db39be1bcfad1 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 7 Jul 2021 22:50:40 +0800
Subject: [PATCH] updates...

---
 .../blocks/DesignableSchemaField/index.tsx    |  12 +-
 packages/client/src/blocks/action/index.tsx   |  42 +-
 packages/client/src/blocks/form/index.tsx     |  32 +-
 .../client/src/blocks/table/demos/demo1.tsx   | 283 ++++++++++++++
 packages/client/src/blocks/table/index.md     | 317 +--------------
 packages/client/src/blocks/table/index.tsx    | 368 +++++++++++-------
 6 files changed, 582 insertions(+), 472 deletions(-)
 create mode 100644 packages/client/src/blocks/table/demos/demo1.tsx

diff --git a/packages/client/src/blocks/DesignableSchemaField/index.tsx b/packages/client/src/blocks/DesignableSchemaField/index.tsx
index 336c0cea4..9e0517f8a 100644
--- a/packages/client/src/blocks/DesignableSchemaField/index.tsx
+++ b/packages/client/src/blocks/DesignableSchemaField/index.tsx
@@ -40,7 +40,14 @@ import { Menu } from '../menu';
 import { Password } from '../password';
 import { Radio } from '../radio';
 import { Select } from '../select';
-import { Table, useTableCreateAction, useTableDestroyAction } from '../table';
+import {
+  Table,
+  useTableRow,
+  useTableCreateAction,
+  useTableUpdateAction,
+  useTableDestroyAction,
+  useTableFilterAction,
+} from '../table';
 import { Tabs } from '../tabs';
 import { TimePicker } from '../time-picker';
 import { Upload } from '../upload';
@@ -61,6 +68,9 @@ export const scope = {
   useSubmit,
   useTableCreateAction,
   useTableDestroyAction,
+  useTableFilterAction,
+  useTableRow,
+  useTableUpdateAction,
 };
 
 export const components = {
diff --git a/packages/client/src/blocks/action/index.tsx b/packages/client/src/blocks/action/index.tsx
index 0f71d58d7..95a7a984a 100644
--- a/packages/client/src/blocks/action/index.tsx
+++ b/packages/client/src/blocks/action/index.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState } from 'react';
 import {
   useForm,
   FormProvider,
@@ -95,14 +95,12 @@ function useDesignableBar() {
   };
 }
 
-const [VisibleProvider, useVisibleContext] = constate(
-  (props: any = {}) => {
-    const { initialVisible = false, containerRef = null } = props;
-    const [visible, setVisible] = useState(initialVisible);
+const [VisibleProvider, useVisibleContext] = constate((props: any = {}) => {
+  const { initialVisible = false, containerRef = null } = props;
+  const [visible, setVisible] = useState(initialVisible);
 
-    return { containerRef, visible, setVisible };
-  },
-);
+  return { containerRef, visible, setVisible };
+});
 
 export { VisibleProvider, useVisibleContext };
 
@@ -113,11 +111,17 @@ const BaseAction = observer((props: any) => {
   const { DesignableBar } = useDesignableBar();
   const { setVisible } = useVisibleContext();
   const schema = useFieldSchema();
+  useEffect(() => {
+    field.componentProps.setVisible = setVisible;
+  }, []);
+
+  console.log('BaseAction', { field, schema }, field.title)
 
   const renderButton = () => (
     <Button
       {...others}
-      onClick={async () => {
+      onClick={async (e) => {
+        e.stopPropagation();
         setVisible && setVisible(true);
         await run();
       }}
@@ -164,7 +168,7 @@ export const Action: ActionType = observer((props: any) => {
   const schema = useFieldSchema();
   if (schema.properties) {
     return (
-      <VisibleProvider containerRef={props.containerRef}>
+      <VisibleProvider initialVisible={props.initialVisible} containerRef={props.containerRef}>
         <BaseAction {...props} />
       </VisibleProvider>
     );
@@ -193,9 +197,17 @@ Action.Container = observer((props) => {
 });
 
 Action.Popover = observer((props) => {
+  const { visible, setVisible } = useVisibleContext();
   const schema = useFieldSchema();
   return (
-    <Popover {...props} content={props.children}>
+    <Popover
+      visible={visible}
+      onVisibleChange={(visible) => {
+        setVisible(visible);
+      }}
+      {...props}
+      content={props.children}
+    >
       {schema['x-button']}
     </Popover>
   );
@@ -206,11 +218,17 @@ Action.Drawer = observer((props) => {
   const { visible, setVisible } = useVisibleContext();
   return (
     <Drawer
+      onClick={e => {
+        e.stopPropagation();
+      }}
       title={field.title}
       width={'50%'}
       {...props}
       visible={visible}
-      onClose={() => setVisible(false)}
+      onClose={(e) => {
+        e.stopPropagation();
+        setVisible(false)
+      }}
     >
       {props.children}
     </Drawer>
diff --git a/packages/client/src/blocks/form/index.tsx b/packages/client/src/blocks/form/index.tsx
index e6d6ecf72..fea34c198 100644
--- a/packages/client/src/blocks/form/index.tsx
+++ b/packages/client/src/blocks/form/index.tsx
@@ -1,6 +1,11 @@
 import React, { useContext, useMemo, useRef, useState } from 'react';
 import { createForm } from '@formily/core';
-import { SchemaOptionsContext, Schema, useFieldSchema } from '@formily/react';
+import {
+  SchemaOptionsContext,
+  Schema,
+  useFieldSchema,
+  observer,
+} from '@formily/react';
 import { SchemaRenderer, useDesignable } from '../DesignableSchemaField';
 import get from 'lodash/get';
 import { Dropdown, Menu } from 'antd';
@@ -14,6 +19,7 @@ import { useMouseEvents } from 'beautiful-react-hooks';
 import cls from 'classnames';
 
 import './style.less';
+import { clone } from '@formily/shared';
 
 function Blank() {
   return null;
@@ -29,7 +35,20 @@ function useDesignableBar() {
   };
 }
 
-export const Form = (props) => {
+function useDefaultValues() {
+  return {};
+}
+
+export const Form: any = observer((props: any) => {
+  const { useValues = useDefaultValues } = props;
+  const values = useValues();
+  const form = useMemo(() => {
+    console.log('Form.useMemo', values);
+    return createForm({
+      values,
+      // values: clone(values),
+    });
+  }, [values]);
   const schema = useFieldSchema();
   const { schema: designableSchema, refresh } = useDesignable();
   const { DesignableBar } = useDesignableBar();
@@ -44,9 +63,7 @@ export const Form = (props) => {
     setActive(false);
   });
 
-  onMouseMove((e: React.MouseEvent) => {
-    
-  });
+  onMouseMove((e: React.MouseEvent) => {});
   return (
     <div ref={ref} className={'nb-form'}>
       <SchemaRenderer
@@ -54,13 +71,14 @@ export const Form = (props) => {
           designableSchema.properties = subSchema.properties;
           refresh();
         }}
+        form={form}
         schema={schema.toJSON()}
         onlyRenderProperties
       />
-      <DesignableBar active={active}/>
+      <DesignableBar active={active} />
     </div>
   );
-};
+});
 
 Form.DesignableBar = (props) => {
   const { active } = props;
diff --git a/packages/client/src/blocks/table/demos/demo1.tsx b/packages/client/src/blocks/table/demos/demo1.tsx
new file mode 100644
index 000000000..b0cae4bf6
--- /dev/null
+++ b/packages/client/src/blocks/table/demos/demo1.tsx
@@ -0,0 +1,283 @@
+import React from 'react';
+import { SchemaRenderer } from '../../';
+import { uid } from '@formily/shared';
+import Editor from '@monaco-editor/react';
+import { createForm } from '@formily/core';
+import { observer } from '@formily/react';
+
+const schema = {
+  name: `t_${uid()}`,
+  type: 'array',
+  'x-component': 'Table',
+  // default: [
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  //   { key: uid(), field1: uid(), field2: uid() },
+  // ],
+  'x-component-props': {
+    rowKey: 'key',
+    // isRemoteDataSource: true,
+  },
+  properties: {
+    [`a_${uid()}`]: {
+      type: 'void',
+      'x-component': 'Table.ActionBar',
+      properties: {
+        action1: {
+          type: 'void',
+          name: 'action1',
+          title: '筛选',
+          'x-component': 'Action',
+          properties: {
+            popover1: {
+              type: 'void',
+              title: '弹窗标题',
+              'x-component': 'Action.Popover',
+              'x-component-props': {},
+              properties: {
+                [uid()]: {
+                  name: 'form',
+                  type: 'object',
+                  'x-component': 'Form',
+                  properties: {
+                    filter: {
+                      type: 'string',
+                      title: '字段1',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Input',
+                    },
+                    action: {
+                      type: 'void',
+                      title: '提交',
+                      'x-component': 'Action',
+                      'x-component-props': {
+                        'useAction': '{{ useTableFilterAction }}'
+                      },
+                    }
+                  }
+                },
+              },
+            },
+          },
+        },
+        action2: {
+          type: 'void',
+          name: 'action1',
+          title: '新增',
+          'x-component': 'Action',
+          'x-designable-bar': 'Action.DesignableBar',
+          properties: {
+            drawer1: {
+              type: 'void',
+              title: '抽屉标题',
+              'x-component': 'Action.Drawer',
+              'x-component-props': {},
+              properties: {
+                [uid()]: {
+                  name: 'form',
+                  type: 'object',
+                  'x-component': 'Form',
+                  properties: {
+                    field1: {
+                      type: 'string',
+                      title: '字段1',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Input',
+                    },
+                    field2: {
+                      type: 'string',
+                      title: '字段2',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Input',
+                    },
+                    action: {
+                      type: 'void',
+                      title: '提交',
+                      'x-component': 'Action',
+                      'x-component-props': {
+                        'useAction': '{{ useTableCreateAction }}'
+                      },
+                    }
+                  }
+                },
+              },
+            },
+          },
+        },
+        action3: {
+          type: 'void',
+          name: 'action1',
+          title: '删除',
+          'x-component': 'Action',
+          'x-component-props': {
+            'useAction': '{{ useTableDestroyAction }}'
+          },
+        },
+      },
+    },
+    [`a_${uid()}`]: {
+      type: 'void',
+      'x-component': 'Table.ActionBar',
+      'x-component-props': {
+        align: 'bottom',
+      },
+      properties: {
+        pagination: {
+          type: 'void',
+          'x-component': 'Table.Pagination',
+          'x-component-props': {
+            defaultPageSize: 5,
+          },
+        },
+      },
+    },
+    [`c_${uid()}`]: {
+      type: 'void',
+      title: '排序',
+      'x-component': 'Table.Column',
+      properties: {
+        sort: {
+          type: 'void',
+          'x-component': 'Table.SortHandle',
+        },
+      },
+    },
+    [`c_${uid()}`]: {
+      type: 'void',
+      title: '序号',
+      'x-component': 'Table.Column',
+      properties: {
+        index: {
+          type: 'void',
+          'x-component': 'Table.Index',
+        },
+      },
+    },
+    [`c_${uid()}`]: {
+      type: 'void',
+      title: '字段1',
+      'x-component': 'Table.Column',
+      'x-component-props': {
+        title: 'z1',
+      },
+      'x-designable-bar': 'Table.Column.DesignableBar',
+      properties: {
+        field1: {
+          type: 'string',
+          required: true,
+          'x-read-pretty': true,
+          'x-decorator-props': {
+            feedbackLayout: 'popover',
+          },
+          'x-decorator': 'FormItem',
+          'x-component': 'Input',
+        },
+      },
+    },
+    [`c_${uid()}`]: {
+      type: 'void',
+      title: '字段2',
+      'x-component': 'Table.Column',
+      properties: {
+        field2: {
+          type: 'string',
+          // title: '字段2',
+          required: true,
+          'x-read-pretty': true,
+          'x-decorator-props': {
+            feedbackLayout: 'popover',
+          },
+          'x-decorator': 'FormItem',
+          'x-component': 'Input',
+        },
+      },
+    },
+    [`col_${uid()}`]: {
+      type: 'void',
+      title: '操作',
+      'x-component': 'Table.Column',
+      properties: {
+        action3: {
+          type: 'void',
+          title: '删除',
+          'x-component': 'Action',
+          'x-component-props': {
+            'useAction': '{{ useTableDestroyAction }}'
+          },
+        },
+        action2: {
+          type: 'void',
+          name: 'action1',
+          title: '修改',
+          'x-component': 'Action',
+          'x-default-action': true,
+          'x-designable-bar': 'Action.DesignableBar',
+          properties: {
+            drawer1: {
+              type: 'void',
+              title: '编辑表单',
+              'x-component': 'Action.Drawer',
+              'x-component-props': {},
+              properties: {
+                [uid()]: {
+                  name: 'form',
+                  type: 'void',
+                  'x-component': 'Form',
+                  'x-component-props': {
+                    'useValues': '{{ useTableRow }}',
+                  },
+                  properties: {
+                    field1: {
+                      type: 'string',
+                      title: '字段1',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Input',
+                    },
+                    field2: {
+                      type: 'string',
+                      title: '字段2',
+                      'x-decorator': 'FormItem',
+                      'x-component': 'Input',
+                    },
+                    action: {
+                      type: 'void',
+                      title: '提交',
+                      'x-component': 'Action',
+                      'x-component-props': {
+                        'useAction': '{{ useTableUpdateAction }}'
+                      },
+                    }
+                  }
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const form = createForm();
+
+export default observer(() => {
+  return (
+    <div>
+      <SchemaRenderer form={form} schema={schema} />
+      <Editor
+        height="200px"
+        defaultLanguage="json"
+        value={JSON.stringify(form.values, null, 2)}
+      />
+    </div>
+  )
+});
diff --git a/packages/client/src/blocks/table/index.md b/packages/client/src/blocks/table/index.md
index 27f8b9a53..b95eacb69 100644
--- a/packages/client/src/blocks/table/index.md
+++ b/packages/client/src/blocks/table/index.md
@@ -9,317 +9,12 @@ group:
   path: /client/components
 ---
 
-### Table.View
+# Table - 表格
 
-只做数据展示，不能用作表单字段
+- 远程数据、远程分页、远程过滤
+- 远程数据、本地分页、远程过滤
+- 远程数据、本地分页、本地过滤
+- 本地数据、本地分页、本地过滤
 
-```tsx
-import React from 'react';
-import { SchemaRenderer } from '../';
-import { uid } from '@formily/shared';
-import Editor from '@monaco-editor/react';
-import { createForm } from '@formily/core';
-import { observer } from '@formily/react';
 
-const schema = {
-  name: `t_${uid()}`,
-  type: 'void',
-  'x-component': 'Table.View',
-  // default: [
-  //   { key: uid(), field1: 'a1', field2: 'b1' },
-  //   { key: uid(), field1: 'a2', field2: 'b2' },
-  // ],
-  'x-component-props': {},
-  properties: {
-    [`a_${uid()}`]: {
-      type: 'void',
-      'x-component': 'Table.ActionBar',
-      properties: {
-        action1: {
-          type: 'void',
-          name: 'action1',
-          title: '筛选',
-          'x-component': 'Action',
-          properties: {
-            popover1: {
-              type: 'void',
-              title: '弹窗标题',
-              'x-component': 'Action.Popover',
-              'x-component-props': {},
-              properties: {
-                input: {
-                  type: 'string',
-                  'x-component': 'Input',
-                }
-              },
-            },
-          },
-        },
-        action2: {
-          type: 'void',
-          name: 'action1',
-          title: '新增',
-          'x-component': 'Action',
-          'x-designable-bar': 'Action.DesignableBar',
-          properties: {
-            drawer1: {
-              type: 'void',
-              title: '抽屉标题',
-              'x-component': 'Action.Drawer',
-              'x-component-props': {},
-              properties: {
-                input: {
-                  type: 'string',
-                  'x-decorator': 'FormItem',
-                  'x-component': 'Input',
-                },
-                action2: {
-                  type: 'void',
-                  name: 'action1',
-                  title: '提交',
-                  'x-component': 'Action',
-                  'x-component-props': {
-                    'useAction': '{{ useTableCreateAction }}'
-                  },
-                }
-              },
-            },
-          },
-        },
-        action3: {
-          type: 'void',
-          name: 'action1',
-          title: '删除',
-          'x-component': 'Action',
-          'x-component-props': {
-            'useAction': '{{ useTableDestroyAction }}'
-          },
-        },
-      },
-    },
-    [`a_${uid()}`]: {
-      type: 'void',
-      'x-component': 'Table.ActionBar',
-      'x-component-props': {
-        align: 'bottom',
-      },
-      properties: {
-        pagination: {
-          type: 'void',
-          'x-component': 'Table.Pagination',
-          'x-component-props': {
-            defaultCurrent: 1,
-            total: 50,
-          },
-        },
-      },
-    },
-    [`c_${uid()}`]: {
-      type: 'void',
-      title: '字段1',
-      'x-component': 'Table.Column',
-      'x-component-props': {
-        title: 'z1',
-      },
-      'x-designable-bar': 'Table.Column.DesignableBar',
-      properties: {
-        field1: {
-          type: 'string',
-          required: true,
-          'x-decorator-props': {
-            feedbackLayout: 'popover',
-          },
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    },
-    [`c_${uid()}`]: {
-      type: 'void',
-      title: '字段2',
-      'x-component': 'Table.Column',
-      properties: {
-        field2: {
-          type: 'string',
-          title: '字段2',
-          required: true,
-          'x-decorator-props': {
-            feedbackLayout: 'popover',
-          },
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    },
-  },
-};
-
-const form = createForm();
-
-export default observer(() => {
-  return (
-    <div>
-      <SchemaRenderer form={form} schema={schema} />
-      <Editor
-        height="200px"
-        defaultLanguage="json"
-        value={JSON.stringify(form.values, null, 2)}
-      />
-    </div>
-  )
-});
-```
-
-### Table.Field
-
-可用作表单字段
-
-```tsx
-import React from 'react';
-import { SchemaRenderer } from '../';
-import { uid } from '@formily/shared';
-import Editor from '@monaco-editor/react';
-import { createForm } from '@formily/core';
-import { observer } from '@formily/react';
-
-const schema = {
-  name: `t_${uid()}`,
-  type: 'array',
-  'x-component': 'Table.Field',
-  // default: [
-  //   { key: uid(), field1: 'a1', field2: 'b1' },
-  //   { key: uid(), field1: 'a2', field2: 'b2' },
-  // ],
-  'x-component-props': {},
-  properties: {
-    [`a_${uid()}`]: {
-      type: 'void',
-      'x-component': 'Table.ActionBar',
-      properties: {
-        action1: {
-          type: 'void',
-          name: 'action1',
-          title: '筛选',
-          'x-component': 'Action',
-          properties: {
-            popover1: {
-              type: 'void',
-              title: '弹窗标题',
-              'x-component': 'Action.Popover',
-              'x-component-props': {},
-              properties: {
-                input: {
-                  type: 'string',
-                  'x-component': 'Input',
-                }
-              },
-            },
-          },
-        },
-        action2: {
-          type: 'void',
-          name: 'action1',
-          title: '新增',
-          'x-component': 'Action',
-          'x-designable-bar': 'Action.DesignableBar',
-          properties: {
-            drawer1: {
-              type: 'void',
-              title: '抽屉标题',
-              'x-component': 'Action.Drawer',
-              'x-component-props': {},
-              properties: {
-                action2: {
-                  type: 'void',
-                  name: 'action1',
-                  title: '提交',
-                  'x-component': 'Action',
-                  'x-component-props': {
-                  },
-                }
-              },
-            },
-          },
-        },
-        action3: {
-          type: 'void',
-          name: 'action1',
-          title: '删除',
-          'x-component': 'Action',
-          'x-component-props': {
-          },
-        },
-      },
-    },
-    [`a_${uid()}`]: {
-      type: 'void',
-      'x-component': 'Table.ActionBar',
-      'x-component-props': {
-        align: 'bottom',
-      },
-      properties: {
-        pagination: {
-          type: 'void',
-          'x-component': 'Table.Pagination',
-          'x-component-props': {
-            defaultCurrent: 1,
-            total: 50,
-          },
-        },
-      },
-    },
-    [`c_${uid()}`]: {
-      type: 'void',
-      title: '字段1',
-      'x-component': 'Table.Column',
-      'x-component-props': {
-        title: 'z1',
-      },
-      'x-designable-bar': 'Table.Column.DesignableBar',
-      properties: {
-        field1: {
-          type: 'string',
-          required: true,
-          'x-decorator-props': {
-            feedbackLayout: 'popover',
-          },
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    },
-    [`c_${uid()}`]: {
-      type: 'void',
-      title: '字段2',
-      'x-component': 'Table.Column',
-      properties: {
-        field2: {
-          type: 'string',
-          title: '字段2',
-          required: true,
-          'x-decorator-props': {
-            feedbackLayout: 'popover',
-          },
-          'x-decorator': 'FormItem',
-          'x-component': 'Input',
-        },
-      },
-    },
-  },
-};
-
-const form = createForm();
-
-export default observer(() => {
-  return (
-    <div>
-      <SchemaRenderer form={form} schema={schema} />
-      <Editor
-        height="200px"
-        defaultLanguage="json"
-        value={JSON.stringify(form.values, null, 2)}
-      />
-    </div>
-  )
-});
-```
\ No newline at end of file
+<code src="./demos/demo1.tsx"/>
diff --git a/packages/client/src/blocks/table/index.tsx b/packages/client/src/blocks/table/index.tsx
index 2173c804b..e7862cb4f 100644
--- a/packages/client/src/blocks/table/index.tsx
+++ b/packages/client/src/blocks/table/index.tsx
@@ -5,49 +5,54 @@ import {
   observer,
   RecursionField,
   useField,
+  useForm,
+  FormProvider,
+  createSchemaField,
 } from '@formily/react';
-import { Button, Pagination, Space, Table as AntdTable } from 'antd';
-import { DesignableBar } from './DesignableBar';
-import { ColumnDesignableBar } from './ColumnDesignableBar';
-import { uid } from '@formily/shared';
-import useRequest from '@ahooksjs/use-request';
+import {
+  Button,
+  Pagination,
+  PaginationProps,
+  Space,
+  Spin,
+  Table as AntdTable,
+} from 'antd';
+import { findIndex } from 'lodash';
 import constate from 'constate';
-import { SchemaRenderer } from '../';
+import useRequest from '@ahooksjs/use-request';
+import { BaseResult } from '@ahooksjs/use-request/lib/types';
+import { uid, clone } from '@formily/shared';
+import { MenuOutlined } from '@ant-design/icons';
 import { useVisibleContext } from '../action';
 
-function useTableColumns(props?: any) {
-  const schema = useFieldSchema();
-  const { dataSource } = props || {};
+interface TableRowProps {
+  index: number;
+  data: any;
+}
 
-  function findColumns(schema: Schema): Schema[] {
+const TableRowContext = createContext<TableRowProps>(null);
+
+function usePaginationProps() {
+  const schema = useFieldSchema();
+
+  function findPagination(schema: Schema): Schema[] {
     return schema.reduceProperties((columns, current) => {
-      if (current['x-component'] === 'Table.Column') {
+      if (current['x-component'] === 'Table.Pagination') {
         return [...columns, current];
       }
-      return [...columns, ...findColumns(current)];
+      return [...columns, ...findPagination(current)];
     }, []);
   }
 
-  return findColumns(schema).map((item) => {
-    const columnProps = item['x-component-props'] || {};
-    return {
-      title: item.title,
-      dataIndex: item.name,
-      ...columnProps,
-      render(value, record, index) {
-        // console.log({ item });
-        // const index = dataSource.indexOf(record);
-        item.mapProperties((s) => {
-          s['title'] = undefined;
-          s['x-read-pretty'] = true;
-          return s;
-        });
-        return (
-          <RecursionField schema={item} name={index} onlyRenderProperties />
-        );
-      },
-    };
-  });
+  const pagination = findPagination(schema).shift();
+
+  if (pagination) {
+    // console.log({ pagination });
+    const props = pagination['x-component-props'] || {};
+    return { defaultCurrent: 1, defaultPageSize: 10, ...props };
+  }
+
+  return false;
 }
 
 function useTableActionBars() {
@@ -79,82 +84,177 @@ function useTableActionBars() {
   return findActionBars(schema);
 }
 
-function useTable() {
-  const field = useField<Formily.Core.Models.ArrayField>();
-  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-  const response = useRequest<any>(
-    () => {
-      return new Promise((resolve) => {
-        console.log('useRequest');
-        setTimeout(() => {
-          resolve([
-            { key: uid(), field1: uid(), field2: uid() },
-            { key: uid(), field1: uid(), field2: uid() },
-          ]);
-        }, 500);
-      });
-    },
-    {
-      onSuccess(data) {
-        field.setValue(data);
+function useTableColumns(props?: any) {
+  const schema = useFieldSchema();
+  const { dataSource } = props || {};
+
+  function findColumns(schema: Schema): Schema[] {
+    return schema.reduceProperties((columns, current) => {
+      if (current['x-component'] === 'Table.Column') {
+        return [...columns, current];
+      }
+      return [...columns, ...findColumns(current)];
+    }, []);
+  }
+
+  return findColumns(schema).map((item) => {
+    const columnProps = item['x-component-props'] || {};
+    return {
+      title: item.title,
+      dataIndex: item.name,
+      ...columnProps,
+      render(value, record, recordIndex) {
+        const index = dataSource.indexOf(record);
+        return (
+          <TableRowContext.Provider
+            value={{
+              index: index,
+              data: record,
+            }}
+          >
+            <RecursionField schema={item} name={index} onlyRenderProperties />
+          </TableRowContext.Provider>
+        );
       },
-    },
-  );
-  return {
-    selectedRowKeys,
-    setSelectedRowKeys,
-    mutate: response.mutate,
-    response,
-    async create() {
-      response.refresh()
-    },
-    async update() {
-      response.refresh()
-    },
-    async destroy() {
-      response.refresh()
-    },
-  } as any;
+    };
+  });
 }
 
-const [TableContextProvider, useTableContext] = constate(useTable);
+export function useTableRow() {
+  const ctx = useContext(TableRowContext);
+  console.log('useTableRow', ctx.data);
+  return ctx.data;
+}
 
-export function useTableCreateAction() {
-  const { visible, setVisible } = useVisibleContext()
-  const { create } = useTableContext();
-  return {
-    run: async () => {
-      setVisible(false);
-      await create();
-      console.log({ visible })
-    },
+export function useTableIndex() {
+  const { params: { page, pageSize } } = useTableContext();
+  const ctx = useContext(TableRowContext);
+  const field = useField();
+  if (!field.componentProps.isRemoteDataSource) {
+    return ctx.index;
   }
+  return pageSize ? ctx.index + (page - 1) * pageSize : ctx.index;
 }
 
 export function useTableDestroyAction() {
-  // const { setVisible } = useVisibleContext()
-  const { destroy } = useTableContext();
+  const ctx = useContext(TableRowContext);
+  const { field, selectedRowKeys, setSelectedRowKeys, refresh } = useTableContext();
+  const rowKey = field.componentProps.rowKey || 'id';
+
   return {
-    run: async () => {
-      // setVisible(false);
-      await destroy();
-    },
+    async run() {
+      if (ctx && typeof ctx.index !== 'undefined') {
+        field.remove(ctx.index);
+        refresh();
+        return;
+      }
+    
+      if (!selectedRowKeys.length) {
+        return;
+      }
+      while (selectedRowKeys.length) {
+        const key = selectedRowKeys.shift();
+        const index = findIndex(
+          field.value,
+          (item) => item[rowKey] === key,
+        );
+        field.remove(index);
+      }
+      refresh();
+      setSelectedRowKeys([]);
+    }
+  }
+
+}
+
+export function useTableFilterAction() {
+  const { field, refresh, params } = useTableContext();
+  const { setVisible } = useVisibleContext();
+  const form = useForm();
+  return {
+    async run() {
+      setVisible && setVisible(false);
+      refresh();
+    }
   }
 }
 
-const ArrayTable = (props) => {
+export function useTableCreateAction() {
+  const { field, run: exec, params } = useTableContext();
+  const { setVisible } = useVisibleContext();
+  const form = useForm();
+  return {
+    async run() {
+      setVisible && setVisible(false);
+      field.unshift(clone(form.values));
+      form.reset();
+      exec({...params, page: 1});
+    }
+  }
+}
+
+export function useTableUpdateAction() {
+  const { field, refresh, params } = useTableContext();
+  const { setVisible } = useVisibleContext();
+  const form = useForm();
+  return {
+    async run() {
+      setVisible && setVisible(false);
+      refresh();
+    }
+  }
+}
+
+const [TableContextProvider, useTableContext] = constate(() => {
   const field = useField<Formily.Core.Models.ArrayField>();
-  // const dataSource = Array.isArray(field.value) ? field.value.slice() : [];
-  const columns = useTableColumns();
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const pagination = usePaginationProps();
+  const response = useRequest<{
+    list: any[];
+    total: number;
+  }>((params = {}) => {
+    return new Promise((resolve) => {
+      const dataSource = Array.isArray(field.value) ? field.value.slice() : [];
+      if (pagination) {
+        const {
+          page = pagination.defaultCurrent,
+          pageSize = pagination.defaultPageSize,
+        } = params;
+        const startIndex = (page - 1) * pageSize;
+        const endIndex = startIndex + pageSize - 1;
+        resolve({
+          list: dataSource.slice(startIndex, endIndex + 1),
+          total: dataSource.length,
+        });
+      } else {
+        resolve({
+          list: dataSource,
+          total: dataSource.length,
+        });
+      }
+    });
+  });
+  const params = {
+    page: pagination.defaultCurrent,
+    pageSize: pagination.defaultPageSize,
+    ...(response.params[0] || {}),
+  };
+  return { ...response, params, field, selectedRowKeys, setSelectedRowKeys };
+});
+
+export { TableContextProvider, useTableContext };
+
+const TableContainer = observer((props) => {
+  const field = useField<Formily.Core.Models.ArrayField>();
+  const schema = useFieldSchema();
   const actionBars = useTableActionBars();
-  const {
-    selectedRowKeys,
-    setSelectedRowKeys,
-    response = {},
-    create,
-  } = useTableContext();
-  console.log({ response });
-  const { data = [], loading, mutate } = response as any;
+  const { loading, data, refresh, selectedRowKeys, setSelectedRowKeys } =
+    useTableContext();
+  const rowKey = field.componentProps.rowKey || 'id';
+  console.log({ actionBars });
+  const dataSource = Array.isArray(field.value) ? field.value.slice() : []
+  const columns = useTableColumns({ dataSource });
+
   return (
     <div>
       {actionBars.top.map((actionBarSchema) => {
@@ -172,33 +272,31 @@ const ArrayTable = (props) => {
           />
         );
       })}
-      <Button
-        onClick={() => {
-          create();
-          // field.unshift({ key: uid(), field1: uid(), field2: uid() });
-          // const dataSource = Array.isArray(field.value)
-          //   ? field.value.slice()
-          //   : [];
-          // mutate(dataSource);
-          // response.refresh();
-          // console.log({ selectedRowKeys })
-        }}
-      >
-        新增
-      </Button>
       <AntdTable
-        rowKey={'key'}
-        loading={loading}
         pagination={false}
-        columns={columns}
-        dataSource={data}
+        rowKey={rowKey}
+        loading={loading}
         rowSelection={{
           type: 'checkbox',
           selectedRowKeys,
           onChange: (keys) => {
+            console.log(keys);
             setSelectedRowKeys(keys);
           },
         }}
+        dataSource={data?.list}
+        columns={columns}
+        onRow={(data) => {
+          const index = dataSource.indexOf(data);
+          return {
+            onClick(e) {
+              field.query(`.${schema.name}.${index}.action2`).take((f) => {
+                const setVisible = f.componentProps.setVisible;
+                setVisible && setVisible(true);
+              });
+            },
+          };
+        }}
       />
       {actionBars.bottom.map((actionBarSchema) => {
         return (
@@ -217,12 +315,12 @@ const ArrayTable = (props) => {
       })}
     </div>
   );
-};
+});
 
 export const Table: any = observer((props) => {
   return (
     <TableContextProvider>
-      <ArrayTable {...props} />
+      <TableContainer />
     </TableContextProvider>
   );
 });
@@ -238,41 +336,29 @@ Table.ActionBar = observer((props) => {
 });
 
 Table.Pagination = observer((props) => {
-  const { response } = useTableContext();
-  return (
+  const { data, params, run } = useTableContext();
+  return data?.total > params?.pageSize && (
     <Pagination
       {...props}
+      defaultCurrent={1}
+      defaultPageSize={5}
+      current={params?.page}
+      pageSize={params?.pageSize}
+      total={data?.total}
       onChange={(page, pageSize) => {
-        response.refresh();
-        // console.log('useRequest', { page, pageSize });
+        run({ page, pageSize });
       }}
     />
   );
 });
 
-Table.View = observer(() => {
-  const schema = useFieldSchema();
-  console.log('Table.View', schema);
-  return (
-    <SchemaRenderer
-      schema={{
-        type: 'object',
-        properties: {
-          [schema.name]: {
-            ...schema.toJSON(),
-            type: 'array',
-            'x-component': 'Table.Field',
-          },
-        },
-      }}
-    />
-  );
+Table.SortHandle = observer((props) => {
+  const field = useField<Formily.Core.Models.Field>();
+  console.log('SortHandle', field.value);
+  return <MenuOutlined />;
 });
 
-Table.Field = observer((props) => {
-  return (
-    <TableContextProvider>
-      <ArrayTable {...props} />
-    </TableContextProvider>
-  );
+Table.Index = observer((props) => {
+  const index = useTableIndex();
+  return <div>#{index + 1}</div>;
 });