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

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

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

前置准备

代码编写

index.js

内容展示

组件开发

结语


前置准备

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

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

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

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

代码编写

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

index.js

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

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

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

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

内容展示

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

 var params = {
  domId:'test',//渲染位置的单元格id
  id:'f2f4ade2172e417aa6918bad2ba1a8fe',//appid
  name:'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)

结语

好啦,以上就是一个简单的Ecode自定义内容在流程中的展示,上面介绍的只是文本的介绍,如果是想添加Button按钮的可以直接将div盒子里面的文本换成button即可

大家可以自己多尝试尝试哟,有不懂的问题咱们可以共同讨论!!!!

后面也会总结一下如何将button按钮添加到流程以及如何重写原生组件这些内容,并将它们分享出来,期待一下吧!!!!

相关文章:

  • 从CNN到Transformer:遥感影像目标检测的未来趋势
  • 语音控制热水器WTK69000离线语音识别芯片方案:迈向智能家居新时代
  • 一款社交媒体中查用户名的工具
  • 【Python】如何在 Linux/Windows 系统中设置 PYTHONPATH 环境变量
  • 什么是 Vue 的自定义事件?如何触发和监听?
  • js面试八股
  • Git笔记汇总,持续更新~
  • 快速提升网站收录:利用网站内链布局
  • 出行项目案例
  • C++ ——继承
  • ElasticSearch公共方法封装
  • Python+Selenium+Pytest+POM自动化测试框架封装
  • 【Deepseek+Dify】wsl2+docker+Deepseek+Dify部署本地大模型知识库问题总结
  • 后“智驾平权”时代,谁为安全冗余和体验升级“买单”
  • 如何通过 Python 实现一个消息队列,为在线客服系统与海外运营的APP对接
  • 数据结构之【顺序表简介】
  • Innovus中快速获取timing path逻辑深度的golden脚本
  • http+nginx
  • Compose 常用UI组件
  • Duplicate entry for key ‘PRIMARY‘ 主键重复报错解决
  • 娃哈哈:自4月起已终止与今麦郎的委托代工关系,未来将坚持自有生产模式
  • 习近平复信中国丹麦商会负责人
  • 上海国际电影节纪录片单元,还世界真实色彩
  • 跨文化戏剧的拓荒者与传承者——洪深与复旦剧社的百年回响
  • GDP逼近五千亿,向海图强,对接京津,沧州剑指沿海经济强市
  • 在笔墨金石间,看胡问遂与梅舒适的艺术对话