fix:分页组件事件问题

docs/zh-CN/components/pagination.md

@@ -68,9 +68,111 @@ order: 73
 | disabled         | `boolean`                  | false                                    | 是否禁用                                                  |
 | onPageChange     | page、perPage 改变时会触发 | (page: number, perPage: number) => void; | 分页改变触发                                              |
 
+## 事件表
+
 当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
 
 > `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
 > | 事件名称 | 事件参数 | 说明 |
 > | -------- | ------------------------------------- | ------------------------------------------- |
-> | change | `[value]: object` 当前页码的值<br/> | 当前页码值改变时触发 |
+> | change | `page: number` 当前页码的值<br/>`perPage: number` 每页显示多条数据 | 当前页码值改变时触发 |
+
+### change
+
+切换页码时，通过更新 service 数据域中的 page 来实现联动刷新 table 表格数据。
+
+```schema: scope="body"
+{
+    "type": "service",
+    "id": "service_01",
+    "api": "/api/mock2/crud/table?page=${page}",
+    "data": {
+        "page": 1
+    },
+    "body": [
+        {
+        "type": "table",
+        "title": "表格1",
+        "source": "$rows",
+        "columns": [
+          {
+            "name": "engine",
+            "label": "Engine"
+          },
+          {
+            "name": "version",
+            "label": "Version"
+          }
+        ]
+      },
+        {
+            "type": "pagination",
+            "activePage": "${page}",
+            "hasNext": true,
+            "onEvent": {
+                "change": {
+                    "actions": [
+                        {
+                            "actionType": "setValue",
+                            "componentId": "service_01",
+                            "args": {
+                                "value": {
+                                    "page": "${event.data.page}"
+                                }
+                            }
+                        }
+                    ]
+                }
+            }
+        }
+    ]
+}
+```
+
+切换页码时，通过向 service 发送 page 并重新加载 service 数据来实现联动刷新 table 表格数据。
+
+```schema: scope="body"
+{
+    "type": "service",
+    "id": "service_02",
+    "api": "/api/mock2/crud/table?page=${page}",
+    "data": {
+        "page": 1
+    },
+    "body": [
+        {
+        "type": "table",
+        "title": "表格1",
+        "source": "$rows",
+        "columns": [
+          {
+            "name": "engine",
+            "label": "Engine"
+          },
+          {
+            "name": "version",
+            "label": "Version"
+          }
+        ]
+      },
+        {
+            "type": "pagination",
+            "activePage": "${page}",
+            "hasNext": true,
+            "onEvent": {
+                "change": {
+                    "actions": [
+                        {
+                            "actionType": "reload",
+                            "componentId": "service_02",
+                            "data": {
+                                "page": "${event.data.page}"
+                            }
+                        }
+                    ]
+                }
+            }
+        }
+    ]
+}
+```

packages/amis-ui/src/components/Pagination.tsx

@@ -94,7 +94,6 @@ export interface BasicPaginationProps {
   popOverContainerSelector?: string;
 
   onPageChange?: (page: number, perPage?: number, dir?: string) => void;
-  dispatchEvent?: Function;
 }
 export interface PaginationProps
   extends BasicPaginationProps,
@@ -141,20 +140,13 @@ export class Pagination extends React.Component<
   }
 
   async handlePageNumChange(page: number, perPage?: number, dir?: string) {
-    const {disabled, onPageChange, dispatchEvent} = this.props;
+    const {disabled, onPageChange} = this.props;
     const _page = isNaN(Number(page)) || Number(page) < 1 ? 1 : page;
 
     if (disabled) {
       return;
     }
 
-    const rendererEvent = await dispatchEvent?.(
-      'change',
-      resolveEventData(this.props, {_page})
-    );
-    if (rendererEvent?.prevented) {
-      return;
-    }
     onPageChange?.(_page, perPage, dir);
   }
 

packages/amis/src/renderers/Pagination.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import {
   Renderer,
   RendererProps,
+  autobind,
+  createObject,
   isPureVariable,
+  resolveEventData,
   resolveVariableAndFilter
 } from 'amis-core';
 import {BaseSchema} from '../Schema';
@@ -103,11 +106,31 @@ export default class Pagination extends React.Component<PaginationProps> {
     return result ?? defaultValue;
   }
 
+  @autobind
+  async onPageChange(page: number, perPage?: number, dir?: string) {
+    const {onPageChange, dispatchEvent, data} = this.props;
+
+    const rendererEvent = await dispatchEvent?.(
+      'change',
+      createObject(data, {
+        page: page,
+        perPage: perPage
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onPageChange?.(page, perPage, dir);
+  }
+
   render() {
     const {maxButtons, activePage, total, perPage} = this.props;
     return (
       <BasicPagination
         {...this.props}
+        onPageChange={this.onPageChange}
         maxButtons={this.formatNumber(maxButtons)}
         activePage={this.formatNumber(activePage)}
         total={this.formatNumber(total)}