fix:楼栋管理--展开左侧菜单栏，页面加载不全

src/views/mz/dept/index.vue

@@ -2,92 +2,208 @@
   <div class="app-container">
     <div class="flex w-full h-full">
       <div class="tree mr-10 card">
-        <el-tree :data="deptList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+        <el-tree
+          :data="deptList"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+        ></el-tree>
       </div>
       <div class="card flex-1" style="width: calc(100% - 10.7143rem)">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+        <el-form
+          :model="queryParams"
+          ref="queryForm"
+          size="small"
+          :inline="true"
+          v-show="showSearch"
+        >
           <el-form-item label="公寓名称" prop="deptName">
-            <el-input v-model="queryParams.deptName" placeholder="请输入公寓名称" clearable
+            <el-input
-              @keyup.enter.native="handleQuery" />
+              v-model="queryParams.deptName"
+              placeholder="请输入公寓名称"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
           <el-form-item label="公寓联系电话" prop="phone">
-            <el-input v-model="queryParams.phone" placeholder="请输入公寓联系电话" clearable @keyup.enter.native="handleQuery" />
+            <el-input
+              v-model="queryParams.phone"
+              placeholder="请输入公寓联系电话"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
           <el-form-item label="公寓地址" prop="address">
-            <el-input v-model="queryParams.address" placeholder="请输入公寓地址" clearable @keyup.enter.native="handleQuery" />
+            <el-input
+              v-model="queryParams.address"
+              placeholder="请输入公寓地址"
+              clearable
+              @keyup.enter.native="handleQuery"
+            />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQuery"
+              >搜索</el-button
+            >
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+              >重置</el-button
+            >
           </el-form-item>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+            <el-button
-              v-hasPermi="['system:dept:add']">新增</el-button>
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAdd"
+              v-hasPermi="['system:dept:add']"
+              >新增</el-button
+            >
           </el-col>
 
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+          <right-toolbar
+            :showSearch.sync="showSearch"
+            @queryTable="getList"
+          ></right-toolbar>
         </el-row>
 
         <el-table v-loading="loading" :data="dataList">
-          <el-table-column type="index" width="55" label="序号" align="center" />
+          <el-table-column
-          <el-table-column label="所在区域" align="center" prop="deptNamePath" />
+            type="index"
+            width="55"
+            label="序号"
+            align="center"
+          />
+          <el-table-column
+            label="所在区域"
+            align="center"
+            prop="deptNamePath"
+          />
           <el-table-column label="小区/公寓名称" align="center" prop="deptName">
             <template slot-scope="scope">
-              <a style="color:#409eff" @click="toBuilding(scope.row)">
+              <a style="color: #409eff" @click="toBuilding(scope.row)">
                 {{ scope.row.deptName }}
               </a>
             </template>
           </el-table-column>
           <el-table-column label="公寓联系电话" align="center" prop="phone" />
           <el-table-column label="详细地址" align="center" prop="address" />
-          <el-table-column label="录入房屋数" align="center" prop="houseRecordedNum" />
+          <el-table-column
-          <el-table-column label="录入房间数" align="center" prop="roomRecordedNum" />
+            label="录入房屋数"
+            align="center"
+            prop="houseRecordedNum"
+          />
+          <el-table-column
+            label="录入房间数"
+            align="center"
+            prop="roomRecordedNum"
+          />
 
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <el-table-column
+            label="操作"
+            align="center"
+            class-name="small-padding fixed-width"
+          >
             <template slot-scope="scope">
-              <el-button v-hasPermi="['system:dept:query']" size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
+              <el-button
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:dept:query']"
-                v-hasPermi="['system:dept:edit']">修改</el-button>
+                size="mini"
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                type="text"
-                v-hasPermi="['system:dept:remove']">删除</el-button>
+                icon="el-icon-view"
+                @click="handleView(scope.row)"
+                >查看</el-button
+              >
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['system:dept:edit']"
+                >修改</el-button
+              >
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:dept:remove']"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+        <pagination
-          :limit.sync="queryParams.pageSize" @pagination="getList" />
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
       </div>
     </div>
 
     <!-- 添加或修改公寓对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="64.2857rem" append-to-body>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="64.2857rem"
+      append-to-body
+    >
       <el-form ref="form" :model="form" :rules="rules" label-width="8.5714rem">
         <el-row>
           <el-col :span="12" v-if="form.parentId !== 0">
             <el-form-item label="所在区域" prop="parentId">
