节点编辑

test-ui/src/api/test/api.js

@@ -77,6 +77,6 @@ export function delGroup(id) {
   return request({
     url: '/test/group/del',
     method: 'post',
-    params: {id}
+    data: {id}
   })
 }

test-ui/src/views/test/api/index.vue

@@ -3,11 +3,11 @@
     <el-container>
       <el-aside>
         <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small" style="margin-bottom: 10px"/>
-        <el-tree class="filter-tree" :data="groupList" node-key="id" highlight-current :expand-on-click-node="false" @node-click="nodeClick" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
+        <el-tree class="filter-tree" :data="groupList" @node-click="nodeClick" node-key="id" highlight-current :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" :default-expanded-keys="[0]">
           <span class="custom-tree-node" slot-scope="{ node, data }" v-if="groupState !== 'list' && editId === data.id">
             <span>
               <el-form ref="form" :model="form" :rules="rules">
-                <el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input" />
+                <el-input v-model="form.name" placeholder="请输入节点名称" class="custom-tree-node-input"/>
               </el-form>
             </span>
             <span>
@@ -16,14 +16,14 @@
             </span>
           </span>
           <span class="custom-tree-node" slot-scope="{ node, data }" v-else>
-            <span>{{ node.label }}</span>
+            <span @click="nodeSelected(data)" style="width: 100%;">{{ node.label }}</span>
             <span v-if="data.id === 0">
-              <el-button type="text" size="mini" @click="nodeAdd(data)"><i class="el-icon-plus"/></el-button>
+              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
             </span>
             <span class="custom-tree-node-option" v-else>
-              <el-button type="text" size="mini" @click="nodeAdd(data)"><i class="el-icon-plus"/></el-button>
+              <el-button type="text" size="mini" @click="nodeAdd(node)"><i class="el-icon-plus"/></el-button>
-              <el-button type="text" size="mini"><i class="el-icon-edit"/></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-edit" @click="nodeEdit(node)"/></el-button>
-              <el-button type="text" size="mini"><i class="el-icon-delete"/></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-delete" @click="nodeDelete(node)"/></el-button>
             </span>
           </span>
         </el-tree>
@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import {listApi, delApi, addApi, updateApi, listGroup, delGroup, addGroup, updateGroup} from "@/api/test/api";
+import {listApi, delApi, listGroup, delGroup, addGroup, updateGroup} from "@/api/test/api";
 
 export default {
   name: "Api",
@@ -90,7 +90,6 @@ export default {
       showSearch: true,
       total: 0,
       apiList: [],
-      open: false,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -130,7 +129,7 @@ export default {
         });
         this.groupList[0].children = child;
         this.queryParams.groupId = res.data[0].id;
-        this.$refs.tree.setCurrentKey(res.data[0].id);
+        this.nodeClick();
         this.getList();
       })
     },
@@ -147,7 +146,10 @@ export default {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
     },
-    nodeClick(data) {
+    nodeClick() {
+      this.$refs.tree.setCurrentKey(this.queryParams.groupId);
+    },
+    nodeSelected(data) {
       if (data.id > 0 && this.queryParams.groupId !== data.id) {
         this.queryParams.groupId = data.id;
         this.getList();
@@ -155,46 +157,72 @@ export default {
         this.$refs.tree.setCurrentKey(this.queryParams.groupId);
       }
     },
-    nodeAdd(data) {
+    nodeAdd(node) {
       this.groupState = "add";
       const newChild = {id: -1, label: '', children: []};
-      if (!data.children) {
+      if (!node.data.children) {
-        this.$set(data, 'children', []);
+        this.$set(node.data, 'children', []);
       }
-      data.children.push(newChild);
+      node.data.children.push(newChild);
-      this.$refs.tree.store.nodesMap[data.id].expanded = true;
+      this.$refs.tree.store.nodesMap[node.id].expanded = true;
       this.editId = -1;
     },
-    submitNode(node) {
+    nodeEdit(node) {
-      if (node.data.id === -1) {
+      this.groupState = "edit";
-        this.$refs["form"].validate(valid => {
+      this.editId = node.data.id;
-          if (valid) {
+      this.form.name = node.label;
-            if (node.data.id === -1) {
+    },
-              addGroup({
+    nodeDelete(node) {
-                parentId: node.parent.data.id,
+      this.$refs.tree.setCurrentKey(this.queryParams.groupId);
-                name: this.form.name,
+      if (node.data.children && node.data.children.length > 0) {
-              }).then(res => {
+        this.$message.error("包含子节点，无法删除")
-                this.$modal.msgSuccess("新增成功");
+        return
-                node.data = {
-                  id: res.data.id,
-                  label: res.data.name,
-                  children: []
-                }
-                this.groupState = "list";
-              });
-            } else {
-
-            }
-          }
-        });
       }
-      this.reset()
+      this.$modal.confirm('是否确认删除？').then(function () {
+        return delGroup(node.data.id);
+      }).then(() => {
+        this.$modal.msgSuccess("删除成功");
+        this.$refs.tree.remove(node)
+      })
+    },
+    submitNode(node) {
+      this.$refs["form"].validate(valid => {
+        if (!valid) return
+        if (node.data.id === -1) {
+          addGroup({
+            parentId: node.parent.data.id,
+            name: this.form.name,
+          }).then(res => {
+            this.$modal.msgSuccess("新增成功");
+            node.data = {
+              id: res.data.id,
+              label: res.data.name,
+              children: []
+            }
+            this.cancelNode();
+          });
+        } else {
+          updateGroup({
+            id: node.data.id,
+            name: this.form.name,
+          }).then(res => {
+            this.$modal.msgSuccess("修改成功");
+            node.data.label = this.form.name
+            this.cancelNode();
+          });
+        }
+      });
     },
     cancelNode(node) {
-      if (node.data.id === -1) {
+      if (node && node.data.id === -1) {
         this.$refs.tree.remove(node);
       }
       this.groupState = "list";
+      this.editId = null;
+      this.form = {
+        name: null,
+      };
+      this.resetForm("form");
     },
     /** 查询接口列表 */
     getList() {
@@ -205,13 +233,6 @@ export default {
         this.loading = false;
       });
     },
-    // 表单重置
-    reset() {
-      this.form = {
-        name: null,
-      };
-      this.resetForm("form");
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;