添加 VueRouteAction 组件

添加 Action 排序属性
修改 Content 组件默认className
修复 RadioGroup

Author: SmallRuralDog

docs/components.md

@@ -126,6 +126,39 @@ Avatar::make();
 ```php
 Icon::make()
 ```
+
+
+### 操作组件
+
+#### 导航操作
+
+用于跳转到其他页面的操作
+
+```php
+VueRouteAction::make()
+    ->order(3) //排序 越大越靠前
+    ->name("公众号管理") //操作名称
+    ->icon("icon-class-name")//图标
+    ->path("WeChat/manage/{app_id}")//vue路由路径,{xxx}会被自动替换成当前行的对应值,支持 ?x=x 参数 
+    ->httpPath("http://www.baodu.com")//打开新的连接
+//调用代码
+$grid->actions(function (Grid\Actions $actions) {
+      $actions->add(...);
+});
+```
+
+### 工具栏组件
+
+#### VueRouteButton
+
+用于跳转到其他页面的操作
+
+```php
+VueRouteButton::make("/adv/loc", "广告位管理")->type("text")
+```
+
+
+
 ## 表单组件
 
 ### Radio 单选框
@@ -137,7 +170,7 @@ Icon::make()
 
 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择
 
-#### 基础用法
+基础用法
 
 模型导入`ModelTree`
 
@@ -178,7 +211,7 @@ $form->item("goods_class_path", "产品分类")->displayComponent(function () {
 }),
 ```
 
-#### 属性
+属性
 
 显示为面板模式
 
@@ -202,68 +235,80 @@ $form->item('avatar', '头像')->displayComponent(function(){
     return Upload::make()->pictureCard()->avatar()->path('avatar')->uniqueName();
 })
 ```
-#### 上传地址
+上传地址
+
 自定义上传地址
 ```php
  Upload::make()->action("http://xxxx")
 ```
-#### 文件URL前缀
+文件URL前缀
+
 如果数据库保存的是相对地址，则这个就是它的URL前面部分。默认为disk的路径
 ```php
  Upload::make()->host("http://xxxx")
 ```
-#### 支持多文件
+支持多文件
+
 支持多个文件上传，数据格式为数组
 ```php
  Upload::make()->multiple();
 //如果是一对多情况下，并且是对象数组，需要指定文件组件,文件路径字段
  Upload::make()->multiple(true,"keyName","valueName");
 ```
-#### 上传附加数据
+上传附加数据
+
 ```php
  Upload::make()->data(['key'=>'value','key_2'=>'value'])
 ```
-#### 保存目录
+保存目录
+
 ```php
  Upload::make()->path("path_name")
 ```
-#### 自动生成文件名
+自动生成文件名
+
 默认为上传的文件名
 ```php
  Upload::make()->uniqueName()
 ```
-#### 拖拽上传
+拖拽上传
 
 ```php
  Upload::make()->drag()
 ```
-#### 文件类型
+文件类型
+
 接受上传的[文件类型](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)
 ```php
  Upload::make()->accept("xx")
 ```
-#### 文件个数
+文件个数
+
 默认为一个
 ```php
  Upload::make()->limit(10)
 ```
-#### 禁用
+禁用
+
 ```php
  Upload::make()->disabled()
 ```
-#### 组件类型
+组件类型
+
 支持 `image` `avatar` `file`
 ```php
  Upload::make()->image()
  Upload::make()->avatar()
  Upload::make()->file()
 ```
-#### 组件大小
+组件大小
+
 组件item的高宽，默认 `100x100`
 ```php
  Upload::make()->width(150)
  Upload::make()->height(120)
 ```
 ### Rate 评分
 ### ColorPicker 颜色选择器
-### Transfer 穿梭框
+### Transfer 穿梭框
+

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=5406de530ea0e352a744",
+    "/app.js": "/app.js?id=1be6ff1deacba4b06103",
     "/manifest.js": "/manifest.js?id=d9708e48a6c10ccee4bb",
     "/vendor.js": "/vendor.js?id=f4679ac178c0e413cb28"
 }

public/mix-manifest.json

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

resources/js/components.js

@@ -455,7 +455,7 @@ $header-bar-height: 55px;
   margin-top: $header-bar-height;
 }
 .layout-content-main {
-  margin: 15px;
+  margin: 0px;
 
   .layout-page-header {
     margin: -15px -15px 0;

resources/js/components/Root.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="grid-actions">
-    <template v-for="action in action_list">
-      <span :key="action.componentName">
+    <template v-for="(action, index) in order_action_list">
+      <span :key="action.componentName + index">
         <component
           :is="action.componentName"
           :scope="scope"
@@ -24,7 +24,11 @@ export default {
     scope: Object
   },
   mounted() {},
-  computed: {}
+  computed: {
+    order_action_list(){
+      return window._.orderBy(this.action_list,['order'],['desc'])
+    }
+  }
 };
 </script>
 <style lang="scss">

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

@@ -21,8 +21,6 @@ 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,41 @@
+<template>
+  <el-button type="text" :icon="action.icon" @click="onHandle">{{
+    action.name
+  }}</el-button>
+</template>
+<script>
+export default {
+  props: {
+    scope: Object,
+    action: Object,
+    key_name: String
+  },
+  methods: {
+    onHandle() {
+      if (this.action.httpPath) {
+      } else {
+        //this.$router.push(this.path);
+      }
+    }
+  },
+  computed: {
+    path() {
+      let path = this.action.path;
+      this._.forEach(this.row, (value, key) => {
+        path = this._.replace(path, "{" + key + "}", value);
+      });
+      return path;
+    },
+    http_path() {},
+    colum() {
+      return this.scope.colum;
+    },
+    row() {
+      return this.scope.row;
+    },
+    key() {
+      return this.scope.row[this.key_name];
+    }
+  }
+};
+</script>

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

@@ -1,28 +1,35 @@
 <template>
-  <el-radio-group v-model="vm" @change="onChange" :style="attrs.style" :class="attrs.className">
+  <el-radio-group
+    v-model="vm"
+    :style="attrs.style"
+    :class="attrs.className"
+    @change="onChange"
+  >
     <el-radio
+      v-for="(radio, index) in attrs.options"
       :style="radio.style"
       :class="radio.className"
-      v-for="(radio,index) in attrs.options"
       :key="index"
       :label="radio.label"
       :disabled="radio.disabled"
       :border="radio.border"
       :size="radio.size"
-    >{{radio.title}}</el-radio>
+      >{{ radio.title }}</el-radio
+    >
   </el-radio-group>
 </template>
 <script>
 export default {
   props: {
     attrs: Object,
+    form_data: Object,
     value: {
       default: null
     }
   },
   data() {
     return {
-      vm: ""
+      vm: this._.clone(this.value)
     };
   },
   model: {
@@ -35,4 +42,4 @@ export default {
     }
   }
 };
-</script>
+</script>

resources/js/components/widgets/RadioGroup.vue

@@ -23,7 +23,9 @@ body {
 .mt-5{
     margin-top: 5px;
 }
-
+.m-10{
+    margin: 10px;
+}
 .ml-10 {
     margin-left: 10px;
 }
@@ -40,6 +42,9 @@ body {
     margin-top: 10px;
 }
 
+.m-15{
+    margin: 15px;
+}
 .mb-15 {
     margin-bottom: 15px;
 }