动作基本使用

开发者通过 Action 动作类可以非常方便的开发出一个含有特定功能的操作,可以非常方便的让用户与服务器产生交互。

例如,页面上需要一个按钮,用户点击之后可以向服务器发起请求,通过弹窗展示当前登录用户的信息,那么这个功能按钮就可以用 Action 来开发。

示例

下面我们就开始开发一个用于查看登录用户信息的按钮:

使用命令创建Action类

首先需要先创建 Action 类,运行命令

  1. php artisan admin:action

运行成功之后会看到命令窗口出现如下信息,让开发者选择一个 Action 类的类型,这里我们输入 0 就行

{tip} default类型的动作类,可以用在页面的任意位置。

  1. Which type of action would you like to make?:
  2. [0] default
  3. [1] grid-batch
  4. [2] grid-row
  5. [3] grid-tool
  6. [4] form-tool
  7. [5] show-tool
  8. [6] tree-tool
  9. > 0 # 输入 0

接着输入 Action 类名称,这里需要输入 大驼峰 风格的英文字母

  1. Please enter a name of action class:
  2. > ShowCurrentAdminUser

类名输入完成之后会出现以下信息让开发者输入类的命名空间,默认的命名空间是 App\Admin\Actions,这里我们直接按回车跳过就行了

  1. Please enter the namespace of action class [App\Admin\Actions]:
  2. >

这样一个 Action 类就创建完成了,刚刚创建的类路径是 app/Admin/Actions/ShowCurrentAdminUser.php

使用

修改 Action 类如下

{tip} 如果你的动作类中需要通过构造方法传递参数,则一定要给构造方法的所有参数都设置一个默认值!

  1. <?php
  2. namespace App\Admin\Actions;
  3. use Dcat\Admin\Admin;
  4. use Dcat\Admin\Widgets\Table;
  5. use Dcat\Admin\Actions\Action;
  6. use Dcat\Admin\Actions\Response;
  7. use Dcat\Admin\Traits\HasPermissions;
  8. use Illuminate\Contracts\Auth\Authenticatable;
  9. use Illuminate\Database\Eloquent\Model;
  10. use Illuminate\Http\Request;
  11. class ShowCurrentAdminUser extends Action
  12. {
  13. /**
  14. * 按钮标题
  15. *
  16. * @var string
  17. */
  18. protected $title = '个人信息';
  19. /**
  20. * @var string
  21. */
  22. protected $modalId = 'show-current-user';
  23. /**
  24. * 处理当前动作的请求接口,如果不需要请直接删除
  25. *
  26. * @param Request $request
  27. *
  28. * @return Response
  29. */
  30. public function handle(Request $request)
  31. {
  32. // 获取当前登录用户模型
  33. $user = Admin::user();
  34. // 这里我们用表格展示模型数据
  35. $table = Table::make($user->toArray());
  36. return $this->response()
  37. ->success('查询成功')
  38. ->html($table);
  39. }
  40. /**
  41. * 处理响应的HTML字符串,附加到弹窗节点中
  42. *
  43. * @return string
  44. */
  45. protected function handleHtmlResponse()
  46. {
  47. return <<<'JS'
  48. function (target, html, data) {
  49. var $modal = $(target.data('target'));
  50. $modal.find('.modal-body').html(html)
  51. $modal.modal('show')
  52. }
  53. JS;
  54. }
  55. /**
  56. * 设置HTML标签的属性
  57. *
  58. * @return void
  59. */
  60. protected function setupHtmlAttributes()
  61. {
  62. // 添加class
  63. $this->addHtmlClass('btn btn-primary');
  64. // 保存弹窗的ID
  65. $this->setHtmlAttribute('data-target', '#'.$this->modalId);
  66. parent::setupHtmlAttributes();
  67. }
  68. /**
  69. * 设置按钮的HTML,这里我们需要附加上弹窗的HTML
  70. *
  71. * @return string|void
  72. */
  73. public function html()
  74. {
  75. // 按钮的html
  76. $html = parent::html();
  77. return <<<HTML
  78. {$html}
  79. <div class="modal fade" id="{$this->modalId}" tabindex="-1" role="dialog">
  80. <div class="modal-dialog modal-lg" role="document">
  81. <div class="modal-content">
  82. <div class="modal-header">
  83. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  84. <h4 class="modal-title">{$this->title()}</h4>
  85. </div>
  86. <div class="modal-body"></div>
  87. </div>
  88. </div>
  89. </div>
  90. HTML;
  91. }
  92. /**
  93. * 确认弹窗信息,如不需要可以删除此方法
  94. *
  95. * @return string|void
  96. */
  97. public function confirm()
  98. {
  99. // return ['Confirm?', 'contents'];
  100. }
  101. /**
  102. * 动作权限判断,返回false则表示无权限,如果不需要可以删除此方法
  103. *
  104. * @param Model|Authenticatable|HasPermissions|null $user
  105. *
  106. * @return bool
  107. */
  108. protected function authorize($user): bool
  109. {
  110. return true;
  111. }
  112. /**
  113. * 通过这个方法可以设置动作发起请求时需要附带的参数,如果不需要可以删除此方法
  114. *
  115. * @return array
  116. */
  117. protected function parameters()
  118. {
  119. return [];
  120. }
  121. }

