OpenAuth.Net/OpenAuth.Mvc/Areas/FlowManage/Views/FlowDesign/FlowSchemeBuider.cshtml

493 lines
20 KiB
Plaintext
Raw Normal View History

2017-01-12 19:24:52 +08:00
@{
ViewBag.Title = "流程设计器";
Layout = "~/Views/Shared/_FlowForm.cshtml";
}
<script>
var keyValue = request('keyValue');
var postData = {};//提交数据
var flowData = {};
var frmData = {};
var SchemeContentOld;
var frmapp;
var shcemeAuthorizeData = "";
var AllAuthorizeCheckData = {};
$(function () {
initialPage();
})
//初始化页面
function initialPage() {
$('#step-1 .panel-body').height($(window).height() - 228);
$('#Description').height($(window).height() - 385);
$('#DesignateMemberlist').height($(window).height() - 141);
$('#Treebackground').height($(window).height() - 131);
2017-01-13 19:26:36 +08:00
$('#step-2 .tab-content').height($(window).height() - 167);
2017-01-12 19:24:52 +08:00
initFrmInfo();
initFlowInfo();
//加载导向
$('#wizard').wizard().on('change', function (e, data) {
var $finish = $("#btn_finish");
var $next = $("#btn_next");
if (data.direction == "next") {
switch (data.step) {
case 1:
if (!bindingBase())
{
return false;
}
break;
2017-01-13 19:26:36 +08:00
case 2://绑定表单
2017-01-12 19:24:52 +08:00
if (!bindingFrm()) {
dialogTop("请选择左侧表单", "error");
return false;
}
var frmcotentls = frmapp.getData();
if (!frmcotentls) {
return false;
}
frmData.FrmContent = JSON.stringify(frmcotentls);
break;
2017-01-13 19:26:36 +08:00
case 3://流程设计
2017-01-12 19:24:52 +08:00
if (!bindingFlow())
{
return false;
}
$finish.removeAttr('disabled');
$next.attr('disabled', 'disabled');
break;
default:
break;
}
} else {
$finish.attr('disabled', 'disabled');
$next.removeAttr('disabled');
}
});
//获取表单
if (!!keyValue) {
$.SetForm({
url: "../../FlowManage/FlowDesign/GetFormJson",
param: { keyValue: keyValue },
success: function (data) {
$("#step-1").SetWebControls(data.schemeinfo);
postData["SchemeVersion"] = data.schemeinfo.SchemeVersion;
if(data.schemeinfo.EnabledMark == 3)
{
flowData["SchemeVersion"] = "cg";
}
SchemeContentOld = JSON.parse(data.schemecontent.SchemeContent);
2017-01-13 19:26:36 +08:00
2017-01-12 19:24:52 +08:00
$('#FormFrmTree').setNodeChecked(SchemeContentOld.Frm.FrmId);
frmData.FrmId = SchemeContentOld.Frm.FrmId;
setFrmInfo(SchemeContentOld.Frm);
2017-01-13 19:26:36 +08:00
2017-01-12 19:24:52 +08:00
setFlowInfo(SchemeContentOld.Flow);
}
});
}
2017-02-27 18:56:02 +08:00
GetTree('User');
2017-01-12 19:24:52 +08:00
}
/*=========基本配置begin==================================================================*/
function bindingBase()
{
if (!$('#step-1').Validform()) {
return false;
}
var _postData = $("#step-1").GetWebControls(keyValue);
postData = $.extend(postData, _postData);
return true;
}
/*=========基本配置end====================================================================*/
2017-02-27 18:56:02 +08:00
function GetTree(type) {
$.SetForm({
2017-02-28 16:51:07 +08:00
url: "/UserManager/Get" + type + "CheckTreeJson",
2017-02-27 18:56:02 +08:00
success: function (data) {
AllAuthorizeCheckData[type] = $.arrayClone(data);
//var item = {
// height: $(window).height() - 131,
// showcheck: true,
// //url: "../../FlowManage/FlowDesign/Get" + type + "CheckTreeJson",
// data: data,
// oncheckboxclick: function (item, et, s) {
// var $item = $("#" + item.mytype + "Div");
// if (et == 1) {
// var mytype = "";
// var _html = "";
// var _title = '';
// switch (item.mytype) {
// case "Role":
// mytype = "角色";
// break;
// case "Post":
// mytype = "岗位";
// break;
// case "UserGroup":
// mytype = "用户组";
// break;
// case "User":
// mytype = "用户";
// break;
// }
// _html += '<div id="' + item.id + '" data-value="' + item.mytype + '" class="card-box shcemeinfocheck active">';
// _html += ' <div class="card-box-img">';
// _html += ' <img src="/Content/images/UserCard03.png" />';
// _html += ' </div>';
// _html += ' <div class="card-box-content">';
// _html += ' <p>名称:' + item.text + '</p>';
// _html += ' <p>类别:' + mytype + '</p>';
// _html += ' </div><i></i>';
// _html += '</div>';
// $item.append(_html);
// $item.show();
// $(".card-box").click(function () {
// $(this).remove();
// $('#' + $(this).attr('data-value')).setNoCheckedNodes($(this).attr('id'));
// if ($item.find('.card-box-img').length == 0) {
// $item.hide();
// }
// })
// }
// else if (et == 0) {
// $item.find('#' + item.id).remove();
// if ($item.find('.card-box-img').length == 0) {
// $item.hide();
// }
// }
// }
//};
//$("#" + type).treeview(item);
}
});
}
2017-01-12 19:24:52 +08:00
/*=========表单选择begin==================================================================*/
var _frmdatabase = "";
var _frmflag = false;
function initFrmInfo()
{
//加载左边的树
var item = {
height: $(window).height() - 87,
url: "../../FlowManage/FormDesign/GetTreeJson",
onnodeclick: function (item) {
if (item.Sort == "Frm") {
frmData.FrmId = item.id;
if (SchemeContentOld != undefined && frmData.FrmId == SchemeContentOld.Frm.FrmId) {
setFrmInfo(SchemeContentOld.Frm);
}
else {
$.SetForm({
url: "../../FlowManage/FormDesign/GetFormJson",
param: { keyValue: item.id },
success: function (data) {
setFrmInfo(data);
}
});
}
}
else {
$('#frmdesign').hide();
$('#frmpreview').hide();
$('#frmDefaulting').show();
}
}
};
$("#FormFrmTree").treeview(item);
$(".editview").hover(function () {
$(this).find('.editviewtitle').show();
}, function (e) {
$(this).find('.editviewtitle').hide();
});
$('#editfrm').click(function () {
if (_frmflag) {
var frmcotentls = frmapp.getData();
if (!frmcotentls) {
return false;
}
frmData.FrmContent = JSON.stringify(frmcotentls);
$('#frmdesign').hide();
$('#frmDefaulting').hide();
$('#frmpreview').show();
$('#frmpreview').frmPreview({
tablecotent: frmData.FrmContent,
width: 870
});
$(this).html("编辑表单");
_frmflag = false;
}
else {
2017-01-13 19:26:36 +08:00
if ( frmData.FrmName != undefined) {
2017-01-12 19:24:52 +08:00
$('#frmpreview').hide();
$('#frmDefaulting').hide();
$('#frmdesign').show();
frmapp = $('#frmdesign').frmDesign({
Height: $(window).height() - 179,
frmContent: frmData.FrmContent
});
_frmflag = true;
$(this).html("预览表单");
}
else {
dialogTop("请选择左侧表单", "error");
}
}
return false;
});
}
//设置表单数据
function setFrmInfo(data)
{
$('#frmdesign').hide();
$('#frmDefaulting').hide();
$('#frmpreview').show();
frmData.FrmDbId = data.FrmDbId;
frmData.FrmTable = data.FrmTable;
frmData.FrmName = data.FrmName;
frmData.FrmContent = data.FrmContent;
frmData.FrmTableId = data.FrmTableId;
_frmflag = false;
$('#frmpreview').frmPreview({
tablecotent: data.FrmContent,
width:870
});
2017-01-13 19:26:36 +08:00
2017-01-12 19:24:52 +08:00
frmapp = $('#frmdesign').frmDesign({
Height: 480,
frmContent: frmData.FrmContent
});
}
function bindingFrm() {
if (frmData.FrmName == undefined)
{
return false;
}
return true;
}
/*=========表单选择end====================================================================*/
/*=========流程设计begin==================================================================*/
var FlowDesignPanel;
var FlowDesignObject;//
var LineId;
var nodePramData = [];
function initFlowInfo()
{
FlowDesignPanel = $('#FlowPanel').flowdesign({
height: ($(window).height() - 87),
widht: 1000,
OpenNode: function (object) {
FlowDesignObject = object;
if (object.$nodeData[object.$focus].type == 'startround')
{
return false;
}
2017-01-23 13:47:37 +08:00
layer.open({
type: 2,
skin: 'layui-layer-rim', //加上边框
area: ['800px', '450px'], //宽高
maxmin: true, //开启最大化最小化按钮
2017-01-12 19:24:52 +08:00
title: '节点设置【' + object.$nodeData[object.$focus].name + '】',
2017-01-23 18:25:24 +08:00
content: '/FlowManage/FlowDesign/FlowNodeForm',
btn: ['保存', '关闭'],
yes: function (index, layero) {
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象执行iframe页的方法iframeWin.method();
iframeWin.AcceptClick();
},
cancel: function (index) {
layer.close(index);
}
2017-01-12 19:24:52 +08:00
});
},
OpenLine: function (id, object) {
FlowDesignObject = object;
LineId = id;
var _line = object.$lineData[id];
var _fromNode = object.$nodeData[_line.from];
if (_fromNode.type == "shuntnode")
{
dialogTop("前一个节点是分流节点无法设置流转条件", "error");
return false;
}
2017-01-23 18:25:24 +08:00
layer.open({
type: 2,
skin: 'layui-layer-rim', //加上边框
area: ['800px', '450px'], //宽高
maxmin: true, //开启最大化最小化按钮
2017-01-12 19:24:52 +08:00
title: '流转条件设置',
2017-01-23 18:25:24 +08:00
content: '/FlowManage/FlowDesign/FlowLineForm',
btn: ['保存', '关闭'],
yes: function (index, layero) {
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象执行iframe页的方法iframeWin.method();
iframeWin.AcceptClick();
},
cancel: function (index) {
layer.close(index);
2017-01-12 19:24:52 +08:00
}
});
2017-01-23 18:25:24 +08:00
2017-01-12 19:24:52 +08:00
}
});
}
function setFlowInfo(data)
{
FlowDesignPanel.loadData(data);
}
function callBackNode(id, data, _nodePramData)
{
nodePramData = _nodePramData;
FlowDesignPanel.SetNodeEx(id, data);
}
function callBackLine(id, data)
{
FlowDesignPanel.SetLineEx(id, data);
}
function bindingFlow()
{
var _content = FlowDesignPanel.exportDataEx();
if (_content == -1)
{
return false;
}
flowData["SchemeContent"] = JSON.stringify({ "Frm": frmData, "Flow": _content });
return true;
}
/*=========流程设计end====================================================================*/
/*=========创建完成begin==================================================================*/
function finishbtn() {
postData["EnabledMark"] = 1;
2017-02-07 11:51:24 +08:00
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
2017-01-12 19:24:52 +08:00
$.SaveForm({
url: "../../FlowManage/FlowDesign/SaveForm?keyValue=" + keyValue,
param: { "InfoEntity": JSON.stringify(postData), "ContentEntity": JSON.stringify(flowData), "shcemeAuthorizeData": shcemeAuthorizeData },
loading: "正在保存数据...",
success: function () {
2017-02-07 11:51:24 +08:00
parent.layer.close(index);
2017-01-12 19:24:52 +08:00
}
})
}
/*=========创建完成end====================================================================*/
</script>
<div class="widget-body">
<div id="wizard" class="wizard" data-target="#wizard-steps">
<ul class="steps">
<li data-target="#step-1" class="active"><span class="step">1</span>基本配置<span class="chevron"></span></li>
2017-01-13 19:26:36 +08:00
<li data-target="#step-2"><span class="step">2</span>表单选择<span class="chevron"></span></li>
<li data-target="#step-3"><span class="step">3</span>流程设计<span class="chevron"></span></li>
<li data-target="#step-4"><span class="step">4</span>创建完成<span class="chevron"></span></li>
2017-01-12 19:24:52 +08:00
</ul>
</div>
<div class="step-content wizard-step-content" id="wizard-steps">
<div class="step-pane wizard-step-pane active" id="step-1">
<div class="alert alert-danger" style="text-align: left; margin-bottom: 10px;">
<i class="fa fa-warning alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
请你创建流程信息,用于创建或修改流程!
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">流程基本信息配置</h3>
</div>
<div class="panel-body" >
<table class="form">
<tr>
<td class="formTitle">流程编号<font face="宋体">*</font></td>
<td class="formValue">
<input id="SchemeCode" type="text" class="form-control" placeholder="请输入流程编号" isvalid="yes" checkexpession="NotNull" />
</td>
</tr>
<tr>
<td class="formTitle">流程名称<font face="宋体">*</font></td>
<td class="formValue">
<input id="SchemeName" type="text" class="form-control" placeholder="请输入流程名称" isvalid="yes" checkexpession="NotNull" />
</td>
</tr>
<tr>
<th class="formTitle formTitle-top">
备注
</th>
<td class="formValue">
<textarea id="Description" class="form-control"></textarea>
</td>
</tr>
</table>
</div>
</div>
</div>
2017-01-13 19:26:36 +08:00
<div class="step-pane" id="step-2">
2017-01-12 19:24:52 +08:00
<div>
<div id="FormFrmTree" class="border-right" style="width: 190px; float: left;"></div>
<div style="width: 890px;float:right;margin-right:10px;">
<div class="alert alert-danger" style="text-align: left;margin-top:10px;margin-bottom:10px;">
<i class="fa fa-question-circle alert-dismissible" style="position: relative; top: 1px; font-size: 15px; padding-right: 5px;"></i>
1、请在左侧选择需要绑定表单。2、可编辑表单(此编辑只作用与当前流程)。
</div>
<div class="tab-content editview border" style="overflow-y:auto;overflow-x:hidden;">
<div class="editviewtitle" id="editfrm">
编辑表单
</div>
<div style="width:870px;display:none;" id="frmdesign"></div>
<div class="app_layout app_preview" id="frmpreview" style="display:none;"></div>
<div id="frmDefaulting" style="width:300px;margin:140px auto 0px;text-align:center;font-size:100px;color:#0FA74F"><i class="fa fa-table"></i><div style="font-weight: bold; font-size: 24px; color: #0FA74F;margin-top: 0px;">表单预览</div></div>
</div>
</div>
</div>
</div>
2017-01-13 19:26:36 +08:00
<div class="step-pane" id="step-3">
2017-01-12 19:24:52 +08:00
<div id="FlowPanel" style="margin: 0px;">
</div>
</div>
2017-01-13 19:26:36 +08:00
<div class="step-pane" id="step-4">
2017-01-12 19:24:52 +08:00
<div class="drag-tip">
<i class="fa fa-check-circle"></i>
<p >设计完成,请点击保存</p>
</div>
</div>
</div>
<div class="form-button" id="wizard-actions">
<a id="btn_last" disabled class="btn btn-default btn-prev">上一步</a>
<a id="btn_next" class="btn btn-default btn-next">下一步</a>
<a id="btn_finish" disabled class="btn btn-success" onclick="finishbtn();">保存</a>
</div>
</div>
<style>
.editviewtitle {
position: fixed !important;
top: 117px;
right: 11px;
width: 50px;
z-index: 1000;
}
.standtab-pane {
width:224px;
border-right:1px solid #ccc;
float:left;
}
.SchemeAuthorizePanel {
width:828px;
float: left;
display:none;
}
.card-box.active {
background: url(../../Content/Images/item_close.png) right top no-repeat !important;
}
</style>