流程 明细表支持快捷模糊搜索
title: doc_b144f552fb78_流程明细表支持快捷模糊搜索 created: 2026-04-19 updated: 2026-04-19 type: reference tags: [best-practices, ppt] source: "Weaver Official"
Slide 1
流程明细表支持快捷模糊搜索 泛微网络 培训服务中心
Slide 2
需求背景及实现效果
Slide 3
在大型企业客户日常报销流程里，【费用明细表】往往动辄 30～50 行，想要找自己想要的行数据时，需要一致去翻页查找，数据量过大，操作耗时，还容易看错行遗漏数据，为解决此问题，现将流程的明细表装上“快捷搜索”，支持模糊查询明细表除附件字段外的其他字段类型数据。
Slide 4
在快捷搜索中输入明细表的相关内容，点击“检索明细”按钮后，在明细表中检索关键词，根据关键词过滤明细表，只显示匹配的行； 点击“重置”按钮后，明细表恢复原样。 实现效果
Slide 5
实现思路
Slide 6
1、添加主表单行文本字段 实现思路 2、添加两个按钮 检索明细：根据主表字段输入的关键词，过滤明细表中匹配的行（支持多字段模糊匹配）； 重置：恢复显示所有明细行。 此字段用作流程表单中的搜索框。
Slide 7
3、核心逻辑：从主表单行文本字段取到值与检索明细行数据字段值进行匹配 实现思路 4、重置按钮直接传参all与flase即可 通过 filterRows() 函数遍历明细表每一行，检查指定字段是否包含关键词（不区分大小写）。 支持文本字段、浏览框、下拉框等多种字段类型的值匹配。 使用 WfForm.controlDetailRowDisplay() 控制行的显示/隐藏。 取常规文本值：WfForm.getFieldValue(); 取浏览按钮显示值：WfForm.getBrowserShowName(); 取选择框显示值：WfForm.getSelectShowName();
Slide 8
JS代码块应用样例
Slide 9
配置实现步骤 实现方式： 后台打开html模板； 打开插入代码块； 插入修改好的代码块； 流程表单 ectShowName();
Slide 8
JS代码块应用样例
Slide 9
配置实现步骤 实现方式： 后台打开html模板； 打开插入代码块； 插入修改好的代码块； 流程表单## Slide 10
代码示例——JS代码 jQuery(document).ready(function() { // 定义按钮的HTML var buttonHtml = '' + '' + ''; // 将按钮插入到指定的单元格中 jQuery("#btnid").html(buttonHtml); // 为按钮添加点击事件处理程序 jQuery("#btnid").on("click", function() { //WfForm.showMessage("按钮被点击！",2,5); jsButton(); }); });
Slide 11
代码示例 jQuery(document).ready(function() { // 定义按钮的HTML var buttonHtml = '' + '' + ''; // 将按钮插入到指定的单元格中 jQuery("#blnid").html(buttonHtml); // 为按钮添加点击事件处理程序 jQuery("#blnid").on("click", function() { showAllRows() }); }); ).html(buttonHtml); // 为按钮添加点击事件处理程序 jQuery("#blnid").on("click", function() { showAllRows() }); });## Slide 12
代码示例 function jsButton(){ const MASTER_FIELD = 'field24295'; // 主表字段名 const keyWord = (WfForm.getFieldValue(MASTER_FIELD) || '').trim(); if (!keyWord) { antd.message.warning('请先输入检索数据！'); return; } filterRows(keyWord); } function filterRows(kw) { if (!kw) return; // 空关键字直接放行，由调用方提示 const COL_MAP = { fyxm: 'field24289', // 费用项目 fysm: 'field24310', // 事由 je: 'field24311', // 金额 cdbm: ‘field24292', // 承担部门 fplx:'field24293',// 发票类型 rq:'field24312' ,// 日期 };
Slide 13
代码示例 const kwLower = kw.toLowerCase(); const idxArr = (WfForm.getDetailAllRowIndexStr('detail_1') || '').split(',').filter(Boolean); let hasAny = false; idxArr.forEach(idx => { const hit = Object.keys(COL_MAP).some(f => { const fld = COL_MAP[f] + '_' + idx; const val = (WfForm.getFieldValue(fld) || '').toString().toLowerCase(); const txt = ( WfForm.getBrowserShowName(fld) || // 浏览框 WfForm.getSelectShowName(fld) || // 下拉/单选/多选 '' // 文本框直接拿 val 即可 ).toLowerCase(); return val.includes(kwLower) || txt.includes(kwLower); }); WfForm.controlDetailRowDisplay('detail_1', idx, !hit); if (hit) hasAny = true; }); if (!hasAny) antd.message.info('未检索到符合条件的数据'); } function showAllRows() { WfForm.controlDetailRowDisplay('detail_1', 'all', false); // false=显示 }
Slide 14
志达宇泛 见著于微 感谢您的信任与支持！ 我们始终努力提供好用的移动办公平台
detail_1', 'all', false); // false=显示 }
Slide 14
志达宇泛 见著于微 感谢您的信任与支持！ 我们始终努力提供好用的移动办公平台
---### 🖼️ 提取的插图 (共 15 张)
