树目录管理全部完成，home.vue的导航小图标全部完成 2020年7月15日13:01:35

src/views/Home/Home.vue

@@ -84,7 +84,7 @@
                     <header class="col2_header">
                         <el-tag
                             v-for="tag in tags"
-                            :key="tag.key"
+                            :key="tag.routerName"
                             closable
                             @close="close(tag)"
                             @click="clickTag(tag)"
@@ -143,33 +143,39 @@ export default {
         },
         // 点击菜单项
         onClickMenu(item) {
-            // console.log(item);
-            let _this = this
+            let _this = this;
             // 如果要跳转的路由和当前路由一致就 return
             if (this.$router.history.current.name == item.routerName) return;
             this.$router.push({
                 name: item.routerName
             });
-            // 如果tags中已经存在
-            console.log(item.routerName)
-            console.log(includes(item.routerName))
-            let temp = includes(item.routerName)
-            let key = "" + new Date().getTime() + Math.floor(Math.random() * 10)
+            // 如果tags中已经存在 return
+            let temp = includes(item.routerName);
+            if (temp) {
+                this.tags.forEach(item => {
+                    item.type = "info";
+                });
+                temp.type = "success";
+                return;
+            }
+            this.tags.forEach(item => {
+                item.type = "info";
+            });
             this.tags.push({
                 name: item.optionName,
                 routerName: item.routerName,
-                key,
                 type: "success"
             });
-            this.changeTagColor(key)
-            // localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
+
+            this.changeTagColor(item.routerName);
+            localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
             // 查看当前 tags里有没有传进来的路由，返回 true false
-            
+
             function includes(routerName) {
-                let tags = _this.tags
+                let tags = _this.tags;
                 return tags.find(item => {
-                    return item.routerName == routerName
-                })
+                    return item.routerName == routerName;
+                });
             }
         },
         // 点击 tag
@@ -179,30 +185,29 @@ export default {
             this.$router.push({
                 name: tag.routerName
             });
-            this.changeTagColor(tag.key)
+            this.changeTagColor(tag.routerName);
             localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
         },
         // 点击 tag 的小×
         close(tag) {
             console.log(tag);
             let spliceIndex = this.tags.findIndex(item => {
-                return item.key == tag.key;
+                return item.routerName == tag.routerName;
             });
             console.log(spliceIndex);
             this.tags.splice(spliceIndex, 1);
             localStorage.setItem("tagsNavList", JSON.stringify(this.tags));
         },
         // 改变tag的颜色 公用的
-        changeTagColor(key) {
-            this.tags.forEach(item=>{
-                if(item.key == key) {
-                    item.type = "success"
-                }else{
-                    item.type = "info"
+        changeTagColor(routerName) {
+            this.tags.forEach(item => {
+                if (item.routerName == routerName) {
+                    item.type = "success";
+                } else {
+                    item.type = "info";
                 }
-            })
-        },
-        
+            });
+        }
     }
 };
 </script>

src/views/Home/mencCofig.js