修改完之后就可以开始使用了

  1. <?php
  2. use App\Admin\Actions\ShowCurrentAdminUser;
  3. class IndexController
  4. {
  5. public function index(Content $content)
  6. {
  7. return $content->body(ShowCurrentAdminUser::make());
  8. }
  9. }

效果如下

动作基本使用 - 图1

属性

Dcat\Admin\Actions\Action 类可用属性说明

属性名 类型 默认值 描述
title string 标题
selectorPrefix public string .admin-action- 目标元素的Css选择器
method string POST 与服务器交互的请求方法
event string click 目标元素绑定的事件,默认为点击事件
disabled bool false 是否渲染动作元素,设置true则不渲染
usingHandler bool true 当此属性设置为false,则无论Action中是否包含handle方法都不会向服务器发起请求

方法

Dcat\Admin\Actions\Action 类方法说明

创建实例 (make)

此方法是一个静态方法,用于实例化动作类

  1. $action = MyAction::make($param1, $param2...);

处理请求 (handle)

Action类中包含此方法之时,目标元素会被绑定通过event属性设置的事件(默认为click)。如果事件被触发,则会向服务器发起请求,而handle方法则可以处理并响应此请求。

{tip} 如果没有此方法,则目标元素不会被绑定事件。

响应 (response)

此方法用于获取Response对象,然后响应前端发起的请求,此方法仅在handle方法内有效。

  1. <?php
  2. use Dcat\Admin\Actions\Action;
  3. use Illuminate\Http\Request;
  4. class MyAction extends Action
  5. {
  6. public function handle(Request $request)
  7. {
  8. return $this->response()->success('成功!');
  9. }
  10. }

展示成功信息

此方法接收一个string类型参数

  1. $this->response()->success('成功!');

展示错误信息

此方法接收一个string类型参数

  1. $this->response()->error('出错了!');

展示警告信息

此方法接收一个string类型参数

  1. $this->response()->warning('警告');

跳转

此方法接收一个string类型参数,可以与successerrorwarning等方法同时使用

  1. $this->response()->redirect('auth/users');

跳转 (location)

此方法接收一个string类型参数

  1. $this->response()->location('auth/users');

刷新当前页面

此方法可以与successerrorwarning等方法同时使用

  1. $this->response()->refresh();

下载

此方法接收一个string类型参数

  1. $this->response()->download('auth/users?_export_=1');

返回HTML

此方法可接收一个stringRenderableHtmlable类型参数,可以与successerrorwarning等方法同时使用

{tip} 响应的HTML字符默认会被置入动作按钮元素上,如果需要自己控制,则覆写handleHtmlResponse方法即可。

  1. $this->response()->html('<a>a标签</a>');
  2. $this->response()->html(view('...'));

执行JS代码

此方法接收一个string类型参数,可以与successerrorwarning等方法同时使用

  1. $this->response()->script(
  2. <<<JS
  3. console.log('response', response, target);
  4. JS
  5. );

设置请求数据 (parameters)

通过这个方法可以设置动作发起请求时需要附带的参数

  1. <?php
  2. use Dcat\Admin\Actions\Action;
  3. use Illuminate\Http\Request;
  4. class MyAction extends Action
  5. {
  6. public function handle(Request $request)
  7. {
  8. // 接收参数
  9. $key1 = $request->get('key1');
  10. $key2 = $request->get('key2');
  11. return $this->response()->success('成功!');
  12. }
  13. public function parameters()
  14. {
  15. return [
  16. 'key1' => 'value1',
  17. 'key2' => 'value2',
  18. ];
  19. }
  20. }

