技术白皮书

新手入门

视频教程

流程定义

IT开发人员为适应业务流程经常变动、业务规则时常调整、组织机构权限重组、业务信息不全需要添加、统计报表信息不全而开发。

可视化的“画”出企业MIS系统

1.图形界面的业务流程制作

2.“画”出来的功能模块界面

通过点击“开发设计”目录下的“流程定义”进入流程定义界面

1.左侧是目录区，有增加，删除，修改功能

2.右侧是业务流程列表 有搜索，移动，分享增加功能

 

1.增删改流程目录

右击目录“业务流程”弹出

(1)添加目录分类 添加目录

(2)修改 修改目录

(3)删除 删除目录

1.1点击添加目录分类


填写目录标题 比如：分类一

点击确定

目录分类添加完成

1.2.修改目录分类

鼠标右击需要修改的目录

选择修改

填写新的目录名称 点击确定

修改完成

1.3.删除目录分类

选择需要删除的目录 右击选择删除

点击确定

删除成功

 

2.增加业务流程

业务流程列表中的“添加业务流程”

弹出添加表单

  1. 流程名称：流程英文名称
  2. 流程标题：后台流程表名称标识
  3. 编号前缀：前缀
  4. 流程状态：可选创建、提交、作废
  5. 编号SQL：
  6. 编号长度：最大长度
  7. 业务表名称：业务表名
  8. 业务表索引：表的索引
  9. 主键名称：表的主键名
  10. 后台程序：自定义
  11. 显示图标：显示图标
  12. 多任务规则：可选是 否 选择是可以多条任务在执行，否一次只能执行一条任务


填上信息点击确定

 

3.移动、分享

选择需要移动的流程名称 点击右上侧的移动

选择需要移动到的目录

选择需要分享的流程名称 点击右上侧的分享

选择需要分享到的目录

 

4.业务流程

业务流程操作有编辑、删除、清理数据、流程图

 

4.1.编辑

选择要编辑的流程名称右侧的编辑按钮点击

进入编辑界面

左侧是该流程信息，可修改

右侧是该流程下用到的字段，可对字段进行增、删、改

 

4.2.表单字段添加

点击增加按钮

弹出添加字段信息

  1. 1）字段名称：对应数据表中的字段名（英文）
  2. 2）字段标题：后台字段中文标识
  3. 3）字段类型：日期、数字、字符串、树节点、文本、图片、选项、表格、附件
  4. 4）字段长度：控制字段的长度
  5. 5）其他参数：
  6. 6）对象名称：填写对象名
  7. 7）显示顺序：字段前后排序

填入字段信息

点击保存

添加成功

 

4.3.子表添加字段

选择需要编辑的字段，点击右侧的编辑按钮，可以修改该字段信息

也可以在右侧添加子表字段，添加方式同4.4.1

可以有无数个子表，按自己的业务需求添加

 

4.4.表字段删除

选择要删除的流程，然后点击右侧的删除按钮

点击确定 便可以删除

 

4.5.清理数据

清理数据：就是清除这条业务中的单据信息

选择需要清理的业务流程点击右侧的“清理数据”

点击确定即可

 

5.流程图

可视化拖拽式流程设计，可通过控件设置节点，通过箭头线设置条件，可谓不同节点添加自定义界面（可是化拖拽式设计）

点击业务流程右侧的“流程图”

进入流程图设计界面

流程图界面分三个部分

1.顶部的8个按钮是整个画布的功能 保存、撤销、重复、删除、裁剪、复制、粘帖、打印

2.左侧的图形图标是可以拖动到画布的控件，鼠标放到控件上可以看到该控件的名称知晓控件的用途

无条件图标

开始 图标

结束 图标

人工操作 图标

自动过程 图标

子流程 图标

或分支 图标

与分支 图标

或汇集 图标

与汇集 图标

 

5.1.绘制流程图

系统默设置了一个简单的流程图！

开始—申请—审批—结束等过程

流程太少可添加

