[泛微 ecode] Table 组件刷新 data 数据尝试

在开发泛微 ecode 的某些应用场景中，遇到需要动态刷新 Table 组件数据的问题时，我尝试了一种折中的解决方案。希望通过这篇博客，引发更多关于 ecode 平台组件复写和数据操作的技术讨论，并期待 ecode 技术大佬给予我指导和优化建议。

背景问题

在某些场景下，例如动态更新 Table 组件的数据或修改现有表格中的字段展示逻辑，我希望通过简单的按钮点击触发数据更新，并立即在前端展示出修改后的结果。然而，直接对 ecode 的内置组件（如 Table）进行修改存在一定限制，常规方法可能无法直接生效。

折中解决方案

以下是当前使用的折中方案，通过复写 ecodeSDK 的组件属性传递函数 (overwritePropsFnQueueMapSet) 和注入自定义按钮来实现表格数据的更新。

代码实现

完整代码

let tableProps;

// 自定义路径校验函数
const customCheck = () => {
  return ecodeSDK.checkLPath('/wui/engine.html#/workflowengine/path/pathSet/pathDetail/flowSet/nodeInfo');
};

// 数据更新函数
const updateTableData = () => {
  const { message } = antd;
  if (!tableProps) return message.warn('操作失败，请联系管理员！');

  // 注：更新哪个都一样~
  // tableProps.dataSource[0]._node_2span = `8.Html模式`;
  tableProps.datas[0]._node_2span = `8.Html模式`;

  tableProps.onChange();
  antd.message.success('表格数据更新完成！');
};

// 复写 WeaTop 组件 增加按钮
ecodeSDK.overwritePropsFnQueueMapSet('WeaTop', {
  fn: (newProps) => {
    if (!customCheck()) return;

    let { buttons } = newProps;
    buttons = buttons || [];
    const { Button } = antd;

    // 注入按钮，用于触发表格数据更新
    buttons.push(
      
        测试更新表格数据
      
    );
  },
});

// 复写 Table 组件
ecodeSDK.overwritePropsFnQueueMapSet('Table', {
  fn: (newProps) => {
    if (!customCheck()) return;
    if (tableProps && tableProps.dataSource && tableProps.dataSource.length > 0) {
        newProps = tableProps;
        return newProps;
    }
    tableProps = newProps;
    console.log("Captured Table Props:", newProps);
  },
});

自定义路径校验

首先定义了一个路径校验函数 customCheck，用于确保仅在特定路径下应用逻辑，避免对其他页面的干扰：

const customCheck = () => {
  return ecodeSDK.checkLPath('/wui/engine.html#/workflowengine/path/pathSet/pathDetail/flowSet/nodeInfo');
};

表格数据更新逻辑

在表格数据更新的核心函数 updateTableData 中，直接修改了表格的 datas 属性，并通过调用表格的 onChange() 方法强制触发刷新：

const updateTableData = () => {
  const { message } = antd;
  if (!tableProps) return message.warn('操作失败，请联系管理员！');

  // 更新表格数据
  tableProps.datas[0]._node_2span = `<span>8.</span><a href="javascript:workflowNodeSetUtil.onShowForm(3366540,3432549)">Html模式</a>`;

  tableProps.onChange();
  antd.message.success('表格数据更新完成！');
};

⚠️ 注意：在实际更新中，我尝试过直接修改 dataSource 和 datas，结果是效果一致。

WeaTop 组件注入按钮

通过复写 WeaTop 组件的属性，注入了一个自定义按钮来触发表格数据更新逻辑：

ecodeSDK.overwritePropsFnQueueMapSet('WeaTop', {
  fn: (newProps) => {
    if (!customCheck()) return;

    let { buttons } = newProps;
    buttons = buttons || [];
    const { Button } = antd;

    buttons.push(
      <Button key="updateTableData" onClick={updateTableData}>
        测试更新表格数据
      </Button>
    );
  },
});

Table 组件复写与捕获 Props

最后，通过复写 Table 组件的属性函数，捕获了表格的 props，并将其保存到全局变量中以便后续操作：

ecodeSDK.overwritePropsFnQueueMapSet('Table', {
  fn: (newProps) => {
    if (!customCheck()) return;
    if (tableProps && tableProps.dataSource && tableProps.dataSource.length > 0) {
        newProps = tableProps;
        return newProps;
    }
    tableProps = newProps;
    console.log("Captured Table Props:", newProps);
  },
});

测试结果

在路径 /workflowengine/path/pathSet/pathDetail/flowSet/nodeInfo 下验证了以上逻辑：

页面加载时，Table 组件的 props 成功被捕获；
点击自定义按钮后，表格数据被成功更新，页面即时反映了数据的变化；
用户操作无明显延迟，效果符合预期。

存在的问题

更新方式不够优雅 ：直接操作 datas 或 dataSource 并调用 onChange() 强制刷新，可能并非最佳实践；
依赖全局变量 tableProps ：对 Table 组件的 props 捕获逻辑较为直接，可能需要更优雅的管理方式；
兼容性与风险 ：由于是复写组件逻辑，需关注 ecode 版本变更可能带来的潜在影响。

总结与求助

本次尝试是一个折中的解决方案，尽管实现了动态更新 Table 数据的功能，但仍有许多值得优化的地方。例如：

是否有更优雅的方式管理组件 props？
Table 数据更新是否可以通过更标准的方式触发？

希望有更多的 ecode 技术大佬参与讨论，分享更好的实现方案，或对我的方案提出改进建议。

[泛微 ecode] Table 组件刷新 data 数据尝试 by https://oneszhang.com/archives/118.html