@@ -64,7 +64,7 @@ export const menuData = [
     },
     {
         oneMenuName: "树目录结构",
-        iconClassName: "el-icon-message",
+        iconClassName: "el-icon-coordinate",
         index: '4',
         disabled: false,
         childList: [ 

src/views/treeStructure/TreeManagement.vue

@@ -2,18 +2,30 @@
     <div class="TreeManagement">
         <header id="header">
             <el-row>
-                <el-select v-model="id" filterable placeholder="请选择">
+                <el-select v-model="id" @change="selectChange" filterable placeholder="请选择分类">
                     <el-option
                         v-for="item in options"
                         :key="item.id"
                         :label="item.nodeName"
                         :value="item.id"
+                        
                     ></el-option>
                 </el-select>
-                <el-button @click="onfind">查找</el-button>
+                <el-button @click="add_kind" type="primary" class="add_kind">添加分类</el-button>
+                <el-button @click="edit_kind" type="primary">编辑分类</el-button>
+                <!-- <el-popconfirm title="是否删除选中的树？" @onConfirm="del_kind">
+                    <el-button type="primary">删除根</el-button>
+                </el-popconfirm>-->
+                <el-button @click="del_kind" type="danger">删除分类</el-button>
             </el-row>
         </header>
         <section id="section">
+            <article v-show="dataTree.length<=0 && id">
+                <el-row>
+                    <span class="hint">这个分类没有任何目录请添加！</span>
+                    <el-button @click="add_catalog" type="primary">添加目录</el-button>
+                </el-row>
+            </article>
             <el-tree
                 :data="dataTree"
                 node-key="id"
@@ -39,23 +51,12 @@
         </section>
 
         <el-dialog
-            :title="addOrEditThis.nodeName+'：'+(isAdd?'添加节点':'编辑节点')"
+            :title="addOrEditThis.nodeName+'：'+(dialogStatus==1?'添加子节点':'编辑子节点')"
             :visible.sync="showDialog"
         >
             <el-row type="flex">
                 <el-col :span="14">
                     <el-form ref="form" :model="form" :rules="rules" label-width="140px">
-                        <el-form-item v-show="isAdd">
-                            <el-switch
-                                @change="switchChange"
-                                style="display: block"
-                                v-model="isAddSubNode"
-                                active-color="#13ce66"
-                                inactive-color="#ff4949"
-                                inactive-text="添加当前节点"
-                                active-text="添加子节点"
-                            ></el-switch>
-                        </el-form-item>
                         <el-form-item label="子节点名称:" prop="nodeName">
                             <el-input v-model="form.nodeName"></el-input>
                         </el-form-item>
@@ -91,7 +92,7 @@ const rules = {
     meta: [{ required: true, message: "请输入消息点描述", trigger: "blur" }]
 };
 // tree组件 配置
-const defaultProps = { children: "childs", label: "nodeName"};
+const defaultProps = { children: "childs", label: "nodeName" };
 export default {
     name: "TreeManagement",
     data() {
@@ -101,14 +102,14 @@ export default {
             dataTree: [],
             defaultProps,
             showDialog: false,
-            isAddSubNode: true, // 是添加子节点还是添加当前节点 的 状态标识
             form: {
                 nodeName: "",
                 meta: "",
                 code: ""
             },
-            isAdd: null, // 是添加还是编辑状态
-            addOrEditThis: {}, // 保存点击的this
+            /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 3:添加分类, 4:编辑分类, 5:删除分类 , 6:添加目录} */ 
+            dialogStatus: null, 
+            addOrEditThis: {}, // 保存被点击的 this
             rules
         };
     },
@@ -121,22 +122,34 @@ export default {
             this.$refs[formName].validate(valid => {
                 if (valid) {
                     console.log(this.dyForm);
-                    // 添加
-                    if (this.isAdd) {
-                        this.form.parentId = this.isAddSubNode
-                            ? this.addOrEditThis.id
-                            : this.addOrEditThis.parentId;
-                        this.reqSave("/publics/treenode/addNode");
-                    } else {
-                        // 编辑
-                        this.reqSave("/publics/treenode/updateNode");
+                    switch (this.dialogStatus) {
+                        case 1: /* 添加 */
+                            this.form.parentId = this.addOrEditThis.id
+                            this.reqSave("/publics/treenode/addNode");
+                            break;
+                        case 2: /* 编辑 */
+                            this.reqSave("/publics/treenode/updateNode");
+                            break;
+                        case 3: /* 添加分类 */
+                            this.form.parentId = "-1";
+                            this.reqSave("/publics/treenode/addNode");
+                            break;
+                        case 4: /* 编辑 分类*/
+                            this.form.id = this.id;
+                            this.reqSave("/publics/treenode/updateNode");
+                            break;
+                        case 6: /* 编辑 分类*/
+                            this.form.parentId = this.id;
+                            this.reqSave("/publics/treenode/addNode");
+                            break;
+                        default:
+                            this.$message.error("没有选中添加编辑项的！操作错误请刷新！");
                     }
                 } else {
                     return false;
                 }
             });
         },
-
         // 保存事件，包括新增字节点和编辑当前节点
         reqSave(api) {
             if (!this.form.code) delete this.form.code;
@@ -146,14 +159,9 @@ export default {
                 data: this.form,
                 success: res => {
                     this.getSubNodeList(this.id);
-                    this.$message.success(
-                        this.isAdd
-                            ? "添加" +
-                                  (this.isAddSubNode ? "子" : "") +
-                                  "节点成功！"
-                            : "编辑节点成功！"
-                    );
-                    this.showDialog = false;
+                    this.getSubNodeList("-1");
+                    this.$message.success("编辑节点成功！");
+                    // this.showDialog = false;
                 },
                 fail: err => {
                     if (err.errMsg) this.$message.error(err.errMsg);
@@ -181,29 +189,52 @@ export default {
                 }
             });
         },
-        //
-        switchChange() {
-            console.log(this.isAddSubNode);
+        
+        // 添加分类
+        add_kind() {
+            this.showDialog = true;
+            this.dialogStatus = 3;
+        },
+        // 编辑分类
+        edit_kind() {
+            if (!this.id) {
+                this.$message.warning("请选择要编辑的分类！");
+                return;
+            }
+            this.showDialog = true;
+            this.dialogStatus = 4;
+        },
+        // 删除分类
+        del_kind() {
+            if (!this.id) {
+                this.$message.warning("请选择要删除的分类！");
+                return;
+            }
+            this.dialogStatus = 5;
+            this.del({ id: this.id });
         },
-        // 点击查找
-        onfind() {
-            console.log(this.id);
+        // 添加目录
+        add_catalog() {
+            this.showDialog = true;
+            this.dialogStatus = 6;
+        },
+        // 选择框改变
+        selectChange() {
             this.getSubNodeList(this.id);
         },
+        // 节点后的添加
         add(data) {
-            console.log("add");
-            console.log(data);
             this.showDialog = true;
-            this.isAdd = true;
+            this.dialogStatus = 1;
             this.form.parentId = data.id;
             this.addOrEditThis = data; // 保存当前点击者状态
         },
+        // 节点后的编辑
         edit(data) {
             this.showDialog = true;
-            this.isAdd = false;
+            this.dialogStatus = 2;
             this.addOrEditThis = data; // 保存当前点击者状态 此处只为 dialog 的title显示用
             delete this.form.parentId;
-            console.log(data);
             this.form = {
                 id: data.id,
                 nodeName: data.nodeName,
@@ -211,15 +242,15 @@ export default {
                 code: data.code
             };
         },
+        // 节点后的删除
         del(data) {
-            console.log("del");
-            console.log(data);
             this.fetch({
                 api: "/publics/treenode/deleteNode",
                 method: "POST",
                 data: { id: data.id },
                 success: res => {
                     this.getSubNodeList(this.id);
+                    this.getSubNodeList("-1");
                     console.log(res);
                     this.$message.success("删除成功！");
                 },
@@ -237,6 +268,14 @@ export default {
 .TreeManagement {
     #header {
         margin-bottom: 15px;
+        .add_kind{
+            margin-left: 20px;
+        }
+    }
+    #section{
+        .hint{
+            color: rgb(240, 34, 34);
+        }
     }
 }