简单的使用：

  1. $page = TablePage::gen()
  2.             ->setPageTitle('介绍页面')
  3.             ->setFilterForm([
  4.                 'buttons' => [
  5.                     ButtonAction::gen()
  6.                         ->setLabel('查询')
  7.                         ->setType('submit'),
  8.                     ButtonAction::gen()
  9.                         ->setLabel('重置')
  10.                         ->setType('reset'),
  11.                 ],
  12.                 'fields' => [
  13.                     InputTextField::gen()
  14.                         ->setId('keyword')
  15.                         ->setLabel('关键词')
  16.                         ->setInputProps([
  17.                             'placeholder' => '这里是提示内容',
  18.                         ]),
  19.                     DateRangePickerField::gen()
  20.                         ->setId('filter_created_at')
  21.                         ->setLabel('进行中'),
  22.                 ],
  23.             ])
  24.             ->setTable([
  25.                 'buttons' => [
  26.                     DrawerAction::gen()
  27.                         ->setLabel('新建')
  28.                         ->setType('primary')
  29.                         ->setIcon('plus')
  30.                         ->setFormWidth(800)
  31.                         ->setFormTitle('抽屉的标题')
  32.                         ->setFormFields([
  33.                             SelectGoods::gen()
  34.                                 ->setId('goods')//这相当于表单的name
  35.                                 ->setLabel('商品选择器'),
  36.                             InputNumberField::gen()
  37.                                 ->setId('InputNumberField')
  38.                                 ->setLabel('数字输入框')
  39.                                 ->setRules([['required' => true, 'message' => 'InputNumberField']]),//表单验证规则
  40.                             InputTextField::gen()
  41.                                 ->setId('文本输入框')
  42.                                 ->setLabel('InputTextField'),
  43.                             LongTextField::gen()
  44.                                 ->setId('长文本输入框')
  45.                                 ->setLabel('LongTextField'),
  46.                             DateTimePickerField::gen()
  47.                                 ->setId('DateTimePickerField')
  48.                                 ->setLabel('时间选择器'),
  49.                             DateRangePickerField::gen()
  50.                                 ->setId('DateRangePickerField')
  51.                                 ->setLabel('时间范围选择器'),
  52.                             SelectField::gen()
  53.                                 ->setId('SelectField')
  54.                                 ->setLabel('下拉选择框')
  55.                                 ->setInputProps([
  56.                                     'options' => [
  57.                                         ['label' => '允许', 'value' => 1],
  58.                                         ['label' => '禁止', 'value' => 0],
  59.                                     ],
  60.                                 ]),
  61.                             BraftEditor::gen()->setId('rule')->setLabel('富文本编辑器'),
  62.                         ])
  63.                         ->setFormOkApi(''),//这是提交时要调用的接口
  64.                 ],
  65.                 'scroll' => [
  66.                     'x' => 1500,
  67.                     'y' => 300,
  68.                 ],//这是当表格列过多或行过多时使用的参数，是表格可以滑动
  69.                 'columns' => [
  70.                     TextColumn::gen()
  71.                         ->setTitle('编号')
  72.                         ->setFixed('left')
  73.                         ->setWidth(80)
  74.                         ->setDataIndex('cut_per_time'),
  75.                     TextColumn::gen()
  76.                         ->setTitle('可砍价总次数')
  77.                         ->setDataIndex('cut_total_time'),
  78.                     DateTimeColumn::gen()
  79.                         ->setTitle('开始时间')
  80.                         ->setDataIndex('start_at')
  81.                         ->setSorter(true)
  82.                         ->setTimestampFormat('YYYY-MM-DD HH:mm:ss'),
  83.                     DateTimeColumn::gen()
  84.                         ->setTitle('结束时间')
  85.                         ->setDataIndex('end_at')
  86.                         ->setSorter(true)
  87.                         ->setTimestampFormat('YYYY-MM-DD HH:mm:ss'),
  88.                     FilterColumn::gen()
  89.                         ->setTitle('状态')
  90.                         ->setDataIndex('status')
  91.                         ->setFilters([
  92.                             ['text' => '启用', 'value' => 1],
  93.                             ['text' => '禁用', 'value' => 0],
  94.                         ]),
  96.                     ActionColumn::gen()
  97.                         ->setTitle('操作')
  98.                         ->setFixed('right')
  99.                         ->setWidth(150)
  100.                         ->setButtons([
  101.                             DrawerAction::gen()
  102.                                 ->setLabel('编辑抽屉的label')
  103.                                 ->setType('primary')
  104.                                 ->setIcon('plus')
  105.                                 ->setFormTitle('编辑抽屉的标题')
  106.                                 ->setFormWidth(800)
  107.                                 ->setFormFields([
  108.                                     SelectGoods::gen()
  109.                                         ->setId('goods')//这相当于表单的name
  110.                                         ->setLabel('商品选择器'),
  111.                                     InputNumberField::gen()
  112.                                         ->setId('InputNumberField')
  113.                                         ->setLabel('数字输入框')
  114.                                         ->setRules([['required' => true, 'message' => 'InputNumberField']]),//表单验证规则
  115.                                     InputTextField::gen()
  116.                                         ->setId('文本输入框')
  117.                                         ->setLabel('InputTextField'),
  118.                                     LongTextField::gen()
  119.                                         ->setId('长文本输入框')
  120.                                         ->setLabel('LongTextField'),
  121.                                     DateTimePickerField::gen()
  122.                                         ->setId('DateTimePickerField')
  123.                                         ->setLabel('时间选择器'),
  124.                                     DateRangePickerField::gen()
  125.                                         ->setId('DateRangePickerField')
  126.                                         ->setLabel('时间范围选择器'),
  127.                                     SelectField::gen()
  128.                                         ->setId('SelectField')
  129.                                         ->setLabel('下拉选择框')
  130.                                         ->setInputProps([
  131.                                             'options' => [
  132.                                                 ['label' => '允许', 'value' => 1],
  133.                                                 ['label' => '禁止', 'value' => 0],
  134.                                             ],
  135.                                         ]),
  136.                                     BraftEditor::gen()->setId('rule')->setLabel('富文本编辑器'),
  137.                                 ])
  138.                                 ->setFormOkApi('adminEditBargainGoods'),
  139.                             ApiCallAction::gen()
  140.                                 ->setLabel('删除')
  141.                                 ->setApiName('adminDeleteBargainGoods')
  142.                                 ->setConfirmText('是否确认要删除？注意操作无法恢复'),
  143.                         ]),
  144.                 ],
  145.                 'list' => [],//这里是表格的数据，格式为array
  146.                 'pagination' => [],
  147.             ]);
  149.         return (array)$page;

