区域管理，设备信息新版改动，全部完成 树目录结构处理了两个小问题

src/views/areaManagement/AreaInfo.vue

@@ -1,272 +1,245 @@
 <template>
     <div class="AreaInfo">
-        <el-button class="top_btn" size="mini" type="primary" @click="isShowDialog=true">区域信息管理</el-button>
-        <hr style="border-top: 2px solid #eee;margin: 10px 0;">
-        <el-tree
-            class="filter-tree"
-            :data="areaInfoTree"
-            :props="defaultProps"
-            @node-contextmenu="mouseRightCilck"
-            ref="tree"
-            slot="reference"
-        ></el-tree>
+        <header id="header">
+            <el-button @click="add_catalog" type="primary">添加目录</el-button>
+        </header>
+        <hr style="border-top: 2px solid #eee;margin: 10px 0;" />
+        <section id="section">
+            <el-tree
+                :data="dataTree"
+                node-key="id"
+                default-expand-all
+                :expand-on-click-node="false"
+                :props="defaultProps"
+            >
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <span>{{ node.label }}</span>
+                    <span class="right">
+                        <el-tooltip effect="dark" content="添加子所属分类" placement="top-start">
+                            <i class="el-icon-folder-add icon" @click="() => add(data)"></i>
+                        </el-tooltip>
+                        <el-tooltip effect="dark" content="编辑此分类" placement="top-start">
+                            <i class="el-icon-edit icon" @click="() => edit(data)" alt="编辑"></i>
+                        </el-tooltip>
+                        <el-tooltip effect="dark" content="删除此分类" placement="top-start">
+                            <i class="el-icon-delete icon" @click="() => del(data)"></i>
+                        </el-tooltip>
+                    </span>
+                </span>
+            </el-tree>
+        </section>
 
-        <el-dialog width="40%" title="区域信息管理" :visible.sync="isShowDialog" append-to-body>
-            <el-form :model="formData" label-width="100px">
-                <el-form-item label="所属区域：">
-                    <div>
-                        <p class="hint" style="color: rgb(250, 80, 61)">提示：选择好后，点击旁白就会选中！</p>
-
-                        <el-row type="flex">
-                            <el-col :span="14">
-                                <el-cascader
-                                    style="width:335px;"
-                                    :options="areaInfoTree"
-                                    :props="{ children: 'children', label: 'name' ,value:'id'}"
-                                    @expand-change="handleChange"
-                                    @change="change"
-                                    :placeholder="cascaderPlaceholder"
-                                ></el-cascader>
-                            </el-col>
-                            <el-col :span="6">
-                                <el-popconfirm
-                                    title="删除此区域信息？"
-                                    @onConfirm="onConfirmDelAll"
-                                    @onCancel="onConfirmDel"
-                                    confirmButtonText="全部删除"
-                                    cancelButtonText="不删除所属区域"
-                                >
-                                    <el-button type="primary" slot="reference">删除此区域</el-button>
-                                </el-popconfirm>
-                            </el-col>
-                        </el-row>
-                    </div>
-                </el-form-item>
-
-                <el-form-item label="区域名字：">
-                    <el-row type="flex">
-                        <el-col :span="13">
-                            <el-input v-model="formData.name" placeholder="请填写所属区域名"></el-input>
-                        </el-col>
-                    </el-row>
-                </el-form-item>
-
-                <el-form-item>
-                    <el-row type="flex">
-                        <el-col :span="4">
-                            <el-button @click="isShowDialog=false">取 消</el-button>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-button type="primary" @click="addAreaInfo">添加所属区域</el-button>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-popconfirm title="删除此区域信息？" @onConfirm="onConfirmEdit">
-                                <el-button type="primary" slot="reference">修 改</el-button>
-                            </el-popconfirm>
-                        </el-col>
-                    </el-row>
-                </el-form-item>
-               
-               <!-- 直接删除此处就行 -->
-                <hr/>
-                <el-form-item label="">
-                    <p>封装组件测试用的 </p>
-                    <cascader
-                        :options="areaInfoTree"
-                        @expandChange="()=>{}"
-                        @change="()=>{}"
-                        :props="{ children: 'children', label: 'name' ,value:'id'}"
-                    ></cascader>
-                </el-form-item>
-
-            </el-form>
+        <el-dialog :title="title.title" :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 :label="title.nodeName" prop="nodeName">
+                            <el-input v-model="form.nodeName"></el-input>
+                        </el-form-item>
+                        <el-form-item label="配置信息:" prop="meta">
+                            <el-input
+                                v-model="form.meta"
+                                type="textarea"
+                                placeholder="请输入内容,JSON格式"
+                                autosize
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item :label="title.code" prop="code">
+                            <el-input v-model="form.code" placeholder="要为这个子节点起个名字吗？"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="showDialog=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('form')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
         </el-dialog>
     </div>
 </template>
+
 <script>
 import { mapActions } from "vuex";
