文件夹管理部分代码

test-ui/src/assets/styles/index.scss

@@ -122,7 +122,6 @@ aside {
 //main-container全局样式
 .app-container {
   padding: 20px;
-  min-height: calc(100vh - 84px);
 }
 
 .components-container {

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

@@ -1,12 +1,32 @@
 <template>
   <div class="app-container">
     <el-container>
-      <el-aside width="240px">
-        <el-menu class="el-menu-vertical-demo">
-          <el-menu-item v-for="item in groupList" :index="item.id" :key="item.id" :disabled="item.name">
-            <span slot="title">{{ item.name }}</span>
-          </el-menu-item>
-        </el-menu>
+      <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]">
+          <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-form>
+            </span>
+            <span>
+              <el-button type="text" size="mini"><i class="el-icon-check" @click="submitNode(node)"/></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-close" @click="cancelNode(node)"/></el-button>
+            </span>
+          </span>
+          <span class="custom-tree-node" slot-scope="{ node, data }" v-else>
+            <span>{{ 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>
+            </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"><i class="el-icon-edit"/></el-button>
+              <el-button type="text" size="mini"><i class="el-icon-delete"/></el-button>
+            </span>
+          </span>
+        </el-tree>
       </el-aside>
       <el-main>
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
@@ -47,78 +67,135 @@
         <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
       </el-main>
     </el-container>
-
-    <!-- 添加或修改接口对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="接口名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入接口名称"/>
-        </el-form-item>
-        <el-form-item label="接口请求类型" prop="method">
-          <el-select v-model="form.method" placeholder="请选择接口请求类型" clearable>
-            <el-option v-for="dict in dict.type.http_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="接口路径" prop="uri">
-          <el-input v-model="form.uri" placeholder="请输入接口路径"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import {listApi, getApi, delApi, addApi, updateApi, listGroup, delGroup, addGroup, updateGroup} from "@/api/test/api";
+import {listApi, delApi, addApi, updateApi, listGroup, delGroup, addGroup, updateGroup} from "@/api/test/api";
 
 export default {
   name: "Api",
   dicts: ['http_method'],
   data() {
     return {
-      // 遮罩层
+      filterText: "",
+      groupList: [{
+        id: 0,
+        label: "接口管理",
+        children: []
+      }],
+      groupState: "list",
+      editId: null,
       loading: true,
-      // 显示搜索条件
       showSearch: true,
-      // 总条数
       total: 0,
-      groupList: [],
-      // 接口表格数据
       apiList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
       open: false,
-      // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        groupId: 1,
+        groupId: null,
         name: null,
         method: null,
         uri: null,
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {}
+      form: {
+        name: null
+      },
+      rules: {
+        name: [
+          {required: true, message: "节点名不能为空", trigger: "blur"}
+        ],
+      },
     };
   },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
   created() {
     this.getGroup();
-    this.getList();
   },
   methods: {
     getGroup() {
-      this.loading = true;
-      listGroup().then(response => {
-        this.groupList = response.data;
-        this.loading = false;
+      listGroup().then(res => {
+        let child = []
+        res.data.filter(item => item.parentId === 0).map(item => {
+          child.push({
+            id: item.id,
+            label: item.name,
+            children: this.getChild(res.data, item.id)
+          })
+        });
+        this.groupList[0].children = child;
+        this.queryParams.groupId = res.data[0].id;
+        this.$refs.tree.setCurrentKey(res.data[0].id);
+        this.getList();
       })
     },
+    getChild(data, parentId) {
+      return data.filter(item => item.parentId === parentId).map(item => {
+        return {
+          id: item.id,
+          label: item.name,
+          children: this.getChild(data, item.id)
+        }
+      });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    nodeClick(data) {
+      if (data.id > 0 && this.queryParams.groupId !== data.id) {
+        this.queryParams.groupId = data.id;
+        this.getList();
+      } else {
+        this.$refs.tree.setCurrentKey(this.queryParams.groupId);
+      }
+    },
+    nodeAdd(data) {
+      this.groupState = "add";
+      const newChild = {id: -1, label: '', children: []};
+      if (!data.children) {
+        this.$set(data, 'children', []);
+      }
+      data.children.push(newChild);
+      this.$refs.tree.store.nodesMap[data.id].expanded = true;
+      this.editId = -1;
+    },
+    submitNode(node) {
+      if (node.data.id === -1) {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            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.groupState = "list";
+              });
+            } else {
+
+            }
+          }
+        });
+      }
+      this.reset()
+    },
+    cancelNode(node) {
+      if (node.data.id === -1) {
+        this.$refs.tree.remove(node);
+      }
+      this.groupState = "list";
+    },
     /** 查询接口列表 */
     getList() {
       this.loading = true;
@@ -128,14 +205,11 @@ export default {
         this.loading = false;
       });
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
     // 表单重置
     reset() {
-      this.form = {};
+      this.form = {
+        name: null,
+      };
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -155,34 +229,6 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.$tab.openPage("修改接口", "/api/add", {id: row.id || this.ids});
-      //
-      // this.reset();
-      // const id = row.id || this.ids
-      // getApi(id).then(response => {
-      //   this.form = response.data;
-      //   this.open = true;
-      //   this.title = "修改接口";
-      // });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateApi(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addApi(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -197,3 +243,42 @@ export default {
   }
 };
 </script>
+
+<style scoped lang="scss">
+.custom-tree-node-input {
+  ::v-deep .el-input__inner {
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+  }
+}
+
+.el-container {
+  height: calc(100vh - 124px);
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.el-aside {
+  padding: 20px 0 0;
+}
+
+.el-tree-node__content {
+  .custom-tree-node-option {
+    display: none;
+  }
+
+  &:hover {
+    .custom-tree-node-option {
+      display: unset;
+    }
+  }
+}
+</style>