af1bcbd6
 wuxw
房屋页面开发中
|
1
2
3
4
5
6
7
|
<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"
|
|
af1bcbd6
wuxw
房屋页面开发中
|
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
|
: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',
|
|
81955f61
wuxw
优化房屋页面
|
37
|
label: 'text',
|
|
af1bcbd6
wuxw
房屋页面开发中
|
38
39
40
41
42
43
|
},
currentFloorId: ''
}
},
mounted() {
this.loadData()
|
|
af1bcbd6
wuxw
房屋页面开发中
|
44
45
|
},
beforeDestroy() {
|
|
af1bcbd6
wuxw
房屋页面开发中
|
46
47
|
},
methods: {
|
|
81955f61
wuxw
优化房屋页面
|
48
49
50
|
refreshTree(param) {
this.handleRefreshTree(param)
},
|
|
20ddb876
wuxw
优化房屋产权
|
51
52
53
54
55
56
57
|
selectFirstUnit(){
if(this.treeData.length > 0){
this.handleNodeClick(this.treeData[0].children[0])
// 并且展开
}
},
|
|
af1bcbd6
wuxw
房屋页面开发中
|
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
|
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_')) {
|
|
81955f61
wuxw
优化房屋页面
|
104
|
this.$emit('switchFloorUnit', { floorId: data.floorId,unitId: '' })
|
|
af1bcbd6
wuxw
房屋页面开发中
|
105
|
} else {
|
|
81955f61
wuxw
优化房屋页面
|
106
|
this.$emit('switchFloorUnit', { floorId:'',unitId: data.unitId })
|
|
af1bcbd6
wuxw
房屋页面开发中
|
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
}
},
}
}
</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;
}
|
|
81955f61
wuxw
优化房屋页面
|
126
127
128
129
130
131
|
.custom-tree-node {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px; /* 根据你的布局调整 */
}
|
|
af1bcbd6
wuxw
房屋页面开发中
|
132
|
</style>
|