-import Cascader from "../../components/Cascader/Cascader";
-
+// 表单验证规则
+const rules = {
+    nodeName: [
+        { required: true, message: "请输入节点名称", trigger: "blur" }
+    ],
+    meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
+};
+// tree组件 配置
+const defaultProps = { children: "childs", label: "nodeName" };
 export default {
     name: "AreaInfo",
-    components: {
-        cascader: Cascader
-    },
     data() {
         return {
-            isShowDialog: false,
-            selectArr: [],
-            selectList: [],
-            cascaderPlaceholder: "请选择/不选择默认根级",
-            formData: {
-                parentId: "-1",
-                name: ""
-                // orgId: "1"
+            options: [],
+            id: "",
+            dataTree: [],
+            defaultProps,
+            showDialog: false,
+            form: {
+                nodeName: "",
+                meta: "",
+                code: ""
+            },
+            /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 6:添加目录} */
+            dialogStatus: null,
+            addOrEditThis: {}, // 保存被点击的 this
+            title: {
+                title: "编辑/添加",
+                nodeName: "节点名称",
+                code: "节点代号"
             },
-            areaInfoTree: [], // tree 数据
-            selectedItem: null,
-            // tree配置选项
-            defaultProps: { children: "children", label: "name" }
+            rules
         };
     },
-    mounted() {
-        this.loadTypes();
+    created() {
+        // 获取区域管理 树
+        this.getTreeByCode("AreaInfo");
     },
-    watch: {},
     methods: {
         ...mapActions(["fetch"]),
-        // 加载所有场地信息列表
-        loadTypes() {
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    console.log(this.dyForm);
+                    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 6 /* 编辑 分类*/:
+                            this.form.parentId = this.id;
+                            this.reqSave("/publics/treenode/addNode");
+                            break;
+                        default:
+                            this.$message.error(
+                                "操作错误请刷新！"
+                            );
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+
+        // 通过code获取树
+        getTreeByCode(code) {
             this.fetch({
-                api: "/core/organize-structure/list",
-                method: "GET",
-                data: { orgId: 1 },
+                api: "/publics/treenode/getTreeByCode",
+                method: "POST",
+                data: { code }, //目前只有一个组织,其他参数调整钟
                 success: res => {
-                    this.areaInfoTree = this.findTypesByid(res, -1);
+                    this.id = res.id;
+                    this.getSubNodeList(res.id);
                 },
                 fail: err => {
                     console.log(err);
-                    if (err.errMsg) this.$message.error(err.errMsg);
-                    else this.$message.error("服务器发生异常");
-                }
-            });
-        },
-        // loadTypes 函数的工具函数
-        findTypesByid(resArr, pid) {
-            let temArr = [];
-            resArr.forEach(item => {
-                if (item.parentId == pid) {
-                    temArr.push(item);
-                    item.children = this.findTypesByid(resArr, item.id);
+                    this.$message.error("请重新登录");
+
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
+                    }
                 }
             });
-            if (temArr.length > 0) return temArr;
-        },
-        // 树形节点 鼠标右键点击事件
-        mouseRightCilck(event, data, Node, me) {
-            console.log(data);
         },
-        // 级联选择器点击事件
-        handleChange(value) {
-            console.log(value);
-            this.formData.parentId = value[value.length - 1];
-            // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
-            this.cascaderPlaceholder = this.findAreaName(value);
-        },
-        change(value) {
-            console.log("aa");
-            console.log(value);
-            this.formData.parentId = value[value.length - 1];
-            console.log("a==>>" + this.formData.parentId);
-            console.log(this.$children)
-        },
-        // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
-        findAreaName(tree) {
-            let i = 0;
-            let tmpStr = "";
-            find(this.areaInfoTree);
-            function find(subTree) {
-                subTree.forEach(item => {
-                    if (item.id == tree[i]) {
-                        tmpStr += item.name + "/";
-                        if (
-                            i < tree.length &&
-                            item.children &&
-                            item.children.length > 0
-                        ) {
-                            i++;
-                            find(item.children);
-                        }
-                    }
-                });
-            }
-            console.log(tmpStr);
-            this.cascaderPlaceholder = tmpStr;
-        },
-        // 保存区域信息
-        addAreaInfo(e) {
-            if (!this.formData.name) {
-                this.$message.error("请填写所属区域名！");
-                return;
-            }
-            console.log(this.formData);
+        // 保存事件，包括新增字节点和编辑当前节点
+        reqSave(api) {
+            if (!this.form.code) delete this.form.code;
             this.fetch({
-                api: "/core/organize-structure/add",
+                api,
                 method: "POST",
-                data: this.formData,
+                data: this.form,
                 success: res => {
-                    console.log(res);
-                    this.$message.success("添加成功！");
-                    this.formData.name = "";
-                    // 加载所有场地信息列表
-                    this.loadTypes();
+                    this.getSubNodeList(this.id);
+                    this.$message.success("编辑节点成功！");
+                    // this.showDialog = false;
                 },
                 fail: err => {
-                    console.log(err);
                     if (err.errMsg) this.$message.error(err.errMsg);
                     else this.$message.error("服务器发生异常");
                 }
             });
         },
-        // 删除区域信息（删除子节点）
-        onConfirmDelAll() {
-            console.log("删除区域信息（删除子节点）");
-            const url = "/core/organize-structure/delete-refer";
-            const id = this.formData.parentId;
-            if (id) {
-                this.doDel(url, id);
-            } else {
-                this.$message.fail("没有选择对应要删除的区域");
-            }
-        },
-        // 删除区域信息（不删除子节点）
-        onConfirmDel() {
-            console.log("删除区域信息（不删除子节点）");
-            const url = "/core/organize-structure/delete";
-            const id = this.formData.parentId;
-            if (id) {
-                this.doDel(url, id);
-            } else {
-                this.$message.fail("没有选择对应要删除的区域");
-            }
-        },
-        // 删除区域信息 总函数
-        doDel(url, id) {
-            console.log("ID===>>>" + id);
+        // 请求 拿到树列表
+        getSubNodeList(parentId) {
             this.fetch({
-                api: url,
+                api: "/publics/treenode/listNodeByParent",
                 method: "POST",
-                data: { id },
-                success: res => {},
+                data: {
+                    parentId,
+                    hasSub: true
+                },
+                success: res => {
+                    this.dataTree = res;
+                },
                 fail: err => {
-                    console.log(err);
-                    if (err.errCode == 200) {
-                        // 加载所有场地信息列表
-                        this.loadTypes();
-                        this.$message.success(err.errMsg);
-                    } else if (err.errMsg) {
-                        this.$message.error(err.errMsg);
-                    } else this.$message.error("服务器发生异常");
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
                 }
             });
         },
-        // 确认修改
-        onConfirmEdit() {
-            const id = this.formData.parentId;
-            const name = this.formData.name;
-            if (!name) {
-                this.$message.warning("区域名字不能为空！");
-                return;
-            }
+
+        // 添加目录
+        add_catalog() {
+            this.showDialog = true;
+            this.dialogStatus = 6;
+            this.title = {
+                title: "添加目录",
+                nodeName: "节点名称",
+                code: "节点代号"
+            };
+        },
+
+        // 节点后的添加
+        add(data) {
+            console.log(data);
+            this.showDialog = true;
+            this.dialogStatus = 1;
+            this.title = {
+                title: data.nodeName + "：添加目录",
+                nodeName: "子节点名称",
+                code: "子节点代号"
+            };
+            this.form.parentId = data.id;
+            this.addOrEditThis = data; // 保存当前点击者状态
+        },
+        // 节点后的编辑
+        edit(data) {
+            console.log(data);
+            this.showDialog = true;
+            this.dialogStatus = 2;
+            this.title = {
+                title: data.nodeName + "：编辑节点",
+                nodeName: "子节点名称",
+                code: "子节点代号"
+            };
+            this.addOrEditThis = data; // 保存当前点击者状态 此处只为 dialog 的title显示用
+            delete this.form.parentId;
+            this.form = {
+                id: data.id,
+                nodeName: data.nodeName,
+                meta: JSON.stringify(data.meta, null, 2),
+                code: data.code
+            };
+        },
+        // 节点后的删除
+        del(data) {
             this.fetch({
-                api: "/core/organize-structure/update",
+                api: "/publics/treenode/deleteNode",
                 method: "POST",
-                data: { id, name },
+                data: { id: data.id },
                 success: res => {
+                    this.getSubNodeList(this.id);
                     console.log(res);
-                    // 加载所有场地信息列表
-                    this.loadTypes();
-                    this.$message.success("编辑区域信息成功！");
+                    this.$message.success("删除成功！");
                 },
                 fail: err => {
                     console.log(err);
@@ -278,12 +251,29 @@ export default {
     }
 };
 </script>
-
 <style lang="scss" scoped>
 .AreaInfo {
-    .top_btn {
-        margin-bottom: 20px;
+    #header {
+        margin-bottom: 15px;
+    }
+    #section {
+        .hint {
+            color: rgb(240, 34, 34);
+        }
     }
 }
-</style>
 
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding-right: 8px;
+    .right {
+        margin-left: 40px;
+        .icon {
+            margin-right: 10px;
+        }
+    }
+}
+</style>

src/views/deviceManagement/CameraManagement.vue

@@ -14,7 +14,7 @@
                 >
                     <el-button slot="append" icon="el-icon-search" @click="getDeviceList"></el-button>
                 </el-input>
-            </el-col> -->
+            </el-col>-->
             <el-col :span="8">
                 <el-button @click="add" type="primary" icon="el-icon-document-add">新建</el-button>
             </el-col>
@@ -25,8 +25,6 @@
                 <el-table-column prop="id" label="序号" width="120px"></el-table-column>
                 <el-table-column prop="name" label="名称"></el-table-column>
                 <el-table-column prop="deviceNo" label="MAC/SN"></el-table-column>
-                <el-table-column prop="sVer" label="软件版本"></el-table-column>
-                <el-table-column prop="hVer" label="硬件版本"></el-table-column>
                 <el-table-column prop="status" label="摄像头状态"></el-table-column>
                 <el-table-column prop="description" label="描述"></el-table-column>
                 <el-table-column label="最后一次">
@@ -45,7 +43,6 @@
                         <el-popconfirm title="是否删除此设备的信息？" @onConfirm="del(scope.row)">
                             <el-button slot="reference" type="text" size="small">删除</el-button>
                         </el-popconfirm>
-                        <el-button @click="subDeviceAdmin(scope.row)" type="text" size="small">子设备管理</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -121,14 +118,6 @@
                     </el-select>
                 </el-form-item>
 
-                <el-form-item label="软件版本">
-                    <el-input v-model="formData.sVer" placeholder="输入描述"></el-input>
-                </el-form-item>
-
-                <el-form-item label="硬件版本">
-                    <el-input v-model="formData.hVer" placeholder="输入描述"></el-input>
-                </el-form-item>
-
                 <el-form-item label="描述：">
                     <el-input
                         type="textarea"
@@ -178,8 +167,6 @@ export default {
                 categoryId: [],
                 deviceNo: "",
                 status: "",
-                sVer: "",
-                hVer: "",
                 description: ""
             },
             meta: [{ rtsp: "", ws: "" }],
@@ -242,7 +229,6 @@ export default {
                     this.deviceList = res;
                 },
                 fail: err => {
-                    console.log("555");
                     if (err.errCode == "request_not_authorize") {
                         this.$message({
                             message: "请重新登录",
@@ -275,18 +261,24 @@ export default {
         // 编辑的保存按钮
         save() {
             this.formData.meta = { channel: JSON.stringify(this.meta) };
-            let categoryId = this.formData.categoryId
-            if( categoryId instanceof Array ){
-                this.formData.categoryId = categoryId[categoryId.length-1]
+            let categoryId = this.formData.categoryId;
+            if (categoryId instanceof Array) {
+                this.formData.categoryId = categoryId[categoryId.length - 1];
             }
-            let api = this.isAdd ? "/device/device/add" : "/device/device/update";
+            let api = this.isAdd
+                ? "/device/device/add"
+                : "/device/device/update";
             this.fetch({
                 api,
                 data: this.formData,
                 success: res => {
                     this.getDeviceList(this.id); //重新加载
                     // this.isShowDialog = false;
-                    this.$message.success(this.isAdd?"添加摄像头数据成功！":"修改摄像头数据成功！")
+                    this.$message.success(
+                        this.isAdd
+                            ? "添加摄像头数据成功！"
+                            : "修改摄像头数据成功！"
+                    );
                 },
                 fail: err => {
                     console.log(err);
@@ -346,21 +338,13 @@ export default {
             this.isShowDialog = true;
             this.formData = row;
             this.meta = JSON.parse(row.meta.channel);
-            console.log(row.categoryId)
-            this.createArr(row.categoryId)
+            // this.createArr(row.categoryId);
         },
         // 删除
         del(row) {
             console.log(row);
             this.reqDelete(row.id);
         },
-        // 子设备管理
-        subDeviceAdmin(row) {
-            this.$router.push({
-                path: "/subDeviceAdmin",
-                query: row
-            });
-        },
 
         // 配置项增加
         plus() {
@@ -371,30 +355,54 @@ export default {
             if (this.meta.length <= 1) return;
             this.meta.splice(this.meta.length - 1, 1);
         },
-        // 传入一个id 生成树（ cameraInfoTree ）的id数组
-        createArr(id) {
-            let tree = this.cameraInfoTree
-            let tmpArr = []
-            
-            recursion(tree)
-            function recursion(tree) {
-                // debugger
-                tree.forEach(item => {
-                    if(item.id == id) {
-                        tmpArr.push(item.id)
-                        return
-                    } else {
-                        if(item.childs && item.childs.length>0) {
-                            tmpArr.push(item.id)
-                            recursion(item.childs)
+        // 传入一个id 生成树（ cameraInfoTree ）的id数组  "732971850158313472"  "732997784550772736"
+        /* createArr(id) {
+            let tmpArr = [id]
+            let tree = this.cameraInfoTree;
+            aa(id)
+            console.log(tmpArr);
+            function aa(id) {
+                recursion(tree);
+                function recursion(tree) {
+                    tree.forEach(item => {
+                        if (item.id == id) {
+                            let rse = isWarp(item.parentId)
+                            console.log(rse)
+                            if(rse == 0) {
+                                tmpArr.unshift(item.parentId)
+                            } else if(rse == 1) {
+                                tmpArr.unshift(item.parentId)
+                                aa(item.parentId)
+                            } 
+                            return;
                         } else {
-                            tmpArr = []
+                            if (item.childs && item.childs.length > 0) {
+                                // debugger
+                                return recursion(item.childs);
+                            } else {
+                                // tmpArr = []
+                                return;
+                            }
                         }
+                    });
+                }
+            }
+            
+            // 判断是否到最外层
+            function isWarp(parentId) {
+                let res = null
+                 tree.forEach(item => {
+                    if(item.id == parentId){
+                        res = 0 // 刚好到
+                    } else if(item.parentId == parentId){
+                        res = -1 // 已经到外面一层了
+                    } else {
+                        res = 1 // 还在内层
                     }
-                });
+                })
+                return res
             }
-            console.log(tmpArr)
-        }
+        } */
     }
 };
 </script>

src/views/deviceManagement/DeviceType.vue

@@ -1,190 +1,245 @@
 <template>
     <div class="DeviceType">
-        <el-button type="primary" @click="isShowDialog=true">新建分类</el-button>
-        <hr style="border-top: 2px solid #eee;margin: 10px 0;">
-        <el-tree
-            class="filter-tree"
-            :data="typeDataTree"
-            :props="defaultProps"
-            @node-click="handleNodeClick"
-            ref="tree"
-        ></el-tree>
-        <el-dialog title="新建分类" :visible.sync="isShowDialog" append-to-body>
-            <el-form :model="formData" label-width="100px">
-                <el-form-item label="父分类：">
-                    <el-select
-                        :disabled="isRoot"
-                        v-for="(arrItem,key) in selectList"
-                        :key="key"
-                        v-model="selectArr[key]"
-                        filterable
-                        placeholder="请选择"
-                        value-key="id"
-                        @change="selectedEvt"
-                        @focus="position=key"
-                    >
-                        <el-option
-                            v-for="item in arrItem"
-                            :key="item.id"
-                            :value="item.id"
-                            :label="item.name"
-                        ></el-option>
-                    </el-select>
-                    <el-checkbox v-model="isRoot" style="margin-left: 10px">根目录</el-checkbox>
-                </el-form-item>
-                <el-form-item label="分类名称：">
-                    <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
-                </el-form-item>
-                <el-form-item label="配置数据：">
-                    <el-input type="textarea" v-model="formData.meta" autosize placeholder="请输入内容,JSON格式"></el-input>
-                </el-form-item>
-            </el-form>
-            <div slot="footer">
-                <el-button @click="isShowDialog=false">取 消</el-button>
-                <el-button type="primary" @click="handleSave">保 存</el-button>
-            </div>
+        <header id="header">
+            <el-button @click="add_catalog" type="primary">添加目录</el-button>
+        </header>
+        <hr style="border-top: 2px solid #eee;margin: 10px 0;" />
+        <section id="section">
+            <el-tree
+                :data="dataTree"
+                node-key="id"
+                default-expand-all
+                :expand-on-click-node="false"
+                :props="defaultProps"
+            >
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <span>{{ node.label }}</span>
+                    <span class="right">
+                        <el-tooltip effect="dark" content="添加子所属分类" placement="top-start">
+                            <i class="el-icon-folder-add icon" @click="() => add(data)"></i>
+                        </el-tooltip>
+                        <el-tooltip effect="dark" content="编辑此分类" placement="top-start">
+                            <i class="el-icon-edit icon" @click="() => edit(data)" alt="编辑"></i>
+                        </el-tooltip>
+                        <el-tooltip effect="dark" content="删除此分类" placement="top-start">
+                            <i class="el-icon-delete icon" @click="() => del(data)"></i>
+                        </el-tooltip>
+                    </span>
+                </span>
+            </el-tree>
+        </section>
+
+        <el-dialog :title="title.title" :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 :label="title.nodeName" prop="nodeName">
+                            <el-input v-model="form.nodeName"></el-input>
+                        </el-form-item>
+                        <el-form-item label="配置信息:" prop="meta">
+                            <el-input
+                                v-model="form.meta"
+                                type="textarea"
+                                placeholder="请输入内容,JSON格式"
+                                autosize
+                            ></el-input>
+                        </el-form-item>
+                        <el-form-item :label="title.code" prop="code">
+                            <el-input v-model="form.code" placeholder="要为这个子节点起个名字吗？"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="showDialog=false">取 消</el-button>
+                            <el-button type="primary" @click="submitForm('form')">保 存</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-col>
+            </el-row>
         </el-dialog>
     </div>
 </template>
+
 <script>
 import { mapActions } from "vuex";
-// tree配置选项 
-const defaultProps = { children: "children", label: "name" };
-
+// 表单验证规则
+const rules = {
+    nodeName: [
+        { required: true, message: "请输入节点名称", trigger: "blur" }
+    ],
+    meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
+};
+// tree组件 配置
+const defaultProps = { children: "childs", label: "nodeName" };
 export default {
     name: "DeviceType",
     data() {
         return {
-            isShowDialog: false,
-            isRoot: false,
-            position: null,
-            selectArr: [],
-            selectList: [],
-            formData: {
-                name: "",
-                meta: ""
+            options: [],
+            id: "",
+            dataTree: [],
+            defaultProps,
+            showDialog: false,
+            form: {
+                nodeName: "",
+                meta: "",
+                code: ""
+            },
+            /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 6:添加目录} */
+            dialogStatus: null,
+            addOrEditThis: {}, // 保存被点击的 this
+            title: {
+                title: "编辑/添加",
+                nodeName: "节点名称",
+                code: "节点代号"
             },
-            typeDataTree: [], // tree 数据
-            selectedItem: null,
-            // tree配置选项
-            defaultProps
+            rules
         };
     },
-    mounted() {
-        this.loadTypes(); //根级别分类
-    },
-    watch: {
-        filterText(val) {
-            this.$refs.tree.filter(val);
-        },
-        selectArr(ov, nv) {
-            console.log("selectArr", ov, nv);
-        },
-        isRoot(ov, nv) {
-            console.log("isRoot", ov, nv);
-            if (ov) {
-                //清理所有选择
-                this.selectList.splice(1, this.selectList.length);
-                this.selectArr.splice(0, this.selectArr.length);
-            }
-        }
+    created() {
+        // 获取区域管理 树
+        this.getTreeByCode("DeviceType");
     },
     methods: {
         ...mapActions(["fetch"]),
-        loadTypes(pid) {
-            this.fetch({
-                api: "/device/device-type/list-parent",
-                method: "GET",
-                data: { parentId: pid },
-                success: res => {
-                    console.log(res)
-                    if (pid > 0) {
-                        let p = this.findTypesByid(
-                            { id: -1, children: this.typeDataTree },
-                            pid
-                        );
-                        if (p) this.$set(p, "children", res);
-                        //这里的切入点很特别，需要等待截取数据后再加入
-                        let arr = [];
-                        for (let i = 0; i < res.length; i++) {
-                            arr.push({ id: res[i].id, name: res[i].name });
-                        }
-                        if (arr.length > 0)
-                            this.selectList.splice(
-                                this.position + 1,
-                                this.selectList.length,
-                                arr
-                            );
-                        else
-                            this.selectList.splice(
-                                this.position + 1,
-                                this.selectList.length
+        submitForm(formName) {
+            this.$refs[formName].validate(valid => {
+                if (valid) {
+                    console.log(this.dyForm);
+                    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 6 /* 编辑 分类*/:
+                            this.form.parentId = this.id;
+                            this.reqSave("/publics/treenode/addNode");
+                            break;
+                        default:
+                            this.$message.error(
+                                "操作错误请刷新！"
                             );
-                        this.selectArr.splice(
-                            this.position + 1,
-                            this.selectArr.length
-                        );
-                    } else {
-                        this.typeDataTree = res;
-                        // 初始化第一级
-                        let arr = [];
-                        for (let i = 0; i < res.length; i++) {
-                            arr.push({ id: res[i].id, name: res[i].name });
-                        }
-                        this.selectList.push(arr);
                     }
+                } else {
+                    return false;
+                }
+            });
+        },
+
+        // 通过code获取树
+        getTreeByCode(code) {
+            this.fetch({
+                api: "/publics/treenode/getTreeByCode",
+                method: "POST",
+                data: { code }, //目前只有一个组织,其他参数调整钟
+                success: res => {
+                    this.id = res.id;
+                    this.getSubNodeList(res.id);
                 },
                 fail: err => {
-                    console.log("loadTypes");
                     console.log(err);
+                    this.$message.error("请重新登录");
+
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
+                    }
+                }
+            });
+        },
+        // 保存事件，包括新增字节点和编辑当前节点
+        reqSave(api) {
+            if (!this.form.code) delete this.form.code;
+            this.fetch({
+                api,
+                method: "POST",
+                data: this.form,
+                success: res => {
+                    this.getSubNodeList(this.id);
+                    this.$message.success("编辑节点成功！");
+                    // this.showDialog = false;
+                },
+                fail: err => {
                     if (err.errMsg) this.$message.error(err.errMsg);
                     else this.$message.error("服务器发生异常");
                 }
             });
         },
-        findTypesByid(root, id) {
-            if (!root) return null;
-            else if (root.id === id) return root;
-            else if (root.children) {
-                for (let i = 0; i < root.children.length; i++) {
-                    let ret = this.findTypesByid(root.children[i], id);
-                    if (ret) return ret;
+        // 请求 拿到树列表
+        getSubNodeList(parentId) {
+            this.fetch({
+                api: "/publics/treenode/listNodeByParent",
+                method: "POST",
+                data: {
+                    parentId,
+                    hasSub: true
+                },
+                success: res => {
+                    this.dataTree = res;
+                },
+                fail: err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
                 }
-                return null;
-            } else return null;
+            });
         },
-        // 节点被点击时的回调
-        handleNodeClick(e) {
-            console.log(e);
-            // 获取下一级列表
-            this.loadTypes(e.id);
-            setTimeout(() => {
-                // this.handleNodeClick(e)
-            }, 1000);
-            // let count = 0
-            // if(count++ == 0) {
-            //     this.handleNodeClick()
-            // }else return
+
+        // 添加目录
+        add_catalog() {
+            this.showDialog = true;
+            this.dialogStatus = 6;
+            this.title = {
+                title: "添加目录",
+                nodeName: "节点名称",
+                code: "节点代号"
+            };
+        },
+
+        // 节点后的添加
+        add(data) {
+            console.log(data);
+            this.showDialog = true;
+            this.dialogStatus = 1;
+            this.title = {
+                title: data.nodeName + "：添加目录",
+                nodeName: "子节点名称",
+                code: "子节点代号"
+            };
+            this.form.parentId = data.id;
+            this.addOrEditThis = data; // 保存当前点击者状态
         },
-        selectedEvt(item) {
-            console.log("看看啥", item, this.position);
-            // 获取下一级列表
-            this.loadTypes(item);
+        // 节点后的编辑
+        edit(data) {
+            console.log(data);
+            this.showDialog = true;
+            this.dialogStatus = 2;
+            this.title = {
+                title: data.nodeName + "：编辑节点",
+                nodeName: "子节点名称",
+                code: "子节点代号"
+            };
+            this.addOrEditThis = data; // 保存当前点击者状态 此处只为 dialog 的title显示用
+            delete this.form.parentId;
+            this.form = {
+                id: data.id,
+                nodeName: data.nodeName,
+                meta: JSON.stringify(data.meta, null, 2),
+                code: data.code
+            };
         },
-        handleSave(e) {
-            console.log(e);
-            let data = { name: this.formData.name, meta: this.formData.meta };
-            if (!this.isRoot)
-                data.parentId = this.selectArr[this.selectArr.length - 1];
+        // 节点后的删除
+        del(data) {
             this.fetch({
-                api: "/device/device-type/add",
-                data,
+                api: "/publics/treenode/deleteNode",
+                method: "POST",
+                data: { id: data.id },
                 success: res => {
+                    this.getSubNodeList(this.id);
                     console.log(res);
-                    this.$message.info("添加成功！");
-                    this.isShowDialog = false; //关闭
-                    //页面所有数据初始化
-                    this.init();
+                    this.$message.success("删除成功！");
                 },
                 fail: err => {
                     console.log(err);
@@ -192,18 +247,33 @@ export default {
                     else this.$message.error("服务器发生异常");
                 }
             });
-        },
-        init() {
-            this.selectArr.splice(0, this.selectArr.length);
-            this.selectList.splice(0, this.selectList.length);
-            this.position = null;
-            this.loadTypes(-1); //加载根
         }
     }
 };
 </script>
-
 <style lang="scss" scoped>
+.DeviceType {
+    #header {
+        margin-bottom: 15px;
+    }
+    #section {
+        .hint {
+            color: rgb(240, 34, 34);
+        }
+    }
+}
 
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    padding-right: 8px;
+    .right {
+        margin-left: 40px;
+        .icon {
+            margin-right: 10px;
+        }
+    }
+}
 </style>
-

src/views/template/AreaInfo老.vue

@@ -0,0 +1,289 @@
+<template>
+    <div class="AreaInfo">
+        <el-button class="top_btn" size="mini" type="primary" @click="isShowDialog=true">区域信息管理</el-button>
+        <hr style="border-top: 2px solid #eee;margin: 10px 0;">
+        <el-tree
+            class="filter-tree"
+            :data="areaInfoTree"
+            :props="defaultProps"
+            @node-contextmenu="mouseRightCilck"
+            ref="tree"
+            slot="reference"
+        ></el-tree>
+
+        <el-dialog width="40%" title="区域信息管理" :visible.sync="isShowDialog" append-to-body>
+            <el-form :model="formData" label-width="100px">
+                <el-form-item label="所属区域：">
+                    <div>
+                        <p class="hint" style="color: rgb(250, 80, 61)">提示：选择好后，点击旁白就会选中！</p>
+
+                        <el-row type="flex">
+                            <el-col :span="14">
+                                <el-cascader
+                                    style="width:335px;"
+                                    :options="areaInfoTree"
+                                    :props="{ children: 'children', label: 'name' ,value:'id'}"
+                                    @expand-change="handleChange"
+                                    @change="change"
+                                    :placeholder="cascaderPlaceholder"
+                                ></el-cascader>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-popconfirm
+                                    title="删除此区域信息？"
+                                    @onConfirm="onConfirmDelAll"
+                                    @onCancel="onConfirmDel"
+                                    confirmButtonText="全部删除"
+                                    cancelButtonText="不删除所属区域"
+                                >
+                                    <el-button type="primary" slot="reference">删除此区域</el-button>
+                                </el-popconfirm>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-form-item>
+
+                <el-form-item label="区域名字：">
+                    <el-row type="flex">
+                        <el-col :span="13">
+                            <el-input v-model="formData.name" placeholder="请填写所属区域名"></el-input>
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+
+                <el-form-item>
+                    <el-row type="flex">
+                        <el-col :span="4">
+                            <el-button @click="isShowDialog=false">取 消</el-button>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-button type="primary" @click="addAreaInfo">添加所属区域</el-button>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-popconfirm title="删除此区域信息？" @onConfirm="onConfirmEdit">
+                                <el-button type="primary" slot="reference">修 改</el-button>
+                            </el-popconfirm>
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+               
+               <!-- 直接删除此处就行 -->
+                <hr/>
+                <el-form-item label="">
+                    <p>封装组件测试用的 </p>
+                    <cascader
+                        :options="areaInfoTree"
+                        @expandChange="()=>{}"
+                        @change="()=>{}"
+                        :props="{ children: 'children', label: 'name' ,value:'id'}"
+                    ></cascader>
+                </el-form-item>
+
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+import Cascader from "../../components/Cascader/Cascader";
+
+export default {
+    name: "AreaInfo",
+    components: {
+        cascader: Cascader
+    },
+    data() {
+        return {
+            isShowDialog: false,
+            selectArr: [],
+            selectList: [],
+            cascaderPlaceholder: "请选择/不选择默认根级",
+            formData: {
+                parentId: "-1",
+                name: ""
+                // orgId: "1"
+            },
+            areaInfoTree: [], // tree 数据
+            selectedItem: null,
+            // tree配置选项
+            defaultProps: { children: "children", label: "name" }
+        };
+    },
+    mounted() {
+        this.loadTypes();
+    },
+    watch: {},
+    methods: {
+        ...mapActions(["fetch"]),
+        // 加载所有场地信息列表
+        loadTypes() {
+            this.fetch({
+                api: "/core/organize-structure/list",
+                method: "GET",
+                data: { orgId: 1 },
+                success: res => {
+                    this.areaInfoTree = this.findTypesByid(res, -1);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // loadTypes 函数的工具函数
+        findTypesByid(resArr, pid) {
+            let temArr = [];
+            resArr.forEach(item => {
+                if (item.parentId == pid) {
+                    temArr.push(item);
+                    item.children = this.findTypesByid(resArr, item.id);
+                }
+            });
+            if (temArr.length > 0) return temArr;
+        },
+        // 树形节点 鼠标右键点击事件
+        mouseRightCilck(event, data, Node, me) {
+            console.log(data);
+        },
+        // 级联选择器点击事件
+        handleChange(value) {
+            console.log(value);
+            this.formData.parentId = value[value.length - 1];
+            // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
+            this.cascaderPlaceholder = this.findAreaName(value);
+        },
+        change(value) {
+            console.log("aa");
+            console.log(value);
+            this.formData.parentId = value[value.length - 1];
+            console.log("a==>>" + this.formData.parentId);
+            console.log(this.$children)
+        },
+        // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
+        findAreaName(tree) {
+            let i = 0;
+            let tmpStr = "";
+            find(this.areaInfoTree);
+            function find(subTree) {
+                subTree.forEach(item => {
+                    if (item.id == tree[i]) {
+                        tmpStr += item.name + "/";
+                        if (
+                            i < tree.length &&
+                            item.children &&
+                            item.children.length > 0
+                        ) {
+                            i++;
+                            find(item.children);
+                        }
+                    }
+                });
+            }
+            console.log(tmpStr);
+            this.cascaderPlaceholder = tmpStr;
+        },
+        // 保存区域信息
+        addAreaInfo(e) {
+            if (!this.formData.name) {
+                this.$message.error("请填写所属区域名！");
+                return;
+            }
+            console.log(this.formData);
+            this.fetch({
+                api: "/core/organize-structure/add",
+                method: "POST",
+                data: this.formData,
+                success: res => {
+                    console.log(res);
+                    this.$message.success("添加成功！");
+                    this.formData.name = "";
+                    // 加载所有场地信息列表
+                    this.loadTypes();
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // 删除区域信息（删除子节点）
+        onConfirmDelAll() {
+            console.log("删除区域信息（删除子节点）");
+            const url = "/core/organize-structure/delete-refer";
+            const id = this.formData.parentId;
+            if (id) {
+                this.doDel(url, id);
+            } else {
+                this.$message.fail("没有选择对应要删除的区域");
+            }
+        },
+        // 删除区域信息（不删除子节点）
+        onConfirmDel() {
+            console.log("删除区域信息（不删除子节点）");
+            const url = "/core/organize-structure/delete";
+            const id = this.formData.parentId;
+            if (id) {
+                this.doDel(url, id);
+            } else {
+                this.$message.fail("没有选择对应要删除的区域");
+            }
+        },
+        // 删除区域信息 总函数
+        doDel(url, id) {
+            console.log("ID===>>>" + id);
+            this.fetch({
+                api: url,
+                method: "POST",
+                data: { id },
+                success: res => {},
+                fail: err => {
+                    console.log(err);
+                    if (err.errCode == 200) {
+                        // 加载所有场地信息列表
+                        this.loadTypes();
+                        this.$message.success(err.errMsg);
+                    } else if (err.errMsg) {
+                        this.$message.error(err.errMsg);
+                    } else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // 确认修改
+        onConfirmEdit() {
+            const id = this.formData.parentId;
+            const name = this.formData.name;
+            if (!name) {
+                this.$message.warning("区域名字不能为空！");
+                return;
+            }
+            this.fetch({
+                api: "/core/organize-structure/update",
+                method: "POST",
+                data: { id, name },
+                success: res => {
+                    console.log(res);
+                    // 加载所有场地信息列表
+                    this.loadTypes();
+                    this.$message.success("编辑区域信息成功！");
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.AreaInfo {
+    .top_btn {
+        margin-bottom: 20px;
+    }
+}
+</style>
+

src/views/template/DeviceType老.vue

@@ -0,0 +1,209 @@
+<template>
+    <div class="DeviceType">
+        <el-button type="primary" @click="isShowDialog=true">新建分类</el-button>
+        <hr style="border-top: 2px solid #eee;margin: 10px 0;">
+        <el-tree
+            class="filter-tree"
+            :data="typeDataTree"
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+            ref="tree"
+        ></el-tree>
+        <el-dialog title="新建分类" :visible.sync="isShowDialog" append-to-body>
+            <el-form :model="formData" label-width="100px">
+                <el-form-item label="父分类：">
+                    <el-select
+                        :disabled="isRoot"
+                        v-for="(arrItem,key) in selectList"
+                        :key="key"
+                        v-model="selectArr[key]"
+                        filterable
+                        placeholder="请选择"
+                        value-key="id"
+                        @change="selectedEvt"
+                        @focus="position=key"
+                    >
+                        <el-option
+                            v-for="item in arrItem"
+                            :key="item.id"
+                            :value="item.id"
+                            :label="item.name"
+                        ></el-option>
+                    </el-select>
+                    <el-checkbox v-model="isRoot" style="margin-left: 10px">根目录</el-checkbox>
+                </el-form-item>
+                <el-form-item label="分类名称：">
+                    <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
+                </el-form-item>
+                <el-form-item label="配置数据：">
+                    <el-input type="textarea" v-model="formData.meta" autosize placeholder="请输入内容,JSON格式"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer">
+                <el-button @click="isShowDialog=false">取 消</el-button>
+                <el-button type="primary" @click="handleSave">保 存</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+// tree配置选项 
+const defaultProps = { children: "children", label: "name" };
+
+export default {
+    name: "DeviceType",
+    data() {
+        return {
+            isShowDialog: false,
+            isRoot: false,
+            position: null,
+            selectArr: [],
+            selectList: [],
+            formData: {
+                name: "",
+                meta: ""
+            },
+            typeDataTree: [], // tree 数据
+            selectedItem: null,
+            // tree配置选项
+            defaultProps
+        };
+    },
+    mounted() {
+        this.loadTypes(); //根级别分类
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        },
+        selectArr(ov, nv) {
+            console.log("selectArr", ov, nv);
+        },
+        isRoot(ov, nv) {
+            console.log("isRoot", ov, nv);
+            if (ov) {
+                //清理所有选择
+                this.selectList.splice(1, this.selectList.length);
+                this.selectArr.splice(0, this.selectArr.length);
+            }
+        }
+    },
+    methods: {
+        ...mapActions(["fetch"]),
+        loadTypes(pid) {
+            this.fetch({
+                api: "/device/device-type/list-parent",
+                method: "GET",
+                data: { parentId: pid },
+                success: res => {
+                    console.log(res)
+                    if (pid > 0) {
+                        let p = this.findTypesByid(
+                            { id: -1, children: this.typeDataTree },
+                            pid
+                        );
+                        if (p) this.$set(p, "children", res);
+                        //这里的切入点很特别，需要等待截取数据后再加入
+                        let arr = [];
+                        for (let i = 0; i < res.length; i++) {
+                            arr.push({ id: res[i].id, name: res[i].name });
+                        }
+                        if (arr.length > 0)
+                            this.selectList.splice(
+                                this.position + 1,
+                                this.selectList.length,
+                                arr
+                            );
+                        else
+                            this.selectList.splice(
+                                this.position + 1,
+                                this.selectList.length
+                            );
+                        this.selectArr.splice(
+                            this.position + 1,
+                            this.selectArr.length
+                        );
+                    } else {
+                        this.typeDataTree = res;
+                        // 初始化第一级
+                        let arr = [];
+                        for (let i = 0; i < res.length; i++) {
+                            arr.push({ id: res[i].id, name: res[i].name });
+                        }
+                        this.selectList.push(arr);
+                    }
+                },
+                fail: err => {
+                    console.log("loadTypes");
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        findTypesByid(root, id) {
+            if (!root) return null;
+            else if (root.id === id) return root;
+            else if (root.children) {
+                for (let i = 0; i < root.children.length; i++) {
+                    let ret = this.findTypesByid(root.children[i], id);
+                    if (ret) return ret;
+                }
+                return null;
+            } else return null;
+        },
+        // 节点被点击时的回调
+        handleNodeClick(e) {
+            console.log(e);
+            // 获取下一级列表
+            this.loadTypes(e.id);
+            setTimeout(() => {
+                // this.handleNodeClick(e)
+            }, 1000);
+            // let count = 0
+            // if(count++ == 0) {
+            //     this.handleNodeClick()
+            // }else return
+        },
+        selectedEvt(item) {
+            console.log("看看啥", item, this.position);
+            // 获取下一级列表
+            this.loadTypes(item);
+        },
+        handleSave(e) {
+            console.log(e);
+            let data = { name: this.formData.name, meta: this.formData.meta };
+            if (!this.isRoot)
+                data.parentId = this.selectArr[this.selectArr.length - 1];
+            this.fetch({
+                api: "/device/device-type/add",
+                data,
+                success: res => {
+                    console.log(res);
+                    this.$message.info("添加成功！");
+                    this.isShowDialog = false; //关闭
+                    //页面所有数据初始化
+                    this.init();
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        init() {
+            this.selectArr.splice(0, this.selectArr.length);
+            this.selectList.splice(0, this.selectList.length);
+            this.position = null;
+            this.loadTypes(-1); //加载根
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/views/treeStructure/TreeManagement.vue

@@ -48,13 +48,13 @@
         </section>
 
         <el-dialog
-            :title="addOrEditThis.nodeName+'：'+(dialogStatus==1?'添加子节点':'编辑子节点')"
+            :title="title.title"
             :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 label="子节点名称:" prop="nodeName">
+                        <el-form-item :label="title.nodeName" prop="nodeName">
                             <el-input v-model="form.nodeName"></el-input>
                         </el-form-item>
                         <el-form-item label="配置信息:" prop="meta">
@@ -65,8 +65,8 @@
                                 autosize
                             ></el-input>
                         </el-form-item>
-                        <el-form-item label="子节点代号:" prop="code">
-                            <el-input v-model="form.code" placeholder="要为这个子节点起个名字吗"></el-input>
+                        <el-form-item :label="title.code" prop="code">
+                            <el-input v-model="form.code" placeholder="要为这个子节点起个名字吗？"></el-input>
                         </el-form-item>
                         <el-form-item>
                             <el-button @click="showDialog=false">取 消</el-button>
@@ -84,9 +84,9 @@ import { mapActions } from "vuex";
 // 表单验证规则
 const rules = {
     nodeName: [
-        { required: true, message: "请输入消息点编码", trigger: "blur" }
+        { required: true, message: "请输入节点名称", trigger: "blur" }
     ],
-    meta: [{ required: true, message: "请输入消息点描述", trigger: "blur" }]
+    meta: [{ required: true, message: "请输入配置信息", trigger: "blur" }]
 };
 // tree组件 配置
 const defaultProps = { children: "childs", label: "nodeName" };
@@ -107,6 +107,11 @@ export default {
             /* 是添加还是编辑状态 { 1:节点后的添加, 2:节点后的编辑, 3:添加分类, 4:编辑分类, 5:删除分类 , 6:添加目录} */ 
             dialogStatus: null, 
             addOrEditThis: {}, // 保存被点击的 this
+            title: {
+                title: "编辑/添加",
+                nodeName: "节点名称",
+                code: "节点代号"
+            },
             rules
         };
     },
@@ -176,9 +181,11 @@ export default {
                     hasSub: true
                 },
                 success: res => {
-                    parentId == "-1"
-                        ? (this.options = res)
-                        : (this.dataTree = res);
+                    if(parentId == -1 || this.dialogStatus == 3) {
+                        this.options = res
+                    } else {
+                        this.dataTree = res
+                    }
                 },
                 fail: err => {
                     if (err.errMsg) this.$message.error(err.errMsg);
@@ -191,6 +198,11 @@ export default {
         add_kind() {
             this.showDialog = true;
             this.dialogStatus = 3;
+            this.title = {
+                title: "添加分类",
+                nodeName: "节点名称",
+                code: "节点代号"
+            }
         },
         // 编辑分类
         edit_kind() {
@@ -200,6 +212,11 @@ export default {
             }
             this.showDialog = true;
             this.dialogStatus = 4;
+            this.title = {
+                title: "编辑分类",
+                nodeName: "节点名称",
+                code: "节点代号"
+            }
         },
         // 删除分类
         del_kind() {
@@ -214,6 +231,11 @@ export default {
         add_catalog() {
             this.showDialog = true;
             this.dialogStatus = 6;
+            this.title = {
+                title: "添加目录",
+                nodeName: "节点名称",
+                code: "节点代号"
+            }
         },
         // 选择框改变
         selectChange() {
@@ -221,15 +243,27 @@ export default {
         },
         // 节点后的添加
         add(data) {
+            console.log(data)
             this.showDialog = true;
             this.dialogStatus = 1;
+            this.title = {
+                title: data.nodeName+"：添加目录",
+                nodeName: "子节点名称",
+                code: "子节点代号"
+            }
             this.form.parentId = data.id;
             this.addOrEditThis = data; // 保存当前点击者状态
         },
         // 节点后的编辑
         edit(data) {
+            console.log(data)
             this.showDialog = true;
             this.dialogStatus = 2;
+            this.title = {
+                title: data.nodeName+"：编辑节点",
+                nodeName: "子节点名称",
+                code: "子节点代号"
+            }
             this.addOrEditThis = data; // 保存当前点击者状态 此处只为 dialog 的title显示用
             delete this.form.parentId;
             this.form = {