在O2OA门户页面中使用Vue非常容易,本章我们介绍两个实例,来展示如何在门户页面中使用Vue。

版本要求

本文适用于如下版本:

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

实例一、HelloWord

  在O2OA门户应用中创建一个页面,并向页面中创建一个文本组件,名称为“label”,值设置为“固定值”:。如下图:
image.png
然后再表单的afterload事件中,输入以下代码:

//引入vue脚本,生产环境使用https://cdn.jsdelivr.net/npm/vue
//你也可以下载js文件,放到O2服务器的webServer目录下,建议放到o2_lib目录,然后用正确的路径加载它
o2.load("https://cdn.jsdelivr.net/npm/vue/dist/vue.js", function () {
    new Vue({
        el: this.page.get("label").node,
        data: {
            message: 'Hello O2OA with Vue !'
        }
    });
}.bind(this));

保存页面后,并预览此页面:
image.png
这样我们就在O2OA门户页面中使用了Vue。

实例二、O2 Task List

  本列我们实现与前面章节中,集成React样例中一样的功能:列示当前用户的前20条待办,点击标题打开待办;并通过点击按钮启动流程和打开主页。

新建页面

  在O2OA门户应用中新建一个页面,并向页面中创建一个容器组件,标识为:div。然后在容器中创建一个通用元素,元素标签为o2-task。我们会在后面创建o2-task的Vue组件。image.png
在页面基本属性的CSS添加如下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: 20px;
  height: 20px;
  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;
}

image.png

创建Vue组件

在门户中创建一个脚本,命名为:vue_task,并输入以下代码:

//引入vue脚本,生产环境使用https://cdn.jsdelivr.net/npm/vue
//你也可以下载js文件,放到O2服务器的webServer目录下,建议放到o2_lib目录,然后用正确的路径加载它
o2.load("https://cdn.jsdelivr.net/npm/vue/dist/vue.js", function () {
    //将this对象赋值给一个临时变量
    var _self = this;
      //创建名为o2-task的Vue组件
    Vue.component('o2-task', function (resolve, reject) {
          //调用O2平台的列示当前人待办的服务
        _self.Actions.load("x_processplatform_assemble_surface").TaskAction.V2ListPaging(1, 20, {}, function (json) {
            //异步返回后,执行resolve方法
              resolve({
                  //必须通过function返回data数据
                data: function () {
                    return {
                        count: json.count,
                        taskList: json.data
                    };
                },
                  //组件的html内容@click绑定事件,v-for实现循环
                template: `
                    

您有{{count}}个待办

{{d.title || "无标题"}}
点击此处启动流程
点击此处打开O2首页
`
, //组件方法定义 methods: { openHomepage: function () { //page对象的openApplication方法打开主页"Homepage" _self.page.openApplication("Homepage"); }, openTask: function (id) { //page对象的openWork方法打开待办 _self.page.openWork(id); }, startProcess: function () { //page对象的startProcess方法打开待办 //请将“application-name”和“process-name”修改为您的流程应用名称和流程名 _self.page.startProcess("application-name", "process-name"); } } }) }); }); //创建Vue根实例,将根实例挂载到页面的容器div上 new Vue({ el: this.page.get("div").node }); }.bind(this));

上述代码实现了一个Vue组件,并挂载到页面的容器div上。代码中有简单注释,请参考Vue官方文档。

在页面中引入脚本库

  在页面的afterload事件中,添加以下代码:

this.include("vue_task");

image.png

预览查看结果

预览当前页面,就可以看到如下效果:
image.png
  到此我们我们在O2OA门户中使用了Vue创建了我们需要的组件,并调用它,可见这是非常容易的。直接应用Vue的js文件也是Vue官方推荐的使用方式。
  Vue还提供了官方Vue-CLI工具,用于在Node.Js开发环境下的快速构建,下一章,我们就来介绍通过Vue-CLI创建Vue应用并集成O2OA。

推荐文章:

门户开发-HTML模板导入
2021-03-01
O2OA提供的门户管理平台可以让用户自由地为企业定制符合企业特色的门户系统,门户页面。可以让页面展现的内容真正满足企业自身的需求。平台支持将完整的HTML文件导
消息提醒-如何实现收到待办给QQ发送提醒?
2021-03-11
一、前期准备一台windows服务器(用于运行QQ机器人)下载QQ机器人框架下载地址:https://lanzous.com/ilzGNkb95ej下载http
流程设计-拆分流程样例
2021-03-01
在复杂的流程设计中通常需要使用到拆分功能,比如公文管理流程中的各部门办理。本文主要介绍如何在O2OA平台中设计流程时使用流程拆分功能。
服务集成-通过接口实现表单上传附件功能
2021-03-15
O2OA允许用户使用接口来完成对流程、表单以及数据的相关操作。本文介绍如何使用接口来实现表单上传附件的功能。这样便能将流程附件的管理与其他业务进行整合,更方便业
源码编译-O2Server服务器源码编译教程
2021-04-08
O2OA是真正全代码开源的应用开发平台,开发者可以直接使用从github或者gitee上clone的源码编译成服务器,代码可以修改,安全可靠,无限制。本文主要介
服务集成-通过数据接口获取流程数据
2021-03-02
O2OA允许用户自行修改源码或者增加源码来扩展系统服务,也可以包装功能更强的业务服务。本文主要介绍如何在Java代码中通过接口获取流程的业务数据。
常见问题-服务器错误:can not decrypt token
2021-02-07
cannotdecrypttoken服务端无法解开token,可能的原因是,xadmin的密码刚刚修改过而前台没有刷新页面.重新刷新前台页面即可,app端需要重
开发知识-Vue篇:在O2门户页面中使用Vue
2021-02-07
  在O2OA门户页面中使用Vue非常容易,本章我们介绍两个实例,来展示如何在门户页面中使用Vue。版本要求本文适用于如下版本:O2OA版本要求:5.1及以上版
平台维护-在线部署自定义应用的WAR包和JAR包
2021-02-26
在使用O2OA实现项目的过程中,特殊需求在平台现有功能无法直接提供的情况下,可以通过平台提供的自定义war|jar包,实现平台功能的扩展,满足各种不同的需求功能
快速入门-服务器总体介绍汇总
2021-02-07
一、服务器目录介绍二、服务器组成结构三、服务器所占端口四、微服务API五、服务内置对象(方便二次开发、实现2小时一个流程目标)六、架构图

results matching ""

    No results matching ""