重构Action

Author: SmallRuralDog

docs/grid.md

@@ -344,12 +344,26 @@ $column->displayComponent(Tag::make()->size("mini")->type("info"));
 可以在后端自定义当前列的值
 - `$row`当前数据行的所有值
 - `$value`当前列的值
+
+支持HTML标签
+
 ```php
 $grid->column('name')->customValue(function ($row, $value) {
     return $value;
 })
 ```
+### 前缀/后缀
+
+会在值的前后以字符串形式拼接
+
+```
+grid->column('name')->itemSuffix("折")
+```
+
+
+
 ### 树形列表
+
 >用清晰的层级结构展示信息，可展开或折叠。
 
 此功能必须满足以下几点才能正常使用，暂不支持分页，所以不建议展示大量的数据，后期会加入异步加载

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=d54eb76abc4d506cfc53",
+    "/app.js": "/app.js?id=3519231aa2ed59351d3b",
     "/manifest.js": "/manifest.js?id=d9708e48a6c10ccee4bb",
     "/vendor.js": "/vendor.js?id=f4679ac178c0e413cb28"
 }

public/mix-manifest.json

@@ -75,3 +75,11 @@ Vue.component('Icon', Icon);
 
 import MenuItem from './components/layout/MenuItem'
 Vue.component('MenuItem', MenuItem);
+
+
+
+//Actions
+import EditAction from './components/widgets/Actions/EditAction'
+import DeleteAction from './components/widgets/Actions/DeleteAction'
+Vue.component('EditAction', EditAction);
+Vue.component('DeleteAction', DeleteAction);

resources/js/components.js

@@ -1,8 +1,13 @@
 <template>
   <div class="grid-actions">
     <template v-for="action in action_list">
-      <span :key="action.actionKey">
-        <Action :scope="scope" :action="action" :key_name="key_name" />
+      <span :key="action.componentName">
+        <component
+          :is="action.componentName"
+          :scope="scope"
+          :action="action"
+          :key_name="key_name"
+        />
       </span>
     </template>
   </div>
@@ -18,21 +23,17 @@ export default {
     action_list: Array,
     scope: Object
   },
-  mounted() {
-
-  },
-  computed: {
-
-  }
+  mounted() {},
+  computed: {}
 };
 </script>
 <style lang="scss">
 .grid-actions {
   .el-button + .el-button {
     margin-left: 0;
   }
-  span + span{
+  span + span {
     margin-left: 10px;
   }
 }
-</style>
+</style>

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

@@ -135,8 +135,7 @@
               </template>
             </el-table-column>
           </template>
-          <el-table-column v-if="!attrs.actions.hide" label="操作">
-            
+          <el-table-column v-if="attrs.actions && !attrs.actions.hide" label="操作">
             <template slot="header"></template>
             <template slot-scope="scope">
               <Actions

resources/js/components/grid/Table.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-popconfirm
+    placement="top"
+    title="确定要删除此内容？"
+    @onConfirm="onHandle"
+  >
+    <el-button
+      slot="reference"
+      type="text"
+      :icon="action.icon"
+      :loading="loading"
+      class="action-button"
+      >删除</el-button
+    >
+  </el-popconfirm>
+</template>
+<script>
+export default {
+  props: {
+    scope: Object,
+    action: Object,
+    key_name: String
+  },
+  data() {
+    return {
+      loading: false
+    };
+  },
+  methods: {
+    onHandle() {
+      this.$http
+        .delete(this.$route.path + "/" + this.key)
+        .then(({ code }) => {
+          if (code === 200) this.$bus.emit("tableReload");
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    }
+  },
+  computed: {
+    colum() {
+      return this.scope.colum;
+    },
+    row() {
+      return this.scope.row;
+    },
+    key() {
+      return this.scope.row[this.key_name];
+    }
+  }
+};
+</script>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,40 @@
+<template>
+  <el-button
+    type="text"
+    :icon="action.icon"
+    :loading="loading"
+    @click="onHandle"
+    >编辑</el-button
+  >
+</template>
+<script>
+export default {
+  props: {
+    scope: Object,
+    action: Object,
+    key_name: String
+  },
+  data() {
+    return {
+      loading: false
+    };
+  },
+  methods: {
+    onHandle() {
+      this.$router.push(this.$route.path + "/" + this.key + "/edit");
+    }
+  },
+  computed: {
+    colum() {
+      return this.scope.colum;
+    },
+    row() {
+      return this.scope.row;
+    },
+    key() {
+      return this.scope.row[this.key_name];
+    }
+  }
+};
+</script>
+<style lang="scss" scoped></style>

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

@@ -1,9 +1,9 @@
 <template>
-  <span v-if="componentName == 'default'">{{ value }}</span>
+  <span v-if="componentName == 'default'" v-html="selfValue"></span>
   <component
     v-else
     :is="componentName"
-    :value="value"
+    :value="selfValue"
     :attrs="attrs"
     :row="row"
     :column_value="column_value"
@@ -25,6 +25,9 @@ export default {
     attrs() {
       return this.column_attr.displayComponentAttrs;
     },
+    selfValue() {
+      return this.column_attr.itemPrefix + this.value + this.column_attr.itemSuffix;
+    },
     componentName() {
       try {
         return this.attrs.componentName;