Symfony7.3+EasyAdmin4.27中为表单添加自定义同步按钮

1. 新增后台同步路由 #

在config/routes/easy_admin.yaml中添加路由，映射到Crud控制器的同步处理方法：

easy_admin_sync_ev_data:
    path: /admin/sync-ev-data/{id}
    controller: App\Controller\Admin\ConCrudController::syncEvData
    methods: [POST]

2. 在ConCrudController中实现服务调用逻辑 #

注入EvSyncService，编写处理同步请求的方法，返回JSON格式结果：

use App\Entity\EvData;
use App\Service\EvSyncService;
use Symfony\Component\HttpFoundation\JsonResponse;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;

class ConCrudController extends AbstractCrudController
{
    // ... 原有代码

    public function syncEvData(EvData $evData, EvSyncService $syncService): JsonResponse
    {
        try {
            $syncService->sync($evData);
            return new JsonResponse(['status' => 'success', 'message' => '同步完成']);
        } catch (\Exception $e) {
            return new JsonResponse(['status' => 'error', 'message' => $e->getMessage()], 500);
        }
    }
}

3. 给CollectionField添加自定义同步按钮 #

修改configureFields方法，为Collection字段指定自定义模板，传递实体ID参数：

use EasyCorp\Bundle\EasyAdminBundle\Field\CollectionField;
use EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto;
use EasyCorp\Bundle\EasyAdminBundle\Dto\FieldDto;
use EasyCorp\Bundle\EasyAdminBundle\Controller\EntityCrudController;

public function configureFields(string $pageName): iterable
{
    // ... 其他字段定义
    yield CollectionField::new('evData', 'EV数据')
        ->setEntryType(EvTypeForm::class)
        ->setTemplatePath('admin/field/collection_with_sync_btn.html.twig');
}

4. 创建自定义Twig模板渲染按钮 #

在templates/admin/field/collection_with_sync_btn.html.twig中，继承EasyAdmin默认Collection模板，为每个表单条目添加同步按钮：

{% extends '@EasyAdmin/crud/field/collection.html.twig' %}

{% block collection_item %}
    {{ parent() }}
    {% if form.vars.value.id is not empty %}
        <button type="button" class="btn btn-secondary ms-2 sync-btn" data-id="{{ form.vars.value.id }}">
            同步数据
        </button>
    {% endif %}
{% endblock %}

5. 前端JS处理按钮点击事件 #

在templates/admin/crud/edit.html.twig中添加脚本，处理按钮点击、请求发送和状态反馈：

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.sync-btn').forEach(btn => {
                btn.addEventListener('click', async () => {
                    const evId = btn.dataset.id;
                    const originalText = btn.textContent;
                    btn.textContent = '同步中...';
                    btn.disabled = true;

                    try {
                        const res = await fetch(`{{ path('easy_admin_sync_ev_data', {id: 0}) }}`.replace('/0', `/${evId}`), {
                            method: 'POST',
                            headers: {
                                'X-CSRF-Token': '{{ csrf_token('easy_admin') }}',
                                'Accept': 'application/json'
                            }
                        });
                        const data = await res.json();
                        alert(data.message);
                    } catch (err) {
                        alert('同步请求失败，请检查控制台');
                        console.error(err);
                    } finally {
                        btn.textContent = originalText;
                        btn.disabled = false;
                    }
                });
            });
        });
    </script>
{% endblock %}

内容的提问来源于stack exchange，提问作者user3440145