O2OA使用手册
第一章 服务器部署及管理
  • 1.1 平台服务器主机架构配置推荐
  • 1.2 平台服务器版本升级操作说明
  • 1.3 o2server无法正常显示验证码解决办法
  • 1.4 在宝塔面板中安装O2OA(For Linux)
  • 1.5 系统安全-启用HTTPS(腾讯云版)
  • 1.6 系统安全-自签名SSL证书验证HTTPS功能
  • 1.7 系统安全-加密登录-登录密码RSA加密
  • 1.8 功能部署-为平台增加全文检索功能
  • 1.9 平台维护-流转中工作数据的查询、操作和管理
  • 1.10 平台维护-待办待阅数据的查询操作和管理
  • 1.11 平台维护-自动执行平台数据的备份与恢复
  • 1.12 平台维护-备份和恢复平台数据操作
  • 1.13 平台维护-在线部署自定义应用的WAR包和JAR包
  • 1.14 平台服务器下载及安装部署-Windows系统
  • 1.15 开源平台O2OA服务器下载及安装部署(Linux环境)
  • 1.16 华为云服务器部署O2OA-麒麟操作系统
  • 1.17 平台维护-使用Web端运行服务器管理命令
  • 1.18 密码管理-超级管理员密码修改
  • 1.19 密码管理-普通用户初始化密码设置
  • 1.20 密码管理-用户重置密码操作
  • 1.21 系统配置-如何访问和操作内置数据库-H2
  • 1.22 系统配置-第三方数据库配置-MySQL
  • 1.23 日志管理-访问日志相关配置
  • 1.24 日志管理-审计日志相关配置@日志管理
  • 1.25 日志管理-平台日志文件说明
  • 1.26 系统架构-集群部署配置及操作说明
  • 1.27 系统架构-基于nginx快速集群部署-端口分发
  • 1.28 系统配置-主要配置文件说明
  • 1.29 系统配置-配置服务器连接O2云
  • 1.30 系统配置-流程催办提醒配置
  • 1.31 系统配置-自定义消息提醒
  • 1.32 系统配置-消息提醒配置说明
  • 1.33 系统配置-文件存储服务器配置
  • 1.34 系统配置-工作日节假日配置
  • 1.35 系统配置-开机自动启动O2Server
  • 1.36 系统安全-启用HTTPS(百度云版)
  • 1.37 系统架构-基于nginx快速集群部署-上下文分发
  • 第十五章 开发知识及常见问题
  • 15.1 藕粉社区问答系列1
  • 15.2 藕粉社区问答系列2
  • 15.3 藕粉社区问答系列3
  • 15.4 快速入门-平台相关资料汇总
  • 15.5 快速入门-服务器总体介绍汇总
  • 15.6 快速入门-流程表单载入基础数据
  • 15.7 快速入门-常用表单脚本样例汇总
  • 15.8 快速入门-自定义表数据分页样例
  • 15.9 OEM白标-如何修改平台中的Logo图标和文字
  • 15.10 云服务器-阿里云ECS服务器的端口启用
  • 15.11 开发知识-React篇:在O2OA平台框架中使用React
  • 15.12 开发知识-React篇:在O2OA门户页面中使用React
  • 15.13 开发知识-Vue篇:在Vue应用中集成O2OA
  • 15.14 开发知识-Vue篇:使用Vue-CLI开发O2应用
  • 15.15 开发知识-Vue篇:在O2门户页面中使用Vue
  • 15.16 平台中使用Druid数据库连接及监控
  • 15.17 开发知识-在PAAS平台上部署O2OA开发平台
  • 15.18 开发知识-如何使用Tomcat架设webdav服务器
  • 15.19 开发知识-单个端口模式的Nginx和系统配置
  • 15.20 开发知识-Linux非root用户如何使用80端口启动O2OA
  • 15.21 开发知识-O2OA平台启用Eruda进行移动端调试
  • 15.22 开发知识-神通数据库安装
  • 15.23 开发知识-人大金仓数据安装
  • 15.24 开发知识-中标麒麟安装达梦数据库(DM8)
  • 15.25 开发知识-中标麒麟安装人大金仓详细步骤
  • 15.26 开发知识-使用VNC连接中标麒麟V7操作系统
  • 15.27 开发知识-鲲鹏(ARM)麒麟操作系统如何替换yum源?
  • 15.28 开发知识-数据优化知识点
  • 15.29 水印安全-附件水印|加密|文档格式转换图片|PDF
  • 15.30 消息队列-配置activeMQ、kafka消息队列
  • 15.31 常见问题-数据导出或者导入时发生OOM异常
  • 15.32 常见问题-如何让用户在首次登录时,必须对初始密码进行修改
  • 15.33 常见问题-如何在模块部署中控制模块的访问权限
  • 15.34 常见问题-如何在平台中开发Ftp文件上传文件的服务?
  • 15.35 常见问题-如何使用服务管理调用WebService
  • 15.36 常见问题-如何使用脚本调用外部服务
  • 15.37 常见问题-如何使用脚本控制流程自动流转
  • 15.38 常见问题-如何通过脚本调用系统内服务
  • 15.39 常见问题-接口代码疑惑解答汇总
  • 15.40 常见问题:Maven编译o2server错误: Java Heap Space
  • 15.41 常见问题-集群配置后启动报错:NullPointerException
  • 15.42 常见问题-服务器错误:can not decrypt token
  • 15.43 常见问题-IOS移动办公无法收到验证码
  • 15.44 常见问题-服务器和日志时间相差12小时的问题
  • 15.45 常见问题-为什么127.0.0.1可以访问但其他IP无法访问
  • 15.46 藕粉社区问答系列4
  • 15.47 开发知识-React篇:在React应用中集成O2OA

  • 开发知识-Vue篇:在O2门户页面中使用Vue

    时间:2022-08-03   

    版本要求

    本文适用于如下版本:

    • O2OA版本要求:5.1及以上版本;

    • Vue版本:本文撰写时,Vue版本是2.6.11。(更低的版本未经验证)


    实例一、HelloWord

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

    helloword.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));

    保存页面后,并预览此页面:

    helloO2OA.png

    这样我们就在O2OA门户页面中使用了Vue。


    实例二、O2 Task List

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

    新建页面

      在O2OA门户应用中新建一个页面,并向页面中创建一个容器组件,标识为:div。然后在容器中创建一个通用元素,元素标签为o2-task。我们会在后面创建o2-task的Vue组件。

    o2-task.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;
    }

    css.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");

    vue-task.png

    预览查看结果

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

    tasklist.png

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

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


    上一篇:没有了!

    下一篇:开发知识-Vue篇:使用Vue-CLI开发O2应用