When combining the tabs component with a form, how can I save only the data for the current tab?

[scbing]

Package

Form builder

Package Version

v5.1.3

How can we help you?

Verify and save the current tab, but do not verify and save other tabs

I have tried

1. $component->getRootContainer()->getComponents()[0] is the tabs component. ->getActiveTab() returns the index of the default active tab, not the currently active tab.
2. When the Tabs component is enabled and the persistTabInQueryString() method is called, request()->query('tab') is null

// app/Filament/Pages/SiteConfig.php

<x-filament-panels::page>
    {{ $this->form }}

    {{ $this->submit }}
</x-filament-panels::page>

// app/Filament/Pages/SiteConfig.php

<?php

namespace App\Filament\Pages;

use Filament\Actions\Action;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
use Filament\Notifications\Notification;
use Filament\Pages\Page;
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
use Filament\Schemas\Schema;
use Filament\Support\Icons\Heroicon;

class SiteConfig extends Page
{
    protected string $view = 'filament.pages.site-config';

    protected static string|\BackedEnum|null $navigationIcon = Heroicon::OutlinedGlobeAsiaAustralia;

    protected static string|\UnitEnum|null $navigationGroup = '配置';

    protected static ?string $title = '配置';

    public ?array $data = [];

    public function form(Schema $schema): Schema
    {
        return $schema
            ->statePath('data')
            ->components([
                Tabs::make('tabs')
                    ->vertical()
                    ->persistTab()
                    ->schema([
                        Tab::make('网站配置')
                            ->icon('bi-house-door-fill')
                            ->statePath('web')
                            ->schema([
                                TextInput::make('title')
                                    ->label('网站名称')
                                    ->required(),

                                TextInput::make('copyright')
                                    ->label('版权'),

                                TextInput::make('registration')
                                    ->label('备案号'),
                            ])
                            ->validatedWhenNotDehydrated(false) // 如果未启用保存，则不验证
                            ->saved(function (\Filament\Schemas\Components\Component $component) {
                                // 需求：只有当前 tab 是 web 时才保存
                                // $component->getRootContainer()->getComponents()[0] 是 tabs 组件 ->getActiveTab() 返回的是默认激活的 tab 下标，而不是当前所处的 tab
                                return true;
                            }),

                        Tab::make('微信支付')
                            ->icon('bi-wechat')
                            ->statePath('wechat_pay')
                            ->columns(2)
                            ->schema([
                                TextInput::make('merchid')
                                    ->label('商户号')
                                    ->required(),

                                TextInput::make('secret_key')
                                    ->label('密钥')
                                    ->required(),

                                FileUpload::make('public_cert')
                                    ->label('商户证书')
                                    ->required()
                                    ->downloadable()
                                    ->directory('pay/wechat')
                                    ->helperText('由微信支付商户平台证书工具生成，文件是 apiclient_cert.pem'),

                                FileUpload::make('secret_cert')
                                    ->label('商户私钥')
                                    ->required()
                                    ->downloadable()
                                    ->directory('pay/wechat')
                                    ->helperText('文件是 apiclient_key.pem'),

                                TextInput::make('pub_id')
                                    ->label('商户公钥 ID')
                                    ->required(),

                                FileUpload::make('pub_key')
                                    ->label('商户公钥')
                                    ->required()
                                    ->downloadable()
                                    ->directory('pay/wechat')
                                    ->helperText('文件是 pub_key.pem'),
                            ])
                            ->validatedWhenNotDehydrated(false) // 如果未启用保存，则不验证
                            ->saved(function (\Filament\Schemas\Components\Component $component) {
                                // 需求：只有当前 tab 是 wechat_pay 时才保存
                                // $component->getRootContainer()->getComponents()[0] 是 tabs 组件 ->getActiveTab() 返回的是默认激活的 tab 下标，而不是当前所处的 tab
                                return true;
                            }),

                        Tab::make('支付宝支付')
                            ->icon('bi-alipay')
                            ->statePath('ali_pay')
                            ->columns(2)
                            ->schema([
                                FileUpload::make('public_cert')
                                    ->label('应用公钥证书')
                                    ->required()
                                    ->downloadable()
                                    ->directory('pay/ali'),

                                FileUpload::make('alipay_public_cert')
                                    ->label('支付宝公钥证书')
                                    ->required()
                                    ->downloadable()
                                    ->directory('pay/ali'),

                                FileUpload::make('alipay_root_cert')
                                    ->label('支付宝根证书')
                                    ->required()
                                    ->downloadable()
                                    ->directory('pay/ali'),

                                TextInput::make('appid')
                                    ->label('APPID')
                                    ->required(),

                                Textarea::make('secret_cert')
                                    ->label('应用私钥')
                                    ->required()
                                    ->rows(10),
                            ])
                            ->validatedWhenNotDehydrated(false) // 如果未启用保存，则不验证
                            ->saved(function (\Filament\Schemas\Components\Component $component) {
                                // 需求：只有当前 tab 是 ali_pay 时才保存
                                // $component->getRootContainer()->getComponents()[0] 是 tabs 组件 ->getActiveTab() 返回的是默认激活的 tab 下标，而不是当前所处的 tab
                                return true;
                            }),

                        Tab::make('购买协议')
                            ->icon('bi-markdown-fill')
                            ->statePath('pay_protocol')
                            ->schema([
                                TextInput::make('title')
                                    ->label('协议名称')
                                    ->required(),

                                RichEditor::make('content')
                                    ->label('协议内容')
                                    ->resizableImages()
                                    ->required(),
                            ])
                            ->validatedWhenNotDehydrated(false) // 如果未启用保存，则不验证
                            ->saved(function (\Filament\Schemas\Components\Component $component) {
                                // 需求：只有当前 tab 是 pay_protocol 时才保存
                                // $component->getRootContainer()->getComponents()[0] 是 tabs 组件 ->getActiveTab() 返回的是默认激活的 tab 下标，而不是当前所处的 tab
                                return true;
                            }),
                    ]),
            ]);
    }

    public function submit(): Action
    {
        return Action::make('submit')
            ->label('提交')
            ->action(function () {
                $this->save();
            });
    }

    public function mount(): void
    {
        $data = \App\Models\SiteConfig::query()
            ->get()
            ->mapWithKeys(fn (\App\Models\SiteConfig $config) => [
                $config->key => $config->val,
            ])
            ->toArray();

        $this->form->fill($data);
    }

    protected function save(): void
    {
        $data = $this->form->getState();

        foreach ($data as $key => $val) {
            \App\Models\SiteConfig::query()
                ->updateOrCreate([
                    'key' => $key,
                ], [
                    'val' => $val,
                ]);
        }

        Notification::make()
            ->success()
            ->title('操作成功')
            ->body('设置已保存')
            ->send();
    }
}