优化代码

wuxw
1 parent b783cddd
Showing 4 changed files with 156 additions and 21 deletions
src/components/room/floorUnitRoomShopTree.vue
src/views/room/roomList.vue
src/views/room/roomStructureList.vue
src/views/user/login/Login.vue
+<template>
+  <div class="bg-white margin-top-xs padding border-radius tree-div">
+    <el-tree
+      v-if="treeData.length > 0"
+      :data="treeData"
+      :props="defaultProps"
+      node-key="id"
+      :expand-on-click-node="false"
+      @node-click="handleNodeClick"
+    >
+      <template #default="{ node, data }">
+        <span class="custom-tree-node">
+          <i :class="data.icon" style="margin-right:5px"></i>
+          <span>{{ node.label }}</span>
+        </span>
+      </template>
+    </el-tree>
+    <div v-else class="no-data">
+      {{ $t('room.floorUnitTree.noData') }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFloorAndUnits } from '@/api/room/floorUnitTreeApi'
+
+export default {
+  name: 'floorUnitRoomShopTree',
+  props: {
+    callBackListener: String
+  },
+  data() {
+    return {
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'text',
+      },
+      currentFloorId: ''
+    }
+  },
+  mounted() {
+    this.loadData()
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    refreshTree(param) {
+      this.handleRefreshTree(param)
+    },
+    selectFirstUnit(){
+      if(this.treeData.length > 0){
+        this.handleNodeClick(this.treeData[0].children[0])
+        // 并且展开
+
+      }
+    },
+    handleRefreshTree(param) {
+      if (param) {
+        this.currentFloorId = param.floorId
+      }
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        const communityId = this.getCommunityId()
+        const response = await getFloorAndUnits(communityId)
+        this.treeData = this.transformData(response)
+      } catch (error) {
+        console.error('加载楼栋单元树失败', error)
+      }
+    },
+    transformData(units) {
+      const treeData = []
+      const floorMap = {}
+      
+      units.forEach(item => {
+        if (!floorMap[item.floorId]) {
+          floorMap[item.floorId] = {
+            id: `f_${item.floorId}`,
+            floorId: item.floorId,
+            floorNum: item.floorNum,
+            icon: 'el-icon-office-building',
+            text: `${item.floorNum}(${item.floorName})`,
+            children: []
+          }
+          treeData.push(floorMap[item.floorId])
+        }
+        
+        if (item.unitId ) {
+          floorMap[item.floorId].children.push({
+            id: `u_${item.unitId}`,
+            unitId: item.unitId,
+            text: `${item.unitNum}`,
+            icon: 'el-icon-house'
+          })
+        }
+      })
+      
+      return treeData
+    },
+    handleNodeClick(data) {
+      if (data.id.startsWith('f_')) {
+        this.$emit('switchFloorUnit', { floorId: data.floorId,unitId: '' })
+      } else {
+        this.$emit('switchFloorUnit', { floorId:'',unitId: data.unitId })
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+.tree-div {
+  min-height: 300px;
+}
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+}
+.no-data {
+  text-align: center;
+  padding: 20px;
+  color: #909399;
+}
+.custom-tree-node {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px; /* 根据你的布局调整 */
+}
+</style>
 \ No newline at end of file
@@ -225,7 +225,7 @@
                 <el-table-column v-for="(item, index) in roomInfo.listColumns" :key="index" :label="item" width="120"
                   align="center">
                   <template slot-scope="scope">
-                    <div class="hc-td">{{ scope.row.listValues[index] || '' }}</div>
+                    <div class="hc-td" v-if="scope.row.listValues">{{ scope.row.listValues[index] || '' }}</div>
                   </template>
                 </el-table-column>
                 <el-table-column :label="$t('roomList.operation')" fixed="right" width="180" align="center"
@@ -450,21 +450,20 @@ export default {
         this.roomInfo.total = res.total
         this.roomInfo.records = res.records
         this.roomInfo.rooms = res.rooms
-        this.dealRoomAttr(res.rooms)
+        await this.dealRoomAttr(res.rooms)
       } catch (error) {
         console.error('获取房间列表失败:', error)
         this.$message.error('获取房间列表失败')
       }
     },
  
