当前位置：首页 > news >正文

Ecode在流程表单中插入自定义内容

news 2025/2/23 13:58:07

在Ecode中能进行各种前端的个性化开发需求，是泛微OA基本配置无法实现的，例如在表单里面新增按钮、修改下拉框组件变成评分组件还可以点击弹出弹框定义更多内容

前置准备

代码编写

index.js

内容展示

组件开发

结语

前置准备

首先需要进入到ecode页面，在地址栏端口号后面输入/ecode即可进入

如果提示你没有权限的话，可以在后端应用平台的组织权限管理这里添加ecode编辑权限

可以选择新增角色也可以选择对原有角色进行新增权限

点击权限项的搜索输入框输入【前端】即可添加对Ecode平台的编辑管理权限

代码编写

在编辑代码之前首先需要注意的就是对register.js文件的前置加载；这个在之前手把手教你Ecode入门这篇文章里有详细的说明，不清楚的可以去看看上一篇文档

index.js

在这个js文件中编写对应的需要展示的内容

class testComponent extends React.Component{//这里声明组件名称为testComponent，需要继承React的Componentrender(){//这些都是固定写法，render(){return()}return(//需要展示的内容就需要卸载return中，为了便于区分可以使用div进行包括，方便后期的样式调整<div>添加的自定义内容</div>)}
}
//这里就是设置组件，以便他能够被前端识别并显示出来
ecodeSDK.setCom('${appId}','testComponent',testComponent)

这里的appId是你编写的这个项目文件的唯一标识，鼠标点到项目文件夹上，右键点击属性即可查看对应的appid

以上就是在ecode平台编写的代码样式，但是千万不要忘记发布项目，鼠标点击项目文件夹右键发布即可，文件夹会变成橙色【如果还是不清楚，可以移步观看我的上一篇手把手教学Ecode入门的文章】这样就算是一个简单的demo展示了，但是如果要在特定的流程中将编写的div盒子里面的内容展示出来还需要在流程对应节点的插入代码中进行注册

内容展示

在ecode平台编写完代码后，如果你想在流程中看到自己编写的内容就需要在对应流程中插入代码

 var params = {domId:'test',//渲染位置的单元格idid:'f2f4ade2172e417aa6918bad2ba1a8fe',//appidname:'testComponent',//调用的组件名称，在setCom中定义的cb:function(){//渲染完成后的回调},noCss:true,props:{}
}ecodeSDK.render(params);

这段代码是一个固定的写法，但是需要注意的是其中domId、id以及name是需要随着不同的项目不同的位置而改变的

其中【domId】是自己设置的

其中appid就像上面说的，从ecode中你发布的对应项目里面查找即可

name的话就是你设置的组件名称

组件开发

上面说的只是一个简单的内容展示，但是如果你有很多内容需要进行展示的话，全部把元素写在index.js中明显是不大现实的，对于后期查找对应问题也不会很明确，这个时候就需要了解对应的组件开发了

顾名思义，组件开发就是将一些元素封装成一个组件，然后在index.js中引用你封装的组件

在Ecode中，封装组件很简单，只需要新建一个js文件，然后将这个js文件里面的组件名在index.js中引用即可

如下所示：

class SonComponent extends React.Component{render(){return(<div>子组件展示的内容</div>)}
}

这样就编写好了子组件，然后将这个子组件在index.js中进行引用

class testComponent extends React.Component{render(){return(<div>添加的自定义内容<SonComponent />//这里就是引用的子组件了，就相当于是一个标签一样，子组件名称就是这个标签名</div>)}
}
ecodeSDK.setCom('${appId}','testComponent',testComponent)