filament 初使用记录

躺平阿福

已于 2024-08-07 14:39:33 修改

阅读量886

点赞数 11

分类专栏： PHP 文章标签： laravel php 笔记学习

于 2024-07-29 02:24:51 首次发布

本文链接：https://blog.csdn.net/wsfufua/article/details/140470470

版权

PHP 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装初始化

一、环境准备

官网要的
在这里插入图片描述
我安装的
php

二、下载安装

安装laravel

composer create-project --prefer-dist laravel/laravel 项目名称 10.*

导入 filament

composer require filament/filament

php artisan filament:install --panels

初始化

设置.env 文件
执行数据库文件迁移

php artisan migrate

创建首个用户用于登录

php artisan make:filament-user

运行启动项目

php artisan serve

资源使用与发布

发布资源（添加菜单项）

默认只有一个Dashboard 的仪表板页面
在这里插入图片描述
其余资源需要自行发布

创建模型

php artisan make:model Posts -m

会新增两个文件一个是模型文件，一个是对应模型数据库表的迁移文件，如需定义可以。可以在模型以及数据库迁移文件中设置不同模型或不同的数据表之前的关联关系。
下面是执行
php artisan make:model TestModal -m
这个命令之后的产物
在这里插入图片描述

引入资源

php artisan make:filament-resource SomeName

此命令会产生四个文件
下面是执行
php artisan make:filament-resource TestModal
该命令的产物
在这里插入图片描述
此时我们的左侧侧边栏中出现了资源的导航菜单，但需要注意的是，上述命令不会在数据库中创建表，所以需要自己执行数据库迁移文件，不然访问这个资源时会报没有找到这个数据表的SQL错误

数据table的展示相关内容

找到在app/Filament/Resources/这个目录下的xxxResource.php 资源文件的table方法

table 显示字段

 public static function table(Table $table): Table
    {

        return $table
            ->columns([
               //    ...
                Tables\Columns\TextColumn::make('name')
                    ->searchable()
                    ->label('姓名')
                ,
                Tables\Columns\TextColumn::make('email')
                    ->label('邮箱')
                ,
                  //          ...
            ])

    }

table 数据过滤筛选 filters

以posts 表为例
对其中的文章发布状态、文章所属频道进行筛选过滤

->filters([
                //
                Tables\Filters\SelectFilter::make('status')
                    ->label('状态')
                    ->options([
                        'draft' => '草稿',
                        'publish' => '发布',
                    ]),                Tables\Filters\SelectFilter::make('article_channel_id')
                    ->relationship('articleChannel', 'name')
                    ->searchable()
                    ->preload()
                    ->label('文章频道')
                ,
            ])

效果如截图所示
在这里插入图片描述

操作栏目按钮设置在 actions中

  ->actions([
                Tables\Actions\ActionGroup::make([
                    Tables\Actions\ViewAction::make()->label('查看'),
                    Tables\Actions\EditAction::make()->label('编辑'),
                    Tables\Actions\DeleteAction::make()->label('删除'),
                ])

            ])

按钮可以分组或拆分例子演示的时划分组的例子集合了查看编辑删除按钮效果如截图所示
在这里插入图片描述

选中后的批量操作在 bulkActions

 ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ])

默认例子是演示批量删除功能效果如截图所示
在这里插入图片描述

表单的定义

表单组件库

参考例子

 public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // 正常文本输入框
                Forms\Components\TextInput::make('title')
                    ->label('文章标题')
                    ->required()
                    ->maxLength(255)
                    // 占满一行宽度 默认是一半的宽度
                    ->columnSpanFull()
                ,
                // 录入tag标签 存入数据库时以,分隔
                Forms\Components\TagsInput::make('keywords')
                    ->label('关键字')
                    ->separator(',')
                    ->required()
                ,
                // 文本输入域 
                Forms\Components\Textarea::make('describe')
                    ->label('文章简介')
                    ->required()
                    ->maxLength(255)
                ,
                // 文件上传
                Forms\Components\FileUpload::make('cover_img')
                    ->label('文章封面')
                    ->image()
                ,
                //posts article_channel_id关联查询articleChannel表的name属性供选择，返回对应name的id 属性 
                
                Forms\Components\Select::make('article_channel_id')
                    ->relationship('articleChannel', 'name')
                    ->searchable()
                    ->preload()
                    ->required()
                    ->label('文章频道')
                    // 新建频道表数据的弹窗
                    ->createOptionForm([
                        Forms\Components\TextInput::make('name')
                            ->required(),
                    ])
                ,
                // 富文本
                Forms\Components\RichEditor::make('content')
                    ->label('正文内容')
                    ->required()
                    ->columnSpanFull()
                    ->toolbarButtons([
                        'attachFiles',
                        'blockquote',
                        'bold',
                        'bulletList',
                        'codeBlock',
                        'h1',
                        'h2',
                        'h3',
                        'table',
                        'italic',
                        'link',
                        'orderedList',
                        'redo',
                        'strike',
                        'underline',
                        'undo',
                    ])
                ,
                // 确定固定配置的的下拉框选择器
                Forms\Components\Select::make('status')
                    ->label('文章状态')
                    ->options([
                        'draft' => '草稿',
                        'publish' => '发布',
                    ])
                    ->default('draft') // 默认已选项
            ]);
    }

权限控制面板的插件使用

youtube视频教程
 文档 bezhansalleh/filament-shield

安装

composer require bezhansalleh/filament-shield

为需要的模型添加 use HasRoles;

以User模型为例子

use Illuminate\Foundation\Auth\User as Authenticatable;
use Spatie\Permission\Traits\HasRoles;
 
class User extends Authenticatable
{
    use HasRoles;
     // ...
}

发布配置文件，然后在配置文件中设置你的配置项

php artisan vendor:publish --tag=filament-shield-config

执行后在你的config 文件目录下新增 filament-shield.php文件

为你需要的面板新增插件例如文件
app/Providers/Filament/AdminPanelProvider.php

use BezhanSalleh\FilamentShield\FilamentShieldPlugin;

  ->plugins([
                FilamentShieldPlugin::make()
                    ->gridColumns([
                        'default' => 1,
                        'sm' => 2,
                        'lg' => 1
                    ])
                    ->sectionColumnSpan(1)
                    ->checkboxListColumns([
                        'default' => 1,
                        'sm' => 2,
                        'lg' => 6,
                    ])
                    ->resourceCheckboxListColumns([
                        'default' => 1,
                        'sm' => 2,
                    ]),
            ])

最后执行指令进行安装整个权限到项目中

php artisan shield:install

关闭任意角色用户可见roles菜单的权限

在之前

php artisan vendor:publish --tag=filament-shield-config

这个命令执行后生成的config/filament-shield.php文件中找到 register_role_policy配置项配置 enabled 为 true

'register_role_policy' => [
        'enabled' => true,
    ],