选择需要的节点，鼠标点击拖动到画布中

比如选择人工操作拖动到画布

单击该控件，右侧出现该控件属性，如下图

可以设置该控件属性：

  1. 1）标题：控件名称
  2. 2）其他规则：调用自定义参数
  3. 3）节点类型：人机交互
  4. 4）超时（小时）：一天8小时（小于8小时有bug）
  5. 5）排除分派人执行：是，否，逐级上报，跳过分派人
  6. 6）外部前导规则：在这个节点之前执行某某行为（被自动程序空间代替）
  7. 7）外部后续规则：在这个节点之后执行某某行为（被自动程序空间代替）
  8. 8）多人同时作业：是 否
  9. 9）信息提示：系统信息，手机短信，公司邮件，微信，钉钉，v网通
  10. 10）功能程序：
  11. 11）有效标志：是 否
  12. 12）授权于：部门/工作组/角色/人/特定程序
  13. 13）权限分配规则： 先到先执行/令牌轮巡
  14. 14）流程节点ID：保存后自动分配
  15. 15）界面类型：pc版H5/手机H5版
  16. 16）页面处理程序：页面打开onload事件的js脚本
  17. 17）页面脚本：操作界面需要加载的js文件（HTML5是根路径）
  18. 18）业务状态：当这个单子走到这个界面的时候，需要系统

两种状态：一种还没开始准备状态（待审核），一种是已完成（已申请）

如：

填完属性点击保存

设置完属性

开始设置条件和拖动适当位置

设置条件

点击画布中的线条（条件），右侧会出现线条（条件）属性

属性：

1）标题：就是名称

2）有条件执行：是或否

3）执行条件表达式：需要判断条件时候需要填写流程表达式 格式：[字段]条件 例：[applyNum]>3，否则留空；

 

5.2.绘制流程节点页面

流程节点页面呈现

比如申请页面：

点击申请节点，右侧找到“界面类型”选择“PC版H5”点击下方的“定义界面”

下一步可进行可视化定义界面

  1. 1）左侧为控件选择区，选中对应的控件类型图标，拖至“画布”，编辑各个控件的属性；
  2. 2）右下角为xml编辑切换，可以直接编辑界面定义xml文件的内容；
  3. 3）底部为画布缩放功能按钮；
  4. 4）顶部为界面定义操作区，保存：后台自动生成对应的jsp文件，并复制到独立的HTML5服务路径（web.xml里面设置）；
 

5.3.设置界面标题

暂时不能设置

 

5.4.添加页面div（可包含子div）

选择界面控件“div”

拖动到右侧画布中，单机右侧会出现属性面板

  1. 1）标题：显示div层的标题（只在画布显示，起到提示作用）；
  2. 2）元素类型：线条
  3. 3）背景颜色：#99FFFF（更具16进制颜色表添加）
  4. 4）其他配置脚本：填写样式说明，class=”基础css样式里面或者自定义样式class”
  5. 5）触发事件：可以填写js触发的事件，比如：onClick事件；
  6. 6）Div嵌套，可以添加多个div层，设定不同的样式，比如： a)class="form-group"：主信息区样式； b)class="form-group" style="margin-bottom:0px"：当前编辑区样式；
 

5.5.添加界面按钮

选择按钮控件

拖入到右侧的画布中 单机控件 右侧出现属性面板

  1. 1）标题：显示按钮的标题；
  2. 2）元素类型：按钮
  3. 3）编辑权限：“隐藏”表示不显示按钮
  4. 4）按钮图标：可查询bootstrap按钮样式

  5. 5）操作URL：点击后执行的js脚本，内置默认功能函数名称：

    a)fun_saveData()；保存

    b)fun_reject()；驳回

    c)fun_confirm()；提交

  6. 6）背景颜色：#99ffff（根据16进制颜色表填写）

  7. 7）边框：有/无
  8. 8）其他配置脚本：设置class样式，或者html中dom节点的属性；
  9. 9）别名：当元素ID不关联时，别名为界面dom对象的id；
 

