本教程涵盖EOSPlatform7.6(NUI版)的基础教程，包括NUIDemo、开发体验、单表功能、LOOKUP功能、流程快速开发等模块。详细介绍了报销单查询、新增、编辑、删除等功能的开发流程，以及组织机构建模和流程定义的创建。
EOS Platform7.6(NUI 版)
基础教程
普元信息技术股份有限公司Primeton Technologies, Ltd. http://www.primeton.com
欢迎使用
目录
第 1 章 NUI Demo 5
1.1 执行 SQL 脚本 5
1.2 导入 Demo 源代码 6
1.3 运行NUI Demo 10
第 2 章 EOS7.6 开发体验 12
2.1 关键知识点 12
2.2 Hello World 案例描述 12
2.3 Hello World 案例开发 12
2.4 测试运行 25
2.5 数据流转原理 26
第 3 章 创建NUI EOS Sample 示例项目 29
3.1 案例描述 29
3.2 创建项目步骤 29
3.3 测试运行 30
第 4 章 单表功能开发 32
4.1 关键知识点 32
4.2 报销单查询案例开发 32
4.2.1 案例描述 32
4.2.2 案例开发 32
4.3 报销单新增案例开发 48
4.3.1 案例描述 48
4.3.2 案例开发 48
4.3.3 测试运行 57
4.4 报销单删除案例开发 58
4.4.1 案例描述 58
4.4.2 案例开发 58
4.4.3 测试运行 63
4.5 报销单编辑案例开发 63
4.5.1 案例描述 64
4.5.2 案例开发 64
4.5.3 测试运行 67
第 5 章 LOOKUP 功能开发 69
5.1 关键知识点 69
5.2 案例描述 69
5.3 案例开发 69
5.4 测试运行 79
第 6 章 单表维护向导开发 81
6.1 关键知识点 81
6.2 案例描述 81
6.3 案例开发 81
6.4 测试运行 90
第 7 章 主从表维护向导开发 92
7.1 关键知识点 92
7.2 案例描述 92
7.3 案例开发 92
7.4 测试运行 100
第 8 章 组织机构建模 103
8.1 关键知识点 103
8.2 组织机构建模 103
第 9 章 简单流程快速开发 112
9.1 需求描述 112
9.2 流程建模模拟 112
9.2.1 项目准备 112
9.2.2 创建流程应用构件包 113
9.2.3 创建流程定义 113
9.2.4 定义流程图 115
9.2.5 流程属性定义 115
9.2.6 活动属性定义 116
9.2.7 业务实现 124
9.2.8 开发测试 124
9.2.9 流程发布 125
9.3 运行管理监控 125
第 10 章 报销流程第一次修改 131
10.1 关键知识点 131
10.2 案例描述 131
10.3 案例开发及运行 131
10.3.1 完成流程定义 131
10.3.2 流程发布 144
10.3.3 测试运行 144
第 11 章 报销流程第二次修改 145
11.1 关键知识点 145
11.2 案例描述 145
11.3 案例开发及运行 145
11.3.1 完成流程定义 145
11.3.2 流程发布 159
11.3.3 测试运行 160
第 12 章 自定义流程开发 161
12.1 关键知识点 161
12.2 案例描述 161
12.3 案例开发及运行 161
12.3.1 完成流程定义 161
12.3.2 完成“填写报销单”环节 163
12.3.3 完成“部门经理审批”环节 178
12.3.4 完成“财务审阅”环节 187
12.3.5 完成“总监审批”环节 195
12.3.6 完成“VP 会签”环节 195
第 13 章 使用流程快速实施框架 197
13.1 关键知识点 197
13.2 案例描述 197
13.3 案例开发 197
13.3.1 完成流程定义 197
13.3.2 使用流程快速实施框架完成“填写报销单”环节 198
13.3.3 测试运行 206
第1章 NUI Demo
在开发中为了能更快地学会使用NUI控件，可利用产品配套的非开源组件中提供了NUI 的示例代码、SQL 脚本及API 文档。在开发之前，将 NUI 的示例源代码导入到 Studio 中， 方便后续开发的参考和学习。步骤如下：
1.1 执行 SQL 脚本
下载产品配套的“非开源组件”，解压缩后，执行\非开源组件\nui\examples\dbscripts 目录下面的 sql 脚本，根据自己的数据库来打开相应 sql；如果开发数据库为 mysql，请执行sample-mysql.sql。本教程中所用的其它 SQL 语句都为 oracle 类型。
本案例说明：执行 SQL 脚本除了可以通过数据库客户端执行之外，还可以通过 studio 进行执行，步骤如下：
1） studio 中数据库视图处选中自己的数据库然后右键，连接数据库；
2） 选中数据库，鼠标右键，选中 Open SQL Scrapbook，如下图：
3） 将 SQL 语句粘贴到SQL 剪贴簿中，将类型、名称以及数据库选好，可以根据自己的需求选择全部执行或者执行部分内容，如下：
注意：
执行SQL 脚本的数据库要求完成初始化，初始化的过程可以在安装 EOS Platform 7.6 时进行，也可以在安装成功后进入 governor 进行。
1.2 导入 Demo 源代码
通过“开始程序EOS Platform7.6Studio”，打开开发环境 Studio。
(1) 单击菜单栏的“文件”，在弹出的菜单中选择“新建EOS 项目”，弹出“新建 EOS
项目”的对话框，选择“空项目”，如图所示。
图1-1 NUI Demo-选择项目类型
(2) 点击【下一步】，填写新建项目所需的信息，在“项目名称”处输入 NUIDemo， 其它信息都是默认信息，如图所示。
图1-2 NUI Demo-填写项目信息
(3) 点击【完成】，NUIDemo 项目创建成功。
(4) 在左侧的资源管理器中，右键选中 NUIDemo，在显示的菜单中选择“导入”，在弹出的对话框中选择“EOS导入源代码”，如图所示。
图1-3 导入源代码
(5) 点击【下一步】， 显示导入源代码信息。点击【浏览】， 选择“ [ 非开源组件]\nui\examples\nui-demo4eos-src.zip”，如图所示。
图1-4 选择源代码包
(6) 点击【完成】，有提示弹出时选择“覆盖”。
1.3 运行 NUI Demo
点击工具栏上的图标“ ”，启动服务器并确保服务器启动正常。在浏览器中访问示例，地址为：http://[IP 地址]:[端口号]/default/demo/index.jsp，比如http://127.0.0.1:8080/default/demo/index.jsp。
EOS Platform7.6 版本服务启动成功后，首次访问页面时会自动跳转到登录界面。在登录页面输入用户名 sysadmin，密码 000000，点击登录后，进入 coframe。再次访问http://[IP 地址]:[端口号]/default/demo/index.jsp，显示出 NUI Demo 示例的主页，如图所示。
图1-5 NUI Demo 示例
注意：
关于 coframe，请参考\开源组件\coframe 文件下的相关文档。
每次访问的时候都会跳转到 coframe 界面，可以通过进入 governor配置HTTP 接入 未登录时跳转页面改成如下：/coframe/auth/login/login.jsp，修改后确定即可。
第2章 EOS7.6 开发体验
2.1 关键知识点
本章通过经典的“Hello World”案例，开始EOS 7.6 开发的最初体验，建立对EOS 7.6 最基本的感性认识。通过对案例的分析，帮助您更深刻地理解最核心的数据流转原理和处理过程。
2.2 Hello World 案例描述
本案例的需求是：在页面上输入姓名，点击【提交】按钮后，后台获取用户输入的姓 名，并将它与“Hello World!”字符串拼装成新的字符串，最后在页面上显示出新字符串。
图2-1 Hello World 案例效果图
2.3 Hello World 案例开发
通过“开始程序EOS Platform 7.6EOS Studio”启动 EOS 的集成开发环境。启动后， 进入到 EOS Studio 的开发工作区。本案例的开发过程如图所示。
图2-2 Hello World 案例开发过程图
详细的开发步骤如下：
1. 创建项目
创建EOS 空项目“EOSTrain”。
(1) 单击菜单栏的“文件”，在弹出的菜单中选择“新建EOS 项目”，弹出“新建 EOS 项目”的对话框，选择“空项目”，如图所示。
图2-1 EOSTrain -选择项目类型
(2) 点击【下一步】，填写新建项目所需的信息，在“项目名称”处输入 EOSTrain， 其它信息都是默认信息，如图所示。
图2-2 EOSTrain -填写项目信息
(3) 点击【完成】，EOSTrain 项目创建成功。
2. 构件包设计
(1) 在项目资源管理器视图中，右键单击“EOSTrain”，在弹出的菜单中选择“创建构件包”，如图所示。
图2-3 新建构件包
(2) 在弹出的“创建构件包”对话框中，设置构件包名称为“com.primeton.helloworld”，显示名称为“HelloWorld 案例开发--逻辑流实现”，如图所示。点击【完成】，完成构件包的创建。
图2-4 创建构件包
(3) 在资源管理器里，展开新建的构件包 com.primeton.helloworld，如图：
图2-5 构件包展现
3. 页面开发
(1) 在“资源管理器”中，展开“EOSTraincom.primeton.helloworld展现页面资源”路径，在“页面资源”上点击右键，在弹出的菜单中选择“创建JSP 页面”,如图所示。
图2-6 创建页面
(2) 在弹出的“向导”对话框中输入页面信息，如图所示，点击【完成】按钮，完成页面的创建。
图2-7 创建页面向导
创建“helloworld.jsp”页面之后，Studio 的“构件编辑器”会自动将刚刚创建的页面打开，会有默认的 HTML 标签和 script 标签。
(3) 从“helloworld.jsp”左侧调色板工具找到“表单控件->Form”，拖拽“Form”到 JSP
文件中。
(4) 从“helloworld.jsp”左侧调色板工具找到“表单控件->TextBox”，拖拽“TextBox”到“Form”中。设置“name”属性为“myname”。
(5) 同上方法，拖拽出“Button”到“Form”中，并输入“onclick”对应的值为“sayhello()”。
(6) 手工输入一个<div>标签，“id”为“info”，代码如下：
页面的 HTML 标签部分完成。
4. 逻辑流开发
(1) 在“资源管理器”中，展开“EOSTraincom.primeton.helloworld构件 com.primeton.helloworld”路径，在“com.primeton.helloworld”上点击右键，在弹出的菜单中选择“创建逻辑构件”，如图所示。
图2-8 创建逻辑构件
(2) 在弹出的“创建逻辑构件”对话框中的“名称”项中输入“helloworld”，如图所示，点击【完成】创建逻辑构件。
图2-9 创建逻辑构件
(3) 在最左侧“资源管理器”窗口中，展开“EOSTraincom.primeton.helloworld构件 com.primeton.helloworld”，找到刚刚创建的逻辑构件 helloworld.componentType，右键，在弹出菜单中选择“创建逻辑流”，弹出的“创建逻辑流向导”对话框，输入相应的逻辑流信息，如图所示，点击【完成】，结束逻辑流的创建。
图2-10 创建逻辑流
创建“join”逻辑流后，Studio 的“构件编辑器”会自动打开刚创建逻辑流。
(4) 双击逻辑流的空白处，在弹出的“逻辑流属性设置”对话框中，设置逻辑流的参数和返回值。具体设置信息如图所示。点击【确定】按钮完成设置。
图2-11 设置逻辑流参数
(5) 在 EOS Studio 最右侧的“构件库视图”窗口中点击工具条上第二个按钮 ，打开构件库，找到 com.eos.foundation ->运算逻辑 ->StringUtil -> concat()，如图所示。
图2-12 构件库
按住鼠标左键，将“concat()”该运算逻辑拖拽到“join.bizx”中。
(6) 打开逻辑流所在的“构件编辑器”中的“选用板”，选择“连接线”依次连接“开始”，“concat”和“结束”图元。同页面流设计类似，我们修改“concat”的名称为“连接字符串”，并拖拽“注释”图元，写明操作。最终的逻辑流如图所示：
图2-13 设计逻辑流
(7) 双击“连接字符串”运算逻辑图元，在弹出的“运算逻辑属性设置”对话框中， 可以看到 concat 有两个输入参数 joinString / strings，一个返回值out0。
图2-14 concat 运算
点击 ，增加第三个参数 param1。
设置参数与返回值：第一个参数值为：逗号，值类型为常量。第二个参数为：myname， 值类型为：变量，可以用 alt + / 来提示得到。第三个参数值为：“Hello World!”值类型为：常量。返回值为：info，同样可以利用提示得到。它们的值设置如图所示。
图2-15 concat 运算逻辑参数设置对话框
保存 join.bizx,concat 图元上的红色错误提示消失。如图:
图2-16 逻辑流
5. 完善页面
(1) 参照 Demo 中的示例代码，打开 http://127.0.0.1:8080/default/demo/index.jsp 页面，点击左侧菜单“快速入门 -> 数据验证 ->表单：文本显示”，查看 code 页面，找到如下代码：
(2) 将上面代码拷贝到“helloWorld.jsp”文件的<script>标签内，并修改：
本案例说明：
1）function sayhello（）: 与 Button 里 面 的 onclick=”sayhello” 对 应 ； 2）com.primeton.helloworld.helloworld.join：在 studio 的资源管理器中找到 join 的逻辑流，鼠标右键点
击并复制全名，将复制的全名粘贴到 url 中的.biz.ext 前面；
3）text.info：info 与逻辑流的返回值对应；
2.4 测试运行
2. 点击工具栏上的图标“ ”，选择项目“EOSTrain”，启动服务器并确保服务器启动正常。
3. 在“资源管理器”中，展开“EOSTraincom.primeton.helloworld展现页面资源helloworld.jsp”路径，右键点击“helloworld.jsp”，在弹出的菜单中选择“复制 URL”，如图所示。
图2-17 复制页面URL
4. 服务器正常启动后，打开 IE 浏览器，本教程中所有访问页面都采用 IE 浏览器。
5. 在 IE 浏览器地址栏点击右键，选择“粘贴”，将 “http://127.0.0.1:8080/default/helloworld/helloworld.jsp”复制到地址栏，回车，界面如图所示。
图2-18 输入页面
6. 在输入框输入“普元”，点击【提交】按钮，运行结果显示如图所示。
图2-19 运行结果
本案例说明：
1） jsp 中定义的 myname 应该和逻辑流的参数（myname）写法一致；
2） 逻辑流定义的返回值、与 concat 构件的返回值以及 jsp 中 text.info 中的 info 一致；
3） concat 构件的功能以及参数定义可以参考 studio 帮助帮助内容使用 concat 在搜索栏中进行搜索即可；
2.5 数据流转原理
1. 如图所示，在逻辑流“开始”图元上右键，添加断点。
图2-20 设置断点
2. 在 浏 览 器 中 访 问 页 面 的 URL “http://127.0.0.1:8080/default/helloworld/helloworld.jsp”，在页面的输入框输入“普元”，然后点击【提交】按钮，Studio 会自动打开“调试透视图”，同时程序会暂停在断点处，这时 studio 右上方窗口的“EOS 变量”视图中可以查看到数据上下文中的数据区及数据，如图所示。
图2-21 连接字符串前页面流的数据上下文
从图中可以看到，逻辑流引擎根据request 的对象信息产生了逻辑流上下文bizContext， 里面包括了从页面传过来的 myname 的值。
3. 在点击单步跳入按钮“ ”，使断点停留在“结束”图元上，在 concat 作用下，字符串完成拼接，返回值 info 为“普元，Hello World!”。如图所示。
图2-22 连接字符串逻辑流的数据上下文
4. 点击按钮“ ”，这时逻辑流运行结束，muoContext 和 bizContext 被销毁，程序回到了页面中。
5. 打开浏览器可以看到，数据已经显示出来。
第3章 创建 NUI EOS Sample 示例项目
3.1 案例描述
创建 nui-sample 示例项目，通过参考示例项目的代码来完成后面第 4 章的开发。
3.2 创建项目步骤
1. 资源管理器空白处，鼠标右键，创建 EOS 项目，选中 NUI EOS Sample 示例项目，然后点击完成，如下图：
图3-1 创建NUI EOS Sample 示例项目
2. 执行 nui-sample 项目下的建表语句，即 dbscripts 下，根据自己的数据库版本来选择执行哪个文件夹下的 sql 语句；
图3-2 找到建表语句
3. 执行脚本：在数据库视图处选中数据库，右键连接数据库，连接后找到与自己数据库匹配的 sql 文件，以 mysql5.5 数据库为例，打开 contact.sql 文件，选择好类型、名称及数据库（可以根据数据库视图“[ ]”中显示的数据库版本来选择），在 contact.sql 文件中鼠标右键点击全部执行，即可执行建表语句；
图3-3 打开建表语句
图3-4 执行建表语句
4. 按照前面方法依次执行 operator.sql 及 org.sql；
3.3 测试运行
打 开 构 件 包 com.primeton.nuisample 展现 页面资源 鼠 标 右 键 点 击
OOperatorList.jsp ， 选 择 复 制 URL ， 如 下 ：
图3-5 复制URL
将复制好的 URL 粘贴到地址栏中进行访问，访问后的页面展示如下：
图3-6 访问URL
页面上有数据展示表示建表语句已经执行成功。
第4章 单表功能开发
4.1 关键知识点
本章通过最常用的“报销单信息基本操作”案例，讲述基础 CRUD 操作过程。通过对案例的分析，帮助您进一步理解EOS ,NUI,逻辑流。
4.2 报销单查询案例开发
4.2.1 案例描述
案例的基本需求：页面输入报销人姓名、是否预算内项目作为查询条件，其中报销人姓名为模糊查询，是否预算内项目通过下拉的业务字典列表选取，点击【查询】后进行查询，查询结果分页显示，形式如图所示。
图4-1 报销单信息查询
4.2.2 案例开发
1. 数据准备:建表 TRAIN_EXPENSEINFO
员工信息表 TRAIN_EXPENSEINFO 表结构如图所示。
表4-1 TRAIN_EXPENSEINFO 的表结构
字段名称 数据类型 数据长度 是否主键 备注
EXPID NUMBER 22 YES 报销单 ID
EXPCODE VARCHAR2 64 NO 报销单编号
EMPID NUMBER 22 NO 报销人 ID
EXPNAME VARCHAR2 64 NO 报销人姓名
EXPDATE DATE 7 NO 报销日期
EXPMONEY NUMBER 22 NO 报销金额
REASON VARCHAR2 255 NO 报销原因
ISBUDGETITEM CHAR 1 NO 是否预算内项目
BENEFITORGID NUMBER 22 NO 受益部门
MANAGER VARCHAR2 64 NO 部门经理
MANAGER_ADVICE VARCHAR2 255 部门经理意见
AUDITOR VARCHAR2 64 财务审核
AUDITOR_ADVICE VARCHAR2 255 财务审核意见
PROCESSINSTID NUMBER 22 流程实例 ID
在数据库中执行 SQL 语句，建表 TRAIN_EXPENSEINFO，并增加 7 条记录：
DROP TABLE TRAIN_EXPENSEINFO CASCADE CONSTRAINTS;
CREATE TABLE TRAIN_EXPENSEINFO (
EXPID NUMERIC(10, 0) NOT NULL, EXPCODE VARCHAR2(64) NOT NULL, EMPID NUMERIC(10,0) NOT NULL, EXPNAME VARCHAR2(64) NOT NULL, EXPDATE DATE,
EXPMONEY NUMERIC(12, 2) NOT NULL, REASON VARCHAR2(255), ISBUDGETITEM CHAR(1),
BENEFITORGID NUMERIC(10, 0), MANAGER VARCHAR2(64), MANAGER_ADVICE VARCHAR2(255), AUDITOR VARCHAR2(64), AUDITOR_ADVICE VARCHAR2(255), PROCESSINSTID NUMERIC(20, 0), PRIMARY KEY (EXPID)
);
-- Add comments to the columns
comment on column TRAIN_EXPENSEINFO.EXPID is ' 报 销 单 ID'; comment on column TRAIN_EXPENSEINFO.EXPCODE is '报销单编号'; comment on column TRAIN_EXPENSEINFO.EMPID is ' 报 销 人 ID'; comment on column TRAIN_EXPENSEINFO.EXPNAME is '报销人姓名'; comment on column TRAIN_EXPENSEINFO.EXPDATE is '报销日期'; comment on column TRAIN_EXPENSEINFO.EXPMONEY is '报销金额'; comment on column TRAIN_EXPENSEINFO.REASON is '报销原因';
comment on column TRAIN_EXPENSEINFO.ISBUDGETITEM is '是否预算内项目'; comment on column TRAIN_EXPENSEINFO.BENEFITORGID is ' 受 益 部 门 '; comment on column TRAIN_EXPENSEINFO.MANAGER is '部门经理';
comment on column TRAIN_EXPENSEINFO.MANAGER_ADVICE is '部门经理意见'; comment on column TRAIN_EXPENSEINFO.AUDITOR is '财务审核';
comment on column TRAIN_EXPENSEINFO.AUDITOR_ADVICE is '财务审核意见'; comment on column TRAIN_EXPENSEINFO.PROCESSINSTID is '流程实例 ID';
2. 构件包设计: com.primeton.train.expense
(1) 在项目“EOSTrain”上点击右键，选择“创建构件包”。
(2) 在弹出的“创建构件包”对话框中，输入如图所示信息，点击【完成】。
图4-2 创建构件包向导
3. 数据实体
（1） 创建数据集
构件包–>数据–>数据模型路径，右键：创建数据集expensedataset ，如图所示：
图4-3 创建数据集（一）
图4-4 创建数据集（二）
（2） 导入数据实体
本案例说明：在将数据实体导入数据集之前要确保数据库是已连接状态的，若没有展示成如图所示，可以鼠标右键选中数据库，点击连接数据库；
图4-5 确定数据库是否已连接
在数据集 expensedataset.datasetx 空白处右键，导入数据实体，如图所示：
图4-6 导入数据实体（一） 弹出导入数据实体窗口，如图所示：
图4-7 导入数据实体（二）
下一步，在“连接”窗口内找到刚刚建好的表 TRAIN_EXPENSEINFO，选中，如图所示：
图4-8 导入数据实体（三） 完成，出现数据实体 TrainExpenseinfo，如图所示：
图4-9 导入数据实体（四） 双击数据实体，修改显示名称，如图所示：
图4-10 修改数据实体显示名称
4. 页面开发: expenseList.jsp
报销单信息查询页面的开发思路：根据 nui-sample 拷贝页面基础代码、设置查询条件、显示查询结果，提交页面数据的方法。
（1）在 com.primeton.train.expense 构件包下的“展现页面资源”上点右键，选择“创建Jsp 页面”，在弹出的创建 Jsp 页面对话框中，输入相关信息，如下图所示。
图4-11 创建Jsp 页面
自动生成的 Jsp 文件里展示了使用NUI 框架必需的代码，片段如下：
（2） 根据 nui-sample 项目中 org/OOrgList.jsp 拷贝页面基础代码
根据第 3 节准备的 nui-sample 项目展现页面资源orgOOrgList.jsp 如图所示。
图4-12 nui-sample
打开 OOrgList.jsp 页面，显示了查询页面的完整源代码，拷贝<body></body>标签体内的所有 HTML 代码至expenseList.jsp 页面的相同位置。接下来将在此段 HTML 代码基础上，根据实际需求调整代码，NUI 页面采用 DIV 实现页面布局。
（3） 设置查询条件
根据功能需求，以报销人姓名、是否预算内项目作为查询条件，其中报销人姓名为模糊查询，是否预算内项目通过下拉的业务字典列表选取。
页面原有的查询条件代码，如下：
调整为：
（4） 提交页面数据
在页面原有<script></script>代码基础上增加一段代码如下：
（5） 显示查询结果
查询结果页面使用表格控件 DataGrid，该控件内置 ajax 调用，通过设置 url 即与逻辑流交互数据，并分页显示查询结果。调整后的代码如下：
<div id="datagrid1"dataField="expenses" class="nui-datagrid" style="width: 800px; height: 360px;" allowResize="true" url="com.primeton.train.expense.expense.expenseQuery.biz.ext" sizeList="[20,30,50,100]"pageSize="20" showPageIndex="true"
multiSelect="true">
<div property="columns">
<div type="checkcolumn"></div>
<div field="expid" headerAlign="center"allowSort="true"
visible="false">
报销单 ID
</div>
<div field="expcode" headerAlign="center" allowSort="true">
报销单编号
</div>
<div field="empid" headerAlign="center" allowSort="true">
报销人 ID
</div>
<div field="expname" headerAlign="center" allowSort="true">
报销人姓名
</div>
<div field="expdate" headerAlign="center" allowSort="true">
报销日期
</div>
<div field="expmoney" headerAlign="center" allowSort="true">
报销金额
</div>
<div field="reason" headerAlign="center" allowSort="true">
报销原因
</div>
<div field="isbudgetitem" headerAlign="center" allowSort="true" renderer="OnIsRenderer">
是否预算内项目
</div>
<div field="benefitorgid" headerAlign="center" allowSort="true">
受益部门
</div>
<div field="manager" headerAlign="center" allowSort="true">
部门经理
</div>
<div field="managerAdvice" headerAlign="center" allowSort="true">
部门经理意见
</div>
<div field="auditor" headerAlign="center" allowSort="true">
财务审核
</div>
<div field="auditorAdvice" headerAlign="center" allowSort="true">
财务审核意见
5. 逻辑流开发:expenseQuery.bizx
在“资源管理器”中，展开“EOSTrain com.primeton.train.expense 构件
com.primeton.train.expense”路径，在“com.primeton.train.expense”上点击右键，在弹出的菜单中选择“创建逻辑构件”名为“expense”。在逻辑构件 expense 上右键，创建逻辑流“expenseQuery”。
双击逻辑流“expenseQuery”操作界面的空白处，弹出逻辑流属性设置窗口，如图所
示：
图4-13 定义参数和返回值
返回值中，必须返回一个名为 total 的值，类型通过下拉菜单选择“Int”，作为统计出的记录条数使用，实现页面分页效果。
拖出 3 个图元：2 个“赋值”，第 3 个图元来自构件库 com.eos.fundation ->运算逻辑 ->
DatabaseExt : queryEntitiesByCriteriaEntityWithPage，如图所示：
图4-14 逻辑流图元排列
用连接线将所有图元连接在一起，双击图元下方的名称，根据功能修改每个名称，如图所示：
图4-15 逻辑流
双击“设置查询条件”图元，进行属性设置，如图所示：
图4-16 “设置查询条件”属性设置
本案例说明：其中第一个参数的右值对应的是 TrainExpenseinfo 数据实体的全名，可以在左侧资源管理器处找到 TrainExpenseinfo 数据实体，右键复制全名，如下图：
图4-17 “设置查询条件”属性设置双击“查询报销单”图元，进行属性设置，如图所示：
图4-18 “查询报销单”属性设置
双击“设置统计总记录数”，设置赋值属性，如图所示。左值即逻辑流的返回值 total，用来存放统计出的记录条数，作为整个逻辑流的返回值返回到页面中，右值代表查询结果的总记录条数。
6. 完善页面
图4-19 “设置统计总记录数”属性设置
双击打开“expenseList.jsp”，指定 DataGrid 的 url 为上一步开发的逻辑流全名加固定后缀。通过资源管理器，选中“expenseQuery.bizx”，右键下拉菜单选择“复制全名”，获得的逻辑流全称加上“.biz.ext”的后缀名得到 url 属性值，如下所示：
<div id="datagrid1" class="nui-datagrid" style="width:800px;height:280px;" allowResize="true"
url="com.primeton.train.expense.expense.expenseQuery.biz.ext" idField="expid"
dataField="expenses"
multiSelect="true">
7. 测试运行
1. 启动EOS Server，启动成功后，在资源管理器视图，展开“EOSTrain com.primeton.train.expense 展现页面资源”，选中下面的启动 EOS Server。启动成功后， 在资源管理器视图，展开“EOSTrain com.primeton.train.expense 展现页面资源”，选中下面的expenseList.jsp，右键，在弹出的菜单中选择“复制 URL”。
2. 打开浏览器，在地址栏中右键粘贴，显示“http://127.0.0.1:8080/default/expense/expenseList.jsp”，回车，显示程序入口，如图所示。
图4-20 初始页面
3. 输入查询条件，点击查询后，显示结果如图所示，则程序运行正确。
图4-21 查询页面
本案例说明：
1） dataField=”expenses” 与 逻 辑 流 中 定 义 的 返 回 值 expenses ， 以 及queryEntitiesByCriteriaEntityWithPage 的返回值expenses 一致才会有正确的结果展示在页面中；
2） queryEntitiesByCriteriaEntityWithPage 构件的功能及参数说明可以参考studio 帮助中的介绍，studio帮助帮助内容，将构件的名字放至搜索栏里，点击转至即可；
4.3 报销单新增案例开发
4.3.1 案例描述
案例的基本需求：基于报销单查询页面，点击【新增】，弹出窗口显示报销单信息录入页面，录入信息保存完毕回到父查询页面。
4.3.2 案例开发
1. 页面开发
打开“expenseList.jsp”页面，在<script></script>标签内增加一段 JS，对应【新增】按钮的 onclick="add()"事件函数。增加的部分可从 OOrgList.jsp 中找到。
打开 OOrgList.jsp 页面，拷贝下段代码并修改成如下黄色标出部分：
url 改为 url: "<%=request.getContextPath() %>/expense/expenseForm.jsp"
2. 子页面开发
在 com.primeton.train.expense 构件包下的“展现页面资源”上点右键，选择“创建
Jsp 页面”，在弹出的创建 Jsp 页面对话框中，输入相关信息，点击【完成】，如图所示。
图4-22 创建Jsp 页面
利用 nui-sample 里弹出页面代码构造页面，打开 OOrgForm.jsp 页面，
图4-23 打开OOrgForm.jsp 页面
将 OOrgForm.jsp 的<form></form>标签内的所有代码复制黏贴至expenseForm.jsp 页面代码的<body></body>标签内，根据员工信息录入字段的需求调整代码如下：
员工信息录入页面通过 NUI 控件的 name 属性指定提交数据的变量名，通过“trainexpenseinfo.expname”
的数据格式，将字段值组装给 trainexpenseinfo 变量，方便后续的逻辑流操作。
拷贝 JS 部分即<script></script>中间部分，用来提交表单数据，发送 Ajax 请求，与后台发生交互，代码调整如下：
3. 逻辑流开发
在逻辑构件“expense”上点右键，选择“创建逻辑流”，在弹出的创建逻辑流对话框中，输入相关信息，点击【完成】，如图所示。
图4-24 创建逻辑流
右侧展开的逻辑流编辑面板里默认产生了“开始”和“结束”两个图元，双击空白处定义逻辑流的参数和返回值，如图所示。参数来自于 expenseForm.jsp 页面提交组装出的 json 对象 trainexpenseinfo，类型通过下拉菜单选择“数据实体—浏览”，在弹出的的对话框里选择“TrainExpenseinfo”。
图4-25 定义参数
展开右边“构件库”视图中的“com.eos.foundation运算逻辑DatabaseExt”，选中 “getPrimaryKey（DataObject）”运算逻辑，它是获取持久化实体主键序列号值的构件，将该运算逻辑拖拽到逻辑流“expenseAdd”编辑器中，如图所示。
图4-26 逻辑流图元排列
从左侧拖一个赋值图元放至 getPrimaryKey 后面，如图：
图4-27 逻辑流图元排列
再继续展开右边“构件库”视图中的“com.eos.foundation运算逻辑DatabaseUtil”，选中“insertEntity（String,DataObject）”运算逻辑，将该运算逻辑拖拽到逻辑流“expenseAdd”编辑器中，排列图元如图所示。
图4-28 逻辑流图元排列
选择左侧选用板的“连接线”，依次连接各图元，修改图元的显示名称。最终的逻辑流如图所示。
图4-29 逻辑流
双击“取主键”运算逻辑图元，在弹出的“运算逻辑属性设置”对话框中，设置该方法的参数。这个方法有一个参数： 数据实体数组是图中定义的传入逻辑流中的参数trainexpenseinfo。具体设置如图所示。
图4-30 “取主键”属性设置
双击“通过 muo 获取报销人 id 及报销人姓名”运算逻辑图元，设置值如下图：
图4-31 “取主键”属性设置
双击“新增报销单”运算逻辑图元，在弹出的“运算逻辑属性设置”对话框中，设置该方法的参数。这个方法有二个参数：数据源默认为 default，数据实体数组是图中定义的传入逻辑流中的参数trainexpenseinfo。具体设置如图所示，点击【确定】后，保存逻辑流。
图4-32 “新增员工”属性设置
4. 完善页面
打开“expenseForm.jsp”，修改 JS 部分的 addURL 参数值，通过资源管理器，选中 “expenseAdd.bizx”，右键下拉菜单选择“复制全名”，获得的逻辑流全称加上“.biz.ext”的后缀名得到 url 参数值，如下所示：
4.3.3 测试运行
1. 浏览器中访问地址“http://127.0.0.1:8080/default/expense/expenseList.jsp”，显示查询页面，点击工具栏的【增加】按钮，弹出窗口，如图所示。
图4-33 新增页面
输入报销单信息，点击【确定】，并重新加载查询结果，新增记录成功。
4.4 报销单删除案例开发
4.4.1 案例描述
案例的基本需求：基于查询页面，通过查询结果列表的复选框选择多条记录，点击工具栏里的【删除】按钮，批量删除多条记录，并返回查询页面。
4.4.2 案例开发
1. 页面开发
双击打开“expenseQuery.jsp”页面，在<script></script>标签内增加一段 JS，对应【删除】按钮的onclick="remove()"事件函数。增加的部分可从 OOrgList.jsp 中找到。
打开 OOrgList.jsp 页面，拷贝 function remove()中的代码并做如下修改：
2. 逻辑流开发
在逻辑构件“expense”上点右键，选择“创建逻辑流”，在弹出的创建逻辑流对话框中，输入相关信息，点击【完成】，如图所示。
图4-34 创建逻辑流
右侧展开的逻辑流编辑面板里默认产生了“开始”和“结束”两个图元，双击空白处定义逻辑流的参数和返回值，如图所示。参数来自于 ExpenseQuery.jsp 页面提交的复选框选中行组装出的 json 对象 expenses，类型通过下拉菜单选择“数据实体—浏览”，在弹出的的对话框里选择“TrainExpenseinfo”，并勾选“数组”选项。
图4-35 定义参数
展开右边“构件库”视图中的“com.eos.foundation运算逻辑DatabaseUtil”，选中 “deleteEntityBatch（String,DataObject[]）”运算逻辑，它是用于根据主键批量删除多条记录的构件，将该运算逻辑拖拽到逻辑流“expenseDelete”编辑器中，排列图元如图所示。
图4-36 逻辑流图元排列
选择左侧选用板的“连接线”，依次连接各图元，修改图元的显示名称。最终的逻辑流如下图所示。
图4-37 逻辑流
双击“删除报销单”运算逻辑图元，在弹出的“运算逻辑属性设置”对话框中，设置该方法的参数。这个方法有二个参数：数据源默认为 default，数据实体数组是图中定义的传入逻辑流中的参数expenses。具体设置如下图所示，点击【确定】后，保存逻辑流。
图4-38 “删除报销单”属性设置
3. 完善页面
打开“expenseQuery.jsp”，修改 remove 函数里 nui.ajax 方法的 url 参数值，通过资源管理器，选中“expenseDelete.bizx”，右键下拉菜单选择“复制全名”，获得的逻辑流全称加上 “.biz.ext”的后缀名得到 url 参数值，如下所示：
4.4.3 测试运行
1. 浏览器中访问地址“http://127.0.0.1:8080/default/expense/expenseList.jsp”，显示多条查询结果记录，通过复选框勾选多条记录，如图所示。
图4-39 初始页面
点击【删除】，弹出提示框“确定删除选中记录？”，点击“确定”，删除多条记录后返回查询页面，并重新加载查询结果，如图所示。
图4-40 删除页面
本案例说明：对于删除案例，除了使用批量删除构件外还可以使用 deleteEntity 构件配合循环的形式来实现。
4.5 报销单编辑案例开发
4.5.1 案例描述
案例的基本需求：基于查询页面，通过查询结果列表的复选框选择一条记录，点击工具栏里的【编辑】按钮，修改一条记录，并返回查询页面。
4.5.2 案例开发
1. 页面开发
双击打开“expenseQuery.jsp”页面，在<script></script>标签内增加一段 JS，对应【编辑】按钮的onclick="edit()"事件函数。增加的部分可从 OOrgList.jsp 中找到。
打开 OOrgList.jsp 页面，拷贝 function edit()中的代码并做如下修改： 修改为：
在 expenseForm.jsp 页面里面 SaveData()的 function 后面加如下方法：
2. 逻辑流开发
在逻辑构件“expense”上点右键，选择“创建逻辑流”，在弹出的创建逻辑流对话框中，输入相关信息，点击【完成】，如图所示。
图4-41 报销单修改
右侧展开的逻辑流编辑面板里默认产生了“开始”和“结束”两个图元，双击空白处定义逻辑流的参数，如图所示。参数来自于 expenseForm.jsp 页面提交的复选框选中行组装出的 json 对象 trainexpenseinfo，类型通过下拉菜单选择“数据实体—浏览”，在弹出的的对话框里选择“TrainExpenseinfo”。
图4-42 逻辑流设置
展开右边“构件库”视图中的“com.eos.foundation运算逻辑DatabaseUtil”，选中“updateEntity（String,DataObject）”运算逻辑，它是用于根据主键扩展查询一条记录的构件，将该运算逻辑拖拽到逻辑流“expenseUpdate”编编辑器中，排列图元如图所示。
图4-43 逻辑流设置
选择左侧选用板的“连接线”，依次连接各图元，修改图元的显示名称。最终的逻辑流如下图所示。
图4-44 逻辑流截图
双击“保存修改报销单信息”运算逻辑图元，在弹出的“运算逻辑属性设置”对话框中， 设置该方法的参数。这个方法有二个参数：数据源默认为 default，数据实体数组是图中定义的传入逻辑流中的参数 trainexpenseinfo。具体设置如下图所示，点击【确定】后，保存逻辑流。
图4-45 修改报销单图元
3. 完善页面
打开“expenseForm.jsp”，修改 JS 部分的 updateURL 参数值，通过资源管理器，选中 “expenseUpdate.bizx”，右键下拉菜单选择“复制全名”，获得的逻辑流全称加上“.biz.ext”的后缀名得到url 参数值，如下所示：
4.5.3 测试运行
浏览器中访问地址“http://127.0.0.1:8080/default/expense/expenseList.jsp”，显示多条查询结果记录，通过复选框勾选多条记录，如图所示。
图4-46 编辑页面
点击【编辑】，弹出修改页面，可进行修改，修改后点击【确定】，保存修改内容并重新加载查询结果。
第5章 LOOKUP 功能开发
5.1 关键知识点
本章通过 Lookup 开发案例，理解实体之间 N：1 关联关系，理解 Lookup 的使用。
5.2 案例描述
之前的示例中，增加新的报销单信息时有一个字段为受益部门 ID，需要手工输入数字， 非常不方便。而在实际应用中，使用者会浏览到所有的部门信息，然后选择一个部门，而选择的数据做为新增报销单信息的一部分，随报销单信息存到数据库中。
在本小节中将利用EOS 提供的 Lookup 控件功能，来实现报销单信息增加时可视地增加受益部门信息的功能。
5.3 案例开发
本案例不需要新建项目，直接在 EOSTrain 项目 com.primeton.train.expense 构件包的下开发。开发的详细步骤如下：
1. 新建数据实体 OrgOrganization
(1) 本例子中受益部门借助 coframe 中组织机构的表，所以不需要单独创建机构表；
(2) 打开 com.primeton.train.expense 构件包->数据–>数据模型： expensedataset.datasetx 文件，在文件上右键，点击“导入数据实体”，找到 ORG_ORGANIZATION 表，完成导入。具体过程如下：
图5-1 导入数据实体 1
图5-2 导入数据实体 2
图5-3 导入数据实体 3
图5-4 导入数据实体 4
在 expensedataset.datasetx 文件中会出现 OrgOrganization 实体，如图：
图5-5 OrgOrganization 数据实体
(3) 为两个数据实体建立单向 n:1 关系，在左侧调色板中找到“单向 n:1 关系”线，选中， 从“TrainExpenseinfo”实体向“OrgOrganization”实体拖动，会在两个实体间出现绿色单向连线。并且TrainExpenseinfo 实体中会增加一个新的属性：orgOrganization。
图5-6 单向 n:1 关系
双击连线，通过下拉列表选中N 端的 benefitorgid。如图；
图5-7 关联属性
2. 借助 NUI Demo 了解 Lookup 用法
用浏览器打开 NUI Demo 首页：http://127.0.0.1:8080/default/demo/index.jsp，在左侧菜单里找到：控件列表–>表单控件 -> Lookup，右侧展开“code”,可以看到 Lookup 由3 部分组成：“nui-lookup”类型的input 控件、“nui-panel”类型的div 控件及“nui-datagrid”类型的 div 控件。
(1) “nui-lookup”类型的 input 控件，代码如下：
其中：name 和value 组成提交时该控件的“名”与“值”；textField 与 valueField 为 下拉列表选中后传回到主页面的“显示值”与“真实值”；popup 的值为“#”加上“nui-panel”类型的 div 控件的 id 值;grid 的值为“#”加上“nui-datagrid”类型的 div 控件的 id。
(2) “nui-panel”类型的 div 控件
以上代码实现了用“姓名”进行搜索得到结果功能的页面部分。
(3) “nui-datagrid”类型的 div 控件，这部分代码含在“nui-panel”类型的 div 控件内：
<div id="gridPanel" class="nui-panel" title="header" iconCls="icon-add" style="width: 450px; height: 250px;"
showToolbar="true" showCloseButton="true" showHeader="false" bodyStyle="padding:0" borderStyle="border:0">
<div property="toolbar" style="padding: 5px; padding-left: 8px; text-align:
center;">
<div style="float: left; padding-bottom: 2px;">
<span>姓名：</span><input id="keyText" class="nui-textbox"
style="width: 160px;" onenter="onSearchClick" /><a
class="nui-button" onclick="onSearchClick">查询</a><a class="nui-button" onclick="onClearClick">清除</a>
</div>
<div style="float: right; padding-bottom: 2px;">
<a class="nui-button" onclick="onCloseClick">关闭</a>
</div>
<div style="clear: both;"></div>
</div>
<div id="datagrid1" class="nui-datagrid" style="width: 100%; height:
100%;" borderStyle="border:0"
showPageSize="false" showPageIndex="false"
url="org.gocom.components.nui.demo.newdataset.impl.TEmployee.queryEmployee.bi z.ext">
<div property="columns">
<div type="checkcolumn"></div>
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
<div field="name" width="120" headerAlign="center"
allowSort="true">姓名</div>
<div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
</div>
</div>
</div>
这部分代码实现了结果展示的页面。
3. 页面修改
(1) 打开 com.primeton.train.expense 构件包->展现–>页面资源：expenseForm.jsp 文件， 此页面实现报销单信息增加和修改功能。找到页面中显示 benefitorgid 的输入框：
去掉这个 input ，将 demo 页面中的第一部分“nui-lookup”类型的 input 控件代码拷
贝到这个位置。并进行对应修改：
class="nui-lookup" style="width: 200px;"
textField=" orgname" valueField=" orgid " popupWidth="auto"
popup="#gridPanel" grid="#datagrid1" multiSelect="true" />
将 demo 页面中的“nui-panel”类型的 div 控件代码拷贝到<script>标签的上面。并进行对应修改：
<div id="gridPanel" class="nui-panel" title="header" iconCls="icon-add" style="width:450px;height:250px;"
showToolbar="true" showCloseButton="true" showHeader="false" bodyStyle="padding:0"borderStyle="border:0">
<div property="toolbar" style="padding:5px;padding-left:8px;text-align:center;">
<div style="float:left;padding-bottom:2px;">
<span>部门名称：</span>
<input id="keyText" class="nui-textbox" style="width:160px;" onenter="onSearchClick"/>
<a class="nui-button" onclick="onSearchClick">查询</a>
<a class="nui-button" onclick="onClearClick">清除</a>
</div>
<div style="float:right;padding-bottom:2px;">
<a class="nui-button" onclick="onCloseClick">关闭</a>
</div>
<div style="clear:both;"></div>
</div>
<div id="datagrid1" class="nui-datagrid" style="width:100%;height:100%;" borderStyle="border:0" showPageSize="false"
showPageIndex="false" dataField="orgs" url=" com.primeton.train.expense.expense.queryOrg.biz.ext">
<div property="columns">
<div type="checkcolumn"></div>
<div field="orgcode" width="120" headerAlign="center" allowSort="true">机构编码</div>
<div field="orgname" width="120" headerAlign="center" allowSort="true">机构名称</div>
<div field="parentorgid" width="120" headerAlign="center" allowSort="true">
上级机构编号</div>
</div>
</div>
</div>
(2) 将 demo 中<script>标签内的代码拷贝到页面中的<script>中:
4. 逻辑流开发
(1) 在 com.primeton.train.expense 构件包->构件-> expense.componentType 右键，新建逻辑流 queryOrg.bizx。并拖入 2 个赋值图元，1 个“queryEntitiesByCriteriaEntityWithPage”图元。
图5-8 关联属性
(2) 双击逻辑流空白处，设置逻辑流相关参数：
图5-9 逻辑流属性
(3) 双击“赋值”，设置如下：
图5-10 赋值属性
(4) 双击“queryEntitiesByCriteriaEntityWithPage”，设置如下：
图5-11 queryEntitiesByCriteriaEntityWithPage 属性
(5) 双击“赋值 1”，设置如下：
图5-12 赋值 1 属性
(6) 完善页面
修改 JSP 文件中的 setFormData() 方法：
(7) 完善页面expenseList.jsp
找到显示机构 ID 的部分：
将上面代码改为：
注释 add() 和 edit () 中的长宽设置：
开发完成。
5.4 测试运行
1. 访问 http://127.0.0.1:8080/default/expense/expenseList.jsp，点击“增加”按钮，在打开的增加页面点击机构对应的输入框，出现 lookup 页面。
图5-13 测试页面 1
2. 访问 http://127.0.0.1:8080/default/expense/expenseList.jsp，选中一条记录，点击“修改”按钮，在打开的修改页面 lookup 输入框内显示出当前的机构信息，点击机构对应的输入框后方按键，出现 lookup 页面，进行修改机构信息。
图5-14 测试页面 2
第6章 单表维护向导开发
6.1 关键知识点
本章通过经典的单表维护向导开发案例，体验快捷开发，帮助您更深刻地理解最核心的数据流转原理和处理过程。
6.2 案例描述
案例的基本需求：在页面上以报销人姓名、是否预算内项目作为查询条件，其中报销人姓名为模糊查询，是否预算内项目通过下拉的业务字典列表选取查询条件，点击【查询】后进行查询，查询结果以分页形式显示；在查询页面有增加，修改，删除三个按钮，可以实现报销单信息的增删改操作，并且在报销单信息新增和修改页面要对报销单编号等字段进行输入合法性校验。
在本小节中将利用EOS 提供的功能向导，来快速的实现报销单信息增删改查的功能。
6.3 案例开发
本案例不需要新建项目，直接在 EOSTrain 项目下开发。开发的详细步骤如下：
1. 构件包设计
(1) 打开 EOS Studio，在原有的项目“EOSTrain”上点击右键，选择上下文菜单“创建
EOS 构件包”。
(2) 在弹出的对话框中，输入如图所示的信息，点击【完成】，创建构件包，用来存放本案例开发的例子。
图6-1 创建构件包
(3) 在 com.primeton.train.expenseauto 构件包中可以复用使用 com.primeton.empquery 构件包下面的数据实体 TrainExpenseinfo，所以要建立这两个构件包之间的依赖关系。右键选中 com.primeton.train.expense 构件包，选择菜单中的“属性”，在弹出的构件包属性对话框中，左边点击“构件包”，右边点击“依赖”，会列出 EOSTrain 项目下的所有构件包，可以选择与哪些构件包建立依赖关系。如图所示。
图6-2 构件包依赖
选中 com.primeton.train.expense，点击【确定】，即完成了构件包依赖关系的设置。
2. 使用单表维护功能向导
(1) 在“资源管理器”中的“EOSTraincom.primeton.train.expenseauto”构件上点击右键，选择上下文菜单“功能向导单表维护功能向导”，如图所示。
图6-3 创建单表维护功能向导
(2) 在弹出的“选择数据实体”对话框中选择数据实体 TrainExpenseinfo，如图所示。
图6-4 选择数据实体
(3) 点击【下一步】，设置查询条件和排序字段，如图所示。
图6-5 设置查询条件和排序字段
其中， 查询条件中 expname 的匹配原则为： like， isbudgetitem 可采用业务字典
TRAIN_YESNO 来对应。具体方法如图：
图6-6 expname 设置
图6-7 isbudgetitem 设置
(4) 点击【下一步】，进入查询结果集的设置，如图所示。
图6-8 设置查询结果集
(5) 点击【下一步】进入录入报销单表单的配置，如图所示。
图6-9 TrainExpenseinfo 表单设置
设置 expid 为隐藏项，双击 expid 行，打开属性设置窗口，设置校验方法，如图所示。
图6-10 隐藏项设置
isbudgetitem 项为业务字典下拉菜单，设置如下图：
图6-11 业务字典设置
(6) 点击【下一步】进入选择目录，给逻辑流、页面流选择一个文件生成目录，并显示了单表维护向导自动生成的文件一览，如图所示。
图6-12 选择目录
(7) 最后点击“完成”，生成了所有的程序代码，自动产生的代码文件说明如表所示。表6-1 单表维护功能向导代码文件
文件对应的资源树如图所示。
图6-13 文件资源树
6.4 测试运行
完成单表维护功能向导的设置以后，就可以运行刚才生成的代码了。
在 EOS Studio 的工具栏上，点击“ ”，启动 EOS Server。启动成功后，在资源管理器视图，展开“EOSTrain com.primeton.train.expenseauto 展现页面资源”，选中下面的
TrainExpenseinfoList.jsp，右键单击，在弹出的菜单中选择“复制 URL”。
打开 IE 浏览器，在整个地址栏中右键粘贴，显示“http://127.0.0.1:8080/default/expenseauto/TrainExpenseinfoList.jsp”，回车，如果显示了如图所示的界面，则向导生成成功。
图6-14 初始查询页面
本案例说明：
在使用维护向导时若数据实体的每个字段的显示名称都为英文，可以通过设置数据实体的显示属性用中文展示。设置方式如下：
双击TrainExpenseinfo 数据实体，将数据实体的属性列表中的显示名称修改成汉字，如下截
图：
图6-15 初始查询页面
第7章 主从表维护向导开发
7.1 关键知识点
本章通过经典的主从表维护向导开发案例，体验快捷开发，帮助您更深刻地理解最核心的数据流转原理和处理过程。
7.2 案例描述
以员工信息案例为基础，增加员工相关联系人员的信息。当增加一个员工信息时， 可以同时增加多个与这个员工相关的联系人（比例：配偶、父母、子女）的信息。而修改员工信息时，相关的联系人信息也可以进行更改。删除员工信息时，员工相关的联系人也要全部删除。
这两个表可以看作主表与从表，而这种级联式操作，我们可以通过“主从表维护向导”来生成。
7.3 案例开发
本案例不需要新建项目， 直接在 EOSTrain 项目下开发。建新的构件包：
com.primeton.relationauto。
1. 准备数据实体
(1) 本案例要用到两个实体：TrainEmp / TrainContacts。第一个实体为员工表，第二个实体为联系人表。
员工TRAIN_EMP 的表结构
字段名称 数据类型 数据长度 是否主键 备注
EMPID NUMBER 10 YES 员工 ID
ORGID NUMBER 10 NO 机构 ID
EMPCODE VARCHAR2 32 NO 员工编号
EMPNAME VARCHAR2 64 NO 员工姓名
SEX VARCHAR2 1 NO 性别
BIRTHDAY DATE 10 NO 出生日期
POSTCODE CHAR 6 NO 邮编
ADDRESS VARCHAR2 128 NO 地址
PHONE VARCHAR2 32 NO 电话
WAGE NUMBER 8 NO 工资
首先在数据库中建表，SQL 语句如下：
DROP TABLE TRAIN_EMP CASCADE CONSTRAINTS;
CREATE TABLE TRAIN_EMP (
EMPID NUMERIC(10,0) NOT NULL, ORGID NUMERIC(10,0) NOT NULL, EMPCODE VARCHAR2(32) NOT NULL, EMPNAME VARCHAR2(64) NOT NULL, SEX VARCHAR2(1),
BIRTHDAY DATE, POSTCODE CHAR(6), ADDRESS VARCHAR2(128), PHONE VARCHAR2(32),
WAGE NUMERIC(8,0) DEFAULT 2000, PRIMARY KEY (EMPID)
);
COMMENT ON COLUMN TRAIN_EMP.EMPID IS ' 用 户 ID'; COMMENT ON COLUMN TRAIN_EMP.ORGID IS ' 机 构 ID'; COMMENT ON COLUMN TRAIN_EMP.EMPCODE IS '用户编号'; COMMENT ON COLUMN TRAIN_EMP.EMPNAME IS '用户姓名'; COMMENT ON COLUMN TRAIN_EMP.SEX IS ' 性 别 '; COMMENT ON COLUMN TRAIN_EMP.BIRTHDAY IS '出生日期'; COMMENT ON COLUMN TRAIN_EMP.POSTCODE IS ' 邮 编 '; COMMENT ON COLUMN TRAIN_EMP.ADDRESS IS ' 地 址 '; COMMENT ON COLUMN TRAIN_EMP.PHONE IS ' 电 话 '; COMMENT ON COLUMN TRAIN_EMP.WAGE IS '工资';
INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX, BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 1, 1, '001', '张三丰', 'M', TO_DATE('1957-01-25',
'yyyy-mm-dd'), '710070', '北京海淀区中关村大街 01 号', '80080001',2000);
INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX, BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 2, 1, '002', '张无忌', 'M', TO_DATE('1972-11-30',
'yyyy-mm-dd'),'710071', '上海张江高科技园区碧波路 456 号 4 层', '80080002',2000); INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX,
BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 3, 1, '003', '张小宝', 'M', TO_DATE('1974-05-19',
'yyyy-mm-dd'), '710072', '北京市海淀区彩和坊路 8 号天创科技大厦东门 1301 室',
'80080003',2000);
INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX, BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 4, 1, '004', '赵大海', 'M', TO_DATE('1977-07-08',
'yyyy-mm-dd'), '710073', '广州市天河区体育东路', '80080004',2000);
INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX, BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 5, 1, '005', '赵小新', 'M', TO_DATE('1956-04-19',
'yyyy-mm-dd'), '710074', '北京海淀区中关村 22 号', '80080005',2000);
INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX, BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 6, 1, '006', '李中正', 'F', TO_DATE('1956-01-25',
'yyyy-mm-dd'), '610000', '成都高新区创新中心起步区府河基地高朋大道 12 号B 座
209-210 室', '88080006',2000);
INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX, BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 7, 1, '007', '李亚南', 'M', TO_DATE('1966-12-24',
'yyyy-mm-dd'), '410000', '长沙市国家高新技术开发区火炬村 M2 组团金荣科技园 7
楼', '80080007',2000);
INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX, BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 8, 1, '008', '程丰富', 'M', TO_DATE('1976-11-19',
'yyyy-mm-dd'), '320000', '南京市中山南路 387 号侨宁公寓北楼 601 室',
'80080008',2000);
INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX, BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 9, 1, '009', '陈三笑', 'M', TO_DATE('1954-11-20',
'yyyy-mm-dd'), '100000', '北京海淀区中关村 26 号', '80080009',2000);
INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX, BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 10, 1, '010', '吴亚太', 'M', TO_DATE('1968-11-19',
'yyyy-mm-dd'), '100000', '北京海淀区中关村东路 421 号', '80080010',2000); INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX,
BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 11, 1, '011', '吴小三', 'F', TO_DATE('1970-04-08',
'yyyy-mm-dd'), '100000', '上海张江高科技园区碧波路 456 号 4 层', '80080011',2000); INSERT INTO TRAIN_EMP (EMPID, ORGID, EMPCODE, EMPNAME, SEX,
BIRTHDAY, POSTCODE, ADDRESS, PHONE, WAGE)
VALUES( 12, 1, '012', '雷小洛', 'M', TO_DATE('1942-09-19',
'yyyy-mm-dd'), '100000', '北京海淀区中关村东路 22 号', '80080012',2000);
DELETE FROM EOS_UNIQUE_TABLE WHERE NAME ='TrainEmp.empid'; INSERT INTO EOS_UNIQUE_TABLE(NAME, CODE)
VALUES('TrainEmp.empid', 12);
员工TRAIN_CONTACTS 的表结构
字段名称 数据类型 数据长度 是否主键 备注
CONTACTID NUMBER 18 YES 联系人 ID
EMPID NUMBER 18 NO 员工 ID
CONTACTNAME VARCHAR2 20 NO 联系人姓名
RELATION VARCHAR2 20 NO 关系
PHONE VARCHAR2 20 NO 电话
POSTCODE CHAR 6 NO 邮政编码
ADDRESS VARCHAR2 128 NO 联系地址
EMAIL VARCHAR2 128 NO 电子信箱
首先在数据库中建表，SQL 语句如下：
1. 在构件包 com.primeton.relationauto ->数据 ->数据模型中，新建数据集 emp.datasetx。分别导入数据实体：TrainEmp 和TrainContacts。如图所示：
图7-1 导入数据实体
2. 在左侧调色板上找到“单向 1:n 关联线”，选中，然后从 TrainEmp 向TrainContacts 连线。在 TrainEmp 实体的属性中，会增加一个新属性“trainContactss”。如图所示：
图7-2 单向 1:n 关联
2. 主从表维护功能向导
(1) 在构件包 com.primeton.train.relationauto 右键–>功能向导 -> NUI 主从表功能维护向导：
图7-3 主从表维护功能向导
(2) 按照向导提示，完成向导配置。选择实体，此处选择主表对应的实体TrainEmp，而从表TrainContacts 通过关联属性 trainContactss 自动显示在下方，为选中状态，如图：
图7-4 选择数据实体
(3) 配置主表的搜索条件和排序条件，其中empname 为模糊配置，sex 利用业务字典：
图7-5 主表查询条件
(4) 主表查询结果中没有联系人属性，也不要在此处配置。orgid 属性直接显示为数字，因为此案例不涉及前面章节的组织机构及 Lookup 功能。
图7-6 主表查询结果
(5) 主表录入页中，empid 的控件类型设置为 hidden；sex 的控件类型选为 nui-dictcombobox，即业务字典下拉列表。
图7-7 主表录入页
(6) 从表录入页中，contactid 和 empid 的标签名称改为 nui-hidden ，这两个 id 会自动对应生成。
图7-8 从表录入页
(7) 生成主键配置
图7-9 生成组件配置
(8) 在资源管理器中展开 com.primeton.train.relationauto 构件包，可以看到页面资源和构件下面出现了生成的文件。开发完成。
图7-10 生成文件
注意：
设置向导中，主表的设置部分与第 6 章几乎一致，可参照第 6 章。从表的设置部分只在“录入”部分有体现。
7.4 测试运行
在 TrainEmpList.jsp 右键，复制 URL，然后在浏览器中打开地址： http://127.0.0.1:8080/default/relationauto/TrainEmpList.jsp。
点击增加按键，打开的新建页面中，不仅有待增加的员工信息，同时还可以增加多个相关联系人信息：
图7-11 测试页面 1
输入相关信息，保存。主页面中会多出一条数据，通过数据库，可以看到 concats 表中同时增加了 3 条记录。
图7-12 测试页面 2
在主页面中选中刚刚增加的数据，然后点击“修改”按钮，打开修改页面，可以看到不仅可以修改主表增加的信息，还可以同时修改联系人的相关信息。进行修改后，保存，可看到主表的数据已发生变化，通过数据库，可以看到 TRAIN_CONTACTS 表中的记录也已修改成功。
图7-13 测试页面 3
在主页面中选择刚刚修改的数据，点击“删除”按钮，该数据被成功删除，查看数据库中的 TRAIN_CONTACTS 表，可以看到相关联的联系人表也被一同删除。
第8章 组织机构建模
8.1 关键知识点
通过本章了解在 coframe 中如何建立组织模型。
8.2 组织机构建模
报销流程在运行过程中，要由员工完成填写报销单，由部门主管完成审批，由财务完成审阅。那么这些人员可以是具体的某个人，也可以是某个部门中的一个人，也可以是某个岗位或者拥有某个角色的一个人。那么如何让流程能够识别人员或者人员所在的组织机构呢？ EOS Platform7.6 实现了一套组织机构接口，用户可以通过 Coframe 创建组织机构，通过 Studio 刷新出自定义的组织机构模型，方便设置流程中各个活动的参与者。本案例创建一套
组织机构模型如图所示。
图8-1 BPS 组织机构模型
1. 新建组织机构
通过“开始程序 EOS Platform 7.6Platform Studio”启动 studio 集成开发环境，默认进入到EOS 开发透视图。
如图所示，启动 Server。
图8-2 启动 Server
Server 启动成功后，通过“开始程序EOS Platform 7.6COFRAME”打开应用基础框架登陆界面，以“sysadmin/000000”身份登陆，左侧菜单树打开“组织机构组织机构管理”，右侧展现机构员工树，如图所示。
图8-3 组织机构管理
自定义一套组织机构模型，包括组织机构和人员，依次创建机构和人员信息，以树形结构展现。
新建机构
单击机构员工树右键下拉菜单选择“增加顶级机构”，如图所示。
图8-4 新建机构向导
弹出“增加顶级机构”对话框，输入机构名称、机构代码，机构类型通过下拉菜单选择“总公司”，点击“保存”，如图所示。
图8-5 增加顶级机构
下级机构如上海分公司、研发部等，以“增加下级机构”方式依次添加完成。
新建人员
通过机构员工树选中所属机构，右键下拉菜单选择“增加机构员工”，如图所示。
图8-6 新建机构员工向导
弹出“增加机构人员”对话框，输入员工姓名、员工代码等基本信息，注意同时录入用户信息，输入用户登录名及用户密码，本案例中用户密码统一使用“000000”，点击“保存”，如图所示。
图8-7 新增机构人员
依次录入机构和员工信息，新增完毕，展开机构员工树，如图所示。
图8-8 组织机构模
新建角色
通过 coframe 中的权限管理角色管理来新增角色，如图所示；
图8-9 新增角色点击“增加”按钮，依次增加上图中的角色；
2. 权限分配
新创建的用户及角色默认不具备查看应用功能、执行流程等权限，需要通过 COFRAME 的授权功能，给用户分配权限，如查看流程、执行待办任务等权限。本案例给新建的机构员工分配不同角色的权限，通过应用系统菜单树点击“权限管理—>授权管理”，打开角色授权界面，如图所示。
图8-10 授权管理
默认角色“系统管理员”具备查看并执行所有功能权限，点击“普通员工”角色授权配置的“配置”按钮，右侧展开权限配置界面，切换至“功能”tab 页，下拉列表显示所有功能，全部勾选“授权”一栏，如下图所示：
图8-11 功能授权其余角色按照前面的方法进行功能进行授权。
接下来切换至“组织机构管理”具体员工处，对员工授予角色，如图所示。
图8-12 员工授权勾选上“普通员工”后点击“授权”，如图所示。
图8-13 员工授权
其余员工可以按照前面的方式进行角色授权（可以授予不同的角色便于在后续流程开发时不同的环节设置的参与者不同）。
在 Studio 右侧的“组织模型”视图中，点击“ ”按钮刷新组织模型，如图所示。
图8-14 刷新组织模型
刷新后，将自定义的组织机构数据更新到视图中，如图所示。
图8-15 组织模型
第9章 简单流程快速开发
9.1 需求描述
公司希望借助 BPS 将平时的报销流程信息化，客户对普元的流程平台还不太了解，希望我们做一个简单的模型看看效果怎样。
报销流程需求：员工发起报销后，交给部门经理审批，如果经理审批不通过，则结束流程；如果经理审批通过，就交给财务审阅，财务审阅后报销信息就会被入账，入账后流程结束。
9.2 流程建模模拟
9.2.1 项目准备
1. 使用之前已创建的“EOSTrain”项目。
2. 点击工具栏上的“ ”启动EOSTrain 项目的应用服务器。
3. 打开 EOS Studio 最右边的“组织模型”视图，点击刷新按钮“ ”，空白处将显示通过 Coframe 创建出来的一套组织机构模型，方便后面的设置参与者操作。如下图所示：
图9-1 刷新组织机构模型
9.2.2 创建流程应用构件包
在 EOSTrain 项目下创建 com.primeton.train.sample 构件包，如下图所示：
图9-2 新建构件包
9.2.3 创建流程定义
在新创建的构建包-流程目录下创建BPS 流程，如下图所示：
图9-3 创建流程定义输入流程定义名称，如下图所示：
图9-4 输入流程定义名称
注意：
流程的文件名称：sample_自己名字全拼，为什么？现在大家使用的是同一数据库的同一用户，流程定义完后要提交到流程定义库中，所以要求大家的流程文件名称相异。
9.2.4 定义流程图
根据用户需求，在流程设计面板中把用户需求转化在流程设计，如下图所示：
图9-5 定义流程图
9.2.5 流程属性定义
首先修改几个图元的显示名称，双击“人工活动”四个字，修改为“填写报销单”，依次修改后面几个图元的名字，最后如下图所示：
图9-6 修改流程图几个图元的显示名称
在流程定义空白区域，双击鼠标左键，定义流程属性，如下图所示：
图9-7 设置流程属性
9.2.6 活动属性定义
双击“填写报销单”定义活动属性，“参与者”设置如下图所示，选中的是流程启动者：
图9-8 设置报销单环节参与者“表单”tab 页设置如下图所示：
图9-9 设置报销单环节表单
其中预算内项目“类型”处选择“选项列表”弹出设置如下：
图9-10 设置报销单环节表单
小技巧：
使用BPS 内置表单功能时，表单属性可以从相关数据中获取，所以这里参数的“名称/Path”可以直接在键盘上按“Alt+/“后出现提示后选择。
双击“部门经理审批”定义活动属性，“参与者”选择“从参与者列表获得”，然后点击
右上角的“+”，然后会弹出选择参与者对话框，选中之前在 coframe 中加的“部门经理”角色，如下图所示：
图9-11 设置部门经理审批参与者
本案例说明：若找不到自己在 coframe 中加的“部门经理”角色，可能是没有在 studio 中刷新组织模型， 如何刷新组织模型呢？在 studio 右侧找到组织模型，有一个刷新按钮，点击按钮即可（在刷新组织模型的时候要确保 server 是启动起来的）；如下图所示：
“表单”设置如下图所示：
图9-12 设置部门经理审批环节表单
小技巧：
表单数据支持复制粘贴功能。“部门经理审批”的表单内容可以从“填写报销单” 活动的表单数据中复制过来后，再做修改。
双击“经理审批”至“财务审阅”之间的连线，设置如下图所示：
图9-13 设置连线
双击“财务审阅”定义活动属性，“参与者”设置与前面“部门经理审批”设置一样，从参与者列表中选择，然后选择“财务会计”角色，如下图所示：
图9-14 设置财务审阅环节参与者“表单”设置如下图所示：
图9-15 设置财务审阅环节表单
双击“财务入账”定义活动属性，“应用配置”tab 页，如下图所示：
图9-16 设置财务入账环节
双击连接“经理审批”和“结束”的连接线定义分支规则，如下图所示：
图9-17 流程图
图9-18 设置不同意连线活动定义完毕，保存流程定义，流程图如下图所示：
图9-19 流程图展示
9.2.7 业务实现
9.2.8 开发测试
9.2.9 流程发布
1 如果服务器未启动，点击工具栏上的“ ”按钮启动服务器。
2 发布流程定义，右键->流程定义库交互 ->提交流程，如下图所示：
9.3 运行管理监控
图9-20 发布流程
下面开始流程的运行，假设 tiger 来发起报销流程。
通过开始菜单，打开 coframe，以 tiger/000000 身份登录，如下图所示。
图9-21 打开 coframe
通过左侧菜单树，双击【工作流程启动流程】，打开流程定义列表界面，找到自己的流程名称，点击启动，如下图所示。
图9-22 启动流程
在流程实例名称和流程实例描述文本框中输入流程实例的相关信息，启动流程，如下图所示：
图9-23 输入流程实例名称及流程实例描述
这时，已经产生了一个流程实例，可以通过 BPS 管理监控工具监控流程实例的运行情况。
选择BPS Workspace 后，以 sysadmin/000000 身份登录BPS 流程管理监控台，如下图所示。
图9-24 打开 workspace
图9-25 登录 workspace
登录后，进入流程实例管理，找到自己刚才启动的的流程实例，如下图所示：
图9-26 找到自己的流程实例此处流程实例 ID 是 2，点击流程实例名称，如下图所示：
图9-27 显示流程实例图
此刻流程已运行到填写报销单活动，填写报销单活动的任务由谁来执行呢？点击填写报销单活动图元，如下图所示：
图9-28 查看第一个环节的参与者
填写报销单活动实例中产生了一个工作项，这个工作项的参与者是 tiger,也就是说 tiger 有一个填写报销单的任务，接下来由 tiger 执行填写报销单的任务，回到 coframe，即在浏览器中打开 http://localhost:8080/default 址，以 tiger 用户登录，登录后，通过左侧菜单树，双击【工作流程我的任务】，打开待处理的任务界面，在任务列表中找到一条待处理的任务，如下图所示：
图9-29 执行填写报销单工作项
点击执行，执行填写报销单的任务，输入如下数据，点击执行，如下图所示：
图9-30 填写表单数据
此时此刻，流程实例的运行到哪里了呢？请大家继续按照前面介绍的方式将整个流程实例运行完成，祝您成功！
第10章 报销流程第一次修改
10.1 关键知识点
本章通过对第 9 章中的流程进行修改，学习连线条件及参与者规则的设置。
10.2 案例描述
前面填写报销的流程，如果经理审批不通过，则不允许报销；如果部门经理审批通过，金额小于等于 1 万且是预算内项目，则进行财务审阅，然后入账；如果不满足这个条件，需要总
监或 VP 进行审批。这时，如果报销金额小于等于 5 万，是总监审批；如果报销金额大于 5 万，需要VP 审批。审批不通过，不允许报销；审批通过后，再到财务部门进行审阅，最后入账。
10.3 案例开发及运行
10.3.1 完成流程定义
1. 根据案例描述，完成流程定义的所有图元及连线，在构件包 com.primeton.train.sample 中新建流程文件 sample_XXX_url.workflowx（XXX 为个人名字全拼，当多人用一个数据库里不会发生冲突）。具体图元及连线如下：
图10-1 流程图示
上图中的流程中的“开始”、“填写报销单”、“部门经理审批”、“财务审阅”、“财务入账”及“结束”图可以从第 9 章案例中的流程里面进行拷贝，然后从 studio 编辑处左侧拖一个“路
由”活动及一个“人工活动”至流程定义中，然后参照如图的方式排列并修改图元名称。
2. 双击空白处，设置相关数据，设置的相关数据可参照如下截图：
图10-2 流程属性设置
3. 双击“填写报销单”，表单 tab 页按照如下截图方式设置：
图10-3 报销单属性设置
4. 双击“部门经理审批”，参与者及表单这只如下截图：
图10-4 部门经理审批参与者设置
图10-5 部门经理审批表单设置
5. 双击“部门经理审批”至“结束”图元的不通过连线，设置如下：
图10-6 不通过连线设置
6. 双击“路由活动”至“财务审阅”之间的连线，设置如下：
图10-7 连线设置
7. 双击“财务审阅”参与者、表单 tab 页设置如下：
图10-8 参与者设置
图10-9 表单设置
8. “财务入账”设置如下：
图10-10 财务入账设置
9. “总监或 VP 审批”，此处涉及如何使用参与者规则，从 studio 中左侧“资源管理器”处找到 EOSTrain 这个项目，展开项目，项目下有“业务资源”菜单，鼠标双击“业务资源”菜单，展示如图：
图10-11 业务资源
鼠标右键点击“领域业务目录”选中“业务目录”，如图：
图10-12 新建业务目录
修改“业务目录”名称及描述，如下图，修改后 Ctrl+s 进行保存；
图10-13 新建业务目录
“xx 公司”目录上鼠标右键选中业务目录，然后右侧编辑名称及描述，如下图：
图10-14 新建业务目录然后在“财务部”上右键选中“业务变量”，如下：
图10-15 创建业务变量修改名称和XPATH，然后保存，如下：
图10-16 业务变量设置根据前面步骤再加一个业务变量，为是否预算内项目：
图10-17 业务变量设置
接下来就可以增加参与者规则了，鼠标右键点击“财务部”选中参与者规则，然后点“编辑”：
图10-18 设置参与者规则
按照如下截图设置，在填写如果中的条件时要双击选中左侧的报销金额，组织机构选择之前要确保已经在studio 中的组织模型处点过刷新按钮，设置好总监审批后，点击上面的自定义条件按钮，设置VP 审批，设置好后点击确定，然后保存（Ctrl+s）；
图10-19 设置参与者
如果“财务部”目录下没有前面画好的报销流程，可以将流程从默认业务目录下移动过来， 因为只有这样，在人工活动选择参与者的时候才能选到我们刚刚定义好的参与者规则；
图10-20 将默认业务目录下的流程移动到财务部鼠标选中报销流程，然后将流程拖至财务部；
图10-21 流程移动后
10. 双击“总监或 VP 审批”人工活动，切换至参与者 tab 页，选择参与者规则，点击“浏览”，选中前面加的参与者规则即可；
图10-22 参与者设置
表单 tab 页设置如下：
图10-23 表单设置
11. 双击“总监或VP 审批”至“结束”图元的连线，设置如下：
图10-24 连线设置
10.3.2 流程发布
1.如果服务器未启动，要及时将环境启动起来，以上全部设置好后要及时保存流程，在页面空白处，鼠标右键流程定义交互提交流程：
图10-25 发布流程
10.3.3 测试运行
此步骤可以参考第 9 章中的 9.3 章节。
第11章 报销流程第二次修改
11.1 关键知识点
本章通过对第 10 章中的流程进行修改，学习多工作项、通知及时间限制的设置。
11.2 案例描述
前面填写报销的流程，如果部门经理审批通过，金额小于等于 1 万且是预算内项目，则进行财务审阅，然后入账；如果不满足这个条件，需要总监或 VP 进行审批。如果报销金额小于等于 5 万，是总监审批；如果报销金额大于 5 万，需要两个 VP 会签审批，必须 2 人都同意才认为审批通过。审批通过后，再到财务部门进行审阅，并通知报销人，最后入账。如果审批不通过，退回报销人进行修改。此外，将财务人员审阅报销单的时间作为 KPI 考核的一项， 如果在工作时间内，审阅一份报销单的时间超过 2 个小时，绩效成绩会被扣分。
11.3 案例开发及运行
11.3.1 完成流程定义
1. 根据案例描述，完成流程定义的所有图元及连线，在构件包 com.primeton.train.sample 中新建流程文件，文件名字可以自己取（多人连接同一个数据库的时候要和别人的流程区别开）。具体图元及连线如下：
图11-1 流程图
2. 基础流程是从第 10 章：报销流程第一次修改中的流程拷贝过来的，接下来只介绍新增及
修改的部分。
3. 流程属性设置，和第 10 章的流程比增加了几个相关数据，如下截图：
图11-2 流程相关数据设置
4. “填写报销单”人工活动表单 tab 页新增参数，如下：
图11-3 填写报销单表单设置
5. “部门经理审批”表单设置如下，注意：财务审阅的类型为用户，这样在执行这个任务的时候财务审阅可以通过树来选择：
图11-4 部门经理审批表单设置
6. “部门经理审批”至“填写报销单”不同意的连线以及“总监审批”至“填写报销单”不同意的连线设置如下：
图11-5 连线设置
7. 双击“路由活动”设置如下：
图11-6 连线设置
8. 双击“路由活动”至“财务审阅”之间的连线，将连线的优先级设置为高，如下图：
图11-7 连线设置
9. 双击“路由活动”至“总监审批”之间的连线，设置如下：
图11-8 连线设置
10. 双击“总监审批”人工活动，切换至参与者 tab 页，设置如下：
图11-9 参与者设置
表单设置如下：
图11-10 总监审批表单设置
11. “财务审阅”参与者设置如下
图11-11 财务审阅参与者设置
表单设置如下：
图11-12 财务审阅表单设置
时间限制设置如下：
图11-13 时间限制设置
通知 tab 页设置如下：
图11-14 通知设置
勾选启用通知，基本页面设置好标题及内容，然后至接收者 tab 页，设置如下：
图11-15 通知接收者设置
设置好后点击确定，当启用了通知以后，流程到达财务审阅这个环节的时候，报销人登录
coframe 后可以在我的任务未阅通知处看到刚刚设置的通知，如果已经阅读了通知可以从
已阅通知处看到通知信息。
12. 设置“VP 会签”环节，参与者选择“从参与者列表获得”，然后选择 VP 角色（建议 VP
角色下授权两个员工）：
图11-16 参与者设置
表单 tab 页设置如下：
图11-17 表单设置
多工作项 tab 页设置如下：
图11-18 多工作项设置
13. “VP 会签”至“重置会签结果”之间的连线设置如下：
图11-19 连线设置
14. “重置会签结果”处设置如下：
图11-20 重置会签结果设置
15. 接下来要做的事情是在“VP 会签”环节，只要有一个人不同意，则走“会签未通过”这条连线，在构件包 com.primeton.train.sample构件上右键创建逻辑构件，然后在自己创建的逻辑构件上右键创建逻辑流，逻辑流的名字为 setSignResult，将 setRelativeData 构件（可以使用 setRelativeData 名字到构件库中去搜索）拖到逻辑流中，然后修改成如下截图所示：
图11-21 逻辑流设置
双击逻辑流空白处，设置如下：
图11-22 逻辑流属性设置
“不同意”连线设置如下：
图11-23 连线设置双击“setRelativeData”构件，设置如下：
图11-24 setRelativeData 设置
设置完成后保存逻辑流，然后双击“VP 会签”人工活动切换至“时间限制”tab 页，点击“ ”按钮，设置触发时机为工作项完成后，然后双击事件动作，类型选择“逻辑流”，动作点击 “浏览”找到前面写好的 setSignResult 逻辑流，然后按照如下截图方式设置参数：
图11-25 触发事件设置
设置后点击确定，最后保存。
11.3.2 流程发布
在页面空白处，鼠标右键流程定义交互提交流程：
图11-26 流程发布
11.3.3 测试运行
此步骤可以参考第 9 章中的 9.3 章节。
第12章 自定义流程开发
12.1 关键知识点
本章通过自定义流程开发过程，学习 BPS 工作流实现流程过程、NUI 实现前台页面、逻辑流实现后台运算。
12.2 案例描述
基于第 11 章的流程，同时要让机构人员通过 WEB 方式完成自己对应的流程环节，而不是使用内置表单的形式；此案例中还支持填写好报销单后可以将报销单内容暂存，暂存的情况下是不会完成“填写报销单”这个环节的，只有点击提交了以后才会完成“填写报销单” 的环节。
12.3 案例开发及运行
12.3.1 完成流程定义
1. 在构件包 com.primeton.train.sample 中新建流程文件 sample_XXX_expenseurl.workflowx
（XXX 为个人名字全拼，当多人用一个数据库里不会发生冲突）。具体图元及连线如图，图元及连线上的设置和第 11 章的一样（可以将第 11 章的流程直接复制过来，再进行修改），只不过不使用流程的内置表单：
本案例说明：复制好图元后，要将“填写报销单”、“部门经理审批”、“总监审批”、“财务审阅”以及“VP 会签”几个图元的表单 tab 页清空；
图12-1 流程图示
2. 双击空白处，设置相关数据，如下图：
图12-2 流程属性设置
3. 双击人工活动“部门经理审批”，设置“部门经理审批”的参与者（使用了复杂参与者，关于复杂参与者的详细介绍可以参考 studio 帮助中的介绍），我们希望达到的效果是此环节的参与者默认由报销受益部门的部门经理审批，在选择角色的时候一定要确保已经在 studio 中刷新过组织模型了，设置如图：
图12-3 “部门经理审批”活动“参与者”设置
5．保存并提交流程。
12.3.2 完成“填写报销单”环节
1. 在开始之前首先将构件包com.primeton.train.sample 及构件包com.primeton.train.expense 和 com.primeton.train.expenseauto 之间建立依赖关系，关于如何建立依赖可以参考第 5 章中的 5.3 案例开发构件包设计（3）中的介绍，勾选好后如下图：
图12-4 构件包依赖
2. 在构件包：com.primeton.train.sample 下的页面资源新建expenseInput.jsp 调整后的页面代码如下（页面中 url:” biz.ext”需要后面修改好逻辑流后再进行修改）：
<tr>
<td style="text-align:center;" colspan="4">
<a class="nui-button" iconCls="icon-save" onclick="onOk()">
暂存
</a>
<span style="display:inline-block;width:25px;">
</span>
<a class="nui-button" iconCls="icon-save" onclick="onConfirm()">
确认
</a>
<span style="display:inline-block;width:25px;">
</span>
<a class="nui-button" iconCls="icon-cancel" onclick="onCancel()">
取消
</a>
</td>
</tr>
</table>
</div>
</div>
<div id="gridPanel" class="nui-panel" title="header" iconCls="icon-add" style="width:450px;height:250px;"
showToolbar="true" showCloseButton="true" showHeader="false" bodyStyle="padding:0" borderStyle="border:0">
<div property="toolbar" style="padding:5px;padding-left:8px;text-align:center;">
<div style="float:left;padding-bottom:2px;">
<span>部门名称：</span>
<input id="keyText" class="nui-textbox" style="width:160px;" onenter="onSearchClick"/>
<a class="nui-button" onclick="onSearchClick">查询</a>
<a class="nui-button" onclick="onClearClick">清除</a>
</div>
<div style="float:right;padding-bottom:2px;">
<a class="nui-button" onclick="onCloseClick">关闭</a>
</div>
<div style="clear:both;"></div>
</div>
<div id="datagrid1" class="nui-datagrid" style="width:100%;height:100%;" borderStyle="border:0" showPageSize="false"
showPageIndex="false" dataField="orgs" url="com.primeton.train.expense.expense.queryOrg.biz.ext">
<div property="columns">
<div type="checkcolumn"></div>
<div field="orgcode" width="120" headerAlign="center" allowSort="true">机构编码</div>
<div field="orgname" width="120" headerAlign="center" allowSort="true">机构名称</div>
<div field="parentorgid" width="120" headerAlign="center" allowSort="true">
上级机构编号</div>
</div>
</div>
</div>
<script type="text/javascript">
3. 新建“暂存”按钮对应的逻辑流，点击“暂存”时只是把填写的内容保存起来，并不会结束这个工作项；
在 setSignResult 逻辑流所在的目录下新建逻辑流，名字为 saveExpense，从左侧拖两个逻辑流图元至此逻辑流中，并按照如下截图所示修改图元名称：
图12-5 逻辑流设置双击逻辑流空白处，逻辑流属性设置如下：
图12-6 逻辑流属性设置
新记录连线的设置为：
图12-7 连线设置
双击“新增报销单”逻辑流图元，点击浏览，找到expenseAdd 逻辑流，选中，设置如下：
图12-8 新增报销单逻辑流设置
双击“修改报销单”逻辑流图元，点击浏览，找到 expenseUpdate 逻辑流，选中，设置如下：
图12-9 修改报销单逻辑流设置
设置好后保存，然后左侧资源管理器处找到刚刚建的逻辑流，右键复制逻辑流全名，如下：
图12-10 复制逻辑流全名
然后将复制好的全名粘贴到 expenseInput.jsp 中 function saveData()中的 url 的“”里面，结尾要留下.biz.ext，修改后记得及时保存页面；
4. 在前面的逻辑构件上新建逻辑流，逻辑流的名字为 getExpense，双击逻辑流的空白处，设置逻辑流的属性：
图12-11 逻辑流属性设置从左侧拖一个赋值图元放到开始图元的后面，设置如下：
图12-12 赋值设置
接下来从右侧构件库中搜索一个名字为：queryWorkItemDetail4SDO 的构件，将此构件拖至逻辑流中放到赋值图元的后面，修改构件的显示名称为：查询工作项信息，双击构件进行设值，如下：
图12-13 查询工作项设置
从左侧再拖一个赋值图元放到“查询工作项信息”图元后面，修改显示名称为：获取流程实例 ID，设置如下：
图12-14 获取流程实例 ID 设置
最后需要根据获取到的流程实例 ID 去查询业务表中的此条记录，在右侧构件库中搜索到expandEntityByTemplate 构件，将此构件拖至逻辑流中，修改其显示名称为：查询报销单， 设置如下：
图12-15 查询报销单设置
设置好后用连线将所有图元连接，保存，最后逻辑流显示如下：
图12-16 逻辑流
在左侧资源管理器处找到 getExpense 逻辑流，复制此逻辑流的全名，将全名粘贴至expenseInput.jsp 中的 function loadData()中的 url 的“”中，留下.biz.ext 后缀，修改后记得及时保存页面；
5. 最后设置页面上点击“提交”按钮时调用的逻辑流，在 saveExpense 所在逻辑构件下右键新建逻辑流，名字为：confirmExpense，逻辑流展示如下：
图12-17 逻辑流
双击逻辑流空白处，设置如下：
图12-18 逻辑流属性设置
relativeData 对应的数据类型设置，点击下拉框java 浏览输入 HashMap，选中即可；
其中“新记录”连线、“新增报销单”及“修改报销单”设置和 saveExpense 逻辑流一样， 可以参考前面saveExpense 逻辑流的介绍；
“构造相关数据”赋值图元设置如下：
图12-19 构造相关数据设置
“设置相关数据”用到的是 setRelativeDataBatch 构件，可以直接用名字在右侧构件库中进行搜索，设置如下：
图12-20 setRelativeDataBatch 设置
“完成工作项”用到的是 finishWorkItem 构件，使用此名字在右侧构件库中进行搜索，设置如下：
图12-21 完成工作项设置
以上所有图元都设置好后保存逻辑流，然后复制逻辑流的全名，将全名粘贴至 function confirmData()中的 url 处，留下.biz.ext 后缀，保存页面；
7. 双击流程的“填写报销单”环节，基本 tab 页最下面选中自定义 URL，选择 web 页面，点击浏览，找到expenseInput.jsp 页面，点击确定，然后保存刚刚的设置。
8. 提交并启动流程，看“部门经理审批”环节是否可以正常结束，提交流程及启动流程可以参考前面章节中的介绍；
12.3.3 完成“部门经理审批”环节
1. 新建 expenseApproval.jsp，实现“部门经理审批”页面。
在构件包 com.primeton.train.sample 中新建文件expenseApproval.jsp。
调整后的代码如下（页面中 url:” biz.ext”需要后面修改好逻辑流后再进行修改）：
2. 页面中 function loadData()中的 url 对应的逻辑流和 expenseInput.jsp 页面中 function
loadData()中的 url 对应的逻辑流为同一个，所以将 expenseInput.jsp 页面中function loadData()
中的 url 复制一下粘贴到此页面相同的位置；
3. 新建 approvalExpense 逻辑流，如下所示：
图12-22 逻辑流
双击逻辑流空白处，设置如下：
图12-23 逻辑流属性设置
双击“赋值”图元，设置如下：
图12-24 赋值设置
双击“获取报销单”逻辑流图元，点浏览，找到 getTrainExpenseinfo 逻辑流，设置如下图：
图12-25 获取报销单设置双击“仅修改审批内容”赋值图元，设置如下：
图12-26 仅修改审批内容设置
双击“修改报销单”逻辑流图元，点浏览，找到 updateTrainExpenseinfo 逻辑流，设置如下图：
图12-27 修改报销单设置
“设置审批结果”图元对应的构件为 setRelativeData，可以在构件库中进行搜索得到，设置如下：
图12-28 设置审批结果设置
“完成工作项”对应的是 finishWorkItem 构件，可以在构件库中进行搜索得到，设置如下：
图12-29 完成工作项设置
以上图元设置好后保存逻辑流，然后赋值逻辑流的全名，将全名粘贴至 function approvalData()
中的 url 中，留下.biz.ext；
4. 双击流程的“部门经理审批”环节，基本 tab 页最下面选中自定义 URL，选择 web 页面， 点击浏览，找到expenseApproval.jsp 页面，点击确定，然后保存刚刚的设置。
5. 提交并启动流程，看“填写报销单”环节是否可以正常结束，提交流程及启动流程可以参考前面章节中的介绍；
12.3.4 完成“财务审阅”环节
1. 新建文件expenseAudit.jsp
在构件包的页面资源下，新建文件expenseAudit.jsp
调整后的代码如下（页面中 url:” biz.ext”需要后面修改好逻辑流后再进行修改）：
2. 页面中 function loadData()中的 url 对应的逻辑流和 expenseInput.jsp 页面中 function loadData()中的 url 对应的逻辑流为同一个，所以将 expenseInput.jsp 页面中function loadData() 中的 url 复制一下粘贴到此页面相同的位置；
3. 新建逻辑流 auditExpense.bizx
逻辑流图元及连线
图12-30 逻辑流
逻辑流参数设置
图12-31 逻辑流属性设置
“赋值”图元属性设置
图12-32 赋值设置
“获取报销单”逻辑流图元设置，点击浏览找到 getTrainExpenseinfo 逻辑流：
图12-33 获取报销单设置“仅修改审阅内容”赋值图元设置如下：
图12-34 仅修改审阅内容设置
“修改报销单”逻辑流图元设置，点击浏览找到 updateTrainExpenseinfo 逻辑流：
图12-35 修改报销单设置
“完成工作项”对应的构件为：finishWorkItem，可以到构件库中去搜索，设置如下：
图12-36 完成工作项设置
设置完成后保存逻辑流，复制 auditExpense 逻辑流的全名，将全名粘贴至 expenseAudit.jsp
中 function approvalData(dealResult)中的 url 处，留下.biz.ext，及时保存页面；
4. 双击流程的“财务审阅”环节，基本 tab 页最下面选中自定义 URL，选择web 页面，点击浏览，找到expenseAudit.jsp 页面，点击确定，然后保存刚刚的设置。
5. 提交并启动流程，看当满足条件的时候“财务审阅”环节是否可以正常结束，提交流程及启动流程可以参考前面章节中的介绍；
12.3.5 完成“总监审批”环节
1. 流程中“总监审批”环节关联的 jsp 页面与“部门经理审批”环节关联的页面一致，基本tab 页最下面选中自定义 URL，选择web 页面，点击浏览，找到 expenseApproval.jsp 页面， 点击确定，然后保存刚刚的设置。
2. 提交并启动流程，看当满足条件的时候“总监审批”环节是否可以正常结束，提交流程及启动流程可以参考前面章节中的介绍；
12.3.6 完成“VP 会签”环节
1. 流程中“VP 会签”环节关联的 jsp 页面与“部门经理审批”环节关联的页面一致，基本 tab 页最下面选中自定义 URL，选择 web 页面，点击浏览，找到 expenseApproval.jsp 页面，点击确定，然后保存刚刚的设置。
2. 提交并启动流程，看当满足条件的时候“VP 会签”环节是否可以正常结束，提交流程及启动流程可以参考前面章节中的介绍；
本案例说明：“财务入账”及“重置会签结果”均为自动活动，设置和第 11 章中设置的一样；
第13章 使用流程快速实施框架
13.1 关键知识点
本章通过示例流程开发过程，学习使用流程快速实施框架。
关于快速实施框架的理论及其它，请参考\开源组件\bpff 文件夹下的相关文档。
13.2 案例描述
本章案例沿用第 10 章案例的流程定义，并在流程的第一个人工活动“填写报销单” 活动的开发过程中，使用流程快速实施框架。
13.3 案例开发
13.3.1 完成流程定义
1. 在构件包 com.primeton.train.sample 中新建流程文件 bizformSample_XXX.workflowx（XXX
为个人名字全拼，当多人用一个数据库里不会发生冲突）。具体图元及连线同第 9 章，如图：
图13-1 流程图示
2. 双击空白处，设置相关数据，如图：
图13-2 流程相关数据
3. 流程图中连线上的条件与第 9 章一样，可以参考第 9 章中的设置，需要将“填写报销单”、“部门经理审批”、“财务审阅”及“总监或 VP 审批”图元中的表单tab 页中的设置清除；
13.3.2 使用流程快速实施框架完成“填写报销单”环节
1. 在构件包页面资源下新建 jsp 页面，名字为：expenseInput4Frame.jsp 代码调整为：
调整好后保存页面；
2. 双击“填写报销单”人工活动图元，基本 tab 页选中自定义 url，然后 web 页面，找到expenseInput4Frame.jsp；切换至业务流程框架 tab 页，勾选使用业务流程框架，勾选允许提交和允许暂存按钮，如下：
图13-3 填写报销单设置
图13-4 填写报销单设置
设置好后点击确定；
3. 保存并提交流程；
13.3.3 测试运行
1.在 coframe 中启动刚刚创建的流程并执行“填写报销单”环节，在 expenseInput4Frame.jsp
中没有提供保存按钮，且没有相应的保存逻辑流的情况下，流程还是可以正常运转的。
本案例说明：参考前面的设置完成流程的剩余部分吧，祝您成功！
扫一扫
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
