myflow.js实现一个流程编辑器效果代码
代码语言：html
所属分类：其他
代码描述：myflow.js实现一个流程编辑器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/raphael.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.10.3.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/myflow.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/myflow.jpdl4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/myflow.editors.js"></script>
<style type="text/css">
html{
height: 100%;
width: 100%;
}
body {
margin: 0;
pading: 0;
text-align: left;
font-family: Arial, sans-serif, Helvetica, Tahoma;
font-size: 12px;
line-height: 1.5;
color: black;
background-image: url(//repo.bfw.wiki/bfwrepo/images/myflow/bg.png);
position: relative;
}
.mover {
/*border: 1px solid #ddd;*/
background-color: #ddd;
}
.selected {
background-color: #ddd;
}
#pointer {
background-repeat: no-repeat;
background-position: center;
}
#path {
background-repeat: no-repeat;
background-position: center;
}
#task {
background-repeat: no-repeat;
background-position: center;
}
#state {
background-repeat: no-repeat;
background-position: center;
}
img {
display: inline-block;
vertical-align: middle;
}
.node {
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 8px;
margin: 3px 0;
box-sizing: border-box;
text-align: left;
vertical-align: middle;
}
.node:hover{
background-color: #ddd
}
.node img {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
vertical-align: middle;
}
.ui-widget-header{
line-height: 36px;
font-size: 12px;
text-align: center;
color: #fff;
background: #353c48;
}
.ui-widget-content{
border: 1px solid #dfe2e5;
background: #fff;
}
#myflow_tools {
position: fixed;
top: 10px;
left: 10px;
cursor: default;
z-index: 10;
padding: 10px;
border: 2px solid #dfe2e5;
background-color: #ffffff;
}
#myflow_props {
position: fixed;
top: 30px;
right: 50px;
z-index: 101;
background-color: #fff;
width: 220px;
padding: 3px;
}
#myflow_props table {
width: 100%;
border: none;
cellpadding:0;
cellspacing:0;
}
#myflow_props th, #myflow_props td{
padding: 2px 5px;
color: #94a1b2;
background: #fff;
border: none;
border: none;
}
#myflow_props th {
width: auto;
letter-spacing: 2px;
text-align: left;
}
#myflow_props td {
min-width: 90px;
}
#myflow_props input {
line-height: 30px;
height: 34px;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
border: 1px solid #ced0da
}
.tools_box, .props_box {
position: relative;
z-index: 11;
}
#delete {
width: 90px;
padding: 0 8px;
text-align: left;
}
.readonly {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
background-color: transparent;
width: 100%;
height: 100%;
z-index: 102;
}
.cover {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
z-index: 10001;
}
.cover>.box{
position: absolute;
top: 15%;
left: 50%;
width: 400px;
height:180px;
margin-left: -200px;
border: 1px solid #cccccc;
background-color: #ffffff;
z-index: 10002;
cursor: pointer;
}
.cover>.box>h4{
padding: 0;
margin: 0;
height: 35px;
line-height: 35px;
font-size: 18px;
border-bottom: 1px solid #edeeee;
background: #f8f8f8;
}
.cover>.box>h4>.title{
float: left;
margin-left: 15px;
}
.cover>.box>h4>.cancel{
float: right;
display: block;
margin: 8px 8px 0 0;
width: 17px;
height: 17px;
background:url("//repo.bfw.wiki/bfwrepo/images/myflow/cls.png") no-repeat left top;
}
.cover>.box>p{
margin-top: 40px;
text-align: center;
font-size: 14px;
}
.line {
width: 100%;
height: 2px;
margin: 5px 0;
background-color: #dfe2e5;
}
</style>
<script type="text/javascript">
$(function () {
var is_save=true;
$(document).click(function(e){
is_save=true;
e.stopPropagation(); //防止冒泡
});
//暂存事件
$("#linshi_save").click(function(e){
is_save=false;
$("#myflow_save").trigger("click"); //触发保存事件
e.stopPropagation(); //防止冒泡
});
$('#myflow').myflow(
{
basePath: "",
restore: eval("({\"states\":{\"rect1\":{\"type\":\"join\",\"text\":{\"text\":\"合并\"},\"attr\":{\"x\":752,\"y\":259,\"width\":48,\"height\":48},\"props\":{\"show\":{\"value\":\"合并\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect2\":{\"type\":\"start\",\"text\":{\"text\":\"开始\"},\"attr\":{\"x\":249,\"y\":265,\"width\":48,\"height\":48},\"props\":{\"show\":{\"value\":\"开始\"}}},\"rect3\":{\"type\":\"end\",\"text\":{\"text\":\"结束\"},\"attr\":{\"x\":891,\"y\":531,\"width\":48,\"height\":48},\"props\":{\"show\":{\"value\":\"结束\"}}},\"rect4\":{\"type\":\"task\",\"text\":{\"text\":\"部门1\"},\"attr\":{\"x\":378,\"y\":264,\"width\":100,\"height\":50},\"props\":{\"text\":{\"value\":\"部门1\"},\"rolename\":{\"value\":\"::\"},\"groupname\":{\"value\":\":\"},\"localkey\":{\"value\":\"\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect6\":{\"type\":\"task\",\"text\":{\"text\":\"部门2\"},\"attr\":{\"x\":548,\"y\":185,\"width\":100,\"height\":50},\"props\":{\"text\":{\"value\":\"部门2\"},\"rolename\":{\"value\":\"::\"},\"groupname\":{\"value\":\":\"},\"localkey\":{\"value\":\"\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect7\":{\"type\":\"subprocess\",\"text\":{\"text\":\"子流程\"},\"attr\":{\"x\":552,\"y\":431,\"width\":100,\"height\":50},\"props\":{\"show\":{\"value\":\"子流程\"},\"processname\":{\"value\":\"\"},\"invariablekey\":{\"value\":\"\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect10\":{\"type\":\"time\",\"text\":{\"text\":\"定时器\"},\"attr\":{\"x\":1037,\"y\":256,\"width\":48,\"height\":48},\"props\":{\"show\":{\"value\":\"定时器\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect13\":{\"type\":\"error\",\"text\":{\"text\":\"错误2\"},\"attr\":{\"x\":622,\"y\":393,\"width\":24,\"height\":24},\"props\":{\"show\":{\"value\":\"错误2\"}}},\"rect15\":{\"type\":\"task\",\"text\":{\"text\":\"部门3\"},\"attr\":{\"x\":551,\"y\":327,\"width\":100,\"height\":50},\"props\":{\"text\":{\"value\":\"部门3\"},\"rolename\":{\"value\":\"::\"},\"groupname\":{\"value\":\":\"},\"localkey\":{\"value\":\"\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect19\":{\"type\":\"auto\",\"text\":{\"text\":\"自动\"},\"attr\":{\"x\":555,\"y\":530,\"width\":100,\"height\":50},\"props\":{\"show\":{\"value\":\"自动\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect21\":{\"type\":\"task\",\"text\":{\"text\":\"部门5\"},\"attr\":{\"x\":863,\"y\":257,\"width\":100,\"height\":50},\"props\":{\"text\":{\"value\":\"部门5\"},\"rolename\":{\"value\":\"::\"},\"groupname\":{\"value\":\":\"},\"localkey\":{\"value\":\"\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect28\":{\"type\":\"fork\",\"text\":{\"text\":\"静态分支\"},\"attr\":{\"x\":572,\"y\":73,\"width\":48,\"height\":48},\"props\":{\"show\":{\"value\":\"静态分支\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect32\":{\"type\":\"error\",\"text\":{\"text\":\"错误1\"},\"attr\":{\"x\":633,\"y\":138,\"width\":24,\"height\":24},\"props\":{\"show\":{\"value\":\"错误1\"}}},\"rect33\":{\"type\":\"task\",\"text\":{\"text\":\"部门4\"},\"attr\":{\"x\":860,\"y\":72,\"width\":100,\"height\":50},\"props\":{\"text\":{\"value\":\"部门4\"},\"rolename\":{\"value\":\"::\"},\"groupname\":{\"value\":\":\"},\"localkey\":{\"value\":\"\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect36\":{\"type\":\"task\",\"text\":{\"text\":\"部门6\"},\"attr\":{\"x\":864,\"y\":436,\"width\":100,\"height\":50},\"props\":{\"text\":{\"value\":\"部门6\"},\"rolename\":{\"value\":\"::\"},\"groupname\":{\"value\":\":\"},\"localkey\":{\"value\":\"\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect42\":{\"type\":\"foreach\",\"text\":{\"text\":\"动态分支\"},\"attr\":{\"x\":890,\"y\":348,\"width\":48,\"height\":48},\"props\":{\"show\":{\"value\":\"动态分支\"},\"foreachlist\":{\"value\":\"集合\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect46\":{\"type\":\"task\",\"text\":{\"text\":\"任务\"},\"attr\":{\"x\":1015,\"y\":346,\"width\":100,\"height\":50},\"props\":{\"text\":{\"value\":\"任务\"},\"rolename\":{\"value\":\"::\"},\"groupname\":{\"value\":\":\"},\"localkey\":{\"value\":\"\"},\"transformationGlobal\":{\"value\":\"\"}}}},\"paths\":{\"path14\":{\"from\":\"rect2\",\"to\":\"rect4\",\"dots\":[],\"text\":{\"text\":\"TO 任务\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path16\":{\"from\":\"rect4\",\"to\":\"rect6\",\"dots\":[],\"text\":{\"text\":\"TO 任务\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path17\":{\"from\":\"rect4\",\"to\":\"rect15\",\"dots\":[],\"text\":{\"text\":\"TO 任务\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path18\":{\"from\":\"rect15\",\"to\":\"rect7\",\"dots\":[],\"text\":{\"text\":\"TO 子流程\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path20\":{\"from\":\"rect7\",\"to\":\"rect19\",\"dots\":[],\"text\":{\"text\":\"TO 自动\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path24\":{\"from\":\"rect6\",\"to\":\"rect1\",\"dots\":[],\"text\":{\"text\":\"TO 合并\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path25\":{\"from\":\"rect15\",\"to\":\"rect1\",\"dots\":[],\"text\":{\"text\":\"TO 合并\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path26\":{\"from\":\"rect1\",\"to\":\"rect21\",\"dots\":[],\"text\":{\"text\":\"TO 任务\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path27\":{\"from\":\"rect21\",\"to\":\"rect10\",\"dots\":[],\"text\":{\"text\":\"TO 定时器\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path29\":{\"from\":\"rect6\",\"to\":\"rect28\",\"dots\":[],\"text\":{\"text\":\"TO 静态分支\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path34\":{\"from\":\"rect28\",\"to\":\"rect33\",\"dots\":[],\"text\":{\"text\":\"TO 任务\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path35\":{\"from\":\"rect33\",\"to\":\"rect21\",\"dots\":[],\"text\":{\"text\":\"TO 任务\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path39\":{\"from\":\"rect36\",\"to\":\"rect3\",\"dots\":[],\"text\":{\"text\":\"TO 结束\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path43\":{\"from\":\"rect21\",\"to\":\"rect42\",\"dots\":[],\"text\":{\"text\":\"TO 动态分支\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path44\":{\"from\":\"rect42\",\"to\":\"rect36\",\"dots\":[],\"text\":{\"text\":\"TO 部门6\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path45\":{\"from\":\"rect19\",\"to\":\"rect3\",\"dots\":[],\"text\":{\"text\":\"TO 结束\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path47\":{\"from\":\"rect10\",\"to\":\"rect46\",\"dots\":[],\"text\":{\"text\":\"TO 任务\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}},\"path48\":{\"from\":\"rect46\",\"to\":\"rect42\",\"dots\":[],\"text\":{\"text\":\"TO 动态分支\"},\"textPos\":{\"x\":0,\"y\":-10},\"props\":{\"show\":{\"value\":\"\"},\"xpath\":{\"value\":\"\"}}}},\"props\":{\"props\":{\"name\":{\"value\":\"新建流程\"},\"globalkey\":{\"value\":\"\"}}}})"),
// 前台
//restore: eval("({states:{rect1:{type:'start',text:{text:'开始'},attr:{x:402,y:101,width:50,height:50},props:{show:{value:'开始'}}},rect2:{type:'end',text:{text:'结束'},attr:{x:912,y:708,width:50,height:50},props:{show:{value:'结束'}}},rect3:{type:'task',text:{text:'主办省稽核'},attr:{x:529,y:100,width:100,height:50},props:{text:{value:'主办省稽核'},rolename:{value:'#{homecompany}:省接口人:rzbsjhry'},groupname:{value:':'},localkey:{value:''},transformationGlobal:{value:''}}},rect4:{type:'task',text:{text:'重新提交'},attr:{x:882,y:257,width:100,height:50},props:{text:{value:'重新提交'},rolename:{value:':提单人:rs[createuser]'},groupname:{value:':'},localkey:{value:''},transformationGlobal:{value:''}}},rect5:{type:'task',text:{text:'政企稽核'},attr:{x:528,y:254,width:100,height:50},props:{text:{value:'政企稽核'},rolename:{value:'#{homecompany}:VPN业务调度员:rzqjh'},groupname:{value:':'},localkey:{value:''},transformationGlobal:{value:''}}},rect6:{type:'task',text:{text:'网络部'},attr:{x:198,y:407,width:100,height:50},props:{text:{value:'网络部'},rolename:{value:':网络部:'},groupname:{value:':'},localkey:{value:''},transformationGlobal:{value:''}}},rect7:{type:'task',text:{text:'系统处理送网络部'},attr:{x:505,y:405,width:147,height:50},props:{text:{.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0