5.6.添加图片

拖动“图片”按钮到画布，点击左键到右侧属性：

  1. 1）标题：控件标题
  2. 2）元素类型：图片
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）编辑：编辑、只读、隐藏；
  6. 6）字段元素：对应表单事先定义好的主表字段；
  7. 7）图像文件路径：静态图像文件的相对访问url；
  8. 8）边框：有/无
  9. 9）触发事件：点击图片触发的js脚本事件；
  10. 10）别名：当元素ID不关联时，别名为界面dom对象的id；
  11. 11）其他配置脚本：标签的其他html属性，包括class样式说明；
  12. 12）宽、高：图片显示的宽度和高度（px）；
 

5.7.添加文字标题

拖动“标题”控件到右侧画板中，左键点击到右侧属性

  1. 1）标题：显示的文本；
  2. 2）标签样式：1/12*N的内容宽度；
  3. 3）标签宽度：1/12*N的标题宽度；
  4. 4）元素类型：标题
  5. 5）背景颜色：#99FFFF（16进制的颜色色值）
  6. 6）边框：有/无
  7. 7）别名：当元素ID不关联时，别名为界面dom对象的id；
  8. 8）其他配置脚本：包括class样式说明（toggleDIV=可以扩展隐藏的样式）；
 

5.8.添加文本框

选择文本框控件，拖动到右侧画板中，单机该控件右侧显示其属性

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：文本；
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）输入框样式：参照bootstrap样式表
  6. 6）编辑：编辑、只读、隐藏；
  7. 7）字段元素：对应表单事先定义好的主表字段；
  8. 9）背景颜色：#99FFFF（16进制的颜色色值）
  9. 8）字段长度：限制输入内容的长度；
  10. 9）非空字段：必填项、可控项；
  11. 10）边框：有/无
  12. 11）文档格式：RTF格式（html编辑器）；
  13. 12）触发事件：点击控件触发的js脚本事件；
  14. 13）别名：当元素ID不关联时，别名为界面dom对象的id；
  15. 14）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；
 

5.9.添加字符串输入框

选择字符串控件，拖动到右侧画板中，单机该控件右侧显示其属性

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：字符串
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）输入框样式：文本正则表达式检查；
  6. 6）编辑权限：编辑、只读、隐藏；
  7. 7）字段元素：对应表单事先定义好的主表字段；
  8. 8）背景颜色：#99FFFF（16进制的颜色色值）
  9. 9）字段长度：限制输入内容的长度；
  10. 10）非空字段：必填项、可控项；
  11. 11）边框：有/无
  12. 12）触发事件：点击控件触发的js脚本事件；
  13. 13）别名：当元素ID不关联时，别名为界面dom对象的id；
  14. 14）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性，如：placeholder="请填写编号"；
 

5.10.添加数字输入框

选择数字输入控件，拖入到右侧画布中，鼠标左键单机该控件，右侧为属性

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：数字
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）输入框样式：文本正则表达式检查；
  6. 6）编辑权限：编辑、只读、隐藏；
  7. 7）字段元素：对应表单事先定义好的主表字段；
  8. 8）背景颜色：#99FFFF（16进制的颜色色值）
  9. 9）非空字段：必填项、可控项；
  10. 10）边框：有/无
  11. 11）缺省值：用户操作不填写时默认值（如：0）；
  12. 12）触发事件：点击控件触发的js脚本事件；
  13. 13）字段长度：限制输入内容的长度；
  14. 14）别名：当元素ID不关联时，别名为界面dom对象的id；
  15. 15）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；
 

5.11.添加日期控件