-              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择所在区域"
+              <treeselect
-                :disabled="disabled" />
+                v-model="form.parentId"
+                :options="deptOptions"
+                :normalizer="normalizer"
+                placeholder="选择所在区域"
+                :disabled="disabled"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="公寓名称" prop="deptName">
-              <el-input v-model="form.deptName" placeholder="请输入公寓名称" :disabled="disabled" />
+              <el-input
+                v-model="form.deptName"
+                placeholder="请输入公寓名称"
+                :disabled="disabled"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
-
           <el-col :span="12">
             <el-form-item label="公寓联系电话" prop="phone">
-              <el-input v-model="form.phone" placeholder="请输入公寓联系电话" maxlength="11" :disabled="disabled" />
+              <el-input
+                v-model="form.phone"
+                placeholder="请输入公寓联系电话"
+                maxlength="11"
+                :disabled="disabled"
+              />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="关联物业" prop="propertyId">
-              <el-select v-model="form.propertyId" placeholder="请选择关联物业" filterable :disabled="disabled" clearable>
+              <el-select
-                <el-option v-for="item in propertyOptions" :key="item.id" :label="item.propertyName" :value="item.id" />
+                v-model="form.propertyId"
+                placeholder="请选择关联物业"
+                filterable
+                :disabled="disabled"
+                clearable
+              >
+                <el-option
+                  v-for="item in propertyOptions"
+                  :key="item.id"
+                  :label="item.propertyName"
+                  :value="item.id"
+                />
               </el-select>
             </el-form-item>
           </el-col>
@@ -96,9 +212,18 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="标签" prop="labels">
-              <el-checkbox-group v-model="form.labels" class="tag-group" :disabled="disabled">
+              <el-checkbox-group
-                <el-checkbox v-for="dict in dict.type.apartment_label" :key="dict.value" :label="dict.value"
+                v-model="form.labels"
-                  class="tag-item">{{ dict.label }}</el-checkbox>
+                class="tag-group"
+                :disabled="disabled"
+              >
+                <el-checkbox
+                  v-for="dict in dict.type.apartment_label"
+                  :key="dict.value"
+                  :label="dict.value"
+                  class="tag-item"
+                  >{{ dict.label }}</el-checkbox
+                >
               </el-checkbox-group>
             </el-form-item>
           </el-col>
@@ -106,10 +231,22 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="小区公寓图片" prop="images">
-              <el-upload :action="uploadUlr" :headers="$getElUploadHeaders()" list-type="picture-card"
+              <el-upload
-                :file-list="fileList" :on-preview="handlePictureCardPreview" :on-remove="disabled ? null : handleRemove"
+                :action="uploadUlr"
-                :on-change="disabled ? null : handleChange" :on-success="disabled ? null : handleSuccess" :limit="3"
+                :headers="$getElUploadHeaders()"
-                multiple :class="{ 'upload-disabled': disabled, 'upload-normal': !disabled }">
+                list-type="picture-card"
+                :file-list="fileList"
+                :on-preview="handlePictureCardPreview"
+                :on-remove="disabled ? null : handleRemove"
+                :on-change="disabled ? null : handleChange"
+                :on-success="disabled ? null : handleSuccess"
+                :limit="3"
+                multiple
+                :class="{
+                  'upload-disabled': disabled,
+                  'upload-normal': !disabled,
+                }"
+              >
                 <i class="el-icon-plus" v-if="!disabled"></i>
               </el-upload>
               <el-dialog :visible.sync="dialogVisible">
@@ -121,26 +258,54 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="详细介绍" prop="introduce">
-              <el-input type="textarea" v-model="form.introduce" :disabled="disabled" :rows="4" />
+              <el-input
+                type="textarea"
+                v-model="form.introduce"
+                :disabled="disabled"
+                :rows="4"
+              />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="24">
-            <el-form-item label="地图位置" prop="longitude" style="display: block">
+            <el-form-item
+              label="地图位置"
+              prop="longitude"
+              style="display: block"
+            >
               <div class="map-container">
                 <div class="map-search-box">
