README

Filament Tree是一个Filament Admin插件，它创建了一个具有遗产树形结构视图的模型管理页面。此插件可用于创建菜单等。

安装

要安装此包，请运行以下命令

composer require marcha/filament-tree

php artisan filament:assets

注意：请将插件Blade文件添加到您的自定义主题tailwind.config.js以启用暗黑模式。

要设置您自己的自定义主题，您可以访问Filament网站上的官方说明页面。

将插件的视图添加到您的tailwind.config.js文件。

content: [
    '<path-to-vendor>/marcha/filament-tree/resources/**/*.blade.php',
]

然后，使用以下命令发布配置文件

php artisan vendor:publish --tag="filament-tree-config"

您可以通过将以下代码添加到您的config/filament-tree.php文件来设置您首选的选项

<?php

return [
    /**
     * Tree model fields
     */
    'column_name' => [
        'order' => 'order',
        'parent' => 'parent_id',
        'title' => 'title',
    ],
    /**
     * Tree model default parent key
     */
    'default_parent_id' => -1,
    /**
     * Tree model default children key name
     */
    'default_children_key_name' => 'children',
];

用法

准备数据库和模型

要使用Filament Tree，请遵循以下表结构约定

提示：parent_id字段必须始终默认为-1!!!

Schema::create('product_categories', function (Blueprint $table) {
    $table->id();
    $table->integer('parent_id')->default(-1);
    $table->integer('order')->default(0)->index();
    $table->string('title');
    $table->timestamps();
});

此插件提供了一个方便的方法treeColumns()，您可以使用它更轻松地将所需列添加到表格以创建树结构。以下是一个示例

Schema::create('product_categories', function (Blueprint $table) {
    $table->id();
    $table->treeColumns();
    $table->timestamps();
});

这将自动将所需的列添加到表格中，以创建树结构。

上述表结构包含三个必需字段：parent_id、order和title，其他字段没有要求。

相应的模型是app/Models/ProductCategory.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Marcha\FilamentTree\Concern\ModelTree;

class ProductCategory extends Model
{
    use ModelTree;

    protected $fillable = ["parent_id", "title", "order"];

    protected $table = 'product_categories';
}

表结构中的三个字段parent_id、order和title的名称也可以修改

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Marcha\FilamentTree\Concern\ModelTree;

class ProductCategory extends Model
{
    use ModelTree;

    protected $fillable = ["parent_id", "title", "order"];

    protected $table = 'product_categories';

    // Default if you need to override

    // public function determineOrderColumnName(): string
    // {
    //     return "order";
    // }

    // public function determineParentColumnName(): string
    // {
    //     return "parent_id";
    // }

    // public function determineTitleColumnName(): string
    // {
    //     return 'title';
    // }

    // public static function defaultParentKey()
    // {
    //     return -1;
    // }

    // public static function defaultChildrenKeyName(): string
    // {
    //     return "children";
    // }

}

小部件

Filament提供了一个强大的功能，允许您在页面内部显示小部件，在页眉下方和页脚上方。这对于向资源页面添加额外功能很有用。

要创建树形小部件并将其应用于资源页面，您可以按照以下步骤操作

1. 创建Filament资源页面

要创建资源页面，请运行以下命令

php artisan make:filament-resource ProductCategory

2. 创建树形小部件

准备filament-tree小部件，并在资源页面中显示它。

php artisan make:filament-tree-widget ProductCategoryWidget

现在您可以在Filament文件夹中看到小部件了

<?php

namespace App\Filament\Widgets;

use App\Models\ProductCategory as ModelsProductCategory;
use App\Filament\Widgets;
use Filament\Forms\Components\TextInput;
use Marcha\FilamentTree\Widgets\Tree as BaseWidget;

class ProductCategoryWidget extends BaseWidget
{
    protected static string $model = ModelsProductCategory::class;

    // you can customize the maximum depth of your tree
    protected static int $maxDepth = 2;

    protected ?string $treeTitle = 'ProductCategory';

    protected bool $enableTreeTitle = true;

    protected function getFormSchema(): array
    {
        return [
            TextInput::make('title'),
        ];
    }
}

3. 在资源页面上显示小部件

创建小部件后，修改资源页面的getHeaderWidgets()或getFooterWidgets()方法以显示树形视图

<?php

namespace App\Filament\Resources\ProductCategoryResource\Pages;

use App\Filament\Resources\ProductCategoryResource;
use App\Filament\Widgets\ProductCategory;
use Filament\Pages\Actions;
use Filament\Resources\Pages\ListRecords;

class ListProductCategories extends ListRecords
{
    protected static string $resource = ProductCategoryResource::class;

    protected function getActions(): array
    {
        return [
            Actions\CreateAction::make(),
        ];
    }

    protected function getHeaderWidgets(): array
    {
        return [
            ProductCategory::class
        ];
    }
}

资源

Filament允许您创建自定义资源页面，您还可以创建显示层次数据的树形页面。

