添加批量操作自定义组件

Author: SmallRuralDog

config/admin.php

@@ -98,7 +98,7 @@
     ],
     //操作日志
     'operation_log' => [
-        'enable' => false,
+        'enable' => true,
         /*
          * Only logging allowed methods in the list
          */

docs/components.md

@@ -284,6 +284,26 @@ $actions->add(ActionButton::make("发货")->order(4)->dialog(function (Dialog $d
 
 这里的dialog展示的是一个表单，当然你可以展示任意组件
 
+### 批量操作组件
+
+#### BatchAction
+
+可用于vue路由导航，异步请求，连接跳转 , Dialog 
+
+```php
+BatchAction::make("加入活动")
+    ->uri('...')//批量操作路径
+    ->handler(BatchAction::HANDLER_REQUEST)//批量操作响应事件类型
+    ->route('...')//vue路由快捷设置方法
+    ->requestMethod('post')//设置request模式请求类型
+    ->message('...')//确认操作提示信息
+    ->beforeEmit('name','data')//请求前出发事件
+    ->successEmit('name','data')//操作成功后触发事件
+    ->afterEmit('name','data')//操作完成后触发事件，失败成功都会触发
+    ->dialog(Dialog)//设置dialog弹窗
+
+```
+
 
 
 ### 工具栏组件
@@ -292,8 +312,6 @@ $actions->add(ActionButton::make("发货")->order(4)->dialog(function (Dialog $d
 
 可用于vue路由导航，异步请求，连接跳转 , Dialog 
 
-
-
 普通演示
 
 ```php

docs/grid.md

@@ -1,3 +1,5 @@
+
+
 # 模型表格
 
 使用[Elememt 的 Table](https://element.eleme.cn/#/zh-CN/component/table)实现，用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
@@ -726,12 +728,57 @@ $actions->deleteAction()->message("确定要删除吗，删除不可恢复？");
 $actions->add(new MyAction())
 ```
 
+## 批量操作
+
+```php
+$grid->batchActions(function (Grid\BatchActions $batchActions) {
+    $batchActions->hideDeleteAction();//隐藏批量删除操作
+    $batchActions->add(...);//添加批量操作
+});
+```
+
+#### 获取选择的keys
+
+获取批量选择的keys
+
+> 注意：获取原理为前段字符串替换，后端无法获取具体值
+
+```php
+$batchActions->getKeys();
+```
+
+可以在设置`url`时使用
+
+```php
+$url = $$batchActions->resource . '/' . $$batchActions->getKeys();
+Grid\BatchActions\BatchAction::make("批量删除")->url($url);
+```
+
+可以在设置`dialog`里的`BaseForm`的`action`时使用
+
+```php
+$grid->batchActions(function (Grid\BatchActions $batchActions) {
+        $batchActions->add(Grid\BatchActions\BatchAction::make("加入活动")->dialog(function (Dialog $dialog) use ($batchActions) {
+            $dialog->slot(function (Content $content) use ($batchActions) {
+            $form = new BaseForm();
+                
+            $actionUrl = route('activityJoin', ['keys' => $batchActions->getKeys()]);
+            $form->action($actionUrl);
+                
+            $form->item('activity_id', '活动');
+            $content->row($form);
+        });
+    }));
+});
+```
+
 
 
 ## 工具栏
 
 ```php
 $grid->toolbars(function (Grid\Toolbars $toolbars) {
+
 	$toolbars->hideCreateButton();
     $toolbars->createButton()->content("添加商品");//获取创建组件实例，修改属性
 });

package-lock.json

@@ -8,7 +8,7 @@
         "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
         "prod": "npm run production",
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "start":"concurrently -r \"npm:watch*\""  
+        "start": "concurrently -r \"npm:watch*\""
     },
     "devDependencies": {
         "@chenfengyuan/vue-qrcode": "^1.0.2",

package.json

@@ -112,7 +112,8 @@ __webpack_require__.r(__webpack_exports__);
     ItemIf: _ItemIf__WEBPACK_IMPORTED_MODULE_1__["default"]
   },
   props: {
-    attrs: Object
+    attrs: Object,
+    keys: String
   },
   data: function data() {
     return {
@@ -124,6 +125,12 @@ __webpack_require__.r(__webpack_exports__);
   mounted: function mounted() {
     this.formData = this._.cloneDeep(this.attrs.formItemsValue);
   },
+  computed: {
+    actionUrl: function actionUrl() {
+      var keys = this.$store.getters.thisPage.grids.selectionKeys;
+      return this._.replace(this.attrs.action, "selectionKeys", keys);
+    }
+  },
   methods: {
     submitForm: function submitForm(formName) {
       var _this = this;
@@ -132,7 +139,7 @@ __webpack_require__.r(__webpack_exports__);
         if (valid) {
           _this.loading = true;
 
-          _this.$http.post(_this.attrs.action, _this.formData).then(function (_ref) {
+          _this.$http.post(_this.actionUrl, _this.formData).then(function (_ref) {
             var data = _ref.data,
                 code = _ref.code,
                 message = _ref.message;