确认弹窗 (confirm)

设置确认信息,此方法要求返回一个string类型参数。

当此方法返回值不为空时会加入确认窗功能,当事件被触发时自动弹出确认框,点击确认后才会进行下一步操作。

  1. public function confirm()
  2. {
  3. return '你确定要删除此行内容吗?';
  4. }

显示弹窗标题和内容

  1. public function confirm()
  2. {
  3. return ['你确定要删除此行内容吗?', '弹窗内容'];
  4. }

发起请求之前执行的JS代码 (actionScript)

设置动作执行的前置js代码,当按钮绑定的事件被触发后,发起请求之前会执行通过此方法设置的js代码,此方法要求返回一个js的匿名函数。

js匿名函数接收以下三个参数:

  • data object 需要传递给接口的数据对象
  • target object 动作按钮的jQuery对象
  • action object 动作的管理对象
  1. protected function actionScript()
  2. {
  3. return <<<JS
  4. function (data, target, action) {
  5. console.log('发起请求之前', data, target, action);
  6. // return false; 在这里return false可以终止执行后面的操作
  7. // 更改传递到接口的主键值
  8. action.options.key = 123;
  9. }
  10. JS
  11. }

处理服务器响应的HTML代码 (handleHtmlResponse)

处理服务器响应的HTML代码,此方法要求返回一个js匿名函数。

  1. protected function handleHtmlResponse()
  2. {
  3. return <<<'JS'
  4. function (target, html, data) {
  5. // target 参数是动作按钮的JQ对象
  6. // html 参数是接口返回HTML字符串
  7. // data 参数是接口返回的完整数据的json对象
  8. target.html(html);
  9. }
  10. JS;
  11. }

权限 (authorize)

此方法用于判断登录用户的操作权限,默认返回true

  1. protected function authorize($user): bool
  2. {
  3. return $user->can('do-action');
  4. }

无权限响应 (failedAuthorization)

此方法用于设置鉴权失败的响应内容,如果需要则可覆写此方法

  1. public function failedAuthorization()
  2. {
  3. return $this->response()->error(__('admin.deny'));
  4. }

隐藏或显示 (disable)

设置显示或隐藏此动作

  1. // 隐藏
  2. MyAction::make()->disable();
  3. // 显示
  4. MyAction::make()->disable(false);

判断是否显示 (allowed)

判断动作是否允许显示

  1. if (MyAction::make()->allowed()) {
  2. ...
  3. }

设置主键 (setKey)

设置数据主键

  1. $id = ...;
  2. MyAction::make()->setKey($id);

获取主键值 (getKey)

获取数据主键,此方法在handle方法内也同样可用

  1. <?php
  2. use Dcat\Admin\Actions\Action;
  3. use Illuminate\Http\Request;
  4. class MyAction extends Action
  5. {
  6. public function handle(Request $request)
  7. {
  8. $id = $this->getKey();
  9. ...
  10. return $this->response()->success('成功!');
  11. }
  12. public function title()
  13. {
  14. return "标题 {$this->key()}";
  15. }
  16. }

获取目标元素样式 (getElementClass)

获取动作目标元素(按钮)的class

  1. $class = MyAction::make()->getElementClass();

获取目标元素的Css选择器 (selector)

获取动作目标元素(按钮)的CSS选择器

  1. $selector = MyAction::make()->selector();
  2. Admin::script(
  3. <<<JS
  4. $('$selector').click(...);
  5. JS
  6. );

追加样式 (addHtmlClass)

追加获取动作目标元素(按钮)的class

  1. MyAction::make()->addHtmlClass('btn btn-primary');
  2. MyAction::make()->addHtmlClass(['btn', 'btn-primary']);

设置目标元素的HTML (html)

此方法用于设置动作目标元素的HTML代码,如有需要可以覆写

  1. protected function html()
  2. {
  3. return <<<HTML
  4. <a {$this->formatHtmlAttributes()}>{$this->title()}</a>
  5. HTML;
  6. }

添加JS代码 (script)

此方法用于在render方法执行完毕之前添加JS代码

  1. protected function script()
  2. {
  3. return <<<JS
  4. console.log('...')
  5. JS;
  6. }

设置目标元素的HTML属性 (setHtmlAttribute)

设置目标元素的HTML标签属性

  1. MyAction::make()->setHtmlAttribute('name', $value);
  2. // 批量设置
  3. MyAction::make()->setHtmlAttribute(['name' => $value]);