🎈 OwlAdmin : 看看在后端构建页面有多简单~

先看一段代码, 对 OwlAdmin 有一点点印象

以下这段代码就构建了一个完整的 crud 列表:

public function list()
{
    $crud = $this->baseCRUD()
        // 头部工具栏
        ->headerToolbar([
            // 添加按钮, 传入 true 则为弹窗模式表单
            $this->createButton(true),
            // 其余的操作, 包含批量操作/刷新/筛选按钮
            ...$this->baseHeaderToolBar(),
        ])
        ->filter(
            // 此处为筛选的表单
            $this->baseFilter()->body([
                // 一个基础的 input 用来搜索名称
                TextControl::make()->name('title')->label('名称')->size('md'),
                // 封装的组件, 一个包含 启用/禁用 的下拉列表
                Components::make()->enabledFilter(),
            ])
        )
        ->columns([
            // 这里设置了表格的列信息
            TableColumn::make()->name('id')->label('ID'),
            TableColumn::make()->name('title')->label('名称'),
            TableColumn::make()->name('image')->label('图片')->type('image')->enlargeAble(true),
            TableColumn::make()->name('sort')->label('排序')->sortable(true),
            // 同理, 封装用于将 1/0 回显为文字
            Components::make()->enabledTableColumn(),
            TableColumn::make()->name('created_at')->label('创建时间')->type('datetime')->sortable(true),
            // 行操作, 包含 详情/编辑/删除
            $this->rowActions(true),
        ]);

    return $this->baseList($crud);
}

示例一 : 对 enabled 字段的封装

对于常用的页面元素, 可以提取为 function 在需要的地方粘粘粘就完了~

// 在表单中使用
public function enabledForm()
{
    return SwitchControl::make()->name('enabled')->label('是否启用')->value(EnabledDefine::STATUS_ENABLED);
}

// 在筛选表单中使用
public function enabledFilter()
{
    return SelectControl::make()
        ->name('enabled')
        ->label('是否启用')
        ->size('md')
        ->clearable(true)
        ->options(EnabledDefine::STATUS);
}

// 在列表/详情中皆可按以上形式封装
// 我将这些方法封装在了 Components 中, 使用方式如下:
Components::make()->enabledForm();
Components::make()->enabledFilter();

示例二 : 在列表工具栏中添加一个弹窗表单, 保存设置项

第一步: 创建一个弹窗表单

public function setting()
{
    // 最外层为按钮的结构, 按钮的文字, 样式
    return amisMake()->DialogAction()->label('额度设置')->level('success')->dialog(
        // 弹窗的结构
        amisMake()->Dialog()->title('额度设置')->body(
            // Form 结构
            amisMake()->Form()->mode('horizontal')
                ->initApi(admin_url('xxx/get_setting')) // 初始化数据
                ->api(admin_url('xxx/save_setting'))    // 提交数据
                ->body([
                    $this->limitNumberControl('am_limit', '上午限额'),
                    $this->limitNumberControl('pm_limit', '下午限额'),
                ])
        )
    );
}

// 两个相同的组件提取为方法
private function limitNumberControl($name, $label)
{
    return NumberControl::make()
        ->name($name)                  // 字段名
        ->label($label)                // 标签名
        ->displayMode('enhance')       // 设置为增强模式(左右有 +/- 按钮)
        ->min(0)                       // 最小值
        ->max(999999)                  // 最大值
        ->value(0)                     // 默认值
        ->required(true);              // 必填
}

第二步: 添加到列表的工具栏中

// 将 setting() 添加到 crud 的 headerToolbar 方法中即可
// ...
->headerToolbar([
    $this->setting(),
    // ...
])

其他示例 : 框架内置的导出按钮的封装

与示例二中的添加弹窗表单类似, 可以在 headerToolbar 中添加 exportAction() , 来为列表增加导出按钮
里面封装了一个下拉按钮, 包含三种导出类型 全部/本页/选中项
逻辑与 示例二 一致, 只是封装上复杂了亿点点, 多了一点 js 的操作

有兴趣的同学可自行参阅 -> 源码

包括框架内的 rowAction() baseCRUD() baseFilter() baseForm() 等一系列的方法, 都是封装组件的一种体现

• 对于组件 : 你想咋封装就咋封装, 内置 198 个class , 给你良好的编辑体验

• 对于框架 : 几乎所有的方法你都可以重写来更改逻辑~

  “因为我们生来就是自由的~ 塔塔开~”

本作品采用《CC 协议》，转载必须注明作者和本文链接