创建页面

要为资源创建树形页面，请使用

php artisan make:filament-tree-page ProductCategoryTree --resource=ProductCategory

将页面注册到资源

您必须将树形页面注册到您资源静态getPages()方法中的路由。例如

public static function getPages(): array
{
    return [
        // ...
        'tree-list' => Pages\ProductCategoryTree::route('/tree-list'),
    ];
}

操作

使用您的页面类的getActions()和getTreeActions()方法定义树形页面的可用“操作”。

getActions()方法定义了显示在页面标题旁边的操作

    use Filament\Pages\Actions\CreateAction;

    protected function getActions(): array
    {
        return [
            CreateAction::make(),
            // SAMPLE CODE, CAN DELETE
            //\Filament\Pages\Actions\Action::make('sampleAction'),
        ];
    }

getTreeActions()方法定义了显示在树中每个记录的操作。例如

use Filament\Pages\Actions\Action;

protected function getTreeActions(): array
{
    return [
        Actions\ViewAction::make(),
        Actions\EditAction::make(),
        Actions\DeleteAction::make(),
    ];
}

或者，您可以使用hasDeleteAction()、hasEditAction()和hasViewAction()方法单独自定义每个操作。

protected function hasDeleteAction(): bool
{
    return false;
}

protected function hasEditAction(): bool
{
    return true;
}

protected function hasViewAction(): bool
{
    return false;
}

记录图标

要自定义树形页面中每个记录的前缀图标，您可以使用您的树形页面类中的getTreeRecordIcon()方法。此方法应返回表示您想要用于记录的图标的名称的字符串。例如

public function getTreeRecordIcon(?\Illuminate\Database\Eloquent\Model $record = null): ?string
{
    // default null
    return 'heroicon-o-cake';
}

节点折叠状态

您可以为节点自定义折叠状态。如果您希望初始显示的树是折叠的，可以使用

public function getNodeCollapsedState(?\Illuminate\Database\Eloquent\Model $record = null): bool
{
    // All tree nodes will be collapsed by default.
    return true;
}

记录标题

要为树页面的每个记录自定义标题，您可以在您的树页面类中使用 getTreeRecordTitle() 方法。该方法应返回表示您想用于记录的图标名称的字符串。例如

public function getTreeRecordTitle(?\Illuminate\Database\Eloquent\Model $record = null): string
{
    if (! $record) {
        return '';
    }
    $id = $record->getKey();
    $title = $record->{(method_exists($record, 'determineTitleColumnName') ? $record->determineTitleColumnName() : 'title')};
    return "[{$id}] {$title}";
}

页面

此插件使您能够在管理面板中创建树页面。要为模型创建树页面，请使用 make:filament-tree-page 命令。例如，要为 ProductCategory 模型创建树页面，您可以运行

创建页面

提示：请注意，您应该确保模型包含所需的列或已使用 ModelTree 特性

php artisan make:filament-tree-page ProductCategory --model=ProductCategory

每个记录的动作、小部件和图标

创建树页面后，您可以自定义每个记录的可用动作、小部件和图标。您可以使用与资源页面相同的相同方法。有关如何自定义动作、小部件和图标的信息，请参阅资源页面。

翻译

建议与 Spatie Translatable (https://filamentphp.com/plugins/filament-spatie-translatable) 插件一起使用。

1. 确保您的模型已经应用了可翻译的设置。（参考https://spatie.be/docs/laravel-translatable/v6/installation-setup）

use Filament\Actions\LocaleSwitcher;
use Marcha\FilamentTree\Concern\ModelTree;
use Spatie\Translatable\HasTranslations;

class Category extends Model
{
    use HasTranslations;
    use TreeModel;

    protected $translatable = [
        'title',
    ];
}

1. 您需要将必要的特性和 LocaleSwitcher 标题动作添加到您的树页面

use App\Models\Category as TreePageModel;
use Marcha\FilamentTree\Concern\TreeRecords\Translatable;
use Marcha\FilamentTree\Pages\TreePage as BasePage;

class Category extends BasePage
{
    use Translatable;

    protected static string $model = TreePageModel::class;

    public function getTranslatableLocales(): array
    {
        return ['en', 'fr'];
    }

    protected function getActions(): array
    {
        return [
            LocaleSwitcher::make(),
        ];
    }
}

发布视图

要发布视图，请使用

php artisan vendor:publish --tag="filament-tree-views"

发布翻译

要发布翻译，请使用

php artisan vendor:publish --tag="filament-tree-translations"

测试

要运行测试，请运行

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

有关详细信息，请参阅贡献。

安全漏洞

如果您发现任何与安全相关的问题，请通过电子邮件info+package@solutionforest.net而不是使用问题跟踪器。

鸣谢

• [Carly]
• 解决方案森林
• 所有贡献者

许可协议

Filament Tree 是开源软件，受MIT 许可协议许可。