页面效果：
image.png
image.png
同样的效果可以使用pengpai\libs\pageBuilder\pages\AdminListPage来更便捷的实现:

<?php

namespace pengpai\procedures\adminDemo;

use pengpai\libs\db\ActiveQuery;
use pengpai\libs\pageBuilder\actions\ApiCallAction;
use pengpai\libs\pageBuilder\actions\ButtonAction;
use pengpai\libs\pageBuilder\actions\DrawerAction;
use pengpai\libs\pageBuilder\columns\ActionColumn;
use pengpai\libs\pageBuilder\columns\DateTimeColumn;
use pengpai\libs\pageBuilder\columns\FilterColumn;
use pengpai\libs\pageBuilder\columns\TextColumn;
use pengpai\libs\pageBuilder\fields\BraftEditor;
use pengpai\libs\pageBuilder\fields\DateRangePickerField;
use pengpai\libs\pageBuilder\fields\DateTimePickerField;
use pengpai\libs\pageBuilder\fields\InputNumberField;
use pengpai\libs\pageBuilder\fields\InputTextField;
use pengpai\libs\pageBuilder\fields\LongTextField;
use pengpai\libs\pageBuilder\fields\SelectField;
use pengpai\libs\pageBuilder\fields\SelectGoods;
use pengpai\libs\pageBuilder\pages\AdminListPage;
use yii\base\InvalidConfigException;

class AdminTestDemo extends AdminListPage
{

    /**
     * 获取页面标题
     * @return string
     */
    public function getPageTitle(): string
    {
        return '介绍页面';
    }

    /**
     * 设置筛选表单
     * @return array
     */
    public function renderFilterFormFields(): array
    {
        return [
            ButtonAction::gen()
                ->setLabel('查询')
                ->setType('submit'),
            ButtonAction::gen()
                ->setLabel('重置')
                ->setType('reset'),
        ];
    }

    /**
     * 设置筛选按钮
     * @return array
     */
    public function renderFilterFormButtons(): array
    {
        return [
            InputTextField::gen()
                ->setId('keyword')
                ->setLabel('关键词')
                ->setInputProps([
                    'placeholder' => '这里是提示内容',
                ]),
            DateRangePickerField::gen()
                ->setId('filter_created_at')
                ->setLabel('进行中'),
        ];
    }

