在前面的章节中,我们介绍了两种在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,如下图:

image.png

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

npx create-react-app my-app
cd my-app


创建后目录结构如下:

image.png

添加O2平台web脚本

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

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

<script src="../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,添加以下代码:

let o2 = window.o2;
let layout = window.layout;
export {o2, layout};


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


修改inde.js

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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './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>
                <App value={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: 5px 10px;
  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: 10px 20px;
  text-align: center;
  background: #0f81cc;
  margin-top: 10px;
  color: #ffffff;
  font-size: 18px;
  float: left;
  margin-right: 20px;
  cursor: pointer;
}

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

import React from 'react';
import './App.css';
//获取O2全局对象
import {o2, layout} from './o2';

function App(props) {
    function openHomepage(){
            //通过O2全局对象layout的openApplication方法打开主页"Homepage"
        layout.openApplication(null,"Homepage")
    }
    function openTask(id){
        //通过O2全局对象layout的openApplication方法打开待办
        layout.openApplication(null,"process.Work", {"workId": id});
    }
    function startProcess(){
        //通过o2.env对象启动流程
        //o2.env对象即是在O2门户页面的脚本中的this指向,可以使用其方法。
        //请将“application-name”和“process-name”修改为您的流程应用名称和流程名
        o2.env.page.startProcess("application-name", "process-name");
    }

    function listTask(){
        let list = [];
        props.data.each(function(d){
            list.push(<div className="o2-task" onClick={()=>{openTask(d.work)}}>{d.title || "无标题"}</div>);
        });
        return list;
    }

    return (
        <div className="App">
            <header className="App-header">
                <p>
                    您有{props.value}个待办
                </p>
            </header>
            <div className="o2-tasklist">
                {listTask()}
            </div>
            <div className="o2-button" onClick={startProcess}>点击此处启动流程</div>
            <div className="o2-button" onClick={openHomepage}>点击此处打开O2首页</div>
        </div>
    );
}

export default App;

  上述代码创建了一个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,就可以看到和第二章一样的效果了。

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

  登录后:

image.png

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


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

npm run build

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

总结

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

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

推荐文章:

服务集成-通过接口启动一个新的流程实例(工单)
2021-03-02
O2OA允许用户自行修改源码或者增加源码来扩展系统服务,也可以包装功能更强的业务服务。本文主要介绍如何在Java代码中通过接口从第三方应用系统启动O2OA中的业
系统集成-SSO与单点认证
2021-02-26
O2OA平台提供灵活的系统集成方案,让企业信息平台与各类第三方系统进行集成。本篇主要介绍如何在O2OA中与其他系统实现单点登入。
开发知识-鲲鹏(ARM)麒麟操作系统如何替换yum源?
2021-02-07
有时候会遇到系统自带的麒麟的yum源失效,就像我们遇到的麒麟公司护网的时候,yum安装任何软件都无法成功,连接无响应,所以需要安装合适的yum源中标麒麟-华为A
会议申请使用手册
2021-02-19
O2OA会议申请是使用平台流程管理能力开发的一个申请流程。员工的会议申请通过审批之后,可以同步到会议管理系统,由会议管理系统进行展现,提醒和跟踪。可以清晰地在会
源码编译-IOS客户端打包处理
2021-03-15
O2OA是真正全代码开源的应用开发平台,开发者可以直接使用从github或者gitee上clone的源码编译成IOS客户端,代码可以修改,安全可靠,无限制。本文
平台维护-流转中工作数据的查询、操作和管理
2021-02-26
O2OA提供平台数据维护应用,用于对平台应用类数据的维护操作,用户可以在应用市场选择安装平台维护应用。本篇主要简单介绍流转中工作数据的查询、操作和管理功能。
考勤管理-新版
2021-09-06
@企业办公系统@考勤管理@开源办公系统@员工考勤@人事考勤O2OA考勤管理提供了一个通用的考勤管理,企业可以使用它实现手机打卡,数据导入,数据分析,数据统计。员
表单-数据模板的配置方法
2021-07-01
数据模板可以用来让用户在使用层,自动进行添加整个数据表格。具体的使用方法如下:1.从表单中拖动数据表格:组件的标识是:datatemplate2.在数据模板中制
开发知识-Vue篇:在O2门户页面中使用Vue
2021-02-07
  在O2OA门户页面中使用Vue非常容易,本章我们介绍两个实例,来展示如何在门户页面中使用Vue。版本要求本文适用于如下版本:O2OA版本要求:5.1及以上版
RPM打包-将O2OA打成RPM安装包
2021-08-03
@源码打包@RPM打包@O2OA@rpm安装包在国产可信环境一般不允许对服务器进行文件上传解压安装,这时,我们需要把O2OA打包成符合要求的RPM安装包,通过可

results matching ""

    No results matching ""