本文摘要
介绍在泛微 Ecology ecode 开发中，利用 ecodeSDK.overwritePropsFnQueueMapSet 覆写 Table 组件属性的方法，为流程待办列表的当前节点列动态生成筛选项并实现本地筛选。文中通过路径校验定位页面、从数据中提取唯一节点构建过滤器、再配置列的过滤函数完成实现，并提示远程加载数据时需另行处理网络延迟与数据同步问题。

📌

该文章由丸子引导AI辅助制作生成，如有改进意见，欢迎评论区留言。

引言

在许多企业级应用中，我们常常需要对流程待办事项进行筛选，以便用户能够更快速地找到需要处理的任务。本文将介绍如何为Table表格增加筛选功能，特别是针对流程待办筛选当前节点的实现方法。 image.png

代码实现

image.png

下面的代码示例展示了如何通过ecodeSDK.overwritePropsFnQueueMapSet方法，为Table表格增加筛选功能：

ecodeSDK.overwritePropsFnQueueMapSet('Table', {
  fn: (newProps) => {
    // 日志输出，检查组件定位是否成功
    console.log('!找到组件啦！！！！！！');


    // 检查当前路径是否正确
    if (!ecodeSDK.checkLPath('/wui/index.html#/main/workflow/listDoing?menuIds=1,13')) return;
    console.log("路径识别正确！", newProps);


    // 创建一个 Map 来存储 unique 的 currentnodeid 和 currentnodeidspan
    const uniqueNodes = new Map();


    // 遍历 newProps.datas 数组，获取 unique 的 currentnodeid 和 currentnodeidspan
    newProps.datas.forEach(data => {
      if (!uniqueNodes.has(data.currentnodeid)) {
        uniqueNodes.set(data.currentnodeid, data.currentnodeidspan);
      }
    });


    // 构建 filters 数组
    const filters = Array.from(uniqueNodes.entries()).map(([value, text]) => ({
      text,
      value
    }));


    // 遍历 newProps.columns 数组，找到 dataIndex 为 'currentnodeid' 的对象
    newProps.columns.forEach(column => {
      if (column.dataIndex === 'currentnodeid') {
        // 修改 title 为 '当前节点1'
        column.title = '当前节点1';


        // 设置动态 filters
        column.filters = filters;


        // 增加 onFilter 函数
        column.onFilter = (value, record) => record.currentnodeid === value;
      }
    });


    // 输出修改后的 columns 数组
    console.log("修改后的 columns:", newProps.columns);
  },
});

组件定位

首先，我们通过日志输出检查组件是否定位成功：

console.log('!找到组件啦！！！！！！');

路径检查

接着，我们验证当前路径是否正确：

if (!ecodeSDK.checkLPath('/wui/index.html#/main/workflow/listDoing?menuIds=1,13')) return;
console.log("路径识别正确！", newProps);

数据筛选

然后，我们创建一个Map来存储唯一的currentnodeid和currentnodeidspan，并构建filters数组：

const uniqueNodes = new Map();
newProps.datas.forEach(data => {
  if (!uniqueNodes.has(data.currentnodeid)) {
    uniqueNodes.set(data.currentnodeid, data.currentnodeidspan);
  }
});
const filters = Array.from(uniqueNodes.entries()).map(([value, text]) => ({
  text,
  value
}));

动态过滤器

最后，我们遍历newProps.columns数组，找到dataIndex为’currentnodeid’的对象，修改其title、设置动态filters并增加onFilter函数：

newProps.columns.forEach(column => {
  if (column.dataIndex === 'currentnodeid') {
    column.title = '当前节点1';
    column.filters = filters;
    column.onFilter = (value, record) => record.currentnodeid === value;
  }
});

实际应用

本地模式

上述代码示例为本地模式下的数据筛选功能。在本地测试时，可以通过模拟数据来验证筛选功能是否正常工作。

远程加载数据

在实际应用中，我们需要结合“远程加载数据”来实现更为复杂的筛选功能。具体实现方式将根据实际需求和环境进行调整。

提示：远程加载数据时，需注意网络延迟和数据同步问题，确保用户体验流畅。

结论

通过以上步骤，我们成功为Table表格增加了筛选功能，特别是针对流程待办筛选当前节点的实现。这种方法不仅提升了用户体验，也为后续的功能扩展提供了良好的基础。

✅

成功实现了为Table表格增加筛选功能！

如有任何问题或改进建议，欢迎在评论区留言与我们交流。

希望这篇文章能帮助你更好地理解和实现Table表格的筛选功能。如果有任何疑问，欢迎在评论区留言讨论！