    /**
     * 设置表格头部按钮
     * @return array
     */
    public function renderHeaderButtons(): array
    {
        return [
            DrawerAction::gen()
                ->setLabel('新建')
                ->setType('primary')
                ->setIcon('plus')
                ->setFormWidth(800)
                ->setFormTitle('抽屉的标题')
                ->setFormFields([
                    SelectGoods::gen()
                        ->setId('goods')//这相当于表单的name
                        ->setLabel('商品选择器'),
                    InputNumberField::gen()
                        ->setId('InputNumberField')
                        ->setLabel('数字输入框')
                        ->setRules([['required' => true, 'message' => 'InputNumberField']]),//表单验证规则
                    InputTextField::gen()
                        ->setId('文本输入框')
                        ->setLabel('InputTextField'),
                    LongTextField::gen()
                        ->setId('长文本输入框')
                        ->setLabel('LongTextField'),
                    DateTimePickerField::gen()
                        ->setId('DateTimePickerField')
                        ->setLabel('时间选择器'),
                    DateRangePickerField::gen()
                        ->setId('DateRangePickerField')
                        ->setLabel('时间范围选择器'),
                    SelectField::gen()
                        ->setId('SelectField')
                        ->setLabel('下拉选择框')
                        ->setInputProps([
                            'options' => [
                                ['label' => '允许', 'value' => 1],
                                ['label' => '禁止', 'value' => 0],
                            ],
                        ]),
                    BraftEditor::gen()->setId('rule')->setLabel('富文本编辑器'),
                ])
                ->setFormOkApi(''),//这是提交时要调用的接口
        ];
    }

    /**
     * 设置页面说明
     * @return array|null
     */
    public function renderAlertConfig(): ?array
    {
        return [

        ];
    }

    /**
     * 设置表格字段
     * @return array
     * @throws InvalidConfigException
     */
    public function renderColumns(): array
    {
        return [
            TextColumn::gen()
                ->setTitle('编号')
                ->setFixed('left')
                ->setWidth(80)
                ->setDataIndex('cut_per_time'),
            TextColumn::gen()
                ->setTitle('可砍价总次数')
                ->setDataIndex('cut_total_time'),
            DateTimeColumn::gen()
                ->setTitle('开始时间')
                ->setDataIndex('start_at')
                ->setSorter(true)
                ->setTimestampFormat('YYYY-MM-DD HH:mm:ss'),
            DateTimeColumn::gen()
                ->setTitle('结束时间')
                ->setDataIndex('end_at')
                ->setSorter(true)
                ->setTimestampFormat('YYYY-MM-DD HH:mm:ss'),
            FilterColumn::gen()
                ->setTitle('状态')
                ->setDataIndex('status')
                ->setFilters([
                    ['text' => '启用', 'value' => 1],
                    ['text' => '禁用', 'value' => 0],
                ]),

            ActionColumn::gen()
                ->setTitle('操作')
                ->setFixed('right')
                ->setWidth(150)
                ->setButtons([
                    DrawerAction::gen()
                        ->setLabel('编辑抽屉的label')
                        ->setType('primary')
                        ->setIcon('plus')
                        ->setFormTitle('编辑抽屉的标题')
                        ->setFormWidth(800)
                        ->setFormFields([
                            SelectGoods::gen()
                                ->setId('goods')//这相当于表单的name
                                ->setLabel('商品选择器'),
                            InputNumberField::gen()
                                ->setId('InputNumberField')
                                ->setLabel('数字输入框')
                                ->setRules([['required' => true, 'message' => 'InputNumberField']]),//表单验证规则
                            InputTextField::gen()
                                ->setId('文本输入框')
                                ->setLabel('InputTextField'),
                            LongTextField::gen()
                                ->setId('长文本输入框')
                                ->setLabel('LongTextField'),
                            DateTimePickerField::gen()
                                ->setId('DateTimePickerField')
                                ->setLabel('时间选择器'),
                            DateRangePickerField::gen()
                                ->setId('DateRangePickerField')
                                ->setLabel('时间范围选择器'),
                            SelectField::gen()
                                ->setId('SelectField')
                                ->setLabel('下拉选择框')
                                ->setInputProps([
                                    'options' => [
                                        ['label' => '允许', 'value' => 1],
                                        ['label' => '禁止', 'value' => 0],
                                    ],
                                ]),
                            BraftEditor::gen()->setId('rule')->setLabel('富文本编辑器'),
                        ])
                        ->setFormOkApi('adminEditBargainGoods'),
                    ApiCallAction::gen()
                        ->setLabel('删除')
                        ->setApiName('adminDeleteBargainGoods')
                        ->setConfirmText('是否确认要删除？注意操作无法恢复'),
                ]),
        ];
    }

    /**
     * 页面的查询 query
     * @return ActiveQuery
     * @throws InvalidConfigException
     */
    public function getQuery(): ?ActiveQuery
    {
        // 这里返回一个 ActiveQuery  如 MemberEntity::find()->where([]);

    }

    /**
     * 页面数据
     * @return array
     * @throws InvalidConfigException
     */
    public function getList(): array
    {
        // 返回当前页面的数据 :
        $models = $this->getDataProvider()->getModels();
        foreach ($models as &$model) {
            $model = $model->getAdminArray();
        }
        unset($model);

        return $models;
    }
}

更多的方法请查看AdminListPage类，页面建议尽量使用AdminListPage来构造，这里涉及到权限的配置；