-                  <el-input v-model="searchAddress" placeholder="请输入地址进行搜索" clearable @keyup.enter.native="handleSearch"
+                  <el-input
-                    :disabled="disabled">
+                    v-model="searchAddress"
-                    <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
+                    placeholder="请输入地址进行搜索"
+                    clearable
+                    @keyup.enter.native="handleSearch"
+                    :disabled="disabled"
+                  >
+                    <el-button
+                      slot="append"
+                      icon="el-icon-search"
+                      @click="handleSearch"
+                    ></el-button>
                   </el-input>
                 </div>
                 <div id="map-container" class="amap-box" v-if="open"></div>
               </div>
             </el-form-item>
-            <el-form-item label="详细地址" prop="address" style="display: block">
+            <el-form-item
-              <el-input class="u-edit-width-normal" maxlength="50" show-word-limit placeholder="请输入详细地址"
+              label="详细地址"
-                :disabled="disabled" v-model.trim="form.address">
+              prop="address"
+              style="display: block"
+            >
+              <el-input
+                class="u-edit-width-normal"
+                maxlength="50"
+                show-word-limit
+                placeholder="请输入详细地址"
+                :disabled="disabled"
+                v-model.trim="form.address"
+              >
               </el-input>
             </el-form-item>
           </el-col>
@@ -158,7 +323,9 @@
         </el-row> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm"  v-if="!disabled">确 定</el-button>
+        <el-button type="primary" @click="submitForm" v-if="!disabled"
+          >确 定</el-button
+        >
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
@@ -256,8 +423,8 @@ export default {
       // 查询参数
       queryParams: {
         parentId: 100,
-        phone: '',
+        phone: "",
-        address: '',
+        address: "",
         pageNum: 1,
         pageSize: 10,
       },
@@ -319,7 +486,7 @@ export default {
         ],
         introduce: [
           { required: true, message: "请输入详细介绍", trigger: "blur" },
-        ]
+        ],
       },
       map: null,
       marker: null,
