• 工作流程在线编辑


    身为一个码农,在家无事想想最近的项目需要用到工作流,由于之前对工作流不太熟悉,在家学习一下petri net经典工作流,然后用html5画出流程图顺便学习一下h5的画图功能,没有做不到只有想不到,一个上午就能弄出一个不错的成果,使用了一个在线开源的画图框架,参考:http://jointjs.com

    效果图和源码如下

    <!DOCTYPE html>
    <html lang="en">
    <script>
    
        function addAction() {
            var a= new joint.shapes.basic.Rect({
                position: { x:0, y: 30 },
                size: {  50, height: 50 },
                attrs: { rect: { fill: 'green','stroke-width': 2, stroke: 'black' }, text: { text: '提交', fill: 'white' } }
            });
    
    
            a.on('batch:start', function(element) {
    
                be(this);
            });
            graph.addCell(a);
        }
    
        function addPlace() {
    
    
            var r = new joint.shapes.basic.Rect({
                position: { x: 0, y: 30 },
                size: {  100, height: 100 },
                attrs: { rect: { fill: 'blue',rx:45,ry:45,'stroke-width': 2, stroke: 'black' }, text: { text: '开始', fill: 'white' } }
            });
    
            r.on('batch:start', function(element) {
    
                be(this);
            });
            graph.addCell(r);
        }
        function addLink() {
    
    
            var l = new joint.dia.Link({
                source: { x: 170, y: 200 }, target: { x: 480, y: 200 },
                attrs: {
                    // Define a filter for the whole link (special selector '.' means the root element )
                    '.': { filter: { name: 'dropShadow', args: { dx: 1, dy: 1, blur: 2 } } },
                    '.connection': {
                        stroke: 'blue'
                    },
    
                    '.marker-target': {  fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
                }
            });
            graph.addCell(l);
        }
    
        var obj;
        function saveLabel() {
    
            var label=$("#name").val();
            obj.attr({text:{text:label}});
        }
    
        function be(element) {
            obj=element;
    
            $("#name").val(element.attr('text').text);
        }
        function deleteEl() {
            obj.remove();
        }
    </script>
    
    <head>
    
        <link rel="stylesheet" type="text/css" href="js/joint.css" />
        <script src="js/jquery.min.js"></script>
        <script src="js/lodash.min.js"></script>
        <script src="js/backbone-min.js"></script>
        <script src="js/joint.js"></script>
        <meta charset="UTF-8">
        <title>WF</title>
    </head>
    <body>
    <a href="#"  onclick="addLink()" >线</a>
    <a href="#"  onclick="addPlace()">圆</a>
    <a href="#" onclick="addAction()">动作</a>
    <input type="text" id="name"/> <input type="button"  onclick="saveLabel()" value="更新"/> <input id="eid" type="hidden" >
    <input type="button"  onclick="deleteEl()" value="删除"/>
    
    <div id="myholder"></div>
    
    <script type="text/javascript">
    
        var graph = new joint.dia.Graph;
    
        var paper = new joint.dia.Paper({
            el: $('#myholder'),
             600,
            height: 200,
            model: graph,
            gridSize: 1
        });
    
        var rect = new joint.shapes.basic.Rect({
            position: { x: 100, y: 30 },
            size: {  100, height: 100 },
            attrs: { rect: { fill: 'blue',rx:45,ry:45,'stroke-width': 2, stroke: 'black' }, text: { text: '开始', fill: 'white' } }
        });
    
    
        var action= new joint.shapes.basic.Rect({
            position: { x:400, y: 30 },
            size: {  50, height: 50 },
            attrs: { rect: { fill: 'green','stroke-width': 2, stroke: 'black' }, text: { text: '提交', fill: 'white' } }
        });
    
        var action2=action.clone();
        action2.attr({text: { text: '拒绝'}});
        action2.translate(0,100);
    
    
        var rect2 = rect.clone();
        rect2.attr({text: { text: '结束'},rect:{fill:'red'}});
        rect2.translate(500);
    
    
    
    
    
    
        var link = new joint.dia.Link({
            source: { id: rect.id },
            target: { id: action.id }
        });
        link.attr({
            '.connection': { stroke: 'blue' },
    
            '.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
        });
    
    
       var link2= new joint.dia.Link({
           source: { id: rect.id },
           target: { id: action2.id },
       });
    
        var link3= new joint.dia.Link({
            source: { id: action.id },
            target: { id: rect2.id }
        });
        var link4=  new joint.dia.Link({
            source: { id: action2.id },
            target: { id: rect2.id }
        });
    
        link2.attr({
            '.connection': { stroke: 'blue' },
    
            '.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
        });
        link3.attr({
            '.connection': { stroke: 'blue' },
    
            '.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
        });
        link4.attr({
            '.connection': { stroke: 'blue' },
    
            '.marker-target': { fill: 'black', d: 'M 10 0 L 0 5 L 10 10 z' }
        });
        graph.addCells([rect, rect2,action2,action, link,link2,link3,link4]);
    
    
        var es=graph.getElements();
        for(var x in  es){
            es[x].on('batch:start', function(element) {
    
                be(this);
            });
    
        }
        var jsonString='{"cells":[{"type":"basic.Rect","position":{"x":1441,"y":191},"size":{"width":100,"height":100},"angle":0,"id":"42a8eec4-d3b3-4043-945f-176fa52e2620","embeds":"","z":2,"attrs":{"rect":{"fill":"red","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"结束"}}},{"type":"basic.Rect","position":{"x":1360,"y":347},"size":{"width":50,"height":50},"angle":0,"id":"70918a68-1486-4e30-ade6-cf955927ecbe","z":10,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"拒绝"}}},{"type":"basic.Rect","position":{"x":0,"y":143},"size":{"width":100,"height":100},"angle":0,"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce","z":11,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"开始"}}},{"type":"basic.Rect","position":{"x":275,"y":126},"size":{"width":100,"height":100},"angle":0,"id":"4b73a5d6-7c6f-4bcb-b9dd-154ffb3bfed7","z":12,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"部门经理审批"}}},{"type":"basic.Rect","position":{"x":518,"y":123},"size":{"width":100,"height":100},"angle":0,"id":"fb9a74cd-43c5-436c-9e84-7dc1429bef2b","z":13,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"领导审批"}}},{"type":"basic.Rect","position":{"x":169,"y":45},"size":{"width":50,"height":50},"angle":0,"id":"66d7f43a-22ce-4e08-b965-a386221770d8","z":14,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"提交"}}},{"type":"basic.Rect","position":{"x":434,"y":44},"size":{"width":50,"height":50},"angle":0,"id":"a0847725-3376-4aa7-91b0-dfe7066cbdec","z":15,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"同意"}}},{"type":"basic.Rect","position":{"x":703,"y":44},"size":{"width":50,"height":50},"angle":0,"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a","z":16,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"同意"}}},{"type":"basic.Rect","position":{"x":859,"y":5},"size":{"width":100,"height":100},"angle":0,"id":"38ca9ad9-fe69-440a-8dfa-a639900449aa","z":17,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"财务"}}},{"type":"basic.Rect","position":{"x":865,"y":195},"size":{"width":100,"height":100},"angle":0,"id":"675a2c82-c557-4f80-8b8e-e27153811c8b","z":18,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"法规"}}},{"type":"basic.Rect","position":{"x":867,"y":428},"size":{"width":100,"height":100},"angle":0,"id":"f337347e-f12d-4771-bdda-24fd0909e437","z":19,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"安全"}}},{"type":"basic.Rect","position":{"x":1219,"y":186},"size":{"width":100,"height":100},"angle":0,"id":"9e3b9ac2-d850-4d2a-93d3-fd571ccf3987","z":20,"attrs":{"rect":{"fill":"blue","stroke":"black","rx":45,"ry":45,"stroke-width":2},"text":{"fill":"white","text":"副总审批 "}}},{"type":"basic.Rect","position":{"x":427,"y":318},"size":{"width":50,"height":50},"angle":0,"id":"ef55a7fb-c1a9-4de5-aec8-a86e891fd6ba","z":21,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"拒绝"}}},{"type":"basic.Rect","position":{"x":708,"y":321},"size":{"width":50,"height":50},"angle":0,"id":"4b3cab8c-d8d6-453d-9005-874322ada2bb","z":22,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"拒绝"}}},{"type":"basic.Rect","position":{"x":1067,"y":156},"size":{"width":50,"height":50},"angle":0,"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50","z":23,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"同意"}}},{"type":"basic.Rect","position":{"x":1074,"y":341},"size":{"width":50,"height":50},"angle":0,"id":"404cdecb-3bf6-4929-a075-223fa884aeac","z":24,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"拒绝"}}},{"type":"link","source":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"target":{"id":"66d7f43a-22ce-4e08-b965-a386221770d8"},"id":"995c5172-989e-4c7a-9a65-b6efea8ce181","z":25,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"66d7f43a-22ce-4e08-b965-a386221770d8"},"target":{"id":"4b73a5d6-7c6f-4bcb-b9dd-154ffb3bfed7"},"id":"0b34dc7a-20bb-4863-809e-340e604551e1","z":26,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"4b73a5d6-7c6f-4bcb-b9dd-154ffb3bfed7"},"target":{"id":"a0847725-3376-4aa7-91b0-dfe7066cbdec"},"id":"72fb5b27-5909-4c56-9d46-b3f301698610","z":27,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"a0847725-3376-4aa7-91b0-dfe7066cbdec"},"target":{"id":"fb9a74cd-43c5-436c-9e84-7dc1429bef2b"},"id":"11eb8b08-b8d1-4693-b09a-f9307d835c01","z":28,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"fb9a74cd-43c5-436c-9e84-7dc1429bef2b"},"target":{"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a"},"id":"828fc9f5-2f63-41f1-80bc-239d78766337","z":29,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a"},"target":{"id":"38ca9ad9-fe69-440a-8dfa-a639900449aa"},"id":"c8f1465e-6367-47fa-afdd-1c985253efde","z":30,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a"},"target":{"id":"675a2c82-c557-4f80-8b8e-e27153811c8b"},"id":"5e033ddc-5381-454b-8c5d-e55bad13e9d4","z":31,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"e6d0d2e3-0f74-4a14-873e-fc426863e17a"},"target":{"id":"f337347e-f12d-4771-bdda-24fd0909e437"},"id":"614be384-7c7c-43ff-ad69-3bc23d7a5631","z":32,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"4b73a5d6-7c6f-4bcb-b9dd-154ffb3bfed7"},"target":{"id":"ef55a7fb-c1a9-4de5-aec8-a86e891fd6ba"},"id":"8dbb0c9b-496b-45c9-b9a1-0f94aef5a768","z":33,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"ef55a7fb-c1a9-4de5-aec8-a86e891fd6ba"},"target":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"id":"db307ebf-b0f8-489a-8a64-58046f3a679c","z":34,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"4b3cab8c-d8d6-453d-9005-874322ada2bb"},"target":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"id":"9de66737-94e6-45df-8f67-cd10a43f9f01","z":35,"vertices":[{"x":414,"y":405}],"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"fb9a74cd-43c5-436c-9e84-7dc1429bef2b"},"target":{"id":"4b3cab8c-d8d6-453d-9005-874322ada2bb"},"id":"08171308-3b37-47a3-834b-dca995c09307","z":36,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"38ca9ad9-fe69-440a-8dfa-a639900449aa"},"target":{"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50"},"id":"05ffd282-c5e6-4b34-82c3-17c3ccc571a4","z":37,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"675a2c82-c557-4f80-8b8e-e27153811c8b"},"target":{"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50"},"id":"6939d31e-1889-4f22-85f7-e78d4ef42fc7","z":38,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"f337347e-f12d-4771-bdda-24fd0909e437"},"target":{"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50"},"id":"b1100370-6730-40fd-a8a3-6cf08de96c4f","z":39,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"bfc2b861-2624-41ef-a202-7d99a71eaa50"},"target":{"id":"9e3b9ac2-d850-4d2a-93d3-fd571ccf3987"},"id":"386a5acd-917d-456c-95f8-4ce843f790ec","z":40,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"38ca9ad9-fe69-440a-8dfa-a639900449aa"},"target":{"id":"404cdecb-3bf6-4929-a075-223fa884aeac"},"id":"f3f5ff6a-445f-4b13-aca6-d2c2f4450c02","z":41,"vertices":[],"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"675a2c82-c557-4f80-8b8e-e27153811c8b"},"target":{"id":"404cdecb-3bf6-4929-a075-223fa884aeac"},"id":"57bc88ab-7322-4dcf-98e6-0d6e540d53c8","z":42,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"f337347e-f12d-4771-bdda-24fd0909e437"},"target":{"id":"404cdecb-3bf6-4929-a075-223fa884aeac"},"id":"bceba379-ccc4-4c3b-a801-13322b37f028","z":43,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"404cdecb-3bf6-4929-a075-223fa884aeac"},"target":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"id":"7573005b-f7a4-4444-805b-48310f7107d8","z":44,"vertices":[{"x":998,"y":574},{"x":642,"y":587}],"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"basic.Rect","position":{"x":1328,"y":86},"size":{"width":50,"height":50},"angle":0,"id":"32b2061f-38bc-4533-88ac-2e4808bea895","z":45,"attrs":{"rect":{"fill":"green","stroke":"black","stroke-width":2},"text":{"fill":"white","text":"提交"}}},{"type":"link","source":{"id":"9e3b9ac2-d850-4d2a-93d3-fd571ccf3987"},"target":{"id":"32b2061f-38bc-4533-88ac-2e4808bea895"},"id":"817bfd11-c7ad-4614-b6e3-4455112468b9","z":46,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"32b2061f-38bc-4533-88ac-2e4808bea895"},"target":{"id":"42a8eec4-d3b3-4043-945f-176fa52e2620"},"id":"f4ab5069-f56d-4b03-85cb-5f76c28d00dc","z":47,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"id":"9e3b9ac2-d850-4d2a-93d3-fd571ccf3987"},"target":{"id":"70918a68-1486-4e30-ade6-cf955927ecbe"},"id":"a5556cbb-cd85-409b-8e59-24e73fda4d3b","z":48,"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}},{"type":"link","source":{"x":1366,"y":394},"target":{"id":"f08d945a-2882-4b9a-8a78-9b54d56e33ce"},"id":"4850ecd7-4b18-402c-a9b3-b913f6bc2c08","z":49,"vertices":[{"x":1212,"y":380},{"x":1179,"y":379},{"x":1147,"y":380},{"x":868,"y":575},{"x":748,"y":586}],"attrs":{".":{"filter":{"name":"dropShadow","args":{"dx":1,"dy":1,"blur":2}}},".connection":{"stroke":"blue"},".marker-target":{"fill":"black","d":"M 10 0 L 0 5 L 10 10 z"}}}]}';
        graph.fromJSON(JSON.parse(jsonString))
    
    
    </script>
    </body>
    </html>
    </html>
    
  • 相关阅读:
    PHP IDE NetBeans代码主题和除掉竖线解决方案
    初识Python
    从LazyPhp说起
    从Pycharm说起
    准备系统地研究一下"高性能网站开发",挑战很大,希望能坚持到底!
    IIS日志分析[资源]
    见一好东西:Threaded WebDownload class with Progress Callbacks
    ASP.net Application 中使用域用户登录
    看图找错
    汉字转拼音缩写的函数(C#)
  • 原文地址:https://www.cnblogs.com/hellohongfu/p/5768188.html
Copyright © 2020-2023  润新知