|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8" />
|
|
|
<title>SDK模式测试</title>
|
|
|
<link href="../Portal/ccbpm.css" rel="stylesheet" />
|
|
|
<link href="../WF/Style/skin/font/iconfont.css" rel="stylesheet" type="text/css" />
|
|
|
<!-- 引入常用的JS脚本. -->
|
|
|
<script src="../WF/Scripts/QueryString.js"></script>
|
|
|
<script src="../WF/Scripts/jquery/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="../WF/Scripts/jquery/jquery.cookie.js"></script>
|
|
|
|
|
|
<!-- 引入ccbpm 的sdk开发js. -->
|
|
|
<script src="../WF/config.js" type="text/javascript"></script>
|
|
|
<script language="javascript" type="text/javascript">
|
|
|
//启动函数
|
|
|
$(function () {
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
<style>
|
|
|
.fieldset_block {
|
|
|
width: 98%;
|
|
|
background-color: white !important;
|
|
|
margin-bottom: 20px !important;
|
|
|
height: auto;
|
|
|
padding: 10px 12px;
|
|
|
box-shadow: 0 0px 2px rgba(0, 0, 0, .2);
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
fieldset {
|
|
|
border-radius: 5px;
|
|
|
margin-inline-start: 2px;
|
|
|
margin-inline-end: 2px;
|
|
|
padding-block-start: 0.35em;
|
|
|
padding-inline-start: 0.75em;
|
|
|
padding-inline-end: 0.75em;
|
|
|
padding-block-end: 0.625em;
|
|
|
min-inline-size: min-content;
|
|
|
border-radius: 5px;
|
|
|
border-width: 2px;
|
|
|
border-style: groove;
|
|
|
border-color: rgb(192, 192, 192);
|
|
|
border-image: initial;
|
|
|
}
|
|
|
ul{
|
|
|
margin-top:10px;
|
|
|
}
|
|
|
|
|
|
li {
|
|
|
text-align: left;
|
|
|
line-height: 30px;
|
|
|
padding-top: 2px;
|
|
|
padding-bottom: 2px;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
legend {
|
|
|
width: auto;
|
|
|
font-weight: bolder;
|
|
|
padding-inline-start: 2px;
|
|
|
padding-inline-end: 2px;
|
|
|
border-width: initial;
|
|
|
border-style: none;
|
|
|
border-color: initial;
|
|
|
border-image: initial;
|
|
|
margin-left: 10px;
|
|
|
margin-bottom: 0;
|
|
|
font-size: 16px;
|
|
|
color: #676A6C;
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
td, th {
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
th {
|
|
|
color: #676A6C;
|
|
|
}
|
|
|
|
|
|
td {
|
|
|
height: 39px;
|
|
|
/*color: rgb(103, 106, 108);*/
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body style="background-color: #f2f2f2; padding: 0 14px 0 0; margin: 0;">
|
|
|
<center>
|
|
|
<div class="fieldset_block">
|
|
|
<!--<fieldset>-->
|
|
|
<legend><i class="icon iconfont icon-caogao" style="font-size:16px"></i> - SDK模式开发</legend>
|
|
|
<ul>
|
|
|
<li>使用sdk模式开发前，您需要了解一些驰骋bpm的基础知识，比如：什么是表单方案、接受人规则，退回规则、权限按钮控制等。</li>
|
|
|
<li>SDK模式的开发是一种ccbpm的高级开发模式，需要代码完成更灵活的满足自己业务场景的需求。</li>
|
|
|
<li>为了更好的学习、掌握、使用ccbpm的sdk开发，我们特别写这个demo，以及一些开发组件协助开发者快速的完成应用交付.</li>
|
|
|
<li>驰骋BPM为您提供的sdk开发组件，节省您大量的开发时间。</li>
|
|
|
<li>比如1：获得发起、待办、在途等接口，您不需要在编写代码，直接把/WF/Dev2Interface.js 引入到您的页面就可以调用方法获得json数据源，生成自己的发起、待办、在途列表.</li>
|
|
|
<li>比如2：工作处理器的工具栏组件，您不需要调用发送、退回、移交等接口，您只需要把/WF/Toolbar.js,/WF/WorkCheck.js 的组件引入到您的页面即可。 </li>
|
|
|
</ul>
|
|
|
<!--</fieldset>-->
|
|
|
</div>
|
|
|
</center>
|
|
|
<center>
|
|
|
<div class="fieldset_block">
|
|
|
<!--<fieldset>-->
|
|
|
|
|
|
<legend><i class="icon iconfont icon-caogao" style="font-size:16px"></i> - 系统的部署准备工作。</legend>
|
|
|
<ul>
|
|
|
<li>第0步:创建一个空白的ccbpm应用，作为驰骋BPM流程应用服务器。</li>
|
|
|
<li>第1步:解决自己的系统与ccbpm的组织结构集成的问题, 请参考手册或者百度 ccflow组织集成.</li>
|
|
|
<li>第2步:在自己的框架上引入 /WF/ 目录 , 该目录下的文件是ccbpm的客户端开发组件。</li>
|
|
|
<li>第3步:修改config.js 文件的配置，指向我们创建的驰骋BPM服务器.</li>
|
|
|
<li>第4步:解决登录问题，首先自己开发一个页面比如：\Portal\Login.htm 登录后更新并记录SID到cookies里面.如何开发请参考这个文件代码. </li>
|
|
|
<li>第5步:引用生成发起、待办、在途、三大重要的菜单页面。请参考：\WF\Start.htm 发起,Todolist.htm待办,Runing.htm在途三个页面的实现. </li>
|
|
|
</ul>
|
|
|
<!--</fieldset>-->
|
|
|
</div>
|
|
|
</center>
|
|
|
<center>
|
|
|
<div class="fieldset_block">
|
|
|
<!--<fieldset>-->
|
|
|
<legend><i class="icon iconfont icon-caogao" style="font-size:16px"></i> - 请假流程SDK调用模式开发步骤。</legend>
|
|
|
<ul>
|
|
|
<li>第1步:在自己的系统上创建一个表单，比如：/AppDemo/Frms/F001QingJia.htm </li>
|
|
|
<li>第2步:把工作处理器的工具栏组件(/WF/MyFlow.js)引入到您该页面上去。 </li>
|
|
|
<li>第3步:创建一个流程在流程服务器上，并且开始节点上点击右键设置表单方案设置为SDK模式的表单，并把url:/AppDemo/Frms/F001QingJia.htm 设置里面去. </li>
|
|
|
<li>第4步:在页面上增加一个保存方法Save() 用与保存到自己的数据库里。 </li>
|
|
|
</ul>
|
|
|
<!--</fieldset>-->
|
|
|
</div>
|
|
|
</center>
|
|
|
<center style="text-align:left;">
|
|
|
<div class="fieldset_block">
|
|
|
<!--<fieldset>-->
|
|
|
<legend><i class="icon iconfont icon-caogao" style="font-size:16px"></i> - 组件目录结构</legend>
|
|
|
<table style="border: 1px; width: 98%; margin-top: 15px; margin-left: 25px; " class="table table-striped table-bordered">
|
|
|
<tr>
|
|
|
<th> 目录/文件名 </th>
|
|
|
<th> 中文 </th>
|
|
|
<th> 说明 </th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td> /WF/Img/*.* </td>
|
|
|
<td> 一些流程处理器的工具栏上的图片文件 </td>
|
|
|
<td> 美工根据需要可以自行编辑 </td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td> /WF/Script/*.* </td>
|
|
|
<td> bootstrap jquery 一些组件 </td>
|
|
|
<td> 在加载其他组件的时候，根据需要会自动载入。 </td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td> /WF/Style/*.* </td>
|
|
|
<td> 风格文件 </td>
|
|
|
<td> </td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td> /WF/config.js </td>
|
|
|
<td> 组件配置文件 </td>
|
|
|
<td> 配置要调用的驰骋BPM服务器地址. </td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td> /WF/Dev2Interface.js </td>
|
|
|
<td> 接口列表 </td>
|
|
|
<td> 使用javascript格式的接口,发送，保存，撤销，移交, 这些接口在下面的文件里有demo </td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td> /WF/Dev2InterfaceDemo.html </td>
|
|
|
<td> 接口单元测试 </td>
|
|
|
<td> 调用 Dev2Interface.js 的接口. </td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td> /WF/ToolBar.js </td>
|
|
|
<td> 工作处理器toolbar按钮 </td>
|
|
|
<td> 需要在您的页面上增加一个div id命名为ToolBar,系统就会把发送，保存，退回按钮解析到这个div上。</td>
|
|
|
</tr>
|
|
|
|
|
|
<tr>
|
|
|
<td> /WF/WorkCheck.js </td>
|
|
|
<td> 审核组件 </td>
|
|
|
<td> 需要在您的页面上增加一个div id命名为WorkCheck, 。</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
<!--</fieldset>-->
|
|
|
</div>
|
|
|
</center>
|
|
|
<center>
|
|
|
<div class="fieldset_block">
|
|
|
<!--<fieldset>-->
|
|
|
<legend><i class="icon iconfont icon-caogao" style="font-size:16px"></i> - 系统目录结构图</legend>
|
|
|
<img src="./Img/DirInfos.png" />
|
|
|
<!--</fieldset>-->
|
|
|
</div>
|
|
|
</center>
|
|
|
<center>
|
|
|
<div class="fieldset_block">
|
|
|
<!--<fieldset>-->
|
|
|
<legend><i class="icon iconfont icon-caogao" style="font-size:16px"></i> - BPM中心应用结构图</legend>
|
|
|
<img src="./Img/Model1.png" style="width:60%;" />
|
|
|
<!--</fieldset>-->
|
|
|
</div>
|
|
|
</center>
|
|
|
<center>
|
|
|
<div class="fieldset_block">
|
|
|
<!--<fieldset>-->
|
|
|
<legend><i class="icon iconfont icon-caogao" style="font-size:16px"></i> - BPM单独应用</legend>
|
|
|
<!--<img src="./Img/Model0.png" style="width:60%;" />-->
|
|
|
<img src="../AppDemo/Img/liucehngsheji.png" style="width:60%;" />
|
|
|
<!--</fieldset>-->
|
|
|
</div>
|
|
|
</center>
|
|
|
<center>
|
|
|
<div class="fieldset_block">
|
|
|
<!--<fieldset>-->
|
|
|
<legend><i class="icon iconfont icon-caogao" style="font-size:16px"></i> - 流程业务查询</legend>
|
|
|
<ul>
|
|
|
<li> 流程业务表存储规则要根据用户使用了什么类型的表单. </li>
|
|
|
<li> 每个流程业务表都有一个WorkID字段列与工作流引擎的 WF_GenerWorkFlow的对应。 </li>
|
|
|
<li> 业务字段与流程引擎字段可以关联查询，生成视图，提供给开发人员进行业务数据的开发查询。 </li>
|
|
|
</ul>
|
|
|
|
|
|
<!--</fieldset>-->
|
|
|
</div>
|
|
|
</center>
|
|
|
</body>
|
|
|
</html> |