-    dealRoomAttr(rooms) {
+    async dealRoomAttr(rooms) {
       if (!rooms || !rooms.length) return
  
-      // 获取表格列配置
-      this.getColumns(rooms, () => {
-        rooms.forEach(item => {
-          this.getColumnsValue(item)
-        })
+      // 获取表格列配置后再处理每个房屋的属性值
+      await this.getColumns()
+      rooms.forEach(item => {
+        this.getColumnsValue(item)
       })
     },
  
@@ -483,7 +482,7 @@ export default {
       })
     },
  
-    async getColumns(rooms, callback) {
+    async getColumns() {
       try {
         const { data } = await getAttrSpecList({
           page: 1,
@@ -493,7 +492,6 @@ export default {
         this.roomInfo.listColumns = data
           .filter(item => item.listShow === 'Y')
           .map(item => item.specName)
-        callback()
       } catch (error) {
         console.error('获取房屋属性失败:', error)
       }
@@ -2,13 +2,17 @@
   <div class="room-structure-container">
     <el-row :gutter="20">
       <el-col :span="4">
-        <floor-unit-tree ref="floorUnitTree" @switchFloorUnit="switchFloorUnit" />
+        <floor-unit-room-shop-tree ref="floorUnitRoomShopTree" @switchFloorUnit="switchFloorUnit" />
       </el-col>
       <el-col :span="20">
-        <el-card v-if="roomStructureInfo.layerRoomCount < 5" class="room-list-card">
+        <el-card v-if="roomStructureInfo.layerRoomCount < 5" class="room-list-card ">
           <el-row :gutter="10">
-            <el-col v-for="(room, index) in roomStructureInfo.rooms" :key="index" :xs="12" :sm="8" :md="6" :lg="4"
-              :xl="3" class="room-item">
+            <el-col
+              v-for="(room, index) in roomStructureInfo.rooms"
+              :key="index"
+              :span="3"
+              class="room-item"
+            >
               <div class="room-card" :style="{ 'background-color': getBgColor(room) }"
                 @dblclick="toSimplifyAcceptance(room)">
                 <div class="room-number">{{ room.floorNum }}-{{ room.unitNum }}-{{ room.roomNum }}</div>
@@ -23,7 +27,7 @@
           </el-row>
         </el-card>
  
-        <el-card v-else class="room-list-card">
+        <el-card v-else class="room-list-card ">
           <div v-for="(val, key, index) in roomStructureInfo.parkRooms" :key="index">
             <div class="floor-title">{{ key }}F</div>
             <el-row :gutter="10" class="floor-row">
@@ -49,14 +53,14 @@
 </template>
  
 <script>
-import floorUnitTree from '@/components/room/floorUnitTree'
+import floorUnitRoomShopTree from '@/components/room/floorUnitRoomShopTree'
 import { listRoomStructure } from '@/api/room/roomStructureApi'
 import { getCommunityId } from '@/api/community/communityApi'
  
 export default {
   name: 'RoomStructureList',
   components: {
-    floorUnitTree
+    floorUnitRoomShopTree
   },
   data() {
     return {
@@ -71,7 +75,7 @@ export default {
   created() {
     this.communityId = getCommunityId()
     setTimeout(() => {
-      this.$refs.floorUnitTree.selectFirstUnit()
+      this.$refs.floorUnitRoomShopTree.selectFirstUnit()
     }, 1500)
   },
   methods: {
@@ -190,7 +194,8 @@ export default {
       padding: 10px;
       cursor: pointer;
       transition: all 0.3s;
-      height: 100%;
+      height: 125px;
+      box-sizing: border-box;
  
       &:hover {
         transform: translateY(-3px);
@@ -44,8 +44,8 @@ export default {
       logo: '',
       companyName:'',
       loginForm: {
-        username: 'wuxw',
-        passwd: 'admin',
+        username: '',
+        passwd: '',
         validateCode: ''
       },
       captchaUrl: '',