在area17/twill项目中自定义创建模态框字段指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01092/article/details/148552475

在area17/twill项目中自定义创建模态框字段指南

twill Twill is an open source CMS toolkit for Laravel that helps developers rapidly create a custom admin console that is intuitive, powerful and flexible. Chat with us on Discord at https://discord.gg/cnWk7EFv8R. 项目地址: https://gitcode.com/gh_mirrors/tw/twill

理解创建模态框的基本结构

在area17/twill项目中，创建模态框是管理员界面中用于添加新内容的核心组件。默认情况下，创建模态框包含标题(title)、别名(slug)字段以及一些发布设置选项。这种设计适用于大多数基础场景，但在实际开发中，我们经常需要根据业务需求添加额外的必填字段。

自定义创建模态框的两种方法

方法一：通过控制器FormBuilder方式

这是推荐的方式，通过在模块控制器中重写getCreateForm方法来实现：

public function getCreateForm(): Form
{
    return Form::make([
        Input::make()
            ->name('title')
            ->label('自定义标题')
            ->translatable()
            ->onChange('formatPermalink'),
        Wysiwyg::make()
            ->name('description')
            ->label('详细描述')
            ->translatable(),
        Input::make()
            ->name('slug')
            ->label('永久链接')
            ->translatable()
            ->ref('permalink')
            ->prefix($this->getPermalinkPrefix($this->getPermalinkBaseUrl())),
    ]);
}

关键点说明：

translatable()方法表示该字段支持多语言
onChange('formatPermalink')确保标题变更时自动更新别名
建议保留标题和别名字段，除非确实不需要

方法二：通过视图FormView方式

这种方式提供了更大的灵活性，可以通过创建create.blade.php文件来自定义：

@include('twill::partials.create')

<x-twill::input
    name="description"
    label="详细描述"
    :translated="true"
    :maxlength="100"
/>

高级自定义示例：

<x-twill::input
    :name="$titleFormKey ?? 'title'"
    :label="$titleFormKey === 'title' ? '标题' : ucfirst($titleFormKey)"
    :translated="$translateTitle ?? false"
    :required="true"
    on-change="formatPermalink"
/>

<x-twill::input
    name="description"
    label="详细描述"
    :translated="true"
    :maxlength="100"
/>

@if ($permalink ?? true)
    <x-twill::input
        name="slug"
        label="永久链接"
        :translated="true"
        ref="permalink"
        :prefix="$permalinkPrefix ?? ''"
    />
@endif

动态数据绑定技巧

当需要在下拉选择框中显示动态数据时，可以通过控制器的indexData方法提供数据：

protected function indexData($request)
{
    return [
        'example_options' => [
            ['value' => 'a', 'label' => '选项A'],
            ['value' => 'b', 'label' => '选项B'],
            ['value' => 'c', 'label' => '选项C'],
        ],
    ];
}

然后在视图中使用：

<x-twill::select
    name="example_options_field"
    label="示例选项"
    :unpack="true"
    :options="$example_options"
/>

移除发布开关的高级配置

在某些场景下，可能需要移除创建模态框中的发布开关和多语言选择框：

在控制器中配置：

protected function setUpController(): void
{
    $this->disablePublish();
    $this->disableBulkPublish();
}

protected function formData($request) 
{ 
    return ['controlLanguagesPublication' => false];
}

在仓库中设置所有语言默认发布：

public function prepareFieldsBeforeCreate($fields): array
{
    foreach ($fields['languages'] as $key => $language) {
        $fields['languages'][$key]['published'] = true;
    }
    return parent::prepareFieldsBeforeCreate($fields);
}