README

重要

请注意，我们只会更新到 2.x 版本，不包括任何错误修复。

Filament Tree

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

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

演示网站： https://filament-cms-website-demo.solutionforest.net/admin

演示用户名： demo@solutionforest.net

演示密码： 12345678 每小时自动重置。

安装

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

composer require solution-forest/filament-tree

重要：版本 2.x 之后需要发布资产

php artisan filament:assets

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

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

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

content: [
    '<path-to-vendor>/solution-forest/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 SolutionForest\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 SolutionForest\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 SolutionForest\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 SolutionForest\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 SolutionForest\FilamentTree\Concern\TreeRecords\Translatable;
use SolutionForest\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

变更日志

有关最近更改的更多信息，请参阅《https://github.com/solutionforest/filament-tree/blob/HEAD/CHANGELOG.md》。

贡献

有关详细信息，请参阅《https://github.com/solutionforest/filament-tree/blob/HEAD/.github/CONTRIBUTING.md》。

安全漏洞

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

致谢

• [Carly]
• 所有贡献者

许可证

《Filament Tree》是开源软件，受《https://github.com/solutionforest/filament-tree/blob/HEAD/LICENSE.md》下的 MIT 许可证的许可。

关于 Solution Forest

《https://solutionforest.com》基于香港的 Web 开发代理机构。我们帮助客户解决问题。我们热爱开源。

我们建立了一整套一流的产品

• 《https://vantagoads.com》: 自管理的广告服务器，简化您的广告策略。
• 《https://gatherpro.events》: 一个活动照片管理工具，简化您的活动照片。
• 《https://filamentphp.com/plugins/solution-forest-cms-website》: 网站CMS管理