o2oa开发平台前端源码级二次开发（vue3,react）-九游会官网登录入口网页

在使用九游会官网登录入口网页-ag8九游会j9登录入口进行项目定制化开发时，我们可以开发新的前端组件（x_component）以扩展九游会官网登录入口网页-ag8九游会j9登录入口来实现更多的业务。这种新增前端组件或者前端业务的开发通常会配合后端自定义应用实现的服务来完成系统内数据的交互。在当系统默认的界面不符合系统ui/ue设计需要，希望重新设计现有功能的前端展现时，我们也需要新增或者修改原有的组件源码。

上述要求我们除了使用九游会官网登录入口网页-ag8九游会j9登录入口平台的门户页面设计达到目标，针对于复杂的前端交互设计，开发属于自己的x_component也是一个有效的方式。

本文主要介绍几种前端二次开发的方式，以及与流行前端框架（vue、react）的集成。

先决条件

1. 获取到o2oa的源码，参照前面的课程所介绍的内容。

2. 有一台运行的o2oa服务器，作为开发服务器。

3. 开发机安装了node.js环境，版本要求16及以上版本。

4. 为了方便开发，最好有您熟悉的前端开发ide工具，如webstorm 或 vscode。但这并不是强制的。本文后续的操作，我们以vscode为例。

用vscode打开o2oa的源码目录，并打开终端，输入以下命令：

npm install -g @o2oa/component-tools

此命令全局安装了@o2oa/component-tools，用于创建o2oacomponent。建议每次需要创建component时运行此命令，以获取最新的更新。

然后进入o2web/source目录，然后运行npm install。

cd o2web/source

npm install

执行完成后，就可以创建component了。

o2oa原生方式的component

创建component组件

创建component的命令格式是：o2-cmpt create name ，其中的“name”就是要创建的component名称。如创建一个名为“custom.homepage”的component。

o2-cmpt create custom.homepage

展开目录后，看到文件结构是：

$main/目录：存放静态文件资源，包括图标、css、html模板文件等

lp/目录：存放国际化语言包，zh-cn.js、en.js

main.js：component入口js文件。

部署组件

前端的打包部署使用了gulp，为了能快速部署组件到开发服务器，需要增加一个配置文件：o2web/gulpconfig.js，用于设置部署到服务器的信息。

内容如下：

module.exports = {
    "dev": {	//"dev"为配置名称
        'upload': 'sftp',	//sftp, ftp, 或 local
        'location': 'e:/o2server/servers/webserver/',	//本地服务器部署路径，仅upload为local时有效
        'host': 'px.o2oa.net',	//sftp或ftp时的服务器地址
        'user': 'root',					//sftp或ftp 的登录用户
        'pass': '********',	//sftp或ftp 登录用户的密码
        "port": 22,					//sftp或ftp 的端口
        "remotepath": "/data/o2server/servers/webserver/",	//sftp或ftp 的服务器部署路径
        "dest": "dest"	//打包后生成的本地路径
    }
};

上面的这个配置表示，如果在打包时传入"dev"作为参数的话，会自动打包，并通过sftp部署到px.o2oa.net服务器的“/data/o2server/servers/webserver/”路径下，这就是正在运行开发服务器的web路径，所以当我们部署上去后，就可以在开发服务器直接运行component了。

配置完成后，就可以运行打包部署脚本了：

gulp x_component_custom_homepage --ev dev

如果不出意外，运行正确后，出现下面的信息：

此时我们新创建的component就部署到开发服务器上了。

运行组件

然后就可以访问开发服务器查看custom.homepage的运行情况，有三种方法：

1、通过浏览器打开：http://hostaname/x_desktop/index.html?app=custom.homepage

2、通过浏览器打开：http://hostaname/x_desktop/app.html?app=custom.homepage

以上两种方法中的“hostname”替换为开发服务器地址。

3、通过浏览器打开：http://hostaname/x_desktop/index.html，然后用管理员身份登录，打开主菜单-系统设置

进入应用后选择“系统部署”，点击最后的“部署组件”：

然后填入合适的信息

组件名称：可随意填写，但不能与已有组件重名

组件标题：可随意填写，此信息其实已经无效，实际的组件标题会自动获取component的语言包的title数据。

组件路径：这个必须和我们创建组件时的名称一致，这个例子中，就是“custom.homepage”

组件图标：会自动获取component组件目录下的appicon.png

是否可见：表示此组件是否会在主菜单中出现。

可访问列表：可以选择个人、群组和角色，设定此组件只有哪些人可访问，为空时表示不限制，

拒绝访问列表：可以选择个人、群组和角色，设定此组件哪些人不可访问，为空时表示不限制，

