<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
+ path + "/";
|
%>
|
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
|
<title>Start节点设置</title>
|
<link href="static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
|
<link href="static/plugins/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css">
|
<link rel="stylesheet" type="text/css" href="static/plugins/jquery-easyui/themes/icon.css">
|
<!--layer-->
|
<link rel="stylesheet" href="static/plugins/layer/skin/default/layer.css" type="text/css">
|
<link rel="stylesheet" href="static/styles/material-teal.css" type="text/css">
|
<link rel="stylesheet" href="static/styles/initialize.css" type="text/css">
|
<link rel="stylesheet" href="static/styles/common.css" type="text/css">
|
|
<script type="text/javascript" src="static/plugins/jquery-easyui/jquery.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/jquery.easyui.min.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
|
<script type="text/javascript" src="static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
|
<style>
|
html, body {
|
height: 100%;
|
width: 100%;
|
overflow: hidden;
|
}
|
|
.panel-body {
|
|
}
|
|
.ptbody table td {
|
font-size: 16px;
|
color: #000;
|
}
|
|
.ptbody table td p {
|
margin-bottom: 10px;
|
}
|
|
.pt-form-btn {
|
bottom: 0;
|
}
|
|
.datagrid-header td {
|
font-weight: 700;
|
}
|
|
.ptbody table {
|
margin: 0px
|
}
|
|
.ptbody>table {
|
margin: 20px auto;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="pt-main-top2">
|
<span class="pt-title-icon pt-title-icon2">
|
<i class="fa fa-share-alt"></i>
|
</span>
|
<h4>开始节点设置</h4>
|
<div class="pt-nav-tab2 easyui-tabs" style="width:100%;" data-options="plain:true">
|
<div title="基本属性" class="pt-nav-list">
|
<div class="pt-form">
|
<form id="ff" method="post">
|
<div class="ptbody">
|
<table style="width: 100%;">
|
<tr>
|
<td class="tbtitle" style="width: 140px;">
|
<em class="pt-color-danger">*</em> 节点ID：
|
</td>
|
<td>
|
<input id="nodeId" name="nodeId" class="easyui-textbox" type="text" data-options="required:true,readonly:true" style="width:500px;" value="" />
|
</td>
|
</tr>
|
<tr>
|
<td class="tbtitle" style="width: 140px;">
|
<em class="pt-color-danger">*</em> 节点名称：
|
</td>
|
<td>
|
<input id="nodeName" name="nodeName" class="easyui-textbox" type="text" data-options="required:true" style="width:500px;" value="" />
|
</td>
|
</tr>
|
|
</table>
|
</div>
|
</form>
|
|
</div>
|
</div>
|
<div title="事件" class="pt-nav-list">
|
<div class="" style="position: relative;">
|
<form>
|
<div class="ptbody" style="padding:10px 30px 0;">
|
|
<div class="pull-right">
|
<a href="javascript:;" onclick="newEvent();" class="pt-btn pt-btn-success">
|
<i class="fa fa-plus"></i>
|
添加
|
</a>
|
|
</div>
|
<table id="dg_Event" style="width:100%;"></table>
|
</div>
|
</form>
|
</div>
|
|
</div>
|
|
<div title="节点参数" class="pt-nav-list">
|
<div class="" style="position: relative;">
|
|
<div class="ptbody" style="padding:10px 30px 0;">
|
<!--<div class="pt-note"><p>说明:参数仅用于当前节点,一般用于标记跟当前节点相关的业务数据。</p></div>-->
|
|
<div class="pull-right">
|
<a href="javascript:;" onclick="newNodeParam();" class="pt-btn pt-btn-success">
|
<i class="fa fa-plus"></i>
|
添加
|
</a>
|
</div>
|
|
<table id="dg_NodeParam" style="width:100%;"></table>
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="dlg-event" class="easyui-dialog" style="width: 600px" closed="true" buttons="#dlg-event-buttons">
|
<form id="form_event" method="post" style="margin: 0; padding: 20px 50px">
|
<div style="margin-bottom: 20px; font-size: 14px; border-bottom: 1px solid #ccc">事件设置</div>
|
<div style="margin-bottom: 10px">
|
<input name="EventId" id="EventId" class="easyui-textbox" data-options="label:'事件ID',labelAlign:'right',labelWidth:80,prompt:'不需要填写，自动生成...'" style="width: 100%" readonly="true" />
|
</div>
|
<div style="margin-bottom: 10px">
|
<input name="EventName" id="EventName" class="easyui-textbox" required="true" data-options="label:'事件名称',labelAlign:'right',labelWidth:80,prompt:'请输入事件名称...'" style="width: 100%" />
|
</div>
|
<div style="margin-bottom: 10px">
|
|
<select id="EventType" class="easyui-combobox" name="EventType" label="事件类型" labelPosition="right" labelWidth="80" labelAlign="right" style="width:100%;">
|
<option value="1" selected>进入节点时</option>
|
<option value="2">打开节点时</option>
|
<option value="3">操作完成前</option>
|
<option value="4">离开节点时</option>
|
<option value="5">办理人员变更时</option>
|
</select>
|
</div>
|
<div style="margin-bottom: 10px">
|
<input name="EventImplement" id="EventImplement" class="easyui-textbox" required="true" data-options="label:'事件实现类',labelAlign:'right',labelWidth:80,prompt:'请输入事件实现类...'" style="width: 100%" />
|
</div>
|
</form>
|
</div>
|
<div id="dlg-event-buttons">
|
<input type="hidden" id="eventEditIndex" value="">
|
<a href="javascript:void(0)" class="easyui-linkbutton button-green" onclick="saveEvent()" style="width: 90px;">保存</a>
|
<a href="javascript:void(0)" class="easyui-linkbutton button-grayish" onclick="javascript:$('#dlg-event').dialog('close');" style="width: 90px;">取消</a>
|
</div>
|
|
<div id="dlg-NodeParam" class="easyui-dialog" style="width: 600px" closed="true" buttons="#dlg-NodeParam-buttons">
|
<form id="form_NodeParam" method="post" style="margin: 0; padding: 20px 50px">
|
<div style="margin-bottom: 20px; font-size: 14px; border-bottom: 1px solid #ccc">节点参数设置</div>
|
<div style="margin-bottom: 10px">
|
<input name="NodeParamId" id="NodeParamId" class="easyui-textbox" data-options="label:'参数ID',labelAlign:'right',labelWidth:80,prompt:'不需要填写，自动生成...'" style="width: 100%" readonly="true" />
|
</div>
|
<div style="margin-bottom: 10px">
|
<input name="NodeParamName" id="NodeParamName" class="easyui-textbox" required="true" data-options="label:'参数名称',labelAlign:'right',labelWidth:80,prompt:'请输入参数名称...'" style="width: 100%" />
|
</div>
|
<div style="margin-bottom: 10px">
|
|
<input name="NodeParamValue" id="NodeParamValue" class="easyui-textbox" required="true" data-options="label:'参数名称',labelAlign:'right',labelWidth:80,prompt:'请输入参数值...'" style="width: 100%" />
|
</div>
|
|
</form>
|
</div>
|
<div id="dlg-NodeParam-buttons">
|
<input type="hidden" id="nodeParamEditIndex" value="">
|
<a href="javascript:void(0)" class="easyui-linkbutton button-green" onclick="saveNodeParam()" style="width: 90px;">保存</a>
|
<a href="javascript:void(0)" class="easyui-linkbutton button-grayish" onclick="javascript:$('#dlg-NodeParam').dialog('close');" style="width: 90px;">取消</a>
|
</div>
|
<div class="pt-form-btn">
|
<div class="form-group">
|
<button class="pt-btn pt-btn-primary" id="btn_save" onclick="save();">确定</button>
|
<button class="pt-btn pt-btn-default" onclick="cancel();">取消</button>
|
|
</div>
|
</div>
|
</div>
|
<script type="text/javascript" src="static/scripts/ResizeScroll.js"></script>
|
<script>
|
$(function() {
|
|
var data = parent.document.getElementById("hide_node").value;
|
data = JSON.parse(data);
|
$("#nodeId").textbox("setValue", data.id);
|
$("#nodeName").textbox("setValue", data.text);
|
|
//事件
|
var eventData = [];
|
if (data.content && data.content.eventData) {
|
eventData = data.content.eventData;
|
}
|
var dg_Event = $('#dg_Event').datagrid({
|
data : eventData,
|
fitColumns : true,
|
height : 300,
|
idField : "EventId",
|
columns : [ [
|
{
|
field : 'EventId',
|
title : '事件Id',
|
width : 100,
|
align : 'center'
|
},
|
{
|
field : 'EventName',
|
title : '事件名称',
|
width : 100,
|
align : 'center'
|
},
|
|
{
|
field : 'EventTypeName',
|
title : '事件类型',
|
width : 100,
|
align : 'center'
|
},
|
{
|
field : 'EventType',
|
title : '事件类型',
|
width : 100,
|
hidden : true,
|
align : 'center'
|
},
|
{
|
field : 'EventImplement',
|
title : '事件实现类',
|
width : 100,
|
hidden : true,
|
align : 'center'
|
},
|
{
|
field : 'caozuo',
|
title : '操作',
|
width : 100,
|
align : 'center',
|
formatter : function(value, row, index) {
|
return '<a href="javascript:;" onclick="editEvent(this);" class="pt-btn pt-btn-purple"><i class="fa fa-pencil"></i>修改</a><a href="javascript:;" onclick="deleteEvent(this);" class="pt-btn pt-btn-danger"><i class="fa fa-trash-o"></i>删除</a>';
|
}
|
},
|
] ]
|
});
|
|
//节点参数
|
var nodeParamData = [];
|
if (data.content && data.content.nodeParamData) {
|
nodeParamData = data.content.nodeParamData;
|
}
|
var dg_NodeParam = $('#dg_NodeParam').datagrid({
|
data : nodeParamData,
|
fitColumns : true,
|
height : 300,
|
idField : "NodeParamId",
|
columns : [ [
|
{
|
field : 'NodeParamId',
|
title : '参数Id',
|
width : 100,
|
align : 'center'
|
},
|
{
|
field : 'NodeParamName',
|
title : '参数名称',
|
width : 100,
|
align : 'center'
|
},
|
|
{
|
field : 'NodeParamValue',
|
title : '参数值',
|
width : 100,
|
align : 'center'
|
},
|
|
{
|
field : 'caozuo',
|
title : '操作',
|
width : 100,
|
align : 'center',
|
formatter : function(value, row, index) {
|
return '<a href="javascript:;" onclick="editNodeParam(this);" class="pt-btn pt-btn-purple"><i class="fa fa-pencil"></i>修改</a><a href="javascript:;" onclick="deleteNodeParam(this);" class="pt-btn pt-btn-danger"><i class="fa fa-trash-o"></i>删除</a>';
|
}
|
},
|
] ]
|
});
|
|
new ResizeScroll({
|
"id" : ".ptbody",
|
fun : function() {
|
var wh = $(window).height();
|
return (wh - 52 - 69);
|
|
}
|
});
|
|
})
|
|
//保存
|
function save() {
|
var valid = $("#nodeName").textbox("isValid");
|
if (valid) {
|
//有效
|
var id = $("#nodeId").textbox("getValue");
|
var text = $("#nodeName").textbox("getValue");
|
//事件
|
var eventData = $("#dg_Event").datagrid("getRows");
|
//节点参数
|
var nodeParamData = $("#dg_NodeParam").datagrid("getRows");
|
|
var data = {
|
"id" : id,
|
"text" : text,
|
"content" : {
|
"eventData" : eventData,
|
"nodeParamData" : nodeParamData
|
}
|
};
|
var strdata = JSON.stringify(data);
|
parent.document.getElementById("hide_node").value = strdata;
|
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
parent.resetStartNode(index);
|
}
|
}
|
|
function cancel() {
|
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
parent.closeWin(index);
|
}
|
|
function newEvent() { //新建事件
|
$('#dlg-event').dialog('open').dialog('center').dialog('setTitle', '新建事件');
|
$('#form_event').form('clear');
|
$('#EventType').combobox("setValue", 1);
|
}
|
function editEvent(target) { //编辑事件
|
var tr = $(target).closest('tr.datagrid-row');
|
var index = parseInt(tr.attr('datagrid-row-index'));
|
var rows = $('#dg_Event').datagrid('getRows');
|
var row = rows[index];
|
if (row) {
|
$('#dlg-event').dialog('open').dialog('center').dialog('setTitle', '修改事件');
|
$('#form_event').form('load', row);
|
$('#eventEditIndex').val(index);
|
|
}
|
}
|
|
function deleteEvent(target) { //删除事件
|
var tr = $(target).closest('tr.datagrid-row');
|
var index = parseInt(tr.attr('datagrid-row-index'));
|
$("#dg_Event").datagrid("deleteRow", index);
|
}
|
|
function saveEvent() { //保存事件
|
|
if (!$("#form_event").form('validate')) {
|
return;
|
}
|
var eventId = $("#EventId").textbox("getValue");
|
var isNew = false;
|
if ($.trim(eventId) == "") {
|
//创建id
|
var eventId = (new Date()).getTime();
|
isNew = true;
|
}
|
var eventName = $("#EventName").textbox("getValue");
|
var eventImplement = $("#EventImplement").textbox("getValue");
|
var eventType = $("#EventType").combobox("getValue");
|
|
var eventTypeName = $("#EventType").combobox("getText")
|
|
if (isNew) {
|
$('#dg_Event').datagrid('appendRow', {
|
"EventName" : eventName,
|
"EventTypeName" : eventTypeName,
|
"EventType" : eventType,
|
"EventId" : eventId,
|
"EventImplement" : eventImplement
|
});
|
} else {
|
|
var i = $("#eventEditIndex").val();
|
$("#dg_Event").datagrid('updateRow', {
|
index : i,
|
row : {
|
"EventName" : eventName,
|
"EventTypeName" : eventTypeName,
|
"EventType" : eventType,
|
"EventImplement" : eventImplement
|
}
|
});
|
}
|
|
|
$('#dlg-event').dialog('close');
|
}
|
|
|
|
function newNodeParam() { //新建节点参数
|
$('#dlg-NodeParam').dialog('open').dialog('center').dialog('setTitle', '新建节点参数');
|
$('#form_NodeParam').form('clear');
|
|
}
|
|
function editNodeParam(target) { //编辑节点参数
|
var tr = $(target).closest('tr.datagrid-row');
|
var index = parseInt(tr.attr('datagrid-row-index'));
|
var rows = $('#dg_NodeParam').datagrid('getRows');
|
var row = rows[index];
|
if (row) {
|
$('#dlg-NodeParam').dialog('open').dialog('center').dialog('setTitle', '修改节点参数');
|
$('#form_NodeParam').form('load', row);
|
$('#nodeParamEditIndex').val(index);
|
|
}
|
}
|
|
function deleteNodeParam(target) { //删除节点参数
|
var tr = $(target).closest('tr.datagrid-row');
|
var index = parseInt(tr.attr('datagrid-row-index'));
|
$("#dg_NodeParam").datagrid('deleteRow', index);
|
|
}
|
|
function saveNodeParam() { //保存节点参数
|
|
if (!$("#form_NodeParam").form('validate')) {
|
return;
|
}
|
var nodeParamId = $("#NodeParamId").textbox("getValue");
|
var isNew = false;
|
if ($.trim(nodeParamId) == "") {
|
//创建id
|
var nodeParamId = (new Date()).getTime();
|
isNew = true;
|
}
|
var nodeParamName = $("#NodeParamName").textbox("getValue");
|
var nodeParamValue = $("#NodeParamValue").textbox("getValue");
|
|
|
if (isNew) {
|
$('#dg_NodeParam').datagrid('appendRow', {
|
"NodeParamId" : nodeParamId,
|
"NodeParamName" : nodeParamName,
|
"NodeParamValue" : nodeParamValue
|
});
|
} else {
|
|
var i = $("#nodeParamEditIndex").val();
|
$("#dg_NodeParam").datagrid('updateRow', {
|
index : i,
|
row : {
|
"NodeParamName" : nodeParamName,
|
"NodeParamValue" : nodeParamValue
|
}
|
});
|
}
|
|
|
$('#dlg-NodeParam').dialog('close');
|
}
|
</script>
|
</body>
|
</html>
|
