dcat-admin中实现表格中将批量选中的ids传给form，并弹窗表单批量编辑

Laravel  /  管理员 发布于 1个月前   132

需求：在dcat-admin中通过表格列表实现批量操作功能，比如 批量选中、批量删除、批量编辑等适用场景。这里主要以在列表中多选id形成ids并把多个id传给弹出表单进行同类型数据的批量编辑功能示例代码。

dcat-admin文档（工具表单）：

https://learnku.com/docs/dcat-admin/2.x/tools-form/8125#512b0f

进入步骤：

 

文档中通过 Modal 的 onLoad，在里面用 getSelectedKeysScript 获取到 ids，

然后 js 赋值给 form 的 ids 隐藏域，此时 form 已经渲染完成了，如果要根据 ids，给 form 填充数据，

例如填充订单合计金额，就需要在渲染之前，把 ids 传过去。

点击按钮，首先浏览器的网络，会发起一下请求

http://xxx.com/admin/dcat-api/render?.... 

响应内容就是表单的 html，它会触发对应的 Renderable 类的 render 方法，也就是 

modal->body ($form) 的中 $form 的 render，

然后里面再调用 prepareForm，最后再调用我们定义的工具表单类的 form。

想办法在此之前，给这个 render 请求的 url 拼接上 ids 参数，就可以在 form 中获取到选中的 key。

查看 Modal 的 render

  public function render()
    {
        $this->addLoadRenderableScript();
        $this->addScript();
        if ($this->join) {
            return $this->renderButton().parent::render();
        }
        Admin::html(parent::render());
        return $this->renderButton();
    }

跟踪 addScript，里面调用 getRenderableScript

    protected function getRenderableScript()
    {
        if (! $this->getRenderable()) {
            return;
        }
        $url = $this->renderable->getUrl();
        return <<<JS
target.on('{$this->target}:load', function () {
    Dcat.helpers.asyncRender('{$url}', function (html) {
        body.html(html);
        {$this->loadScript}
        target.trigger('{$this->target}:loaded');
    });
});
JS;
    }

其中 

$url = $this->renderable->getUrl(); 

就是开头说的 render 请求 url，然后我们要用 getSelectedKeysScript 获取到 ids 拼接到后面

    public function getSelectedKeysScript()
    {
        return "Dcat.grid.selected('{$this->parent->getName()}')";
    }

调试时发现，如果页面只有一个 grid 并且没有调用 setName，那么 {$this->parent->getName()} 为空字符串，于是直接调用 Dcat.grid.selected('') 就可以获取到选中的 ids。

最后，创建一个 BatchActionModal 用来重写 getRenderableScript 方法，然后用这个代替原先的 Modal

<?php
/**
 * Desc: 重写modal，以实现获取选中的id数组
 */

namespace App\Admin\Renderable;

use Dcat\Admin\Widgets\Modal;

class BatchActionModal extends Modal {


    protected function getRenderableScript() {
        if (!$this->getRenderable()) {
            return;
        }

        $url = $this->renderable->getUrl();

        return <<<JS


target.on('{$this->target}:load', function () {

    var key = Dcat.grid.selected('')

    Dcat.helpers.asyncRender('{$url}&ids='+key, function (html) {
        body.html(html);

        {$this->loadScript}

        target.trigger('{$this->target}:loaded');
    });
});
JS;
    }
}

使用：

<?php

namespace App\Admin\Actions\Grid\BatchAction;

use App\Admin\Actions\Grid\BatchAction\Forms\BatchEditCompanyForm;
use Dcat\Admin\Admin;
use Dcat\Admin\Grid\BatchAction;
// 注意这里换成修改过的Modal
use App\Admin\Renderable\BatchActionModal as Modal;

class BatchEditCompany extends BatchAction {
    protected $title = '批量修改状态';

    public function render() {

        $form = BatchEditCompanyForm::make();

        return Modal::make($this)
                    ->lg()
                    ->title($this->title)
                    ->body($form)
                    // 因为此处使用了表单异步加载功能，所以一定要用 onLoad 方法
                    // 如果是非异步方式加载表单，则需要改成 onShow 方法
                    ->onLoad($this->getModalScript())
                    ->button($this->title);
    }

    protected function getModalScript() {
        // 弹窗加载后往ids隐藏域写入批量选中的行ID
        return <<<JS
// 获取选中的ID数组
var key = {$this->getSelectedKeysScript()}

$('#ids').val(key);
JS;
    }
}

form 中用 request 取出 ids

<?php

namespace App\Admin\Actions\Grid\BatchAction\Forms;

use Dcat\Admin\Contracts\LazyRenderable;
use Dcat\Admin\Traits\LazyWidget;
use Dcat\Admin\Widgets\Form;

class BatchEditCompanyForm extends Form implements LazyRenderable
{
    use LazyWidget;
    
    public function form() {
        dd(request('ids')); // 1,3,11
        // 这个是用文档中onLoad设置的方法
        // 此时已经提前拿到ids，可以不用onLoad了，用value($ids)就可以在提交时传给handle
        $this->hidden('ids')->attribute('id', 'ids')->value(request('ids')); 
        $this->radio('status', '状态')->options(Company::StatusOptions);
    }
    
    // 处理请求
    public function handle(array $input) {
        //...
    }
}