eCodeSDK发票组件三步搭建

在泛微E9流程表单中，通过ecodeSDK快速搭建一个功能完善的发票夹组件，可以极大地简化发票数据的选择与录入流程。以下是一个清晰的三步搭建指南，涵盖了从环境准备到功能集成的全过程。

第一步：项目初始化与组件注册

首先，在泛微E9的ecode开发平台中创建一个新的功能包，并完成核心组件的注册。注册的目的是将自定义组件注入到特定的表单字段中。

1. 创建ECode功能包：在ecode在线开发平台中，新建一个功能包（Package），这将是所有代码文件的容器。
2. 编辑注册文件 (register.js)：这是连接自定义组件与表单字段的关键。你需要使用ecodeSDK.overwriteClassFnQueueMapSet方法，在特定条件下（如表单页面）替换原表单字段的渲染组件。

// register.js 示例代码 const InvoiceSelector = (props) => { const acParams = { appId: '${appId}', // 系统自动识别 name: 'InvoiceSelector', // 自定义组件模块名称 isPage: false, noCss: true, props } return ecodeSDK.getAsyncCom(acParams); } // 核心：注册组件覆盖逻辑 ecodeSDK.overwriteClassFnQueueMapSet('WeaBrowser', { fn: (Com, newProps) => { const { hash } = window.location; // 仅在流程请求页面生效，并针对特定字段（如field6870） if (hash.indexOf('#/main/workflow/req') != -1) { if (newProps.fieldName != 'field6870') return; // 替换为你表单中发票字段的实际ID if (newProps._noOverwrite) return; newProps.Com = Com; // 保留原组件引用 return { com: InvoiceSelector, // 指定替换为我们的自定义组件 props: newProps }; } else return; } });

代码说明：此段代码定义了一个高阶函数，当页面URL匹配流程表单且字段ID为‘field6870’时，用InvoiceSelector组件替换原生的字段渲染组件。这是实现按钮注入表单的核心机制。

第二步：构建React组件与状态管理

此步骤构建发票选择器的主体UI，并利用Mobx管理应用状态，实现数据的响应式更新。

1. 创建根组件 (index.js)：负责组装UI组件和注入状态管理Store。