区域查询 完成选择和搜索的功能

src/views/areaManagement/AreaQuery.vue

@@ -1,43 +1,167 @@
 <template>
     <div class="AreaQuery">
-        AreaQuery
+        <header class="header">
+            <el-row type="flex">
+                <el-col :span="4">
+                    <el-cascader
+                        :options="areaTree"
+                        :props="{ checkStrictly: true, children: 'childs', label: 'nodeName' ,value:'id'}"
+                        v-model="areaId"
+                        @change="selectAreaChange"
+                        clearable
+                        placeholder="请选择要查看的类型"
+                    >
+                        <template slot-scope="{ node, data }">
+                            <span>{{ data.nodeName }}</span>
+                        </template>
+                    </el-cascader>
+                </el-col>
+                <el-col :span="4">
+                    <el-input
+                        placeholder="请输入内容"
+                        @change="search"
+                        v-model="searchValue"
+                        class="input-with-select"
+                    >
+                        <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
+                    </el-input>
+                </el-col>
+            </el-row>
+        </header>
+        <section class="section">
+            <div v-for="item in childres" :key="item.id" class="item">
+                <p>{{ item.nodeName }}</p>
+            </div>
+        </section>
     </div>
 </template>
 
 <script>
 import { mapActions } from "vuex";
 
+// 区域树 code
+const arearCode = "area-info";
+// unit
+const units = {
+    // 查找子类  传入 树形data 和 级联选择的 value 的id数组
+    findChildres(tree, idArr) {
+        let result = tree;
+        idArr.forEach((item1, index1) => {
+            find(result);
+            function find(arr) {
+                arr.forEach(item2 => {
+                    if (item2["id"] == item1) {
+                        result = item2["childs"];
+                    } else {
+                        return;
+                    }
+                });
+            }
+        });
+        return result;
+    },
+    // 扁平化 树
+    flatTree(tree) {
+        let result = []
+        loop(tree)
+        function loop(treeArr) {
+            treeArr.forEach(item => {
+                if(item['childs'] && item['childs'].length > 0) {
+                    loop(item['childs'])
+                }
+                delete item['childs']
+                result.push(item)
+            })
+        }
+        return result
+    }
+};
+
 export default {
     name: "AreaQuery",
     data() {
         return {
-           
+            areaTree: [],
+            areaId: "",
+            childres: "",
+            searchValue: ""
         };
     },
     created() {
-        
+        this.getTreeByCode(arearCode);
     },
     methods: {
         ...mapActions(["fetch"]),
-         get() {
+        // 通过code获取树
+        getTreeByCode(code) {
             this.fetch({
-                api: "aaa",
-                method: "GET",
-                data: {},
+                api: "/publics/treenode/getTreeByCode",
+                method: "POST",
+                data: { code }, //目前只有一个组织,其他参数调整钟
                 success: res => {
-                    console.log(res);
+                    // this.id = res.id;
+                    this.getAreaTree(res.id);
                 },
                 fail: err => {
                     console.log(err);
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
+                    }
+                }
+            });
+        },
+        // 请求 区域树
+        getAreaTree(parentId) {
+            this.fetch({
+                api: "/publics/treenode/listNodeByParent",
+                method: "POST",
+                data: {
+                    parentId,
+                    hasSub: true
+                },
+                success: res => {
+                    this.areaTree = res;
+                    console.log(res);
+                },
+                fail: err => {
                     if (err.errMsg) this.$message.error(err.errMsg);
                     else this.$message.error("服务器发生异常");
                 }
             });
+        },
+        // 区域选择 改变
+        selectAreaChange(value) {
+            console.log(value);
+            this.childres = units.findChildres(this.areaTree, value);
+        },
+        // 搜索
+        search() {
+            console.log(this.searchValue);
         }
     }
 };
 </script>
 
 <style lang="scss" scoped>
-
+.AreaQuery {
+    .header {
+        margin-bottom: 15px;
+    }
+    .section {
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+            width: 200px;
+            height: 200px;
+            margin: 5px;
+            padding: 5px;
+            border-radius: 10px;
+            box-sizing: border-box;
+            border: 1px solid #666;
+        }
+    }
+}
 </style>

src/views/deviceManagement/DeviceInfo.vue

@@ -1,4 +1,3 @@
-
 <template>
     <div class="DeviceInfo">
         <el-row :gutter="20">
@@ -114,7 +113,7 @@
                         v-model="mountform.areaId"
                         @change="selectAreaChange"
                         clearable
-                        placeholder="请选择要查看的类型"
+                        placeholder="请选择挂载区域"
                     >
                         <template slot-scope="{ node, data }">
                             <span>{{ data.nodeName }}</span>
@@ -421,8 +420,7 @@ export default {
             console.log(value);
             let areaId = value[value.length - 1];
             let areaTree = this.areaTree;
-            let areaName = findName(areaId);
-            this.mountform.areaName = areaName;
+            this.mountform.areaName = findName(areaId);
             console.log(areaName);
 
             function findName(id) {