@@ -363,10 +530,12 @@ export default {
     },
   },
   methods: {
-
     //跳转到楼栋管理
     toBuilding(row) {
-      this.$router.push({ path: '/mz/building', query: { apartmentId: row.deptId } });
+      this.$router.push({
+        path: "/mz/building",
+        query: { apartmentId: row.deptId },
+      });
     },
     /** 初始化地图 */
     initMap() {
@@ -385,13 +554,19 @@ export default {
       // 创建地图实例
       this.map = new window.AMap.Map("map-container", {
         zoom: 10,
-        center: [this.form.longitude || 120.207813, this.form.latitude || 36.147907], // 动态设置中心点
+        center: [
+          this.form.longitude || 120.207813,
+          this.form.latitude || 36.147907,
+        ], // 动态设置中心点
         resizeEnable: true,
       });
 
       // 创建标记点
       this.marker = new window.AMap.Marker({
-        position: [this.form.longitude || 120.207813, this.form.latitude || 36.147907], // 动态设置标记位置
+        position: [
+          this.form.longitude || 120.207813,
+          this.form.latitude || 36.147907,
+        ], // 动态设置标记位置
         draggable: true,
       });
       this.map.add(this.marker);
@@ -427,7 +602,7 @@ export default {
 
       // 监听地图点击事件
       this.map.on("click", (e) => {
-        if (this.disabled) return
+        if (this.disabled) return;
         const lnglat = {
           longitude: e.lnglat.lng,
           latitude: e.lnglat.lat,
@@ -529,18 +704,18 @@ export default {
         this.allDeptData = response.data;
 
         // 找到根节点（parentId 为 0 的节点）
-        const rootNode = response.data.find(item => item.parentId === 0);
+        const rootNode = response.data.find((item) => item.parentId === 0);
 
         if (rootNode) {
           // 获取根节点的直接子节点
-          const firstLevelNodes = response.data.filter(item =>
+          const firstLevelNodes = response.data.filter(
-            item.parentId === rootNode.deptId
+            (item) => item.parentId === rootNode.deptId
           );
 
           // 为根节点添加子节点，但不添加更深层级
-          rootNode.children = firstLevelNodes.map(node => ({
+          rootNode.children = firstLevelNodes.map((node) => ({
             ...node,
-            children: [] // 将子节点的 children 设置为空数组，这样就不会显示更深层级
+            children: [], // 将子节点的 children 设置为空数组，这样就不会显示更深层级
           }));
 
           // 将根节点设置为 deptList
@@ -557,6 +732,7 @@ export default {
       listApartment(this.queryParams).then((response) => {
         this.dataList = response.rows;
         this.total = response.total;
+        this.loading = false;
       });
     },
     /** 查询关联物业列表 */
@@ -583,7 +759,7 @@ export default {
           // 构建提交的数据
           const submitData = {
             ...this.form,
-            type: 2
+            type: 2,
           };
           this.saveData(submitData);
         }
@@ -653,7 +829,13 @@ export default {
       this.open = true;
       this.title = "添加公寓";
       listDept().then((response) => {
-        this.deptOptions = this.handleTree(response.data, "deptId", "parentId", "children", 2);
+        this.deptOptions = this.handleTree(
+          response.data,
+          "deptId",
+          "parentId",
+          "children",
+          2
+        );
       });
     },
     /** 展开/折叠操作 */
@@ -668,13 +850,23 @@ export default {
     handleUpdate(row) {
       this.reset();
       getDept(row.deptId).then((response) => {
-        this.fileList = response.data.images.map(item => ({ url: item.fileUrl, fileName: item.fileName, fileFormat: item.fileFormat }));
+        this.fileList = response.data.images.map((item) => ({
+          url: item.fileUrl,
+          fileName: item.fileName,
+          fileFormat: item.fileFormat,
+        }));
         this.form = response.data;
         this.open = true;
         this.title = "修改公寓";
         if (this.deptOptions) {
           listDept().then((response) => {
-            this.deptOptions = this.handleTree(response.data, "deptId", "parentId", "children", 2);
+            this.deptOptions = this.handleTree(
+              response.data,
+              "deptId",
+              "parentId",
+              "children",
+              2
+            );
           });
         }
       });
@@ -683,14 +875,20 @@ export default {
     handleView(row) {
       this.reset();
       getDept(row.deptId).then((response) => {
-        this.fileList = response.data.images
+        this.fileList = response.data.images;
         this.form = response.data;
         this.open = true;
         this.disabled = true;
         this.title = "公寓详情";
         if (this.deptOptions) {
           listDept().then((response) => {
-            this.deptOptions = this.handleTree(response.data, "deptId", "parentId", "children", 2);
+            this.deptOptions = this.handleTree(
+              response.data,
+              "deptId",
+              "parentId",
+              "children",
+              2
+            );
           });
         }
       });
@@ -702,17 +900,17 @@ export default {
           return delDept(row.deptId);
         })
         .then(() => {
-          this.getApartmentList()
+          this.getApartmentList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => { });
+        .catch(() => {});
     },
     /** 图片上传相关方法 */
     handleRemove(file, fileList) {
       this.fileList = fileList;
       this.form.images = this.form.images.filter(
         (item) => item.fileUrl !== file.url
-      )
+      );
     },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
@@ -723,14 +921,18 @@ export default {
     },
     handleSuccess(response, file, fileList) {
       if (response.code === 200) {
-        this.form.images.push({ fileUrl: response.url, fileName: file.name, fileFormat: file.raw.type });
+        this.form.images.push({
+          fileUrl: response.url,
+          fileName: file.name,
+          fileFormat: file.raw.type,
+        });
       }
     },
     /** 处理树结构 */
     handleNodeClick(node) {
       this.queryParams.parentId = node.deptId;
       this.getApartmentList();
-    }
+    },
   },
 };
 </script>
@@ -755,38 +957,33 @@ export default {
 .amap-box {
   width: 100%;
   height: 28.5714rem;
-  border: .0714rem solid #dcdfe6;
+  border: 0.0714rem solid #dcdfe6;
-  border-radius: .2857rem;
+  border-radius: 0.2857rem;
 }
 
 .map-container {
   position: relative;
-  margin-bottom: .7143rem;
+  margin-bottom: 0.7143rem;
 }
 
 .map-search-box {
   position: absolute;
-  top: .7143rem;
+  top: 0.7143rem;
-  left: .7143rem;
+  left: 0.7143rem;
   width: 21.4286rem;
   z-index: 1;
   background: rgba(255, 255, 255, 0.9);
-  padding: .3571rem;
+  padding: 0.3571rem;
-  border-radius: .2857rem;
+  border-radius: 0.2857rem;
 }
 
 .tag-group {
   display: flex;
   flex-wrap: wrap;
-  gap: .7143rem;
+  gap: 0.7143rem;
 }
 
 .tag-item {
   margin-right: 0 !important;
 }
-
-.app-container {
-  background: #f2f2f2;
-  height: calc(100vh - 5.7143rem);
-}
 </style>