拆分流程设计与列表

OpenAuth.Mvc/OpenAuth.Mvc.csproj

@@ -205,6 +205,7 @@
     <Content Include="js\flow-ui\img\wallbg.png" />
     <Content Include="js\utils\flowlayout.js" />
     <Content Include="js\utils\ui.js" />
+    <Content Include="userJs\flowSchemes.js" />
     <Content Include="userJs\nodeInfo.js" />
     <Content Include="userJs\categories.js" />
     <Content Include="userJs\assign.js" />
@@ -233,7 +234,7 @@
     <Content Include="images\userface5.jpg" />
     <Content Include="images\wechat.jpg" />
     <Content Include="userJs\flowInstances.js" />
-    <Content Include="userJs\flowSchemes.js" />
+    <Content Include="userJs\flowSchemeDesign.js" />
     <Content Include="userJs\modules.js" />
     <Content Include="js\queryString.js" />
     <Content Include="userJs\orgs.js" />
@@ -644,6 +645,7 @@
     <Content Include="Views\FlowInstances\Index.cshtml" />
     <Content Include="Views\FlowSchemes\Index.cshtml" />
     <Content Include="Views\FlowSchemes\NodeInfo.cshtml" />
+    <Content Include="Views\FlowSchemes\Design.cshtml" />
   </ItemGroup>
   <ItemGroup />
   <ItemGroup>

OpenAuth.Mvc/Views/FlowSchemes/Design.cshtml

@@ -0,0 +1,89 @@
+
+@section header
+{
+    <link rel="stylesheet" href="/css/treetable.css" />
+    <link href="/js/flow-ui/flow.css" rel="stylesheet" />
+}
+
+<form class="layui-form" action="" id="formEdit">
+    <input type="hidden" name="Id" v-model="Id" />
+
+    <div class="layui-row">
+        <div class="layui-tab layui-tab-brief" lay-filter="tab">
+            <ul class="layui-tab-title">
+                <li class="layui-this">基本信息</li>
+                <li>选择表单</li>
+                <li>流程设计</li>
+            </ul>
+            <div class="layui-tab-content">
+                <div class="layui-tab-item layui-show">
+                    <input type="hidden" id="FrmId" name="FrmId" v-model="FrmId" />
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">流程编号</label>
+                        <div class="layui-input-block">
+                            <input type="text" name="SchemeCode" v-model="SchemeCode" required lay-verify="required"
+                                   placeholder="流程编号" autocomplete="off" class="layui-input">
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">流程名称</label>
+                        <div class="layui-input-block">
+                            <input type="text" name="SchemeName" v-model="SchemeName" required lay-verify="required"
+                                   placeholder="流程名称" autocomplete="off" class="layui-input">
+                        </div>
+                    </div>
+
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">模板权限类型0所有人,1指定成员</label>
+                        <div class="layui-input-block">
+                            <input type="radio" name="AuthorizeType" value="1" title="value1" checked>
+                            <input type="radio" name="AuthorizeType" value="0" title="value2">
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">排序码</label>
+                        <div class="layui-input-block">
+                            <input type="radio" name="SortCode" value="1" title="value1" checked>
+                            <input type="radio" name="SortCode" value="0" title="value2">
+                        </div>
+                    </div>
+
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">有效</label>
+                        <div class="layui-input-block">
+                            <input type="radio" name="Disabled" value="1" title="value1" checked>
+                            <input type="radio" name="Disabled" value="0" title="value2">
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">备注</label>
+                        <div class="layui-input-block">
+                            <input type="text" name="Description" v-model="Description"
+                                   placeholder="备注" autocomplete="off" class="layui-input">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="layui-tab-item">
+                    <ul id="frmTree" class="ztree" style="display: inline-block; width: 180px; padding: 10px; border: 1px solid #ddd; overflow: auto;"></ul>
+                    <div id="frmPreview"></div>
+                </div>
+
+                <div class="layui-tab-item">
+                    <div id="flowPanel" style=""></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="layui-form-item">
+        <div class="layui-input-block">
+            <button class="layui-btn" lay-submit>立即提交</button>
+            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
+        </div>
+    </div>
+</form>
+
+<script type="text/javascript" src="/layui/layui.js"></script>
+<script type="text/javascript" src="/userJs/flowSchemeDesign.js?v2"></script>
+

OpenAuth.Mvc/Views/FlowSchemes/Index.cshtml

@@ -1,7 +1,6 @@
 @section header
 {
     <link rel="stylesheet" href="/css/treetable.css" />
-    <link href="/js/flow-ui/flow.css" rel="stylesheet" />
 }
 <blockquote class="layui-elem-quote news_search toolList">
     @Html.Action("MenuHeader", "Home")
