外包数字化平台第03篇｜显示部门详情

引言
本节目标
先理清：一条数据线，驱动三个组件
步骤一：认识「选中节点改变」事件
[步骤二：写自定义方法 onDeptSelect](#步骤二：写自定义方法 onDeptSelect)
步骤四：顶部文本绑定部门名称
步骤五：表单容器绑定「数据标识(_id)」
步骤六：下级表格设置筛选条件
- [6.1 用可视化面板加条件（推荐）](#6.1 用可视化面板加条件（推荐）)
- [6.2 为什么值要给「关联字段」传 id](#6.2 为什么值要给「关联字段」传 id)
串起来跑一遍
常见问题排查
本节成果
下一篇预告

引言

上一篇，我们把部门表里的部门加载到了左边的组织树上，树能显示、能展开了。

但你现在点树上的节点会发现------右边纹丝不动。树是活的，右半边还是死的：文本还写着占位文案，表单空着，下级部门表格也一直是全量列表。

这一篇，我们就把左右两边接上电。

做完之后，点树上的任意一个部门，右边会立刻联动：

顶部文本显示这个部门的名称；
中间的表单容器自动显示出这个部门的完整信息（编码、上级部门、排序、启用状态......）；
下方的数据表格只列出这个部门的直属下级。

这一篇的技术含量不高，但它讲的是低代码里最重要的一个思维模式：单一数据源联动。

三个组件（文本、表单、表格），不各自去查数据，而是全部盯着同一个变量 。

树选中时只做一件事------改这个变量。剩下三个组件自己会跟着变。

这个模式一旦掌握，后面「商机详情」「项目详情」「合同详情」全是同一套，只是变量名和组件不一样而已。

本节目标

今天完成 5 件事：

认识树组件的「选中节点改变」事件 selectNodeChange；
写一个自定义方法 onDeptSelect，把选中节点的 id 和名称写进页面变量；
顶部文本绑定部门名称；
表单容器的「数据标识(_id)」绑定节点 id，自动显示部门详情；
下级表格设置「数据筛选」：上级部门 = 当前节点 id。

完成后，部门管理页的左右联动彻底打通。

先理清：一条数据线，驱动三个组件

在动手之前，先把这一篇的数据流画出来，后面每一步都对着它做：

text 复制代码

用户在树上点中「交付中心」
        │
        ▼
树组件触发 selectNodeChange 事件
        │
        ▼
自定义方法 onDeptSelect
  拿到节点的 value（部门 _id）和 label（部门名称）
        │  写入两个页面变量
        ▼
┌───────────────────────────────────────────────┐
│  页面变量 currentDeptName / currentDeptId      │
└───────────────────────────────────────────────┘
        │
        ├──▶ 文本组件：显示 currentDeptName
        │
        ├──▶ 表单容器：数据标识(_id) = currentDeptId
        │              → 自动查出这条部门记录并回填
        │
        └──▶ 数据表格：筛选 上级部门 = currentDeptId
                       → 只显示它的直属下级

关键点：方法里只赋值、不操作组件 。三个组件都通过 fx 表达式「订阅」变量。这就是前面说的单一数据源联动------将来加第四个组件（比如显示部门人数的统计卡片），也只需再绑一次变量，方法一行都不用改。

步骤一：认识「选中节点改变」事件

WdTree（树）组件有一个专门的事件：选中节点改变 ，标识是 selectNodeChange。

只要用户在树上点选一个节点，这个事件就会触发一次，并把当前节点的信息通过 event.detail 传出来。我们能用到的字段：

字段	含义	我们怎么用
`currentNode`	当前点击的节点对象，形如 `{ label: '交付中心', value: 'd03' }`	`label` 给文本，`value` 给表单和表格
`checkedNodes`	当前选中节点数组	兜底取法，等价于 `[currentNode]`
`checked`	选中节点的 value 数组，如 `['d03']`	再兜底一层

为什么 value 就能当部门 id 用？

因为在上一篇拼树时，我们写的就是 value: row._id------节点的 value 存的就是部门记录的 _id。所以树上选中的 value，可以直接拿去当表单的「数据标识」、当表格的筛选值。这就是当初坚持用 _id 而不是编码、名称当 value 的原因，到这里开始还债了。

另外提醒一句：树第一次渲染完成时，selectNodeChange 也可能触发一次（操作类型是 init），此时可能没有 currentNode。所以方法里要先判断「拿不到 id 就直接返回」。

步骤二：写自定义方法 onDeptSelect

在微搭编辑器左侧代码区，新建一个自定义方法，命名为 onDeptSelect。

创建两个自定义变量用来保存选中节点的label和value

它只做三件事：取节点信息 → 写变量 → 刷新表格。

javascript 复制代码

/**
 * 部门树 - 选中节点改变
 * 取当前节点的 id / 名称写入页面变量，供右侧文本、表单、表格联动
 * 绑定时机：树组件的「选中节点改变(selectNodeChange)」事件
 */
export default async function ({ event, data }) {
  try {
    const detail = event?.detail || {};

    // ========== 第一段：取（拿到当前节点的 id 和名称） ==========
    const node =
      detail.currentNode?.[0] ||
      detail.checkedNodes?.[0] ||
      null;

    // 兜底：事件里没拿到，就从组件运行时信息里取
    const id = node?.value || $w.tree1?.treeInfo?.checked?.[0] || '';
    const name = node?.label || '';

    // 树首次渲染（init）或取消选中时，可能没有 id，直接返回
    if (!id) {
      return;
    }

    // ========== 第二段：写（一处赋值，三个组件自动联动） ==========
    $w.page.dataset.state.currentDeptId = id;     // 给表单「数据标识」和表格筛选用
    $w.page.dataset.state.currentDeptName = name; // 给顶部文本用

    // ========== 第三段：刷（让下级表格按新部门重新查） ==========
    if ($w.table1?.refresh) {
      await $w.table1.refresh();
    }
  } catch (error) {
    console.error('选中部门失败:', error);
    $w.utils.showToast({
      title: error?.message || '加载部门详情失败',
      icon: 'error',
      duration: 2000,
    });
  }
}

两点说明：

$w.tree1 / $w.table1 用你页面大纲里的实际组件 id 。如果拖进来后没改过名，默认就是 tree1、table1；改过名就换成你自己的。
这里没写 showLoading。因为点树是很高频的操作，每次都弹全屏 Loading 会很卡顿；表单和表格自己有 loading 状态，够用了。

写完后，把它挂到树上：

在大纲里选中树组件 ，右侧切到「事件」面板，找到「选中节点改变 」（selectNodeChange），新增动作 → 调用自定义方法 → 选 onDeptSelect。

步骤四：顶部文本绑定部门名称

页面上方那个文本组件（就是截图里写着「文本内容」的那个），改成显示当前部门名称。

选中该文本组件 ，找到「文本内容 」属性，点右侧的 fx 按钮

写入表达式：

javascript 复制代码

$w.page.dataset.state.currentDeptName || '请选择部门'

|| '请选择部门' 是个小技巧：页面刚打开、还没点树时，变量是初始值，用一个友好文案兜底，而不是显示一片空白。

步骤五：表单容器绑定「数据标识(_id)」

这一步是今天的重头戏，也是表单容器最省事的用法。

表单容器（WdForm）绑定数据模型后，会自带一个属性叫「数据标识(_id) 」。它的作用是：告诉表单「我要显示哪一条记录」 。我们只要把这个属性绑成当前选中的部门 id，表单就会自己去把这个部门的字段查出来并回填到各个输入框里------不需要我们写一行查询代码。

操作：

选中表单容器 组件，确认它已经绑定了数据模型「部门(ct_dept)」（第一篇拖入表单容器时绑的），把「表单场景 」（formType）设为「查看」（read）------右侧是只读展示详情，不该让人直接改；

找到「数据标识(_id) 」属性，点右侧 fx ；

绑定表达式：

javascript 复制代码

$w.page.dataset.state.currentDeptId

完成后的效果：点树上「交付中心」，变量 currentDeptId 变成 d03，表单容器侦测到 _id 变化 → 查询 d03 这条记录 → 把 name、code、parent_id、sort、status 自动填进对应控件。

表单容器为什么能自动查？

因为它的 _id 属性是可响应的：值一变，组件内部就按数据模型重新查一次单条并回填。所以我们才说这一篇「核心是绑变量，不是写代码」。

步骤六：下级表格设置筛选条件

最后一步，让下方的数据表格只显示当前部门的直属下级。

这个表格也是第一篇拖入的、绑定「部门(ct_dept)」模型的数据表格。现在要给它加一个筛选条件：上级部门 = 当前选中的部门 id。

6.1 用可视化面板加条件（推荐）

选中数据表格 组件，右侧属性面板找到「数据筛选」，点开筛选面板；

点击「+ 添加条件」，按下图配一行：

字段	运算符	值
上级部门（`parent_id`，多对一）	等于	`$w.page.dataset.state.currentDeptId`

「值」这一栏不要手输部门 id，而是点输入框旁边的变量/fx 按钮 ，选择页面变量 currentDeptId；

这样每次变量一变，表格就会按「上级部门 = 当前部门」重新查询，正好列出它的直属下级。

一个必须开的开关：忽略空值条件。

页面刚打开时，currentDeptId 是空字符串。如果不做处理，表格会拿着空值去查「上级部门 = 空」，结果一条都查不出来------看起来就像"表格坏了"。

组件库 v3.25 之后，数据筛选支持「忽略空值条件 」，开启后空值条件会被自动跳过。这时表格在未选中部门时会显示全部部门（正好当"全部"视图），选中后再收窄。建议务必打开。

6.2 为什么值要给「关联字段」传 id

「上级部门」是多对一关联字段 ，它存的是指向另一条部门记录的引用。筛选这种字段时，给的值必须是目标记录的 _id（面板提示里写的「请输入关联对应模型数据的_id」就是这个意思），不能给部门名称或编码。

而 currentDeptId 存的正是部门 _id------和上一篇「节点的 value 用 _id」是同一个决定带来的便利，一路都对得上。

串起来跑一遍

配好后，完整流程是：

打开页面 → loadDeptTree 执行 → 树加载完成 → 触发 selectNodeChange(init) → 没有 id，方法直接返回；
你在树上点「某科技公司」→ 触发 selectNodeChange(select)；
onDeptSelect 拿到 { label: '某科技公司', value: 'd03' }；
写入 currentDeptName = '某科技公司'、currentDeptId = 'd03'；
顶部文本显示「某科技公司」；
表单容器按 _id = 'd03' 查出并回填该部门信息；
表格按 parent_id = 'd03' 刷新，列出研发中心、测试中心。

三个组件，一次点击，全部联动。

常见问题排查

现象	原因与处理
点树没反应，右边不变	事件没绑上：确认「选中节点改变 `selectNodeChange`」事件挂的是 `onDeptSelect`
文本一直显示占位文案	变量名拼写不一致（大小写）；或文本的 `fx` 绑定写错，检查是否为 `$w.page.dataset.state.currentDeptName`
表单一直是空的	①「数据标识(_id)」没绑变量；②表单容器没有绑定「部门(ct_dept)」模型；③表单场景没设成「查看」
表格一条都不显示	筛选值取了空值。开启「忽略空值条件」，或检查 `currentDeptId` 是否真的写进去了
表格显示的是全部部门，没按部门收窄	筛选条件没生效：确认条件字段选的是「上级部门（多对一）」而不是同名的普通文本字段
报错 `$w.table1 is undefined`	组件 id 不对，换成你页面大纲里的实际 id；或组件还没渲染完成
关联字段筛选查不到	关联字段的值必须传目标记录的 `_id`，不能传名称/编码

调试小技巧：onDeptSelect 里临时加一句 console.log(event.detail)，先把事件出参打出来看一眼------不同版本 detail 的字段可能有细微差异，看一眼比猜半天快得多。

本节成果

今天我们做完了什么？

维度	成果
交互	树选中 → 右侧文本 / 表单 / 表格三方联动
核心模式	掌握了单一数据源联动：方法只改变量，组件靠 `fx` 订阅
组件	用通了 `WdTree.selectNodeChange`、`WdForm` 的「数据标识(_id)」、`WdTable` 的「数据筛选」
关键细节	关联字段筛选传 `_id`、开启「忽略空值条件」、变量名严格一致

到这里，部门管理页的查看链路已经完整了：能看组织树、能看部门详情、能看下级部门。

下一篇预告

现在页面能看，但还不能改------「新建顶级部门」「添加子部门」「编辑」「删除」四个按钮还是摆着好看的。

下一篇，我们让它们真正干活：

点「新建顶级部门」弹出弹窗，填完保存 → wedaCreateV2 写库 → 刷新树和表格；
点行内的「添加子部门」，自动带出上级部门；
「编辑」用 wedaUpdateV2 更新；
「删除」前先校验有没有下级和人员，有就拦住（对应第一篇立的规矩）；
全程用 showModal 二次确认 + try/catch + showToast 收尾。

部门管理这一块，就彻底能用了。

外包数字化平台 第03篇｜显示部门详情

目录

引言

本节目标

先理清：一条数据线，驱动三个组件

步骤一：认识「选中节点改变」事件

步骤二：写自定义方法 onDeptSelect

步骤四：顶部文本绑定部门名称

步骤五：表单容器绑定「数据标识(_id)」

步骤六：下级表格设置筛选条件

6.1 用可视化面板加条件（推荐）

6.2 为什么值要给「关联字段」传 id

串起来跑一遍

常见问题排查

本节成果

下一篇预告

外包数字化平台第03篇｜显示部门详情