房屋左侧树懒加载与搜索

src/views/components/resiForm.vue

@@ -1618,9 +1618,9 @@ export default {
       this.getHouseList()
     },
     async handleClick (tab, event) {
-      console.log(tab);
-      console.log(event);
-      console.log(tab._props.label );
+      // console.log(tab);
+      // console.log(event);
+      // console.log(tab._props.label );
       if (tab._props.label == '教育') {
         if (!this.form.resiId) {
           this.newForm.eduInfoDto = this.form.eduInfoDto

src/views/modules/base/community/community.vue

@@ -4,7 +4,7 @@
     <div :style="{height:rowHeight}"
          class="div_tree">
       <el-input placeholder="输入关键字进行过滤"
-                v-model="filterText">
+                v-model="filterText" @keydown.native.enter="handleChangeSerch()">
       </el-input>
       <el-scrollbar :style="{height:treeHeight}"
                     class="scrollar">
@@ -15,10 +15,11 @@
                  :props="defaultProps"
                  :highlight-current="true"
                  node-key="id"
-                 :default-expanded-keys="openNodes"
                  :expand-on-click-node="false"
                  :filter-node-method="filterNode"
-                 @node-click="handleNodeClick">
+                 @node-click="handleNodeClick"
+                 lazy
+				      	:load="lazyLoadTree">
 
           <span slot-scope="{ node, data }"
                 class="custom-tree-node">
@@ -140,10 +141,19 @@
             <el-select v-model.trim="neighborHoodId"
                        :disabled="vDisabled"
                        placeholder="小区"
+                       filterable
                        size="small"
                        clearable
                        class="u-item-width-communitycascader"
                        @change="handleChangeV">
+                     <!-- <div>
+                        <el-input
+                        placeholder="请输入"
+                        v-model="searchAgencyTxt"
+                        @keyup.enter.native="handleChangeSerchAgency(searchAgencyTxt)"
+                        >
+                      </el-input> -->
+                <!-- </div> -->
               <el-option v-for="item in optionsV"
                          :key="item.value"
                          :label="item.label"
@@ -287,10 +297,12 @@ import CDialog from '@c/CDialog'
 import communityTable from './communityTable'
 import buildTable from './buildTable'
 import roomTable from './roomTable'
-import { requestPost } from "@/js/dai/request";
+import { requestPost,requestGet } from "@/js/dai/request";
 import { mapGetters } from 'vuex'
 import { Loading } from 'element-ui' // 引入Loading服务
 import nextTick from 'dai-js/tools/nextTick'
+import debounce from "lodash/debounce";
+import deepClone from "@/utils/deepClone.js";
 
 let loading // 加载动画
 export default {
@@ -315,10 +327,12 @@ export default {
       filterText: '',
       treeLoading: true,
       treeData: [],
+      searchAgencyTxt:"",
       openNodes: [],
       defaultProps: {
         children: 'children',
-        label: 'showName'
+        label: 'showName',
+        isLeaf: "isLeaf",
       },
 
       selTreeObj: {},
@@ -420,7 +434,8 @@ export default {
 
     },
 
-    ...mapGetters(['clientHeight', 'iframeHeight'])
+    ...mapGetters(['clientHeight', 'iframeHeight']),
+   
   },
   methods: {
     handleChangeV (val) {
@@ -432,6 +447,16 @@ export default {
       // this.getUniList();
       // this.getHouseList();
     },
+    // handleChangeSerchAgency(val){
+    //   console.log(val);
+    //   // this.optionsV = this.optionsV.filter(item=>item.label == val)
+    // this.optionsV.forEach( function(item){
+    //   if(item.label==val){
+    //     console.log(1);
+    //   }
+    // })
+    //   console.log(this.optionsV );
+    // },
     handleChangeB (val) {
 
       this.buildingUnitId = "";
@@ -443,7 +468,21 @@ export default {
       this.houseId = "";
       this.getHouseList();
     },
-
+    async lazyLoadTree(node, resolve) {
+				const url = `/actual/base/communityBuilding/tree/nextTreeNode?id=${node.data.id}&level=${node.data.level}`;
+				const { data, code, msg } = await requestGet(url);
+				if (code === 0) {
+					data.forEach((element) => {
+						if (element.level === "building") {
+							element.isLeaf = true;
+						}
+					});
+            resolve(data);
+				} else {
+					this.$message.error(msg);
+				}
+			// }
+		},
     async getValiheList () {
       const { user } = this.$store.state;
       if (!this.selGridId) {
@@ -493,6 +532,42 @@ export default {
       }
 
 
+    },
+    //回车搜索组织
+  async  handleChangeSerch (){
+    this.startLoading()
+      this.$refs.ref_tree.$data.store.lazy = !this.filterText
+      if(this.filterText.length > 0 && this.filterText!=''){
+        const url = `/actual/base/communityBuilding/tree/search?keyword=${this.filterText}`
+      const {data,code,msg} = await requestGet(url)
+       if(data[0].children.length>0){
+        this.treeData = data
+       }else{
+        this.treeData = []
+        setTimeout(() => {
+          this.loadTree()
+        }, 5)
+        this.$message.error('暂未找到!')
+       }
+      }else {
+          this.treeData = []
+          this.loadTree()
+      }
+      this.endLoading()
+    } ,
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
     },
     async getUniList () {
 
@@ -584,30 +659,24 @@ export default {
       }
     },
     async loadTree (isRefresh) {
-      const url = "/actual/base/communityBuilding/listBuildingTree"
-      let params = {}
-
-      const { data, code, msg } = await requestPost(url, params)
-
+      const url = "/actual/base/communityBuilding/tree/initTree"
+      const { data, code, msg } = await requestGet(url)
       if (code === 0) {
         this.openNodes = []
-        this.openNodes.push(data[0].id)
+        this.openNodes.push(data.id)
 
-        this.treeData = data
-        this.handleTreeData(this.treeData)
+        this.treeData = []
+        this.treeData.push(data)
+        if (!isRefresh && data) {
+					this.selTreeObj = data;
+					if (!this.selTreeObj.latitude) {
+						this.selTreeObj.latitude = this.centerPoint[0];
+					}
 
-
-        if (!isRefresh && data.length > 0) {
-
-          this.selTreeObj = data[0]
-          if (!this.selTreeObj.latitude) {
-            this.selTreeObj.latitude = this.centerPoint[0]
-          }
-
-          if (!this.selTreeObj.longitude) {
-            this.selTreeObj.longitude = this.centerPoint[1]
-          }
-        }
+					if (!this.selTreeObj.longitude) {
+						this.selTreeObj.longitude = this.centerPoint[1];
+					}
+				}
 
       } else {
         this.$message.error(msg)
@@ -820,9 +889,9 @@ export default {
     }
   },
   watch: {
-    filterText (val) {
-      this.$refs.ref_tree.filter(val);
-    },
+    // filterText (val) {
+    //   this.$refs.ref_tree.filter(val);
+    // },
 
   },
   components: {