楼栋统计

project/sass/apps/AppBuildManage/components/List.vue

@@ -1,14 +1,13 @@
 <template>
-  <section class="AppPetitionManage">
-    <ai-detail>
-      <!-- 标题 -->
+  <ai-list class="AppPetitionManage">
       <ai-title slot="title" title="楼栋管理" isShowBottomBorder />
-      <template #content>
-        <ai-tree-menu title="楼栋管理" @search="(v) => $refs.gridTree.filter(v)">
-          <el-tree :data="treeData" ref="gridTree" :filter-node-method="handleTreeFilter" @node-click="handleSelectGrid" highlight-current node-key="id" :props="{ label: 'name', children: 'children' }" :default-expanded-keys="[defaultShowNodes]" />
-        </ai-tree-menu>
+      <template #left>
         
-        <div class="flex">
+        <ai-tree-menu title="楼栋管理" @search="(v) => $refs.gridTree.filter(v)">
+          <el-tree :data="treeData" ref="gridTree" :filter-node-method="handleTreeFilter" @node-click="handleSelectGrid" highlight-current node-key="id" :props="{ label: 'name', children: 'children' }" />
+        </ai-tree-menu>
+      </template>
+      <template #content>
         <ai-search-bar bottomBorder>
           <template slot="left">
             <!-- 定位状态 -->
@@ -21,7 +20,7 @@
           </template>
         </ai-search-bar>
 
-          <ai-search-bar class="ai-search-ba">
+        <ai-search-bar style="margin-top: 16px;">
           <template slot="left">
             <el-button icon="iconfont iconAdd" type="primary" size="small" @click="onAdd('')" :disabled="!isAdd">添加 </el-button>
             <el-button icon="iconfont iconDelete" size="small" @click="removeAll" :disabled="ids.length == 0">删除 </el-button>
@@ -57,10 +56,8 @@
             </div>
           </el-table-column>
         </ai-table>
-        </div>
       </template>
-    </ai-detail>
-  </section>
+  </ai-list>
 </template>
 
 <script>
@@ -158,11 +155,13 @@ export default {
 
   methods: {
     getListinfo() {
-      this.instance.post(`/app/appcommunityinfo/queryCommunityTree?id=${this.user.info.areaId}`).then((res) => {
+      this.instance.post(`/app/appcommunityinfo/queryCommunityTree`).then((res) => {
         if (res.data) {
-          this.treeData = [res.data]
+          this.treeData = res.data?.filter(e => !e.parentId)
+          this.treeData.map(p => this.addChild(p, res.data, {parent: 'parentId'}))
           this.$nextTick(() => {
             this.defaultShowNodes = this.treeData[0].id
+            this.$refs.gridTree.setCurrentKey(this.treeData[0].id)
           })
         }
       })
@@ -230,7 +229,6 @@ export default {
     },
 
     handleSelectGrid(data) {
-      console.log(data)
       this.isAdd = false
       if (data.type == 1) {
         this.isAdd = true
@@ -281,29 +279,47 @@ export default {
     }
   }
 
-  ::v-deep .el-tree {
-    .el-tree-node__content {
-      display: inline-flex;
-      min-width: 100%;
 
-      &:hover {
-        background: #e8efff;
+  ::v-deep .el-tree {
+    background: transparent;
+
+    .el-tree-node__expand-icon.is-leaf {
+      color: transparent!important;
+    }
+
+    .el-tree-node__content > .el-tree-node__expand-icon {
+      padding: 4px;
+    }
+
+    .el-tree-node__content {
+      height: 32px;
+    }
+
+    .el-tree__empty-text {
+      color: #222;
+      font-size: 14px;
+    }
+
+    .el-tree-node__children .el-tree-node__content {
+      height: 32px;
+    }
+
+    .el-tree-node__content:hover {
+      background: #E8EFFF;
       color: #222222;
       border-radius: 2px;
     }
-    }
 
     .is-current > .el-tree-node__content {
-      background: #2266ff;
-
       &:hover {
-        background: #2266ff;
+        background: #2266FF;
         color: #fff;
       }
 
+      background: #2266FF;
+      
       span {
         color: #fff;
-        font-weight: bold;
       }
     }
   }