HarmonyOS Next 实现多级树型列表选择器

开发ERP系统的时候经常会用到部门树列表，页面主要由搜索框、顶部部门面包屑、多层级部门列表组成，部门列表项由不么名称和下一级右边箭头组成，点击部门名称区域可以回传部门数据到上一个页面，点击下一级箭头按钮可以展示下一级部门列表，同时将父级部门添加到顶部面包屑。

1、加载部门数数据

部门树数据由多个部门信息对象组成，部门对象中包含下级部门数组，里面可能会嵌套多个子级部门对象，这里用的json数据如下：

[
  {
    "DepartCode": 0,
    "DepartNo": "",
    "FirstName": "",
    "DepartName": "所有部门",
    "SystemTag": 0,
    "DepartType": 0,
    "DepartStatus": 0,
    "DepartLevel": 0,
    "DepartStatusName": "",
    "DepartmentListZtree": [
      {
        "DepartCode": 50001,
        "DepartNo": "002",
        "FirstName": "测试大区",
        "DepartName": "测试大区",
        "SystemTag": 1,
        "DepartType": 1,
        "DepartStatus": 1,
        "DepartLevel": 1,
        "DepartStatusName": "",
        "DepartmentListZtree": []
      }
    ]
  }
]

2、自定义顶部输入框

顶部输入框由Stack组件包裹TextInput输入框组件和Image图片组件组成。

/**
 * 构建搜索框
 */
@Builder
BuildSearch() {
  Stack() {
    TextInput({ text: this.depWord, placeholder: "搜索部门" })
      .height(36)
      .placeholderFont({ size: 14 })
      .placeholderColor($r("app.color.text_auxiliary"))
      .backgroundColor($r("app.color.tag_default"))
      .borderRadius(4)
      .padding({ left: 36 })
      .onChange((value) => {
        this.depWord = value
      })
    Image($r(&