communityRoomTree.vue
3.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<template>
<el-card class="tree-card">
<el-tree
ref="tree"
:data="treeData"
:props="defaultProps"
node-key="id"
highlight-current
@node-click="handleNodeClick"
/>
</el-card>
</template>
<script>
import { queryCommunityUnitTree, queryAdminRoomsTree } from '@/api/fee/adminRoomFeeApi'
export default {
name: 'CommunityRoomTree',
data() {
return {
treeData: [],
defaultProps: {
children: 'children',
label: 'text'
},
loadedUnits: new Set() // Track which units have loaded their rooms
}
},
mounted() {
this.initCommunityRoomTree()
},
methods: {
async initCommunityRoomTree() {
try {
const res = await queryCommunityUnitTree({ a: 1 })
if (res.code === 0) {
this.treeData = res.data
}
} catch (error) {
console.error('Failed to load community tree:', error)
}
},
async handleNodeClick(data) {
// Only handle unit nodes (u_ prefix) that haven't been loaded yet
if (data.id.startsWith('u_') && !this.loadedUnits.has(data.id)) {
await this.loadRooms(data.unitId || data.id.replace('u_', ''))
this.loadedUnits.add(data.id)
}
// Emit event for room selection
if (data.id.startsWith('r_')) {
this.$emit('select-room', {
roomName: data.roomName,
roomId: data.roomId
})
}
},
async loadRooms(unitId) {
try {
const param = {
page: 1,
row: 1000,
unitId: unitId
}
const res = await queryAdminRoomsTree(param)
if (res.rooms && res.rooms.length > 0) {
const rooms = res.rooms.map(room => ({
id: `r_${room.roomId}`,
roomId: room.roomId,
roomName: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
text: room.ownerName ? `${room.roomNum}(${room.ownerName})` : room.roomNum
}))
// Find and update the unit node
const unitNode = this.findNodeById(`u_${unitId}`, this.treeData)
if (unitNode) {
this.$set(unitNode, 'children', rooms)
// Auto-select the first room if needed
if (rooms.length > 0) {
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(rooms[0].id)
this.$emit('select-room', {
roomName: rooms[0].roomName,
roomId: rooms[0].roomId
})
})
}
}
}
} catch (error) {
console.error('Failed to load rooms:', error)
}
},
findNodeById(id, nodes) {
if (!nodes) return null
for (const node of nodes) {
if (node.id === id) return node
if (node.children) {
const found = this.findNodeById(id, node.children)
if (found) return found
}
}
return null
}
}
}
</script>
<style scoped>
.tree-card {
max-height: 80vh;
overflow-y: auto;
}
</style>