@@ -35,87 +34,6 @@
     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
 </script>
 
-<!--用户添加/编辑窗口-->
-<div id="divEdit" style="display: none">
-    <form class="layui-form" action="" id="formEdit">
-        <input type="hidden" name="Id" v-model="Id" />
-
-        <div class="layui-row">
-            <div class="layui-tab layui-tab-brief" lay-filter="tab">
-                <ul class="layui-tab-title">
-                    <li class="layui-this">基本信息</li>
-                    <li>选择表单</li>
-                    <li>流程设计</li>
-                </ul>
-                <div class="layui-tab-content">
-                    <div class="layui-tab-item layui-show">
-                        <input type="hidden" id="FrmId" name="FrmId" v-model="FrmId" />
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">流程编号</label>
-                            <div class="layui-input-block">
-                                <input type="text" name="SchemeCode" v-model="SchemeCode" required lay-verify="required"
-                                       placeholder="流程编号" autocomplete="off" class="layui-input">
-                            </div>
-                        </div>
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">流程名称</label>
-                            <div class="layui-input-block">
-                                <input type="text" name="SchemeName" v-model="SchemeName" required lay-verify="required"
-                                       placeholder="流程名称" autocomplete="off" class="layui-input">
-                            </div>
-                        </div>
-
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">模板权限类型0所有人,1指定成员</label>
-                            <div class="layui-input-block">
-                                <input type="radio" name="AuthorizeType" value="1" title="value1" checked>
-                                <input type="radio" name="AuthorizeType" value="0" title="value2">
-                            </div>
-                        </div>
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">排序码</label>
-                            <div class="layui-input-block">
-                                <input type="radio" name="SortCode" value="1" title="value1" checked>
-                                <input type="radio" name="SortCode" value="0" title="value2">
-                            </div>
-                        </div>
-
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">有效</label>
-                            <div class="layui-input-block">
-                                <input type="radio" name="Disabled" value="1" title="value1" checked>
-                                <input type="radio" name="Disabled" value="0" title="value2">
-                            </div>
-                        </div>
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">备注</label>
-                            <div class="layui-input-block">
-                                <input type="text" name="Description" v-model="Description"
-                                       placeholder="备注" autocomplete="off" class="layui-input">
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="layui-tab-item">
-                        <ul id="frmTree" class="ztree" style="display: inline-block; width: 180px; padding: 10px; border: 1px solid #ddd; overflow: auto;"></ul>
-                        <div id="frmPreview"></div>
-                    </div>
-                   
-                    <div class="layui-tab-item">
-                        <div id="flowPanel" style=""></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="layui-row">
-            <div class="layui-input-block">
-                <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
-                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
-            </div>
-        </div>
-    </form>
-</div>
-
 <script type="text/javascript" src="/layui/layui.js"></script>
 <script type="text/javascript" src="/userJs/flowSchemes.js?v2"></script>
 

OpenAuth.Mvc/js/utils/flowlayout.js

