145 lines
3.0 KiB
Markdown
145 lines
3.0 KiB
Markdown
|
# 楼层选择组件 (FloorSelector)
|
||
|
|
|
||
|
|
## 功能描述
|
||
|
|
|
||
|
|
楼层选择组件是一个三层级联选择器，用于选择楼层、区域和单元。组件会根据接口返回的树形数据自动渲染选择项。
|
||
|
|
|
||
|
|
## 接口数据格式
|
||
|
|
|
||
|
|
组件期望的接口返回格式：
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"msg": "操作成功",
|
||
|
|
"code": 200,
|
||
|
|
"data": [
|
||
|
|
{
|
||
|
|
"id": "12",
|
||
|
|
"label": "寒山寺",
|
||
|
|
"type": 1,
|
||
|
|
"children": [
|
||
|
|
{
|
||
|
|
"id": "1",
|
||
|
|
"label": "1F",
|
||
|
|
"type": 2,
|
||
|
|
"children": [
|
||
|
|
{
|
||
|
|
"id": "23",
|
||
|
|
"label": "A区",
|
||
|
|
"type": 3,
|
||
|
|
"children": [
|
||
|
|
{
|
||
|
|
"id": "16",
|
||
|
|
"label": "A01",
|
||
|
|
"type": 4,
|
||
|
|
"children": null
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 组件属性 (Props)
|
||
|
|
|
||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
||
|
|
|--------|------|--------|------|
|
||
|
|
| defaultFloorId | String | '' | 默认选中的楼层ID |
|
||
|
|
| defaultAreaId | String | '' | 默认选中的区域ID |
|
||
|
|
| defaultUnitId | String | '' | 默认选中的单元ID |
|
||
|
|
|
||
|
|
## 事件 (Events)
|
||
|
|
|
||
|
|
| 事件名 | 参数 | 说明 |
|
||
|
|
|--------|------|------|
|
||
|
|
| selection-change | { floor, area, unit } | 选择发生变化时触发 |
|
||
|
|
|
||
|
|
## 方法 (Methods)
|
||
|
|
|
||
|
|
| 方法名 | 参数 | 返回值 | 说明 |
|
||
|
|
|--------|------|--------|------|
|
||
|
|
| getCurrentSelection | - | Object | 获取当前选中信息 |
|
||
|
|
| resetSelection | - | - | 重置选择到默认状态 |
|
||
|
|
|
||
|
|
## 使用示例
|
||
|
|
|
||
|
|
### 基础使用
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<FloorSelector @selection-change="handleSelectionChange" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import FloorSelector from './compositons/floorSelector.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
FloorSelector
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleSelectionChange(selection) {
|
||
|
|
console.log('选择变化:', selection)
|
||
|
|
// selection 包含 { floor, area, unit }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 设置默认选中项
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<FloorSelector
|
||
|
|
:default-floor-id="'1'"
|
||
|
|
:default-area-id="'23'"
|
||
|
|
:default-unit-id="'16'"
|
||
|
|
@selection-change="handleSelectionChange"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 获取当前选择
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<template>
|
||
|
|
<FloorSelector ref="floorSelector" />
|
||
|
|
<button @click="getSelection">获取选择</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
methods: {
|
||
|
|
getSelection() {
|
||
|
|
const selection = this.$refs.floorSelector.getCurrentSelection()
|
||
|
|
console.log('当前选择:', selection)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 样式定制
|
||
|
|
|
||
|
|
组件使用了以下主要颜色：
|
||
|
|
|
||
|
|
- 背景色: `#FFFBF5`
|
||
|
|
- 边框色: `#C7A26D`
|
||
|
|
- 未选中按钮: `#F5E6D3`
|
||
|
|
- 选中按钮: `#8B4513`
|
||
|
|
- 文字颜色: `#695347`
|
||
|
|
|
||
|
|
可以通过修改组件的样式来调整外观。
|
||
|
|
|
||
|
|
## 注意事项
|
||
|
|
|
||
|
|
1. 组件会自动调用 `/app/memorial/listTree` 接口获取数据
|
||
|
|
2. 选择楼层时会自动选中第一个区域
|
||
|
|
3. 选择区域时会自动选中第一个单元
|
||
|
|
4. 如果接口返回空数据，会显示空状态
|
||
|
|
5. 网络异常时会显示错误提示
|