# 数据表格: 托管分页列表 (Managed PagingListPage)

`data-table/managed/PagingTablePage.svelte` 组件是一个功能强大的高级工具，用于显示来自服务端的分页数据。它包装了底层的 `@ticatec/uniface-element/DataTable` 组件，以完全自动化数据获取、分页和状态管理的整个流程。

## 设计目的

该组件专为从 API 分页查询大型数据集的常见用例而设计。它抽象了实现以下功能所需的样板代码：
- 调用数据服务。
- 处理加载和错误状态。
- 管理分页控件。
- 刷新数据。
- 显示空状态。

## 工作原理

该组件扮演着一个"智能"包装器的角色。它使用您提供的 `dataManager`（一个 `PagedDataManager` 实例）来获取数据并管理分页状态，该管理器随后驱动底层的 `@ticatec/uniface-element/DataTable` 组件。

表格渲染完全由您提供的 `columns` 配置控制 - 每个列定义决定了数据如何显示，无需手动渲染行。


## 如何使用

1.  **创建一个 `PagingDataService`**

    ```ts
    // src/services/TenantService.ts
    import { PagingDataService } from '@ticatec/app-data-service';

    export default class TenantService extends PagingDataService {
        constructor() {
            super('/api/tenants');
        }
    }

    export const service = new TenantService();
    ```

2.  **创建一个 `PagedDataManager`**

    ```ts
    // src/managers/TenantManager.ts
    import { PagedDataManager } from '@ticatec/app-data-manager';
    import { service } from '../services/TenantService';

    export default class TenantManager extends PagedDataManager {
        constructor() {
            super(service, 'id');
        }
    }
    ```

3.  **定义你的列配置**

    ```ts
    // src/config/TenantColumns.ts
    import type { DataColumn } from "@ticatec/uniface-element";

    const columns: Array<DataColumn> = [
        {
            title: '租户名称',
            field: 'name',
            width: 200,
            resizable: true
        },
        {
            title: '联系邮箱',
            field: 'email',
            width: 250,
            resizable: true
        },
        {
            title: '状态',
            field: 'status',
            width: 120,
            align: 'center'
        }
    ];

    export default columns;
    ```

4.  **在你的页面中使用该组件**

    ```svelte
    <script lang="ts">
        import PagingListPage from '@ticatec/uniface-pro-components/data-table/managed/PagingTablePage';
        import TenantManager from '../managers/TenantManager';
        import columns from '../config/TenantColumns';

        const dataManager = new TenantManager();

        let page$attrs = {
            title: "托管租户列表"
        };

        const indicatorColumn = { width: 50, selectable: false };
        const actions: any[] = [];
    </script>

    <PagingListPage
        {dataManager}
        {columns}
        {indicatorColumn}
        {page$attrs}
        {actions}
        rowHeight={48}
    />
    ```

## 组件属性 (Props)

-   `dataManager: IPagedDataManager`: 您的数据管理器实例。**(必需)**
-   `columns: DataColumn[]`: 来自 @ticatec/uniface-element 的列定义对象数组。**(必需)**
-   `indicatorColumn: IndicatorColumn`: 选择指示器的配置。**(必需)**
-   `page$attrs: object`: 包含标题和其他页面级设置的页面属性。**(必需)**
-   `actions: ButtonActions`: 顶部操作栏的操作按钮数组。**(必需)**
-   `rowHeight?: number`: 每行的像素高度。默认为 `40`。
-   `canBeClosed?: boolean`: 页面是否可以关闭。默认为 `false`。
-   `actionsColumn?: ActionsColumn`: 行操作按钮的配置。
-   `onError?: (ex: any) => void`: 首屏之后（查询/翻页/刷新）出错时的回调；不提供时默认用 MessageBox 弹出错误信息。

## 实例方法（通过 `bind:this` 调用）

-   `doSearch(reset?: boolean)`: 重新执行查询；`reset=true` 时先重置查询条件。查询会回到第一页。
-   `refresh()`: 按**当前查询条件和当前页码**重新加载数据（走 `IPagedDataManager.refresh()`），适用于增删改之后停留在当前页刷新列表。

```svelte
<script lang="ts">
    let tablePage: any = $state();

    const afterDelete = async () => {
        await tablePage.refresh();   // 删除后停留在当前页刷新
    }
</script>

<PagingTablePage bind:this={tablePage} ... />
```

## 功能特性

-   使用 PagedDataManager 自动数据获取
-   内置分页控件
-   服务端数据加载和搜索
-   加载和错误状态管理
-   使用 @ticatec/uniface-element/DataTable 进行渲染
-   支持行选择和操作
-   带有操作栏的响应式布局