选择日期控件拖动到右侧画布，鼠标左键单机该控件，右侧为属性

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：日期
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）输入框样式：文本正则表达式检查；
  6. 6）编辑权限：编辑、只读、隐藏；
  7. 7）字段元素：对应表单事先定义好的主表字段；
  8. 8）背景颜色：#99FFFF（16进制的颜色色值）
  9. 9）非空字段：必填项、可控项；
  10. 10）边框：有/无
  11. 11）触发事件：点击控件触发的js脚本事件；
  12. 12）别名：当元素ID不关联时，别名为界面dom对象的id；
  13. 13）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；
  14. 14）包含时间：是否包含时间（默认只到“日”）；
 

5.12.添加子表

选择表格控件拖动到右侧画布，鼠标左键单机该控件，右侧为属性

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）渲染：
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）异步数据：是/否
  6. 6）分页：是/否
  7. 7）页面行数：分页显示行数
  8. 8）元素类型：表格
  9. 9）编辑权限：编辑、只读、隐藏；
  10. 10）字段元素：对应表单事先定义好的主表字段；
  11. 11）背景颜色：#99FFFF（16进制的颜色色值）
  12. 12）非空字段：必填项、可控项；
  13. 13）边框：有/无
  14. 14）计算表达式：子表字段之间存在计算关系，某个字段值输入改变后，重新计算相关的字段数据；H5格式表达式如：schemeAmount:(fee)*(quantity) （注：右边字段需要加括号）
  15. 15）选择事件：选中记录时触发js脚本（移动版忽略）；
  16. 16）分组表格：是、否；
  17. 17）分组汇总公式：分类汇总表格记录公式（移动版忽略）；
  18. 18）编辑后函数：编辑某个字段后触发的js脚本（移动版忽略）；
  19. 19）增加或者删除：是否默认添加按钮（移动版忽略）；
  20. 20）固定字段长度：移动版忽略；
  21. 21）别名：当元素ID不关联时，别名为界面dom对象的id；
  22. 22）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；

添加系统对象表（同子表）

 

5.13.添加系统选择树

选择节点控件拖动到右侧画布，鼠标左键单机该控件，右侧为属性

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）标签样式：1/12*N的内容宽度；
  3. 3）标签宽度：1/12*N的标题宽度；
  4. 4）元素类型：节点树
  5. 5）编辑权限：编辑、只读、隐藏；
  6. 6）字段元素：对应表单事先定义好的主表字段；
  7. 7）树对象名称：后台基础信息树设置的名称，如：organize=组织机构；
  8. 8）选择方式：单选、多选；
  9. 9）选择限制：树枝、树叶、全部；
  10. 10）输入字段：可以输入某个字段，自动后台匹配对应的选项；
  11. 11）显示字段：选择树节点后，自动显示对象的字段信息；
  12. 12）背景颜色：#99FFFF（16进制的颜色色值）
  13. 13）非空字段：必填项、可控项；
  14. 14）边框：有/无；
  15. 15）别名：当元素ID不关联时，别名为界面dom对象的id；
  16. 16）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；
 

5.14.添加附件控件

选择附件控件拖动到右侧画布，鼠标左键单机该控件，右侧为属性

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：附件
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）输入框样式：文本正则表达式检查；
  6. 6）编辑权限：编辑、只读、隐藏；
  7. 7）字段元素：对应表单事先定义好的主表字段；
  8. 8）背景颜色：#99FFFF（16进制的颜色色值）；
  9. 9）选项内容：
  10. 10）页面行数：附件数量；
  11. 11）非空字段：必填项、可控项；
  12. 12）边框：有/无；
  13. 13）别名：当元素ID不关联时，别名为界面dom对象的id；
  14. 14）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；
 

5.15.添加审批意见

选择审批意见控件拖动到右侧画布，鼠标左键单机该控件，右侧为属性

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：审批意见
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）输入框样式：文本正则表达式检查；
  6. 6）编辑权限：编辑、只读、隐藏；
  7. 7）背景颜色：#99FFFF（16进制的颜色色值）
  8. 8）非空字段：必填项、可控项；
  9. 9）显示历史意见：是否显示审批意见的历史记录；
  10. 10）边框：有/无
  11. 11）触发事件：点击控件触发的js脚本事件；
  12. 12）别名：当元素ID不关联时，别名为界面dom对象的id；
  13. 13）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性
 

