You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

236 lines
10 KiB
Plaintext

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>&nbsp;-&nbsp;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>&nbsp;-&nbsp;系统的部署准备工作。</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>&nbsp;-&nbsp;请假流程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>&nbsp;-&nbsp;组件目录结构</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>&nbsp;-&nbsp;系统目录结构图</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>&nbsp;-&nbsp;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>&nbsp;-&nbsp;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>&nbsp;-&nbsp;流程业务查询</legend>
<ul>
<li> 流程业务表存储规则要根据用户使用了什么类型的表单. </li>
<li> 每个流程业务表都有一个WorkID字段列与工作流引擎的 WF_GenerWorkFlow的对应。 </li>
<li> 业务字段与流程引擎字段可以关联查询,生成视图,提供给开发人员进行业务数据的开发查询。 </li>
</ul>
<!--</fieldset>-->
</div>
</center>
</body>
</html>