af1bcbd6
 wuxw
房屋页面开发中
|
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
121
|
<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"
default-expand-all
: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: 'FloorUnitTree',
props: {
callBackListener: String
},
data() {
return {
treeData: [],
defaultProps: {
children: 'children',
label: 'text'
},
currentFloorId: ''
}
},
mounted() {
this.loadData()
this.$eventBus.$on('floorUnitTree', this.handleRefreshTree)
},
beforeDestroy() {
this.$eventBus.$off('floorUnitTree', this.handleRefreshTree)
},
methods: {
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}${this.$t('room.floorUnitTree.building')}(${item.floorName})`,
children: []
}
treeData.push(floorMap[item.floorId])
}
if (item.unitId && item.unitNum !== '0') {
floorMap[item.floorId].children.push({
id: `u_${item.unitId}`,
unitId: item.unitId,
text: `${item.unitNum}${this.$t('room.floorUnitTree.unit')}`,
icon: 'el-icon-house'
})
}
})
return treeData
},
handleNodeClick(data) {
if (data.id.startsWith('f_')) {
this.$emit('switchFloor', { floorId: data.floorId })
this.$eventBus.$emit(this.callBackListener, 'switchFloor', { floorId: data.floorId })
} else {
this.$emit('switchUnit', { unitId: data.unitId })
this.$eventBus.$emit(this.callBackListener, 'switchUnit', { 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;
}
</style>
|
