uni-data-picker级联选择器、fastadmin后端api

记录一个部门及部门人员选择的功能，效果如下：

组件用到了uni-ui的级联选择uni-data-picker

开发文档：uni-app官网

组件要求的数据格式如下：

后端使用的是fastadmin，需要用到fastadmin自带的tree类生成部门树 ，后端代码如下：

 /**
     * 获取部门及员工数据（树形结构）适用于uni-ui的uni-data-picker
     */
    public function getDepartmentAndStaff()
    {
        // 获取所有部门（含层级关系）
        $departments = Db::name('wecom_department')
            ->field('id, name, parent_id')
            ->order('id ASC')
            ->select();

        // 构建部门树
        $tree = new Tree();
        $tree->init($departments,'parent_id','    ');
        $treeList = $tree->getTreeList($tree->getTreeArray(210), 'name'); // 从顶级部门开始

        // 处理每个部门下的员工
        $result = [];
        foreach ($treeList as $dept) {
            $deptData = [
                'text' => $dept['name'],       // 前端显示名称
                'value' => 'dept_' . $dept['id'], // 部门唯一标识
                'children' => [],              // 子节点（员工或子部门）
                // 保留元数据（可选，前端如需区分部门/员工可使用）
                'meta' => [
                    'type' => 'department',
                    'id' => $dept['id']
                ]
            ];

            // 查询部门下的员工（假设部门ID字段为department，需根据实际表结构调整）
            $staffList = Db::name('wecom_staff')
                ->where('department', $dept['id']) // 员工表中部门关联字段
                ->field('id, name')
                ->order('id ASC')
                ->select(); // 转换为数组

            // 转换员工数据格式
            $deptData['children'] = array_map(function ($staff) {
                return [
                    'text' => $staff['name'],      // 员工显示名称
                    'value' => 'staff_' . $staff['id'], // 员工唯一标识
                    'isLeaf' => true,              // 标记为叶子节点（无子节点）
                    'meta' => [
                        'type' => 'employee',
                        'id' => $staff['id']
                    ]
                ];
            }, $staffList);

            $result[] = $deptData;
        }


        $this->success('获取成功', $result);
    }

注意的点：tree->init()要传三个参数，特别是第二第三个参数，第二个参数应该为父id的字段名，第三个是空格占位符，默认是  在html会正常识别，但是小程序不行，所以要自己定义占位符。

tree类文件的注释也写的非常 清晰了。

设置了自定义占位符和默认的区别。

前端页面的调用，截取了部分：

<template>
	<!-- 借用信息表单 -->
	<view class="form-section">
		<view class="form-item">
			<text class="label">所属部门</text>
			<uni-data-picker :localdata="departmentData" popup-title="请选择班级" @change="onchange"
			@nodeclick="onnodeclick"></uni-data-picker>
		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		computed
	} from 'vue'
	
	import request from '@/utils/http2.js'

	const departmentData = ref([])

	onMounted(() => {
		// 加载部门树
		request({
			url: '/api/wecomapi/getDepartmentAndStaff',
			method: 'GET'
		}).then(res=>{
			 if (res.code) {
			      departmentData.value = res.data;
			    }
		})
	})
	
</script>