400-888-0545
首页 > 关于我们 > 技术文摘
开源办公OA系统:如何在O2门户页面中使用Vue
发布时间:

vue.jpg

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


版本要求

本文适用于如下版本:

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


实例一、HelloWord

  在O2OA门户应用中创建一个页面,并向页面中创建一个文本组件,名称为“label”,值设置为“固定值”:{{message}}。如下图:

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 () {
  o2.load([js1,js2,js3], 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: `
                    <div class="App"><div class="App-header"><p>您有{{count}}个待办</p></div>
                        <div class="o2-tasklist" v-for="d in taskList">
                            <div class="o2-task" @click='openTask(d.work)'>{{d.title || "无标题"}}</div>
                        </div>
                        <div class="o2-button" @click="startProcess">点击此处启动流程</div>
                        <div class="o2-button" @click="openHomepage">点击此处打开O2首页</div>
                    </div>`,
                //组件方法定义
                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");
this.include(["11","22"], function(){}, true);

image.png

预览查看结果

预览当前页面,就可以看到如下效果:

image.png

  到此我们我们在O2OA门户中使用了Vue创建了我们需要的组件,并调用它,可见这是非常容易的。直接应用Vue的js文件也是Vue官方推荐的使用方式。

  Vue还提供了官方Vue-CLI工具,用于在Node.Js开发环境下的快速构建,下一章,我们就来介绍通过Vue-CLI创建Vue应用并集成O2OA