buddhism/pages/memorial/compositons/README.md

楼层选择组件 (FloorSelector)

功能描述

楼层选择组件是一个三层级联选择器，用于选择楼层、区域和单元。组件会根据接口返回的树形数据自动渲染选择项。

接口数据格式

组件期望的接口返回格式：

{
  "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	-	-	重置选择到默认状态

使用示例

基础使用

<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>

设置默认选中项

<template>
  <FloorSelector
    :default-floor-id="'1'"
    :default-area-id="'23'"
    :default-unit-id="'16'"
    @selection-change="handleSelectionChange"
  />
</template>

获取当前选择

<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. 网络异常时会显示错误提示