48-CommonQuery零代码查询

48-CommonQuery：零代码查询的实现

一行<CommonQuery :sqlId="'SYS_USER_s'" />渲染出完整的查询页——条件表单+结果列表+分页+导出。10.8KB的组件是"零代码模式"的唯一入口。这篇拆它怎么消费describe元数据自动生成一切，以及三种开发模式在这里的分界线。

文章目录

• 48-CommonQuery：零代码查询的实现
• • 一、组件的挂载流程
  • 二、条件表单：按conditions渲染
  • 三、结果列表：委托给MetaGrid
  • 四、查询的完整链路
  • 五、CommonFormGrid：主从结构的变体
  • 六、零代码的边界

源码：browise-vue/src/components/common/CommonQuery.vue（10.8KB） 协作：httpClient.describe / pageQuery、MetaGrid、form控件

一、组件的挂载流程

// CommonQuery.vue的setup（伪代码整理）
const props = defineProps<{ sqlId: string }>()

const center = useCenter()
const queryStore = center.addStore(props.sqlId + '_query') // 查询条件store
const gridStore = center.addStore(props.sqlId + '_grid') // 结果store

const meta = ref<DescribeResult | null>(null)

onMounted(async () => {
// ①拉元数据——整个组件的"图纸"
const desc = await httpClient.describe(props.sqlId)
meta.value = JSON.parse(desc) // EaEngine.describe返回的是JSON字符串（第13篇）

// ②条件store灌入元数据的conditions
queryStore.meta = { conditions: meta.conditions }

// ③首查
await doQuery()
})

describe是一切的起点——conditions（第13篇的EA05查询条件元数据）变成查询表单、columns（EA03字段元数据）传给MetaGrid。组件自己没有任何硬编码的界面知识——界面完全由元数据描述。

二、条件表单：按conditions渲染

<template v-for="cond in meta.conditions" :key="cond.paramName">
<!– displayType决定控件 –>
<TextBox v-if="cond.displayType === 'text'" v-model="queryParams[cond.paramName]" :label="cond.label" />
<DateBox v-if="cond.displayType === 'date'" v-model="queryParams[cond.paramName]" :label="cond.label" />
<NumberBox v-if="cond.displayType === 'number'" v-model="queryParams[cond.paramName]" :label="cond.label" />
<!– ComboBox：codeName有值挂字典 –>
<ComboBox v-if="cond.displayType === 'select'" v-model="queryParams[cond.paramName]"
:codeName="cond.codeName" :label="cond.label" />
</template>

describe.conditions的每个条目变一个控件——label做字段名、paramName做参数键、displayType选控件、codeName挂字典。operator决定控件形态（第13篇）——like是单值输入、>=/<=成对时渲染范围组件。

queryParams收集所有条件值——点查询时作为pageQuery的参数发给后端——EA05的动态条件按paramName匹配（第08篇：null跳过）——没填的条件后端自动忽略。

三、结果列表：委托给MetaGrid

<MetaGrid
:storeName="sqlId + '_grid'"
:columns="meta.columns"
pageUrl="/ea/page/' + sqlId"
:exportOptions="['server', 'client', 'checked']"
/>

CommonQuery不自己渲染表格——columns元数据透传给MetaGrid（第47篇的模式2 store绑定+模式1分页混合）。组件复用的层级：CommonQuery = 条件表单（自己渲染）+ MetaGrid（结果区委托）+ 联动逻辑（查询按钮把queryParams传给gridStore触发加载）。

四、查询的完整链路

用户填条件点"查询"
→ doQuery()
→ gridStore.params = {…queryParams}
→ MetaGrid的server paging检测store变化（watch params）
→ httpClient.pageQuery(sqlId, params, page)
→ POST /ea/page/SYS_USER_s {psnName:"张", minRow:1, maxRow:50}
→ JwtAuthFilter → EaController → EaEngine.query
→ 元数据拼SQL + 方言分页 + postProcess加密脱敏
→ {rows:[…], total:137}
→ gridStore.rowset.setData(rows) → 表格更新

整条链没有任何一行业务代码——配置EA01-05五张表 → 界面自动存在。"零代码"的字面意义。

五、CommonFormGrid：主从结构的变体

common/CommonFormGrid.vue——上表单下列表的主从联动版：表单选中行→下方列表按主键过滤。还有TreeQuery（左树右表）、CommonQueryDetail（19.2KB，查询+详情侧栏）——同一套元数据消费模式的四种布局变体。

变体的本质——CommonQuery的挂载流程（describe→条件表单→grid→联动）不变，只有布局的模板变。如果要做第五种布局（比如双列表格），复制CommonQuery改template的排列即可——逻辑层已经固化。

六、零代码的边界

CommonQuery覆盖标准查询页——但遇到这些就要退出零代码模式（第03篇的80/15/5）：

判断标准——界面结构是不是"条件+列表"的标准形。是→CommonQuery；不是但数据流标准→MetaGrid+store；连数据流都特殊→手写。三种模式的切换点是渐进的——describe元数据在三种模式间通用（都靠它拿字段定义）。

✅ 亮点：describe元数据驱动整个组件的渲染、conditions到控件的映射规则、queryParams与EA05动态条件的null跳过联动、组件复用层级（CommonQuery=条件表单+MetaGrid+联动）、四种布局变体共享逻辑层、零代码边界的判断标准。适合做元数据驱动UI的人。扩展方向：第13篇describe、第47篇MetaGrid、第03篇三种模式。