@@ -1,7 +1,7 @@
-layui.define("jquery",
+layui.define(["jquery","layer"],
     function(exports) {
         var $ = layui.jquery;
-
+        var layer = layui.layer;
         //初始化设计流程器
         $.fn.flowdesign = function(options) {
             var $frmpreview = $(this);
@@ -84,14 +84,14 @@
                     case "startround":
                         _startroundFlag++;
                         if (_fromlines[_node.id] == undefined) {
-                            dialogTop("开始节点无法流转到下一个节点", "error");
+                            layer.msg("开始节点无法流转到下一个节点");
                             return -1;
                         }
                         break;
                     case "endround":
                         _endroundFlag++;
                         if (_tolines[_node.id] == undefined) {
-                            dialogTop("无法流转到结束节点", "error");
+                            layer.msg("无法流转到结束节点");
                             return -1;
                         }
                         break;
@@ -107,43 +107,43 @@
                         _flag = true;
                         break;
                     default:
-                        dialogTop("节点数据异常,请重新登录下系统！", "error");
+                        layer.msg("节点数据异常,请重新登录下系统！");
                         return -1;
                         break;
                     }
                     if (_flag) {
                         if (_tolines[_node.id] == undefined) {
                             labellingRedNode(_node.id);
-                            dialogTop("标注红色的节点没有【进来】的连接线段", "error");
+                            layer.msg("标注红色的节点没有【进来】的连接线段");
                             return -1;
                         }
                         if (_fromlines[_node.id] == undefined) {
                             labellingRedNode(_node.id);
-                            dialogTop("标注红色的节点没有【出去】的连接线段", "error");
+                            layer.msg("标注红色的节点没有【出去】的连接线段");
                             return -1;
                         }
                     }
                     _nodes[_node.id] = _node;
                 }
                 if (_startroundFlag == 0) {
-                    dialogTop("必须有开始节点", "error");
+                    layer.msg("必须有开始节点");
                     return -1;
                 }
 
                 if (_endroundFlag == 0) {
-                    dialogTop("必须有结束节点", "error");
+                    layer.msg("必须有结束节点");
                     return -1;
                 }
 
                 if (_fnodes.length != _hnodes.length) {
-                    dialogTop("分流节点必须等于合流节点", "error");
+                    layer.msg("分流节点必须等于合流节点");
                     return -1;
                 }
                 for (var a in _fnodes) {
                     var aNondeid = _fnodes[a];
                     if (_fromlines[aNondeid].length == 1) {
                         labellingRedNode(aNondeid);
-                        dialogTop("标注红色的分流节点不允许只有一条【出去】的线段", "error");
+                        layer.msg("标注红色的分流节点不允许只有一条【出去】的线段");
                         return -1;
                     }
                     var _hhnodeid = {};
@@ -155,33 +155,33 @@
                             var _nextNode = _nodes[_nextLine[0]];
                             if (_nextNode.type != "confluencenode") {
                                 labellingRedNode(_nodes[btoNode].id);
-                                dialogTop("标注红色的普通节点下一个节点必须是合流节点", "error");
+                                layer.msg("标注红色的普通节点下一个节点必须是合流节点");
                                 return -1;
                             } else {
                                 _hhnodeid[_nextLine[0]] = 0;
                                 if (_hhnodeid.length > 1) {
                                     labellingRedNode(aNondeid);
-                                    dialogTop("标注红色的分流节点与之对应的合流节点只能有一个", "error");
+                                    layer.msg("标注红色的分流节点与之对应的合流节点只能有一个");
                                     return -1;
                                 }
                                 if (_tolines[_nextLine[0]].length != _fromlines[aNondeid].length) {
                                     labellingRedNode(_nextLine[0]);
-                                    dialogTop("标注红色的合流节点与之对应的分流节点只能有一个", "error");
+                                    layer.msg("标注红色的合流节点与之对应的分流节点只能有一个");
                                     return -1;
                                 }
                             }
                             if (_nextLine.length > 1) {
                                 labellingRedNode(_nodes[btoNode].id);
-                                dialogTop("标注红色的节点只能有一条出去的线条【分流合流之间】", "error");
+                                layer.msg("标注红色的节点只能有一条出去的线条【分流合流之间】");
                                 return -1;
                             } else if (_tolines[_nodes[btoNode].id], length > 1) {
                                 labellingRedNode(_nodes[btoNode].id);
-                                dialogTop("标注红色的节点只能有一条进来的线条【分流合流之间】", "error");
+                                layer.msg("标注红色的节点只能有一条进来的线条【分流合流之间】");
                                 return -1;
                             }
                         } else {
                             labellingRedNode(aNondeid);
-                            dialogTop("标注红色的分流节点必须经过一个普通节点到合流节点", "error");
+                            layer.msg("标注红色的分流节点必须经过一个普通节点到合流节点");
                             return -1;
                         }
                     }

OpenAuth.Mvc/userJs/flowSchemeDesign.js

@@ -0,0 +1,159 @@
+layui.config({
+    base: "/js/"
+}).use(['form', 'vue', 'ztree', 'layer', 'queryString', 'element', 'jquery', 'table', 'droptree', 'openauth', 'flow-ui/gooflow', 'utils/flowlayout'], function () {
+    var form = layui.form, element = layui.element,
+		//layer = (parent == undefined || parent.layer === undefined )? layui.layer : parent.layer,
+        layer = layui.layer,
+        $ = layui.jquery;
+    var table = layui.table;
+    var openauth = layui.openauth;
+     var id = $.getUrlParam("id");   //ID
+    var update = (id != '');
+    //提交的URL
+    var url = "/FlowSchemes/Add";
+
+    var vm = new Vue({
+        el: "#formEdit"
+    });
+
+    //表单选择
+    var frmTree = function () {
+        var zTreeObj;
+        var setting = {
+            view: { selectedMulti: true },
+            check: {
+                enable: true,
+                chkStyle: "checkbox",
+                chkboxType: { "Y": "", "N": "" } //去掉勾选时级联
+            },
+            data: {
+                key: {
+                    name: 'Name',
+                    title: 'Name'
+                },
+                simpleData: {
+                    enable: true,
+                    idKey: 'Id',
+                    pIdKey: 'ParentId',
+                    rootPId: 'null'
+                }
+            },
+            callback: {
+                onClick: function (event, treeId, treeNode) {
+                    var id = treeNode.Id;
+                    $.get("/forms/previewdata?id=" + id, function (data) {
+                        $("#frmPreview").html(data);
+                    });
+                },
+                onCheck: function (event, treeId, treeNode) {
+                    $("#FrmId").val(treeNode.Id);
+                }
+            }
+        };
+
+        var load = function () {
+            var url = '/forms/load';
+            $.getJSON(url, function (json) {
+                zTreeObj = $.fn.zTree.init($("#frmTree"), setting);
+                zTreeObj.addNodes(null, json.data);
+
+                $("#menutree").html("点击预览表单效果");
+                zTreeObj.expandAll(true);
+            });
+        };
+
+        var setCheck = function (id) {    //设置已经选中的表单
+            if (id == null | id == '') return;
+            var node = zTreeObj.getNodeByParam("Id", id, null);
+            zTreeObj.checkNode(node, true, false);
+
+            $.get("/forms/previewdata?id=" + id, function (data) {
+                $("#frmPreview").html(data);
+            });
+        }
+
+        return {
+            load: load,
+            setCheck: setCheck
+        }
+    }();
+
+    /*=========流程设计（begin）======================*/
+    var flowDesignPanel = $('#flowPanel').flowdesign({
+        height: 500,
+        widht: 700,
+        OpenNode: function (object) {
+            FlowDesignObject = object;  //为NodeInfo窗口提供调用
+
+            if (object.$nodeData[object.$focus].type == 'startround') {
+                return false;
+            }
+
+            layer.open({
+                type: 2,
+                area: ['500px', '450px'], //宽高
+                maxmin: true, //开启最大化最小化按钮
+                title: '节点设置【' + object.$nodeData[object.$focus].name + '】',
+                content: '/flowschemes/nodeInfo',
+                btn: ['保存', '关闭'],
+                yes: function (index, layero) {
+                    var body = layer.getChildFrame('body', index);
+                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
+                    var nodedata = iframeWin.getVal();
+                    flowDesignPanel.SetNodeEx(object.$focus, nodedata);
+                    layer.close(index);
+                },
+                cancel: function (index) {
+                    layer.close(index);
+                }
+            });
+        },
+        OpenLine: function (id, object) {
+            lay.msg("暂不能设置分支条件");
+            return;
+        }
+    });
+    /*=========流程设计（end）=====================*/
+
+
+    frmTree.load();
+
+    if (update) {
+        $.get('/fllowschemes/get?id=' + id,
+            function (data) {
+                url = "/FlowSchemes/Update";
+                vm.$set('$data', data);
+                flowDesignPanel.loadData(JSON.parse(data.SchemeContent));
+                frmTree.setCheck(data.FrmId);
+            });
+    } else {
+        vm.$set('$data',
+            {
+                Id: ''
+            });
+    }
+
+
+    //提交数据
+    form.on('submit()',
+        function (data) {
+            var content = flowDesignPanel.exportDataEx();
+            if (content == -1) return false;
+            var schemecontent = {
+                SchemeContent: JSON.stringify(content)
+            }
+
+            $.extend(data.field, schemecontent);
+            $.post(url,
+                data.field,
+                function (result) {
+                    layer.msg(result.Message);
+                },
+                "json");
+            return false;
+        });
+
+      submit = function() {
+         $("#formEdit").submit();
+     }
+})

OpenAuth.Mvc/userJs/flowSchemes.js

@@ -1,6 +1,6 @@
 layui.config({
     base: "/js/"
-}).use(['form', 'vue', 'ztree', 'layer', 'element', 'jquery', 'table', 'droptree', 'openauth', 'flow-ui/gooflow', 'utils/flowlayout'], function () {
+}).use(['form', 'vue', 'ztree', 'layer', 'element', 'jquery', 'table', 'droptree', 'openauth'], function () {
     var form = layui.form, element = layui.element,
 		//layer = (parent == undefined || parent.layer === undefined )? layui.layer : parent.layer,
         layer = layui.layer,
@@ -66,108 +66,6 @@
         }
     }();
 
-    var vm = new Vue({
-        el: "#formEdit"
-    });
-
-    //表单选择
-    var frmTree = function () {
-        var zTreeObj;
-        var setting = {
-            view: { selectedMulti: true },
-            check: {
-                enable: true,
-                chkStyle: "checkbox",
-                chkboxType: { "Y": "", "N": "" } //去掉勾选时级联
-            },
-            data: {
-                key: {
-                    name: 'Name',
-                    title: 'Name'
-                },
-                simpleData: {
-                    enable: true,
-                    idKey: 'Id',
-                    pIdKey: 'ParentId',
-                    rootPId: 'null'
-                }
-            },
-            callback: {
-                onClick: function (event, treeId, treeNode) {
-                    var id = treeNode.Id;
-                    $.get("/forms/previewdata?id=" + id, function (data) {
-                        $("#frmPreview").html(data);
-                    });
-                },
-                onCheck: function (event, treeId, treeNode) {
-                    $("#FrmId").val(treeNode.Id);
-                }
-            }
-        };
-
-        var load = function () {
-            var url = '/forms/load';
-            $.getJSON(url, function (json) {
-                zTreeObj = $.fn.zTree.init($("#frmTree"), setting);
-                zTreeObj.addNodes(null, json.data);
-
-                $("#menutree").html("点击预览表单效果");
-                zTreeObj.expandAll(true);
-            });
-        };
-
-        var setCheck = function (id) {    //设置已经选中的表单
-            if (id == null | id == '') return;
-            var node = zTreeObj.getNodeByParam("Id", id, null);
-            zTreeObj.checkNode(node, true, false);
-
-            $.get("/forms/previewdata?id=" + id, function (data) {
-                $("#frmPreview").html(data);
-            });
-        }
-
-        return {
-            load: load,
-            setCheck: setCheck
-        }
-    }();
-
-    /*=========流程设计（begin）======================*/
-    var flowDesignPanel = $('#flowPanel').flowdesign({
-        height: 500,
-        widht: 700,
-        OpenNode: function (object) {
-            FlowDesignObject = object;  //为NodeInfo窗口提供调用
-
-            if (object.$nodeData[object.$focus].type == 'startround') {
-                return false;
-            }
-
-            layer.open({
-                type: 2,
-                area: ['500px', '450px'], //宽高
-                maxmin: true, //开启最大化最小化按钮
-                title: '节点设置【' + object.$nodeData[object.$focus].name + '】',
-                content: '/flowschemes/nodeInfo',
-                btn: ['保存', '关闭'],
-                yes: function (index, layero) {
-                    var body = layer.getChildFrame('body', index);
-                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
-                    var nodedata = iframeWin.getVal();
-                    flowDesignPanel.SetNodeEx(object.$focus, nodedata);
-                    layer.close(index);
-                },
-                cancel: function (index) {
-                    layer.close(index);
-                }
-            });
-        },
-        OpenLine: function (id, object) {
-            lay.msg("暂不能设置分支条件");
-            return;
-        }
-    });
-    /*=========流程设计（end）=====================*/
 
     //添加（编辑）对话框
     var editDlg = function () {
@@ -176,43 +74,23 @@
         var show = function (data) {
             var title = update ? "编辑信息" : "添加";
 
-            frmTree.load();
-
             layer.open({
+                type: 2,
+                area: ['600px', '500px'], //宽高
+                maxmin: true, //开启最大化最小化按钮
                 title: title,
-                area: ["800px", "600px"],
+                content: '/flowschemes/design?id='+data.Id,
-                type: 1,
+                btn: ['保存', '关闭'],
-                content: $('#divEdit'),
+                yes: function (index, layero) {
-                success: function () {
+                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
-                    vm.$set('$data', data);
+                    iframeWin.submit();
-                    if (update) {
+                    layer.close(index);
-                        flowDesignPanel.loadData(JSON.parse(data.SchemeContent));
+                    mainList();
-                        frmTree.setCheck(data.FrmId);
-                    }
                 },
-                end: mainList
+                cancel: function (index) {
+                    layer.close(index);
+                }
             });
-            var url = "/FlowSchemes/Add";
-            if (update) {
-                url = "/FlowSchemes/Update";
-            }
-            //提交数据
-            form.on('submit(formSubmit)',
-                function (data) {
-                    var content = flowDesignPanel.exportDataEx();
-                    var schemecontent = {
-                        SchemeContent: JSON.stringify(content)
-                    }
-
-                    $.extend(data.field, schemecontent);
-                    $.post(url,
-                        data.field,
-                        function (data) {
-                            layer.msg(data.Message);
-                        },
-                        "json");
-                    return false;
-                });
         }
         return {
             add: function () { //弹出添加