在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。

results matching ""

    No results matching ""