本章我们介绍使用React的Create React App工具,在O2平台中创建React应用。在本例中,我们将列示当前用户的前20条待办,点击标题打开待办;并通过点击按钮启动流程和打开主页。

版本要求

本文适用于如下版本:

  • O2OA版本要求:5.1及以上版本;
  • React版本:本文撰写时,react版本是16.13.1。(更低的版本未经验证)

    前提

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

  • 有一台O2服务器
  • 使用合适的开发工具:WebStorm、VSCode、Atom等(本例使用WebStorm)

创建React应用

  您可以使用WebStorm创建一个新的React App,如下图:
image.png
或者创建一个空项目,然后使用以下命令创建React应用:

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


创建后目录结构如下:
image.png

添加O2脚本引入

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

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

image.png

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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

//定义O2平台对象
let layout = window.layout;
let o2 = window.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')
        );
    });
});

其中:
let layout = window.layout;
let o2 = window.o2;
获取两个O2的全局对象。

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';

function App(props) {
    function openHomepage(){
            //通过O2全局对象layout的openApplication方法打开主页"Homepage"
        window.layout.openApplication(null,"Homepage")
    }
    function openTask(id){
          //通过O2全局对象layout的openApplication方法打开待办
        window.layout.openApplication(null,"process.Work", {"workId": id});
    }
    function startProcess(){
          //通过o2.env对象启动流程
          //o2.env对象即是在O2门户页面的脚本中的this指向,可以使用其方法。
          //请将“application-name”和“process-name”修改为您的流程应用名称和流程名
        window.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,点击后分别启动指定的流程,打开主页。
其中用到两个全局对象:o2和layout。我们在Node.Js环境中开发,o2的对象是通过

推荐文章:

流程设计-流程设计与应用权限设置
2021-02-26
本文主要介绍如何在O2OA中进行审批流程或者工作流设计,O2OA主要采用拖拽可视化开发的方式完成流程的设计和配置,不需要过多的代码编写,业务人员可以直接进行修改
CRM客户管理使用手册
2021-02-19
O2OA包含一个简单的开源CRM客户信息管理系统,提供客户信息管理,客户线索管理,公海管理,联系人管理以及跟进信息和数据统计功能。O2OA是一款以流程管理为核心
论坛管理
2021-02-19
O2OA平台论坛管理为企业提供了一个员工公开交流的场所,经过配置后,论坛可以拥有丰富的栏目、版块,可以进行版块的权限设置,可见性,发贴回复权限设置。
开发知识-Vue篇:使用Vue-CLI开发O2应用
2021-02-07
  Vue-CLI是Vue官方提供的CLI工具,用于为应用快速搭建繁杂的脚手架。本章我们介绍使用Vue-CLI工具在Node,js环境下,Vue和O2集成应用开
源码编译-IOS客户端打包处理
2021-03-15
O2OA是真正全代码开源的应用开发平台,开发者可以直接使用从github或者gitee上clone的源码编译成IOS客户端,代码可以修改,安全可靠,无限制。本文
业务开发-组织架构-人员信息创建
2021-02-26
O2OA提供多级组织架构设置能力,用户可以在系统内设置集团、分公司、部门、小组等多级企业组织结构来满足办公需要。本文主要介绍如何在O2OA中添加人员信息。
企业微信办公首页说明
2021-02-19
O2OA平台可以以第自建应用的方式集成到企业微信,同步企业微信的企业通讯录作为本地组织人员架构,并且可以将待办等通知直接推送到企业微信进行消息提醒。
办公用品管理使用手册
2021-02-18
O2OA办公用品管理为企业提供办公用品的入库,领用,采购维护等功能,以便于轻松管理物资,减少铺张浪费,节约成本,提高办公效率。
快速入门-常用表单脚本样例汇总
2021-03-30
一、两个下拉框联动功能二、实现输入框模糊查询下拉选择样例1、前端脚本调用接口vardata="{}";varres=[];newRequest({method:
门户开发-HTML模板导入
2021-03-01
O2OA提供的门户管理平台可以让用户自由地为企业定制符合企业特色的门户系统,门户页面。可以让页面展现的内容真正满足企业自身的需求。平台支持将完整的HTML文件导

results matching ""

    No results matching ""