5.16.添加选项控件

选择选项控件拖动到右侧画布，鼠标左键点击该控件，右侧为属性

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：选项
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）输入框样式：文本正则表达式检查；

  6. 6）选项内容：可供选择的内容：

    a)Key=value&key1=value1&key2=value2&….

    b)Select code,title from 选项记录表

    c){sql:系统设定的sql语句,key1:value1,key2:value2,…..},key=sql中需要替换的变量；（界面程序生成时，固定生成可选项）

    d){dsql:系统设定的sql语句,key1:value1,key2:value2,…..}；（界面运行时，动态生成可选项）

  7. 7）缺省值：设置默认值；

  8. 8）编辑权限：编辑、只读、隐藏；
  9. 9）字段元素：对应表单事先定义好的主表字段；
  10. 10）背景颜色：#99FFFF（16进制的颜色色值）
  11. 11）非空字段：必填项、可控项；
  12. 12）边框：有/无
  13. 13）触发事件：点击控件触发的js脚本事件；
  14. 14）选择方式：单选、多选；
  15. 15）列数：1=下拉框；非1=多列radio方式显示（多选时，为checkbox）；
  16. 16）别名：当元素ID不关联时，别名为界面dom对象的id；
  17. 17）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；

动态sql调用，更新选项列表：

添加“页面函数”：

var getData（自定义名称）=function(docData){
 var data=getSql({dsql:'all_sql标识',
替换sql的key:document.getElementById('参数id').value},
 '本字段名称');
 refreshSelect('本字段名称',1,data); };
var afterLoad=function(docData){
  getData (docData);
}
 

5.17.添加单据基础信息

添加单据基础信息包括：编号、创建人、创建日期、任务ID 编号：
单证编号：

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：单证编号；
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）编辑权限：只读；
  6. 6）背景颜色：#99FFFF（16进制的颜色色值）；
  7. 7）边框：有/无；
  8. 8）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；

创建人：

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：创建人；
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）输入框样式：文本正则表达式检查；
  6. 6）编辑权限：只读；
  7. 7）背景颜色：#99FFFF（16进制的颜色色值）；
  8. 8）边框：有/无；
  9. 9）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；

创建日期

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：创建日期；
  3. 3）标签样式：1/12*N的内容宽度；
  4. 4）标签宽度：1/12*N的标题宽度；
  5. 5）输入框样式：文本正则表达式检查；
  6. 6）编辑权限：只读；
  7. 7）背景颜色：#99FFFF（16进制的颜色色值）；
  8. 8）边框：有/无；
  9. 9）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；

创建任务ID

  1. 1）标题：显示文本输入框的标题（左侧显示）；
  2. 2）元素类型：任务编号
  3. 3）编辑权限：只读
  4. 4）背景颜色：#99FFFF（16进制的颜色色值）；
  5. 5）边框：有/无
  6. 6）其他配置脚本：标签的其他html属性，包括class样式说明及其他标签属性；
 

5.18.添加任务轨迹

选择“div”控件动到右侧画布，鼠标左键单击该控件，右侧为属性

其他配置脚本：class="viewStep"（专用样式）

所需设置元素控件完成后，点击保存

弹出保存成功

 

5.19.菜单入口

参考：“菜单定义”

点击顶部“开发设计”

再点击左侧的“菜单定义”

再点击中间“front”

再点击下面的“测试菜单”

找到右侧的“添加系统菜单”

填写弹出信息

功能url： 就是流程节点页面保存后返回的信息HTML5ACCOUNT/Layout41.jsp

HTML5_ACCOUNT （固定写法）
Layout_41.jsp（根据流程节点id）
 

5.20.生成审批页面

回到业务流程图界面，点击画布中的审核人从右侧属性中找到“界面类型”选择pc版H5然后点击“定义界面”

进入审核人界面定义

设置好需要审批的信息

点击保存