O2OA开源免费开发平台:在O2门户页面中使用React(三)

原创
07/06 16:14
阅读数 153

在前面的章节中,我们介绍了两种在O2OA中使用React开发应用的方式,已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器,自己搭建web服务器,那就请阅读本章。

我们还是使用React的Create React App工具,创建React应用,然后将O2OA集成到应用中,并实现以下功能:列示当前用户的前20条待办,点击标题打开待办;通过点击按钮启动流程和打开主页。

版本要求

本文适用于如下版本:

O2OA版本要求:5.1及以上版本;

React版本:本文撰写时,react版本是16.13.1。(更低的版本未经验证)

前提

开发端安装了Node.js,Node >= 8.10, npm >= 5.6

有一台O2服务器(并不需要启动webServer,但其他服务需要正常启动)

使用合适的开发工具:WebStorm、VSCode、Atom等(本例使用WebStorm)

创建React应用

您可以使用WebStorm创建一个新的React App,如下图:

 

或者创建一个空项目,然后使用以下命令创建React应用:

npx create-react-app my-appcd my-app

创建后目录结构如下:

 

添加O2平台web脚本

将O2服务器的webServer下的所有文件夹拷贝到public目录:

 

在public/index.html的head中添加O2脚本引入:

<scriptsrc="../o2_core/bundle.js"></script>

修改public/x_desktop/res/config/config.json文件:

{"center": [    {"port":"20030",//O2服务器中心服务器端口"host":"develop.o2oa.net"//O2服务器中心服务器Host    }  ],"applicationServer": {"host":"develop.o2oa.net"//O2应用服务器Host  },"initManagerChanged":true,"initManagerName":"",...}

此文件主要修改两部分内容:

1、center部分,修改为要访问的O2中心服务器地址和端口;

2、applicationServer部分,修改为要访问的O2应用服务器地址,如果没有applicationServer,就添加一个。集群环境下,可配置应用服务器负载地址;

为了方便后续引入,我们在src下创建一个o2.js,添加以下代码:

leto2=window.o2;letlayout=window.layout;export{o2,layout};

自此以后,所有的过程都和第二章基本一样了。

修改inde.js

修改src/index.js文件如下:

importReactfrom'react';importReactDOMfrom'react-dom';import'./index.css';importAppfrom'./App';//获取O2全局对象import{o2,layout}from'./o2';//在O2平台脚本载入完成后执行layout.addReady(function(){layout.app=true;//通过平台服务,获取当前用户的前20条待办(可通过http://your-server:20030/x_program_center/jest/list.html查询平台接口服务)o2.Actions.load("x_processplatform_assemble_surface").TaskAction.V2ListPaging(1,20, {},function(json){//React渲染App组件ReactDOM.render(<React.StrictMode><Appvalue={json.count}data={json.data}></App></React.StrictMode>,document.getElementById('root')        );    });});

layout.addReady 方法会在O2载入完成后执行回调方法。

o2.Actions.load 方法可以调用平台的Restful服务。

修改App组件

先修改src/App.css样式文件,拷贝以下代码:

.App{padding:20px;margin:20px;}.App-header{padding:5px10px;background:#0f81cc;font-size:18px;color:#ffffff;}.o2-tasklist{padding:10px;background:#f3f3f3;font-size:18px;}.o2-task{line-height:30px;height:30px;cursor:pointer;}.o2-button{padding:10px20px;text-align:center;background:#0f81cc;margin-top:10px;color:#ffffff;font-size:18px;float:left;margin-right:20px;cursor:pointer;}

修改src/App.js文件如下:

importReactfrom'react';import'./App.css';//获取O2全局对象import{o2,layout}from'./o2';functionApp(props) {functionopenHomepage(){//通过O2全局对象layout的openApplication方法打开主页"Homepage"layout.openApplication(null,"Homepage")    }functionopenTask(id){//通过O2全局对象layout的openApplication方法打开待办layout.openApplication(null,"process.Work", {"workId":id});    }functionstartProcess(){//通过o2.env对象启动流程//o2.env对象即是在O2门户页面的脚本中的this指向,可以使用其方法。//请将“application-name”和“process-name”修改为您的流程应用名称和流程名o2.env.page.startProcess("application-name","process-name");    }functionlistTask(){letlist=[];props.data.each(function(d){list.push(<divclassName="o2-task"onClick={()=>{openTask(d.work)}}>{d.title||"无标题"}</div>);        });returnlist;    }return(<divclassName="App"><headerclassName="App-header"><p>您有{props.value}个待办</p></header><divclassName="o2-tasklist">{listTask()}</div><divclassName="o2-button"onClick={startProcess}>点击此处启动流程</div><divclassName="o2-button"onClick={openHomepage}>点击此处打开O2首页</div></div>    );}exportdefaultApp;

  上述代码创建了一个React组件,列示了待办列表,并创建两个div,点击后分别启动指定的流程,打开主页。

App.js中,我们使用了o2.env对象,这个对象和在门户页面脚本中的this指向一致,可以调用除了与门户页面组件相关方法以外的各种方法,如:o2.env.page.openWork、o2.env.inculde、o2.env.confirm、o2.env.page.startProcess等,详细内容可以参考API文档。

编译并运行

  我们完成了上述开发工作,就可以编译并运行我们的应用了。使用以下命令来查看结果:

npm run start

  运行后,会启动一个web服务器,默认端口3000,并自动打开浏览器,访问http://locahost:3000,就可以看到和第二章一样的效果了。

如果您未登录到服务器,会出现登录页面,登录后就可以看到登录人的待办列表,并可以启动流程了。

 

  登录后:

 

您可以接着修改代码,每次修改保存后,React会自动编译,并刷新浏览器,及时看到修改效果。

开发完成后,可使用命令:

npm run build

React会在将所有的代码编译到build目录下,你就可以将build中的内容部署到任意的web服务器了。

总结

O2OA和React的集成还是非常方便的,对于熟悉React的用户,可以通过更多更灵活的工具来进行集成开发,更多有关React的内容请参考React官网教程。

  对于VUE和Angular和O2OA的集成,我们将在后面的章节为大家介绍。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部