让DcatAdmin再放光芒系列 - 弹出确认框得到反馈后再弹出Modal的实现

admin

开篇

在 Dcat-admin 日常开发中，为了防止误操作，经常需要询问用户，得到反馈后，再进行下一步操作。下一步操用到Modal 模态框场景，比方说：实现某些任务，弹出modal，让用户了解任务的执行正常。

效果截图

** 插件扩展包安装效果截图**

实现代码

创建一个动作类

<?php

namespace App\Admin\Actions;

use Dcat\Admin\Admin;
use Dcat\Admin\Widgets\Table;
use Dcat\Admin\Widgets\Modal;
use Dcat\Admin\Widgets\Card;
use Dcat\Admin\Actions\Action;
use Dcat\Admin\Actions\Response;
use Dcat\Admin\Traits\HasPermissions;
use Illuminate\Contracts\Auth\Authenticatable;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Http\Request;
use App\Admin\Renderable\UserTable;
class ShowCurrentAdminUser extends Action
{
    /**
     * 按钮标题
     *
     * @var string
     */
    protected $title = '个人信息';

    /**
     * @var string
     */
    protected $modalId = 'show-current-user';
	
    // 设置模态框ID
	public function modalId($id){
	  $this->modalId = $id;
	  return $this;
	}
    /**
     * 处理当前动作的请求接口，如果不需要请直接删除
     *
     * @param Request $request
     *
     * @return Response
     */
    public function handle(Request $request)
    {
        return $this->response()
            ->success('查询成功')
            ->html('-');
    }

    /**
     * 处理响应的HTML字符串，附加到弹窗节点中
     *
     * @return string
     */
    protected function handleHtmlResponse()
    {
        return <<<'JS'
function (target, html, data) {
    var $modal = $(target.data('target'));
    // $modal.find('.modal-body').html(html)
    $modal.modal('show')
} 
JS;
    }

    /**
     * 设置HTML标签的属性
     *
     * @return void
     */
    protected function setupHtmlAttributes()
    {
        // 添加class
        $this->addHtmlClass('btn btn-primary');

        // 保存弹窗的ID
        $this->setHtmlAttribute('data-target', '#'.$this->modalId);

        parent::setupHtmlAttributes();
    }


    protected function userTable(){
        $modal = Modal::make();
        $modal->lg();
        $modal->title('这是一个异步弹窗');
        $modal->id($this->modalId);
        $modal->body(UserTable::make()->payload(['id'=>1]));
        return $modal->render();
    }

    /**
     * 设置按钮的HTML，这里我们需要附加上弹窗的HTML
     *
     * @return string|void
     */
    public function html()
    {
        // 按钮的html
        $html = parent::html();
        return $html.$this->userTable();
    }

    /**
     * 确认弹窗信息，如不需要可以删除此方法
     *
     * @return string|void
     */
    public function confirm()
    {
        return ['你确认要查看吗?', '查看用户更多信息'];
    }

    /**
     * 动作权限判断，返回false则表示无权限，如果不需要可以删除此方法
     *
     * @param Model|Authenticatable|HasPermissions|null $user
     *
     * @return bool
     */
    protected function authorize($user): bool
    {
        return true;
    }

    /**
     * 通过这个方法可以设置动作发起请求时需要附带的参数，如果不需要可以删除此方法
     *
     * @return array
     */
    protected function parameters()
    {
        return [];
    }
}

使用动作

public function index(Content $content)
{
  return $content->body(ShowCurrentAdminUser::make()->setKey('12'));
}

关键点

在 html() 中追加一个modal ,modal->body( )中，可以是其它任意组件，或异步加载组件。

 public function html()
    {
        // 按钮的html
        $html = parent::html();
        return $html.$this->userTable();
    }

在数据列表中使用

// 必须要设置 modalid 且ID不能在页面上有重复
$actions->prepend(ShowCurrentAdminUser::make()->modalId($actions->row->id)->setKey('你要传的数据'));

dcat-admin 并未停止不前，plus版持续更新保持活力

dcat-plus admin （plus版）沿用 dcat-admn 最新代码，并让dcat-admin 保持活力。已支持到Laravel11，并新增多个组件。

dcat-admin（plus版）未来属于集体

期待您的参与，让 dcat-admin 成为国内最开放，最好用的后台极速开发框架

加入微信技术交流群

加wx:Q3664839 拉你入群