`

FoxBPM任务详细信息展现实现

 
阅读更多

FoxBPM任务详细页面包括:任务信息、流程信息、流程图信息三个功能模块,具体功能介绍如下:

1、任务信息:

      任务信息管理,通过rest服务获取任务信息、流程处理信息、任务节点信息。

2、流程信息:

      流程信息管理,通过rest服务取流程实例信息,以及流程状态、当前处理人、流程参入者展现。

3、流程图信息:

      流程图信息管理通过rest服务获取流程图数据(png、svg),以及包括(轨迹信息、轨迹运行状态、隐藏状态)操作。

 

 

实例任务详细信息showTaskDetailInfor.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>FoxBPM流程门户</title>
<link rel="stylesheet" type="text/css" href="css/taskDetailInfor.css" />
<script src="js/jquery.js"></script>
<script src="js/foxbpmframework.js"></script>
<script src="js/taskInfor.js"></script>
<script src="js/flowInfor.js"></script> 
<script src="js/flowGraphicInfor.js"></script>
<script src="js/flowRunTrackInfor.js"></script>
</head>
<body>
	<br>
	<div class="container process" id="processInfo">
		<div
			class="repository-with-sidebar repo-container new-discussion-timeline">
			<div class="repository-content context-loader-container"
				id="js-repo-pjax-container" data-pjax-container="">
				<div class="issues-listing" >
					<div class="context-loader-container" id="issues-container">
						<div class="issues-listing">
							<div class="js-issues-results" id="show_issue">
								<div class="tab-content clearfix" id="discussion_bucket">
									<!-- 流程信息 -->
									<div class="discussion-sidebar" id="flowInforEle">
									</div>
									<!-- 任务详细信息 -->
									<div class="discussion-timeline js-quote-selection-container" id="taskInforEle">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<br>
	<div class="container process">
		<div id="process">
			<div id="flowRunTrackInforEle" style="display: none;" class="proc_bg"></div>
			<div id="flowGraphicInforEle" class="proc_bg"></div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			var isIELowVer = window.ActiveXObject && ($.browser.msie && $.browser.version < 8.0); 
			//流程信息
			var flowInfor = new FlowInfor({
				 eleId:'flowInforEle',
			    action : _serviceUrl,
				processInstanceId : _processInstanceId
			});
			flowInfor.init(); 
			//流程运行轨迹信息
			var flowRunTrackInfor = new FlowRunTrackInfor({
				eleId:'flowRunTrackInforEle',
				isIELowVer:isIELowVer,
				action : _serviceUrl + 'task/runTrack',
				processInstanceId : _processInstanceId
			});
			flowRunTrackInfor.init();
			//流程图信息
			var flowGraphicInfor = new FlowGraphicInfor({
				eleId:'flowGraphicInforEle',
				isIELowVer : isIELowVer,
				action : _serviceUrl,
				processInstanceId : _processInstanceId,
				runTrackObj:flowRunTrackInfor
			});
			flowGraphicInfor.init();
			//任务信息
		     var taskInfor = new TaskInfor({
		    	eleId:'taskInforEle',
		    	action : _serviceUrl,
				processInstanceId : _processInstanceId,
				processDefinitionKey : _processDefinitionKey,
				flowInforObj:flowInfor,
				flowGraphicInforObj:flowGraphicInfor
			}).init();
		});
	</script>
</body>
</html>

   以上html中

  

taskDetailInfor.css 样式文件;
jquery.js juqery工具;
foxbpmframework.js foxbpm框架工具(请求参数获取、rest服务地址配置等公共特性);
taskInfor.js 任务信息处理;
flowInfor.js 流程信息处理;
flowGraphicInfor.js 流程图信息处理;
flowRunTrackInfor.js 流程轨迹信息处理;

   
   附件是界面展现效果;

   以上是FoxBPM任务详细信息页面展现,关于更多FoxBPM请链接https://github.com/FoxBPM

   
 

 

  • 大小: 65 KB
分享到:
评论

相关推荐

    关于FoxBPM连接器介绍

    在企业信息化建设中,流程管理扮演着至关重要的角色,而FoxBPM通过其丰富的连接器机制,能够灵活地与其他系统集成,实现业务流程的自动化。 在“请假审批”这个具体的场景中,我们可以看到一个典型的业务流程实例。...

    foxBPM入门项目

    FoxBPM(6.0版本开始fixflow改名为FoxBPM)是一款开源的基于BPMN2.0标准的工作流引擎,引擎底层直接支持BPMN2.0国际标准, 吸纳了 jBPM3 、 Activiti5、BonitaBPM 等国际开源流程引擎的精髓, 同时提供了强大的中国式流程...

    FoxBPM-Designer:FoxBPM流程设计器

    FoxBPM-Designer FoxBPM流程设计器 #分支介绍 develop 最新开发版 master 最新稳定版 release-* 发布分支为准备新的产品版本发布做支持 hotfix-* 当产品版本的重大bug需要立即解决的时候,我们从对应版本的标签创建...

    基于servlet+jsp+mysql实现的影视管理系统课程设计

    【作品名称】:基于servlet+jsp+mysql实现的影视管理系统【课程设计】 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】: 基于servlet+jsp+mysql实现的影视管理系统【课程设计】 基于servlet+jsp+mysql实现的影视管理系统【课程设计】 Java Web课程设计,基于servlet+jsp+ajax+mysql做的影视管理系统 运行环境: Tomcat 9.0 JDK 1.8 MySQL 8.0 后台管理账号密码均为:root,项目依赖:lib 目录 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。

    kernel-5.15-ky10-x86.tar.gz

    kernel-5.15-ky10-x86.tar.gz

    基于AT89C51 单片机为核心器件,程序设计采用C 语言,Keil 软件编译程序,配以相关外围接口电路,实现了方波、锯齿波、正弦波、三角波、梯形波五种特定波形的产生【论文+源码】

    【作品名称】:基于AT89C51 单片机为核心器件,程序设计采用C 语言,Keil 软件编译程序,配以相关外围接口电路,实现了方波、锯齿波、正弦波、三角波、梯形波五种特定波形的产生【论文+源码】 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】:本设计中的波形发生器系统要求基于51单片机,因此选用以AT89C51单片机作为整个系统的控制核心,应用其强大的接口功能,构成整个波形发生器的硬件系统。使用C 语言对单片机编程可产生相应的正弦波,方波,三角波,锯齿波梯形波波形信号。在程序运行时,当接收到按键信息后,需要输出某种波形时,调用相应的中断服务子程序和波形发生程序,经电路的数/模转换器和运算放大器处理后,从信号发生器的输出端口输出即可得到要求的波形。 当需要改变频率时只需要改变单片机的波形发生程序中的递增或者递减变量即可。 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。

    基于java的法律咨询系统设计与实现.docx

    基于java的法律咨询系统设计与实现.docx

    适用于元营销 API 的 Python SDK.zip

    适用于元营销 API 的 Python SDK适用于 Python 的 Facebook Business SDK 介绍Facebook Business SDK是一站式服务,可帮助我们的合作伙伴更好地服务于他们的业务。合作伙伴正在使用多个 Facebook API 来满足其客户的需求。采用所有这些 API 并在各个平台上保持最新状态可能非常耗时,而且最终会造成高昂的成本。为此,Facebook 开发了 Business SDK,将其许多 API 捆绑到一个 SDK 中,以简化实施和维护。Business SDK 是 Marketing API SDK 的升级版,其中包括 Marketing API 以及来自不同平台(如 Pages、Business Manager、Instagram 等)的许多 Facebook API。快速入门商业SDK入门指南Python 目前是我们第三方开发人员最常用的语言。是一个 Python 包,它提供了您的 Python 应用程序与Business SDK 内的 Facebook APIfacebook_business之间的

    数学建模培训资料 数学建模实战题目真题答案解析解题过程&论文报告 公交车调度的运作数学模型 共12页.pdf

    数学建模培训资料 数学建模实战题目真题答案解析解题过程&论文报告 公交车调度的运作数学模型 共12页.pdf

    基于smart-socket实现的轻量级http服务器

    smart-http 是一款可编程的 Http 应用微内核,方便用户根据自身需求进行 Server 或 Client 的应用开发。支持GET、POST的 HTTP 请求。提供了 URL 路由组件,可以快速搭建一套静态服务器。支持部分 RFC2612 规范,后续会逐渐完善。支持 Https 协议,由 smart-socket 为其赋能。具备文件上传的能力。支持 websocket、Cookie支持 Server、Client 开发

    新闻资讯系统 微信小程序+SpringBoot毕业设计 源码+数据库+论文+启动教程.zip

    新闻资讯系统 微信小程序+SpringBoot毕业设计 源码+数据库+论文+启动教程 项目启动教程:https://www.bilibili.com/video/BV1oiBpYcEBp

    高校师生工作室-JAVA-基于微信小程序的高校师生工作室管理系统的设计与实现

    高校师生工作室-JAVA-基于微信小程序的高校师生工作室管理系统的设计与实现

    基于java的常见小儿疾病中医护理系统设计与实现.docx

    基于java的常见小儿疾病中医护理系统设计与实现.docx

    本教程播放列表涵盖了 Python 中的数据结构和算法 每个教程都有数据结构或算法背后的理论、BIG O 复杂性分析和可供练习的练习 .zip

    本教程播放列表涵盖了 Python 中的数据结构和算法。每个教程都有数据结构或算法背后的理论、BIG O 复杂性分析和可供练习的练习。使用 Python 的数据结构和算法本教程涵盖了 Python 中的数据结构和算法。每个教程都包含数据结构或算法背后的理论、BIG O 复杂度分析以及可供练习的练习。要观看视频,您可以访问播放列表https://www.youtube.com/playlist?list=PLeo1K3hjS3uu_n_a__MI_KktGTLYopZ12订阅 codebasics youtube 频道https://www.youtube.com/c/codebasics

    数学建模学习资料 蒙特卡罗方法课件教程 第2章.随机数 共29页.pptx

    数学建模学习资料 蒙特卡罗方法课件教程 第2章.随机数 共29页.pptx

    python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业)

    python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目,评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为课程设计、期末大作业。 python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业)python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目,评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为课程设计、期末大作业。python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大三学期的期末大作业、经导师指导并认可通过的高分大作业设计项目,评审分98分。主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为课程设计、期末大作业。python实现基于CNN网络的新闻数据集文本分类源码+数据集(Python期末大作业),个人大

    中小学知识产权教育试点学校申报表.doc

    中小学知识产权教育试点学校申报表.doc

    基于django的音乐推荐系统.zip

    基于django的音乐推荐系统.zip

    在建工程涉及专项行动情况检查表.docx

    在建工程涉及专项行动情况检查表.docx

    毕设源码-python-django基于python技术的学生管理系统的设计与开发-期末大作业+说明文档.rar

    本项目是一个基于Python技术的学生管理系统,采用Django框架进行开发,旨在为计算机相关专业的学生提供一个实践性强、功能全面的管理系统,以帮助他们完成毕业设计或进行项目实战练习。 系统实现了对学生信息、课程信息、成绩、考勤等多方面的管理功能。学生信息管理包括学生基本信息的增删改查;课程信息管理允许管理员设置课程信息,包括课程名称、授课老师、学分等;成绩管理功能使学生和教师能够录入、查看和修改成绩;考勤管理则方便教师记录学生的出勤情况。 该项目采用B/S架构,前端使用HTML、CSS、JavaScript等技术,后端使用Python语言和Django框架,数据库采用MySQL。Django框架提供了强大的后台管理功能,使得系统管理更加便捷。 通过开发这个项目,学生不仅能提升自己的编程能力,还能学习到如何构建一个实际应用的系统,对于即将步入职场的学生来说,具有很高的实用价值。

Global site tag (gtag.js) - Google Analytics