1 |
- (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-09b27d92"],{"11e2":function(e,t,i){},6287:function(e,t,i){"use strict";i.r(t);var o=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"flow-container"},[i("div",{staticClass:"toolbar"},[i("el-button-group",[i("el-button",{on:{click:e.addStartNode}},[e._v("开始节点")]),i("el-button",{on:{click:e.addProcessNode}},[e._v("流程节点")]),i("el-button",{on:{click:e.addEndNode}},[e._v("结束节点")])],1),i("el-divider",{attrs:{direction:"vertical"}}),i("el-button-group",[i("el-button",{on:{click:e.saveGraph}},[e._v("保存")]),i("el-button",{on:{click:e.exportGraph}},[e._v("导出")]),i("el-button",{on:{click:e.importGraph}},[e._v("导入")]),i("el-button",{on:{click:e.clearGraph}},[e._v("清空")])],1),i("el-divider",{attrs:{direction:"vertical"}}),i("el-button-group",[i("el-button",{attrs:{disabled:!e.canUndo},on:{click:e.undo}},[e._v("撤销")]),i("el-button",{attrs:{disabled:!e.canRedo},on:{click:e.redo}},[e._v("重做")])],1)],1),i("div",{ref:"container",staticClass:"graph-container"}),i("el-dialog",{attrs:{title:"编辑节点",visible:e.editModalVisible,width:"600px"},on:{"update:visible":function(t){e.editModalVisible=t},close:e.handleEditCancel}},[i("el-form",{attrs:{model:e.editForm,"label-width":"100px"}},[i("el-form-item",{attrs:{label:"节点名称"}},[i("el-input",{model:{value:e.editForm.label,callback:function(t){e.$set(e.editForm,"label",t)},expression:"editForm.label"}})],1),i("el-form-item",{attrs:{label:"节点类型"}},[i("el-select",{attrs:{placeholder:"请选择节点类型"},model:{value:e.editForm.type,callback:function(t){e.$set(e.editForm,"type",t)},expression:"editForm.type"}},[i("el-option",{attrs:{label:"审批节点",value:"approval"}}),i("el-option",{attrs:{label:"条件节点",value:"condition"}}),i("el-option",{attrs:{label:"执行节点",value:"action"}})],1)],1),i("el-form-item",{attrs:{label:"节点描述"}},[i("el-input",{attrs:{type:"textarea",rows:3},model:{value:e.editForm.description,callback:function(t){e.$set(e.editForm,"description",t)},expression:"editForm.description"}})],1),i("el-form-item",{attrs:{label:"节点属性"}},[e._l(e.editForm.properties,(function(t,o){return i("div",{key:o,staticClass:"property-item"},[i("el-input",{staticStyle:{width:"200px"},attrs:{placeholder:"属性名"},model:{value:t.key,callback:function(i){e.$set(t,"key",i)},expression:"prop.key"}}),i("el-input",{staticStyle:{width:"200px"},attrs:{placeholder:"属性值"},model:{value:t.value,callback:function(i){e.$set(t,"value",i)},expression:"prop.value"}}),i("el-button",{attrs:{type:"text"},on:{click:function(t){return e.removeProperty(o)}}},[e._v("删除")])],1)})),i("el-button",{attrs:{type:"text"},on:{click:e.addProperty}},[e._v("添加属性")])],2),"condition"===e.editForm.type?[i("el-form-item",{attrs:{label:"条件设置"}},[e._l(e.editForm.conditions,(function(t,o){return i("div",{key:o,staticClass:"condition-item"},[i("el-input",{staticStyle:{width:"300px"},attrs:{placeholder:"条件表达式"},model:{value:t.expression,callback:function(i){e.$set(t,"expression",i)},expression:"condition.expression"}}),i("el-input",{staticStyle:{width:"200px"},attrs:{placeholder:"条件描述"},model:{value:t.description,callback:function(i){e.$set(t,"description",i)},expression:"condition.description"}}),i("el-button",{attrs:{type:"text"},on:{click:function(t){return e.removeCondition(o)}}},[e._v("删除")])],1)})),i("el-button",{attrs:{type:"text"},on:{click:e.addCondition}},[e._v("添加条件")])],2)]:e._e()],2),i("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[i("el-button",{on:{click:e.handleEditCancel}},[e._v("取 消")]),i("el-button",{attrs:{type:"primary"},on:{click:e.handleEditOk}},[e._v("确 定")])],1)],1),i("el-dialog",{attrs:{title:"编辑连线标签",visible:e.edgeLabelModalVisible,width:"400px"},on:{"update:visible":function(t){e.edgeLabelModalVisible=t},close:e.handleEdgeLabelCancel}},[i("el-form",{attrs:{model:e.edgeLabelForm,"label-width":"80px"}},[i("el-form-item",{attrs:{label:"标签文本"}},[i("el-input",{model:{value:e.edgeLabelForm.label,callback:function(t){e.$set(e.edgeLabelForm,"label",t)},expression:"edgeLabelForm.label"}})],1)],1),i("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[i("el-button",{on:{click:e.handleEdgeLabelCancel}},[e._v("取 消")]),i("el-button",{attrs:{type:"primary"},on:{click:e.handleEdgeLabelOk}},[e._v("确 定")])],1)],1)],1)},r=[],l=(i("a4d3"),i("e01a"),i("14d9"),i("a434"),i("e9c4"),i("b64b"),i("d3b7"),i("3ca3"),i("ddb0"),i("2b3d"),i("bf19"),i("9861"),i("88a7"),i("271a"),i("5494"),i("5728")),n=(i("5c96"),{name:"FlowEditor",data:function(){return{graph:null,selectedNode:null,editModalVisible:!1,editForm:{label:"",description:"",type:"",properties:[],conditions:[]},history:null,dnd:null,selectedEdge:null,edgeLabelModalVisible:!1,edgeLabelForm:{label:""}}},computed:{canUndo:function(){var e;return(null===(e=this.history)||void 0===e?void 0:e.canUndo())||!1},canRedo:function(){var e;return(null===(e=this.history)||void 0===e?void 0:e.canRedo())||!1}},mounted:function(){var e=this;this.$nextTick((function(){e.initGraph(),e.bindEvents()}))},methods:{initGraph:function(){var e=this;this.registerCustomNodes(),this.graph=new l["h"]({container:this.$refs.container,width:"100%",height:600,grid:{type:"mesh",size:10,visible:!0},connecting:{snap:!0,allowBlank:!1,allowLoop:!1,highlight:!0,connector:"normal",anchor:"center",router:{name:"manhattan",args:{padding:20,startDirections:["bottom"],endDirections:["top"]}},connectionPoint:{name:"boundary",args:{sticky:!0}},validateMagnet:function(){return!0},createEdge:function(){return this.createEdge({attrs:{line:{stroke:"#333",strokeWidth:2,targetMarker:{name:"classic",size:8}}},labels:[{attrs:{text:{text:"",fill:"#333",fontSize:12,textAnchor:"middle",textVerticalAnchor:"middle"},rect:{fill:"#fff",stroke:"#333",strokeWidth:1,rx:3,ry:3,refWidth:"100%",refHeight:"100%",refX:0,refY:0}},position:{distance:.5,options:{absoluteDistance:!0,reverseDistance:!0,keepGradient:!0,ensureLegibility:!0}}}]})},validateConnection:function(e){var t=e.sourceCell,i=e.targetCell;return"flow-start"!==i.shape&&"flow-end"!==t.shape},defaultEdge:{attrs:{line:{stroke:"#333",strokeWidth:2,targetMarker:{name:"classic",size:8}}},router:{name:"manhattan",args:{padding:20,startDirections:["bottom"],endDirections:["top"]}},interactive:!0,vertices:!0,vertexAddable:!0,vertexMovable:!0,vertexRemovable:!0}},highlighting:{magnetAvailable:{name:"stroke",args:{padding:4,attrs:{strokeWidth:4,stroke:"#31d0c6"}}}},panning:!0,mousewheel:{enabled:!0,modifiers:["ctrl","meta"]},selecting:{enabled:!0,multiple:!0,rubberband:!0,showNodeSelectionBox:!0},snapline:!0,history:!0,clipboard:!0,interacting:{nodeMovable:!0,edgeMovable:!0,edgeLabelMovable:!1,vertexMovable:!0,vertexAddable:!0,vertexDeletable:!0}}),this.graph.on("edge:contextmenu",(function(t){var i,o=t.edge;e.selectedEdge=o;var r=(null===(i=o.getLabels())||void 0===i||null===(i=i[0])||void 0===i||null===(i=i.attrs)||void 0===i||null===(i=i.text)||void 0===i?void 0:i.text)||"";e.edgeLabelForm.label=r,e.edgeLabelModalVisible=!0})),this.graph.on("cell:dblclick",(function(t){var i=t.node;t.e;console.log("Node double clicked:",i),e.selectedNode=i;var o=i.getData()||{};e.editForm={label:i.attr("label/text")||"",description:o.description||"",type:o.type||"",properties:Array.isArray(o.properties)?o.properties:[],conditions:Array.isArray(o.conditions)?o.conditions:[]},e.editModalVisible=!0})),this.graph.on("node:click",(function(e){var t=e.node;console.log("Node clicked:",t)})),this.graph.on("edge:connected",(function(e){var t=e.edge;t.attr({line:{stroke:"#333",strokeWidth:2,targetMarker:{name:"classic",size:8}}})})),this.graph.bindKey(["meta+c","ctrl+c"],(function(){var t=e.graph.getSelectedCells();return t.length&&e.graph.copy(t),!1})),this.graph.bindKey(["meta+v","ctrl+v"],(function(){if(!e.graph.isClipboardEmpty()){var t=e.graph.paste({offset:32});e.graph.cleanSelection(),e.graph.select(t)}return!1})),this.graph.bindKey(["meta+z","ctrl+z"],(function(){return e.canUndo&&e.undo(),!1})),this.graph.bindKey(["meta+shift+z","ctrl+shift+z"],(function(){return e.canRedo&&e.redo(),!1})),this.history=this.graph.history,this.dnd=new l["Addon"].Dnd({target:this.graph})},registerCustomNodes:function(){l["h"].registerNode("flow-start",{inherit:"circle",width:60,height:60,attrs:{body:{fill:"#2ecc71",stroke:"#27ae60",magnet:!0},label:{text:"开始",fill:"#fff",fontSize:14}},markup:[{tagName:"circle",selector:"body"},{tagName:"text",selector:"label"}]}),l["h"].registerNode("flow-process",{inherit:"rect",width:120,height:60,attrs:{body:{fill:"#fff",stroke:"#333",strokeWidth:2,rx:8,ry:8,magnet:!0},label:{fontSize:14,fill:"#333"}},markup:[{tagName:"rect",selector:"body"},{tagName:"text",selector:"label"}]}),l["h"].registerNode("flow-end",{inherit:"circle",width:60,height:60,attrs:{body:{fill:"#e74c3c",stroke:"#c0392b",magnet:!0},label:{text:"结束",fill:"#fff",fontSize:14}},markup:[{tagName:"circle",selector:"body"},{tagName:"text",selector:"label"}]})},addStartNode:function(){this.graph.addNode({shape:"flow-start",x:100,y:100})},addProcessNode:function(){this.graph.addNode({shape:"flow-process",x:200,y:200,attrs:{body:{fill:"#fff",stroke:"#333",strokeWidth:2,rx:8,ry:8,magnet:!0},label:{text:"流程节点",fontSize:14,fill:"#333"}},data:{type:"",description:"",properties:[],conditions:[]},interactive:!0,selectable:!0})},addEndNode:function(){this.graph.addNode({shape:"flow-end",x:300,y:300})},bindEvents:function(){var e=this;this.graph.on("cell:dblclick",(function(t){var i=t.node;t.e;console.log("Node double clicked:",i),e.selectedNode=i;var o=i.getData()||{};e.editForm={label:i.attr("label/text")||"",description:o.description||"",type:o.type||"",properties:Array.isArray(o.properties)?o.properties:[],conditions:Array.isArray(o.conditions)?o.conditions:[]},e.editModalVisible=!0})),this.graph.on("node:click",(function(e){var t=e.node;console.log("Node clicked:",t)})),this.graph.on("edge:connected",(function(e){var t=e.edge;t.attr({line:{stroke:"#333",strokeWidth:2,targetMarker:{name:"classic",size:8}}})})),this.graph.bindKey(["meta+c","ctrl+c"],(function(){var t=e.graph.getSelectedCells();return t.length&&e.graph.copy(t),!1})),this.graph.bindKey(["meta+v","ctrl+v"],(function(){if(!e.graph.isClipboardEmpty()){var t=e.graph.paste({offset:32});e.graph.cleanSelection(),e.graph.select(t)}return!1})),this.graph.bindKey(["meta+z","ctrl+z"],(function(){return e.canUndo&&e.undo(),!1})),this.graph.bindKey(["meta+shift+z","ctrl+shift+z"],(function(){return e.canRedo&&e.redo(),!1})),this.graph.on("edge:dblclick",(function(t){var i,o=t.edge;e.selectedEdge=o,e.edgeLabelForm.label=(null===(i=o.getLabels())||void 0===i||null===(i=i[0])||void 0===i||null===(i=i.attrs)||void 0===i?void 0:i.text)||"",e.edgeLabelModalVisible=!0}))},handleEditOk:function(){this.selectedNode&&(this.selectedNode.attr("label/text",this.editForm.label),this.selectedNode.setData({description:this.editForm.description,type:this.editForm.type,properties:this.editForm.properties,conditions:this.editForm.conditions})),this.editModalVisible=!1},handleEditCancel:function(){this.editModalVisible=!1},saveGraph:function(){var e=this.graph.toJSON();localStorage.setItem("flowData",JSON.stringify(e)),message.success("保存成功")},exportGraph:function(){var e=this.graph.toJSON(),t=JSON.stringify(e,null,2),i=new Blob([t],{type:"application/json"}),o=URL.createObjectURL(i),r=document.createElement("a");r.download="flow.json",r.href=o,r.click()},importGraph:function(){var e=this,t=document.createElement("input");t.type="file",t.accept=".json",t.onchange=function(t){var i=t.target.files[0],o=new FileReader;o.onload=function(t){try{var i=JSON.parse(t.target.result);e.graph.fromJSON(i),message.success("导入成功")}catch(o){message.error("导入失败:无效的文件格式")}},o.readAsText(i)},t.click()},clearGraph:function(){this.graph.clearCells()},undo:function(){this.history.undo()},redo:function(){this.history.redo()},addProperty:function(){this.editForm.properties.push({key:"",value:""})},removeProperty:function(e){this.editForm.properties.splice(e,1)},addCondition:function(){this.editForm.conditions.push({expression:"",description:""})},removeCondition:function(e){this.editForm.conditions.splice(e,1)},handleEdgeLabelOk:function(){this.selectedEdge&&this.selectedEdge.setLabels([{attrs:{text:{text:this.edgeLabelForm.label,fill:"#333",fontSize:12,textAnchor:"middle",textVerticalAnchor:"middle"},rect:{fill:"#fff",stroke:"#333",strokeWidth:1,rx:3,ry:3,refWidth:"100%",refHeight:"100%",refX:0,refY:0}},position:{distance:.5,options:{absoluteDistance:!0,reverseDistance:!0,keepGradient:!0,ensureLegibility:!0}}}]),this.edgeLabelModalVisible=!1},handleEdgeLabelCancel:function(){this.edgeLabelModalVisible=!1}}}),a=n,s=(i("c1b8"),i("2877")),d=Object(s["a"])(a,o,r,!1,null,"3ef21ece",null);t["default"]=d.exports},c1b8:function(e,t,i){"use strict";i("11e2")}}]);
|