目录引言本节目标先理清快照 ≠ 数据源步骤一认识数据查询Query1.1 Query 是什么1.2 能读到什么、能调什么1.3 触发方式只有两种步骤二新建 query12.1 创建2.2 配查询条件只查当前选中的那个部门步骤三右侧部门名称改成绑 query1步骤四表单容器改成接收 query1 的数据4.1 详情用文本组件拼步骤五保存后补一句 trigger5.1 saveDept 的收尾串起来跑一遍本节成果下一篇预告引言上一篇部门的增删改做完了页面看上去能用了。受制于组件的限制存在如下几个问题在树上点一个部门右侧正常把「交付中心」改名成「交付中心华东」保存 →树上的名字变了右侧顶部还写着旧名字新增一个子部门保存 →树刷新了右侧那块详情却没动静。这一篇我们不动增删改的主流程只做一件架构级的改造给右侧详情换一个真正的数据源——数据查询Query然后在数据发生变化的时刻手动让它重查一次。本节目标今天完成 5 件事想清楚旧数据是怎么来的——快照 ≠ 数据源认识微搭的数据查询 Query它是什么、能读到什么、怎么触发新建一个「内置数据表查询」query1用currentDeptId当查询条件把右侧的部门名称和表单容器改成绑query1的数据在保存的收尾处补一句await $w.query1.trigger()让右侧跟着一起更新。完成后右侧详情永远是数据库里的现值修改时能立刻反映出来。先理清快照 ≠ 数据源先把旧方案的数据流摆出来问题一目了然用户在树上点中「交付中心」 │ ▼ onDeptSelect 拿节点的 label / value │ ├──▶ currentDeptName 交付中心 ← 这一刻拍下的「快照」 │ └──▶ currentDeptId d03 │ ├──▶ 文本组件显示 currentDeptName └──▶ 表单容器按 _id d03 自动查一次 ─────── 之后你把「交付中心」改名保存 ─────── 数据库里的 name 变了 树重新加载显示新名字 ✔ 但 currentDeptName 还是 交付中心 ✘ ← 快照不会自己更新 表单容器的 _id 还是 d03没变 ✘ ← 依赖没变它不会重查两条链路各自卡在了同一个地方它们的数据源是一次性的不会跟着库里的数据变。currentDeptName是点树那一刻拍下的快照写进去之后就再没人改它表单容器靠「_id变化」来触发重查而改名并不会让_id变——依赖没变组件就不动。把一个会过期的东西当数据源用就一定会出现显示旧数据。这不是配置错了是方案选错了。那正确的做法是什么让右侧去认一个每次问都能拿到最新值的东西——微搭里这个东西叫Query数据查询。步骤一认识数据查询Query1.1 Query 是什么按官方定义Query 数据查询介绍Query 是一个静态 JS 对象主要作用于后端相关的数据获取和更新等操作……可以通过与变量类似的方式在组件配置的表达式中进行引用例如query1.data……具备与变量一致的生命周期以及作用域。翻译成大白话Query 就是挂在页面上的一个查询你配好查哪张表、按什么条件查它就替你把结果放在query1.data里组件用fx绑query1.data.xxx就等于直接盯着数据库。它和普通变量最本质的区别页面变量数据查询 Query值从哪来你手动赋进去的一次性的每次问数据库拿回来的会不会过期会你不改它就一直是老值不会trigger()一下就重新查适合放什么选中的 id、弹窗标题、表单场景要展示的明细数据1.2 能读到什么、能调什么Query 上有 5 个成员本篇用得到 2 个成员类型说明$w.query1.dataObject查询成功后的数据默认null$w.query1.errorObject查询失败时的错误对象$w.query1.isFetchingBoolean是否正在加载中$w.query1.trigger()方法在代码里手动触发这次查询可传参如trigger({ aaa: 10 })$w.query1.reset()方法把data和error重置为null两种引用方式记牢// ① 在组件的 fx 表达式里直接读结果$w.query1.data.name// ② 在自定义方法里手动触发一次查询await$w.query1.trigger();1.3 触发方式只有两种新建 Query 时编辑器右侧会让你选触发方式官方给的就是这两个触发方式什么时候执行适合的场景入参变化时自动执行查询条件里用到的变量一变自动重查点树、切筛选条件这类条件变了就要重新看的读操作手动触发更新只有代码里调trigger()才执行完全由代码控制的时机本篇的选择是选「入参变化时自动执行」同时在保存成功后手动补一句trigger()。为什么两个都要选自动点树 →currentDeptId变 → Query 自动重查 → 右侧联动这部分体验和第 3 篇一模一样不用改补手动改名保存后currentDeptId并没有变自动触发不会发生——所以只能自己喊一声trigger()。步骤二新建 query12.1 创建在编辑器左下角代码区点打开新建面板。选择「新建内置数据表查询」数据模型选「部门(ct_dept)」触发方式选择入参变化时自动执行方法选择查询单条详情信息里需要返回关联关系的字段我们需要把上级部门的信息也返回2.2 配查询条件只查当前选中的那个部门这是建立数据源的关键一步——把查询条件接到currentDeptId上。在 Query 的查询条件里加一条字段运算符值数据标识_id等于$w.page.dataset.state.currentDeptId「值」这一栏不要手输点旁边的fx按钮从变量里选currentDeptId和第 3 篇给表格配筛选是同一个套路。步骤三右侧部门名称改成绑 query1先把最简单的那处改掉——顶部那个显示部门名称的文本。第 3 篇里它绑的是变量快照// 旧读的是点树那一刻的快照$w.page.dataset.state.currentDeptName||请选择部门现在改成读 Query 的结果现值// 新读的是刚才查回来的那条数据$w.query1.data?.name||请选择部门操作选中该文本组件→ 「文本内容」→ 点fx→ 粘贴上面的表达式 → 保存。改完之后你会发现点树时它照样会变因为currentDeptId一变Query 自动重查data.name跟着变但两者的性质已经完全不同了——它不再是记住的名字而是当前库里那条记录的名字。步骤四表单容器改成接收 query1 的数据这一处最关键也最容易配错。先看清楚它现在是什么状态第 3 篇配的属性现在的值表单场景formTyperead查看数据模型dataSourceNamect_dept数据标识(_id)$w.page.dataset.state.currentDeptId问题就出在第三行表单容器自己会按_id去查一次库而_id不变它就不查——所以我们再怎么改库它都无感。4.1 详情用文本组件拼我们使用网格布局来搭建详情页面修改常用布局为6:6在列里添加文本组件给文本组件绑定文本内容绑定表达式如下部门名称($w.query1.data?.name||)其余字段按照如下表达式分别绑定到对应的文本内容里部门编码($w.query1.data?.code||)上级部门($w.query1.data?.parent_id?.name||)排序($w.query1.data?.sort||)状态($w.app.utils.formatEnum($w.query1.data?.status,shifuqiyong,$w.app)||)关联字段上级部门查回来是个对象所以取名字要多走一层.name。取_id则是$w.query1.data?.parent_id?._id——这和前几篇界面用字符串、入库用对象是同一件事的两面。步骤五保存后补一句 trigger现在到了本篇要解决的正主数据改了之后让右侧也跟着改。5.1 saveDept 的收尾第 4 篇的saveDept在最后是这样收尾的树 表格// 旧只刷新了树和表格await$w.page.handler.loadDeptTree({});if($w.table1?.refresh){await$w.table1.refresh();}现在多补一句让右侧详情一起重查// 新树、右侧详情、下级表格一个都不能少await$w.page.handler.loadDeptTree({});// 关键新增强制 query1 重新查一次// 改名后 _id 没变入参变化自动执行不会触发只能手动喊一声await$w.query1.trigger();if($w.table1?.refresh){await$w.table1.refresh();}串起来跑一遍场景一改名后右侧立刻同步树上点「交付中心」→currentDeptId d03→query1自动重查→ 右侧名称和表单显示d03的值点「编辑」把名称改成「交付中心华东」→ 保存wedaUpdateV2写库成功 → 收尾三连loadDeptTree({})→ 树上的名字变成「交付中心华东」$w.query1.trigger()→右侧名称同步变成「交付中心华东」旧方案在这里会一直是「交付中心」table1.refresh()→ 下级列表照常。本节成果今天我们做完了什么维度成果概念分清快照变量与数据源 Query变量存条件Query 存内容新组件用通了「内置数据表查询」$w.query1.data/trigger()/ 两种触发方式刷新方案loadDeptTree管树、query1.trigger()管右侧、table1.refresh()管列表三处收尾各司其职到这里部门管理页的读链路才真正闭环左侧是树右侧是当前这条记录的现值改完立刻看得到。下一篇预告部门建完了接下来就该往部门里放人了。下一篇我们做「人员管理」会碰到几个新问题人员要挂部门部门是关联字段——怎么在表单里选一个树形的部门下拉树 / 级联选择人员列表要按部门筛选还得支持本部门及以下返回部门管理把removeDept里那段注释掉的「人员校验」正式打开现在它一直因为人员模型还没建而睡着。从组织结构到组织里的人这是数据真正开始生长的下一步。