添加Grid toolbars 自定义

Author: SmallRuralDog

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=16f687ed6c6f1fb127ff",
+    "/app.js": "/app.js?id=7fafe2e9073cecc0d058",
     "/manifest.js": "/manifest.js?id=d9708e48a6c10ccee4bb",
     "/vendor.js": "/vendor.js?id=f4679ac178c0e413cb28"
 }

public/mix-manifest.json

@@ -82,4 +82,8 @@ Vue.component('MenuItem', MenuItem);
 import EditAction from './components/widgets/Actions/EditAction'
 import DeleteAction from './components/widgets/Actions/DeleteAction'
 Vue.component('EditAction', EditAction);
-Vue.component('DeleteAction', DeleteAction);
+Vue.component('DeleteAction', DeleteAction);
+
+//Tools
+import GridCreateButton from './components/widgets/Tools/Create'
+Vue.component('GridCreateButton', GridCreateButton);

resources/js/components.js

@@ -0,0 +1,39 @@
+<template>
+  <div class="grid-actions">
+    <template v-for="action in action_list">
+      <span :key="action.componentName">
+        <component
+          :is="action.componentName"
+          :scope="{ row: scope.data, colum: {} }"
+          :action="action"
+          :key_name="key_name"
+        />
+      </span>
+    </template>
+  </div>
+</template>
+<script>
+import Action from "./Action";
+export default {
+  components: {
+    Action
+  },
+  props: {
+    key_name: String,
+    action_list: Array,
+    scope: Object
+  },
+  mounted() {},
+  computed: {}
+};
+</script>
+<style lang="scss">
+.grid-actions {
+  .el-button + .el-button {
+    margin-left: 0;
+  }
+  span + span {
+    margin-left: 10px;
+  }
+}
+</style>

resources/js/components/grid/Actions/TreeAction.vue

@@ -25,14 +25,11 @@
           </div>
         </div>
         <div class="grid-top-container-right">
-          <router-link
-            :to="path + '/create'"
-            v-if="!attrs.attributes.hideCreateButton"
-          >
-            <el-button type="primary" class="mr-10" icon="el-icon-plus"
-              >新建</el-button
-            >
-          </router-link>
+          <component
+            v-for="(component, index) in attrs.toolbars.right"
+            :key="component.componentName + index"
+            :is="component.componentName"
+          />
           <el-divider
             direction="vertical"
             v-if="!attrs.attributes.hideCreateButton"
@@ -74,7 +71,6 @@
           </div>
         </div>
       </div>
-
       <div>
         <el-table
           v-loading="loading"
@@ -135,7 +131,10 @@
               </template>
             </el-table-column>
           </template>
-          <el-table-column v-if="attrs.actions && !attrs.actions.hide" label="操作">
+          <el-table-column
+            v-if="attrs.actions && !attrs.actions.hide"
+            label="操作"
+          >
             <template slot="header"></template>
             <template slot-scope="scope">
               <Actions
@@ -257,11 +256,6 @@ export default {
     onPageCurrentChange(page) {
       this.page = page;
       this.getData();
-    },
-    onEnt(event) {
-      if (event.keyCode === 13) {
-        this.getData();
-      }
     }
   },
   computed: {
@@ -295,7 +289,7 @@ export default {
     padding: 8px;
     display: flex;
     justify-content: space-between;
-    border-bottom: 1px solid #ebeef5;
+    //border-bottom: 1px solid #ebeef5;
     .grid-top-container-left {
       display: flex;
       align-items: center;

resources/js/components/grid/Table.vue

@@ -85,7 +85,7 @@
 </template>
 <script>
 import TreeColumnDisplay from "./TreeColumnDisplay";
-import Actions from "./Actions/Index";
+import Actions from "./Actions/TreeAction";
 export default {
   components: {
     TreeColumnDisplay,

resources/js/components/grid/Tree.vue

@@ -21,6 +21,8 @@ export default {
   },
   methods: {
     onHandle() {
+        console.log(this.scope);
+        
       this.$router.push(this.$route.path + "/" + this.key + "/edit");
     }
   },

resources/js/components/widgets/Actions/EditAction.vue

@@ -0,0 +1,8 @@
+<template>
+  <router-link :to="$route.path + '/create'">
+    <el-button type="primary" class="mr-10" icon="el-icon-plus">新建</el-button>
+  </router-link>
+</template>
+<script>
+export default {};
+</script>

resources/js/components/widgets/Tools/Create.vue

@@ -10,13 +10,14 @@
 use SmallRuralDog\Admin\Components\Component;
 use SmallRuralDog\Admin\Grid\Actions;
 use SmallRuralDog\Admin\Grid\Column;
-use SmallRuralDog\Admin\Grid\Concerns\HasAttributes;
 use SmallRuralDog\Admin\Grid\Concerns\HasDefaultSort;
 use SmallRuralDog\Admin\Grid\Concerns\HasGridAttributes;
 use SmallRuralDog\Admin\Grid\Concerns\HasPageAttributes;
 use SmallRuralDog\Admin\Grid\Concerns\HasQuickSearch;
 use SmallRuralDog\Admin\Grid\Model;
 use SmallRuralDog\Admin\Grid\Table\Attributes;
+use SmallRuralDog\Admin\Grid\Toolbars;
+
 
 class Grid extends Component implements \JsonSerializable
 {
@@ -44,6 +45,8 @@ class Grid extends Component implements \JsonSerializable
 
     private $actions;
 
+    private $toolbars;
+
 
     public function __construct(Eloquent $model, Closure $builder = null)
     {
@@ -59,6 +62,7 @@ public function __construct(Eloquent $model, Closure $builder = null)
         $this->isGetData = request('get_data') == "true";
 
         $this->actions = new Actions();
+        $this->toolbars = new Toolbars();
 
     }
 
@@ -172,6 +176,17 @@ protected function applyQuery()
         $this->applyQuickSearch();
     }
 
+    /**
+     * 自定义toolbars
+     * @param $closure
+     * @return $this
+     */
+    public function toolbars($closure)
+    {
+        call_user_func($closure, $this->toolbars);
+        return $this;
+    }
+
     /**
      * 自定义行操作
      * @param $closure
@@ -236,6 +251,7 @@ public function jsonSerialize()
             $viewData['perPage'] = $this->perPage;
             $viewData['pageBackground'] = $this->pageBackground;
             $viewData['actions'] = $this->actions->builderActions();
+            $viewData['toolbars'] = $this->toolbars->builderData();
             $viewData['quickSearch'] = $this->quickSearch;
             return $viewData;
         }

src/Grid.php

@@ -135,16 +135,6 @@ public function rowKey($rowKey)
         return $this;
     }
 
-    /**
-     * 隐藏新建按钮
-     * @param bool $hide
-     * @return $this
-     */
-    public function hideCreateButton(bool $hide = true)
-    {
-        $this->attributes->hideCreateButton = $hide;
-        return $this;
-    }
 
     /**
      * 开启拖拽排序