当“可访问列表”和“拒绝访问列表”都为空时，表示所有人都可以访问。

填写好信息后，点击“部署组件”。

然后就可以在主菜单中看到这个组件了，点击就可以打开它。

打开后组件页面是这个样子的：

这个就是默认的o2oacomponent组件，它主要实现了列示当前用户最新的5个待办，以及打开日程安排、打开组织管理，启动流程等样例功能。

组件源码介绍

在组件源码目录下的$main/下存放了静态资源文件，几个主要文件如下：

appicon.png：作为组件在平台主菜单中显示的图标

default/style.css：组件使用的css文件，此文件的css内容仅对当前组件生效

lp/目录存放语言包文件，包含了zh-cn.js和en.js，其中的title就是组件显示的标题。

main.js文件是组件的入口，它定义了一个类，我们简单介绍一下主要的方法和参数：

//这一行定义了custom.homepage组件是否可以在平台中打开多个窗口
mwf.xapplication.custom.homepage.options.multitask = false;

//此处定义了mwf.xapplication.custom.homepage.main类，组件被打开时，会实例化这个类
mwf.xapplication.custom.homepage.main = new class({
  
  //它继承了mwf.xapplication.common.main类，这是系统定义的所有组件的基类
	extends: mwf.xapplication.common.main,
  
	implements: [options, events],

	options: {
		"style1": "default",
    //此处定义了组件使用的默认样式，它对应$main/default目录，系统会自动加载对应目录的css和资源
		"style": "default",
		"name": "custom.homepage",	//组件的名称
		"mvcstyle": "style.css",	//要加载的css文件名
		"icon": "icon.png",				//图标的文件名
		"title": mwf.xapplication.custom.homepage.lp.title	//组件的标题，从lp/目录下的语言包获取
	},
  //此方法在组件被加载之前运行，此处只是赋值了语言信息
	onqueryload: function(){
		this.lp = mwf.xapplication.custom.homepage.lp;
	},
  
  //loadapplication是组件对象加载的入口方法，在此处为组件创建dom对象
  //一个最简单的组件，只需要实现此方法即可。它是组件中唯一一个必须要实现的方法
  //组件的this.conent是一个div容器，它是组件的容器对象，组件的所有dom元素都应该被this.conent包裹
	loadapplication: function(callback){
		var url = this.path this.options.style "/view.html";
		this.content.loadhtml(url, {"bind": {"lp": this.lp}, "module": this}, function(){
			this.loadtaskview();
		}.bind(this));
	},
  
  //---------------------------------------------------------------------
  //之后所有的方法都是当前组件特有的方法，这需要根据组件的功能自行添加
  
	loadtaskview: function(){
		o2.actions.load("x_processplatform_assemble_surface").taskaction.listmypaging(1,5, function(json){
			debugger;
			this.tasklistview.loadhtml(this.path this.options.style "/taskview.html", {"bind": {"lp": this.lp, "data": json.data}, "module": this}, function(){
				this.dosomething();
			}.bind(this));
		}.bind(this));
	},
	dosomething: function(){

	},
  //通过o2.api获取平台api运行环境，然后可以在api文档钟查询具体方法和对象的使用方法
	opentask: function(id, e, data){
		o2.api.page.openwork(id);
	},
	opencalendar: function(){
		o2.api.page.openapplication("calendar");
	},
	openorganization: function(){
		o2.api.page.openapplication("org");
	},
	openinbrowser: function() {
		this.openinnewbrowser(true);
	},
	startprocess: function(){
		o2.api.page.startprocess();
	},
	createdocument: function(){
		o2.api.page.createdocument();
	}
});

接着来看一下 loadapplication 方法做了什么

loadapplication: function(callback){
  //先计算view.html的路径
  var url = this.path this.options.style "/view.html";
  
  //然后通过dom对象的loadhtml方法，将view.html的内容，渲染到this.content中。
  //在 view.html 内容被加载完成后，通过回调方法，调用loadtaskview方法。
  //loadhtml是o2oa为dom对象的一个扩展方法，它实现了一个简单的模板引擎。
  //第一个参数是要加载的html模板的url
  //第二个参数是options对象，其中bind是要绑定到模板的json格式数据，此处我们就是绑定了语言信息
  //		                    module是html中的元素要绑定到的组件。
  //第三个参数是加载完成后的回调函数。
  this.content.loadhtml(url, {"bind": {"lp": this.lp}, "module": this}, function(){
    this.loadtaskview();
  }.bind(this));
},

那就需要看一下view.html的内容了：

    
    
    

        for more o2oa development document,

        check out the
        o2oa develop documentation.