dcat admin自定义操作按钮 弹框显示表单、数据表格

dcat admin自定义按钮，弹框操作，虽然有文档但是有一些地方没写清楚
主要功能文档：弹框、异步加载

简单介绍

这里使用弹框数据表格来说明，弹框表单官方文档有说明，其实原理相同，不同的只是body放入的是gride还是form

要实现这个功能，分为三步来理解
第一步： 加载Action，也就是grid中加入操作按钮

$grid->actions(function (Grid\Displayers\Actions $actions) {
    $actions->append(new CommissionContributionAction());
});

第二步： 创建这个功能按钮，添加Action类

<?php

namespace App\Admin\Actions\Grid;

use App\Admin\Actions\Pops\Grids\CommissionContributionGrid;
use Dcat\Admin\Grid\RowAction;
use Dcat\Admin\Widgets\Modal;

class CommissionContributionAction extends RowAction
{
    /**
     * @return string
     */
	protected $title = '贡献人详情';

    public function render()
    {
        // 模态框 ID
        $modalId = "contributions-modal-{$this->getKey()}";

        // 创建模态框
        $modal = Modal::make()
            ->lg()
            ->id($modalId)
            ->title('代理人贡献详情')
            ->body(CommissionContributionGrid::make(['agentId'=>$this->row->agent_id, 'date'=>$this->row->date]))
            ->button("<a class='btn btn-sm btn-primary'>$this->title</a>");

        // 将模态框添加到行操作中
        return $modal->render();
    }
}

第三步： 功能按钮点击会触发弹框，第三步就是设置弹框的内容

<?php

namespace App\Admin\Actions\Grid;

use App\Admin\Actions\Pops\Grids\CommissionContributionGrid;
use Dcat\Admin\Grid\RowAction;
use Dcat\Admin\Widgets\Modal;

class CommissionContributionAction extends RowAction
{
    /**
     * @return string
     */
	protected $title = '贡献人详情';

    public function render()
    {
        // 模态框 ID
        $modalId = "contributions-modal-{$this->getKey()}";

        // 创建模态框
        $modal = Modal::make()
            ->lg()
            ->id($modalId)
            ->title('代理人贡献详情')
            ->body(CommissionContributionGrid::make(['agentId'=>$this->row->agent_id, 'date'=>$this->row->date]))
            ->button("<a class='btn btn-sm btn-primary'>$this->title</a>");

        // 将模态框添加到行操作中
        return $modal->render();
    }
}

其他内容

运行 php artisan admin:action 命令，选择选项 2，生成数据表格行操作类

1. 这里生成的代码关键部分没有点出来，跟官方文档不一样
   方法全部删掉，直接添加render渲染
   我尝试过，不删除其他的方法，在添加了ICON的情况下，会出现多个icon显示。
2. 文档中没有说明按钮前的icon如何添加。
3. 官方代码： $form = ResetPasswordForm::make()->payload(['id' => $this->getKey()]);
   这里存在一个很重要的点，payload是在实现懒加载类才有的功能，官方文档没有指出来。也就是说class ResetPassword extends Form implements LazyRenderable必须实现implements LazyRenderable

完整的代码如下：

<?php

namespace App\Admin\Actions\Grid;

use App\Admin\Forms\WithdrawAuditForm;
use Dcat\Admin\Grid\RowAction;
use Dcat\Admin\Widgets\Modal;
class WithdrawAuditAction extends RowAction
{
    protected $title = '审核';

    public function render()
    {
        $form = WithdrawAuditForm::make()->payload(['id' => $this->getKey()]);

        return Modal::make()
            ->lg()
            ->title($this->title)
            ->body($form)
            // 按钮前的icon添加方式
            ->button('<i class="feather icon-check-circle"></i> '.$this->title);
    }

}

批量操作并弹框

注意：与单个弹框不同，这里不能使用懒加载form，否则onShown渲染的时候，找不到ids
找不到ids的原因也很简单，懒加载渲染的表单在onShown执行之后，导致找不到对应的input

<?php

namespace App\Admin\Actions\Batch;

use Dcat\Admin\Grid\BatchAction;
use Dcat\Admin\Widgets\Modal;

class WithdrawAuditBatchAction extends BatchAction
{
    public function render()
    {
        $from = WithdrawAuditBatchForm::make();
        return Modal::make()
            ->title('批量审核提现')
            ->lg()
            ->body($from)
            ->button("批量审核")
            ->onShown(<<<js
var ids = {$this->getSelectedKeysScript()}
$("#ids").val(ids.join(','));
js
            );
    }
}

<?php

namespace App\Admin\Actions\Batch;

use Dcat\Admin\Widgets\Form;

class WithdrawAuditBatchForm extends Form
{

    /**
     * Handle the form request.
     *
     * @param array $input
     *
     * @return mixed
     */
    public function handle(array $input)
    {
        // 处理事件
    }

    public function form()
    {
        $this->radio('status', '状态')->options([
            '200' => '审核通过',
            '300' => '审核拒绝',
        ])->default('200')->required();
        $this->textarea('reason', '其他说明');
        $this->hidden('ids')->attribute('id', 'ids');
    }
}