🎈 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() 等一系列的方法, 都是封装组件的一种体现
  • 对于组件 : 你想咋封装就咋封装, 内置 198class , 给你良好的编辑体验

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

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

本作品采用《CC 协议》,转载必须注明作者和本文链接
闲来无事码两行
slowlyo
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
讨论数量: 9

比如你列表的table 中的columns 最好简化一下
columns([
[“label”=>”标题”,”dataIndex”=>”title”,”valueType”=>”text”],

])
我的做法是生成json的配置,保存在菜单中,前台页面直接读取当前菜单的list 或者 form的 json配置直接生成页面。
我用的是antdesign pro

1年前 评论
slowlyo (楼主) 1年前
zxw12138 1年前

有没有表格excel导出的方法

1年前 评论
slowlyo (楼主) 1年前
slowlyo (楼主) 1年前
逍遥子 (作者) 1年前

如果作者有空的话 建议把文档好好完善一下 好多关键信息都没有 才到铺天盖地的找了

1年前 评论
slowlyo (楼主) 1年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!