行布局

建议编辑

Row 布局是一个基本布局,结合了所有必要的表单元素。它适用于创建简短而简洁的表单,例如当您只想显示一到两个字段时。

以下是如何使用 Row 布局的示例:

use Orchid\Support\Facades\Layout;
use Orchid\Screen\Fields\Input;

public function layout(): array
{
    return [
        Layout::rows([
           Input::make('name')
                ->type('text')
                ->title('名字:')
        ]),
    ];
}

为了使 Row 布局更具可重用性,您可以通过运行以下命令创建一个自定义类:

php artisan orchid:rows Appointment

这将在 app/Orchid/Layouts 目录中创建一个新类,您可以在其中定义字段:

namespace App\Orchid\Layouts;

use Orchid\Screen\Field;
use Orchid\Screen\Layouts\Rows;
use Orchid\Screen\Fields\DateTimer;
use Orchid\Screen\Fields\TextArea;

class Appointment extends Rows
{
    /**
     * 定义预约表单的字段。
     *
     * @return Field[]
     */
    protected function fields(): array
    {
        return [
            DateTimer::make('appointment_time')
                ->required()
                ->title('时间'),

            TextArea::make('doctor_notes')
                ->rows(10)
                ->required()
                ->title('医生备注')
                ->help('患者抱怨了什么?'),
        ];
    }
}

要在屏幕中使用自定义 Row 类,请在 layout 方法中传递类名:

public function layout(): array
{
    return [
        Appointment::class
    ];
}

注意 行布局仅用于显示少量字段。对于更复杂的表单,您可能需要考虑使用其他布局类型,如 TabsAccordion

访问屏幕数据

Row 布局可以通过 query 属性访问屏幕中的数据。这使您可以在行布局的字段中使用屏幕数据。

例如,您可以使用 query 属性根据特定键的存在条件性地显示或隐藏字段:

namespace App\Orchid\Layouts;

use Orchid\Screen\Field;
use Orchid\Screen\Layouts\Rows;
use Orchid\Screen\Fields\Input;

class Appointment extends Rows
{

    /**
     * @return Field[]
     */
    protected function fields(): array
    {
        return [
            Input::make('appointment_time')
                ->canSee($this->query->has('available'))
                ->required()
                ->title('时间'),
        ];
    }
}

在此示例中,appointment_time 字段仅在屏幕的 query 方法对 available 键返回 true 时显示:

/**
 * 查询数据
 *
 * @return array
 */
public function query() : array
{
    return [
      'available' => true,
    ];
}

您还可以使用 query 方法从屏幕数据中检索特定值:

$this->query->get('available');

query 方法还支持点符号以访问嵌套数据:

$this->query->get('user.name');

重用布局

当字段与不同模型相关时,布局可以轻松重用。例如,您可能希望使用相同的字段集来捕获客户、客户和订单的地址。与其创建和定义多个几乎相同的布局,不如在单个布局中添加逻辑来处理这种情况。

以下是一个可重用的 AddressLayout 类示例,它接受前缀和标题作为参数:

namespace App\Orchid\Layouts;

use Illuminate\Support\Str;
use Illuminate\Support\Collection;
use Orchid\Screen\Field;
use Orchid\Screen\Fields\Input;
use Orchid\Screen\Layouts\Rows;

class AddressLayout extends Rows
{
    public function __construct(
        private readonly string $prefix,
        private readonly ?string $title = null
    ) {
        $this->prefix = Str::finish($prefix, '.');
    }

    /**
     * 获取要显示的字段。
     *
     * @return Field[]
     */
    protected function fields(): array
    {
        return $this->addPrefix([
            Input::make('address')
                ->required()
                ->title('地址')
                ->placeholder('177A Bleecker Street'),
        ]);
    }

    /**
     * 为每个字段名称添加前缀。
     *
     * @param Field[] $fields
     *
     * @return Field[]
     */
    protected function addPrefix(array $fields): array
    {
        return collect($fields)
            ->each(fn(Field $field) => $field->set('name', $this->prefix . $field->get('name')))
            ->all();
    }
}

要使用 AddressLayout 类,请传递前缀和标题值作为参数:

public function layout(): array
{
    return [
        new AddressLayout('order.shipping_address', '送货地址'),
        new AddressLayout('order.invoice_address', '发票地址'),
    ];
}

这允许您使用不同的前缀和标题重用相同的布局,从而节省时间和精力。

我们的朋友