当前位置：首页 > news >正文

微搭低代码MBA培训管理系统实战02——实现部门树的搭建

news 2026/5/11 13:33:31

前情回顾

在上一讲中，我们完成了系统的多端聚合入口和登录策略，巧妙地避开了系统自带账号体系的限制。既然决定了要自己重构权限和组织架构，那么"部门管理"就是我们必须拿下的第一座堡垒。

在低代码开发中，我们要利用平台现有的标准化组件，拼装出符合复杂业务交互的界面。左树右表的网格布局方案非常经典且专业，这正是企业级后台处理层级数据的标准范式。

本节我们将详细讲解如何使用低代码组件实现部门管理功能，包括页面布局、数据绑定、树形结构展示以及表单的新增。

本节目标

网格布局搭建：使用网格布局组件实现左树右表的经典布局
部门树展示：使用树组件展示部门层级结构
部门表单：使用表单容器组件实现部门的新增

第一步：数据准备

1.1 数据源配置

首先，确保已创建名为Departments的数据模型，包含以下核心字段：

字段名称	字段标识	类型	说明
部门名称	name	单行文本	如"总经办"、“教务部”
部门编码	code	单行文本	用于快速检索
父部门ID	parent_id	关联关系	关联到当前Departments表自身
部门负责人	manager_id	关联关系	关联Users表
部门描述	description	多行文本	部门详细说明
状态	status	枚举	1: 在用, 2: 禁用
创建时间	created_at	日期时间	自动生成
更新时间	updated_at	日期时间	自动更新

💡 实战技巧：第一级部门怎么界定？
对于最顶级的部门（例如"MBA培训中心总公司"），它的parent_id应该为空（Null）。我们在拉取第一级部门时，就是通过过滤parent_id == null来实现的。

1.2 页面变量创建

在页面编辑器中，创建以下页面变量：

变量名称	类型	初始值	说明
currentSelectedDeptId	文本	“”	当前选中部门ID
currentSelectedDept	对象	{}	当前选中部门详情
dialogVisible	布尔值	false	表单弹窗显示状态
isEditing	布尔值	false	是否为编辑模式
editingDept	对象	{}	正在编辑的部门数据
departmentTree	数组	[]	部门树状结构数据

点击创建页面的图标，先创建部门管理页面

在代码区，点击新建，按照我们表格中的指示依次创建需要的状态变量。在低代码中，如果在事件或者自定义方法中改变变量的值会自动更新组件

第二步：页面布局搭建

变量定义好之后，我们需要搭建一下页面布局。在上一讲中我们是按照角色进行区分的，因为部门管理属于管理员才可以操作的功能，我们先需要给管理员搭建一个布局。

点击布局设计，点击新建布局

选择左侧导航布局

重命名为管理员布局

点击根据页面一键生成菜单

回到页面设计，选中页面组件，引用我们的布局

然后添加布局组件，将自带的网格布局移入布局内容中

2.1 网格容器配置

设置左右列的比例为3 : 9，以保证左树右表的视觉平衡。

2.2 左侧树形结构

在左侧网格列中添加普通容器，先构造顶部的标题。里边添加图标、文本、按钮组件

下边添加树组件

树节点绑定我们的departmentTree变量

2.3 初始化部门数据

在页面一加载的时候，我们要初始化一下树的数据，这里用自定义方法去读取部门表的数据。在代码区新建一个javascript方法，命名为initTreeData

贴入如下代码

exportdefault asyncfunction({event, data}){try{$w.utils.showLoading({title:'加载部门数据...'});// 获取所有部门数据 const res=await$w.cloud.callDataSource({dataSourceName:'MBA_Departments', methodName:'wedaGetRecordsV2', params:{filter:{}}});const departments=res.records;// 将扁平数据转换为树状结构（非递归方式） const treeData=buildDepartmentTree(departments);// 保存树状数据到页面状态$w.page.dataset.state.departmentTree=treeData;// 如果有部门数据，默认选中第一个顶级部门if(treeData.length>0){const firstDeptId=treeData[0].value;$w.page.dataset.state.CurrentSelectedDeptId=firstDeptId;// 获取第一个部门的详情 const deptDetail=await$w.cloud.callDataSource({dataSourceName:'MBA_Departments', methodName:'wedaGetItemV2', params:{filter:{where:{_id:{$eq:firstDeptId}}}}});$w.page.dataset.state.CurrentSelectedDept=deptDetail.data;}}catch(e){console.error('加载部门数据失败', e);$w.utils.showToast({title:'加载部门数据失败', icon:'error'});}finally{$w.utils.hideLoading();}}// 非递归方式构建部门树functionbuildDepartmentTree(departments){const nodeMap=new Map();const rootNodes=[];// 第一遍遍历：创建所有节点并存储到Map中for(const dept of departments){nodeMap.set(dept._id,{value: dept._id, label: dept.name, children:[],...dept});}// 第二遍遍历：构建父子关系for(const dept of departments){constnode=nodeMap.get(dept._id);if(dept.parent_id){// 有父部门，添加到父部门的children中 const parentNode=nodeMap.get(dept.parent_id);if(parentNode){parentNode.children.push(node);}}else{// 没有父部门，作为根节点 rootNodes.push(node);}}returnrootNodes;}