hookehuyr

复制节点功能完善

...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 <div class="app" style="height: 100vh"> 2 <div class="app" style="height: 100vh">
3 <vue-flow-editor 3 <vue-flow-editor
4 ref="editor" 4 ref="editor"
5 + menuWidth="180px"
5 modelWidth="300px" 6 modelWidth="300px"
6 :data="state.data" 7 :data="state.data"
7 :grid="showGrid" 8 :grid="showGrid"
...@@ -653,6 +654,7 @@ export default { ...@@ -653,6 +654,7 @@ export default {
653 /********** 流程图功能函数 **********/ 654 /********** 流程图功能函数 **********/
654 655
655 let editor: { 656 let editor: {
657 + clearStates(arg0: any): () => void
656 openModel: () => void 658 openModel: () => void
657 closeModel: () => void 659 closeModel: () => void
658 addNode: (arg0: any) => void 660 addNode: (arg0: any) => void
...@@ -1010,11 +1012,16 @@ export default { ...@@ -1010,11 +1012,16 @@ export default {
1010 1012
1011 const copyData = () => { // 复制节点回调 1013 const copyData = () => { // 复制节点回调
1012 if (state.detailModel.control !== 'start' && state.detailModel.control !== 'end') { 1014 if (state.detailModel.control !== 'start' && state.detailModel.control !== 'end') {
1015 + editor.clearStates(state.detailModel.id); // 清除选中节点的状态
1013 const timestamp = Date.now(); 1016 const timestamp = Date.now();
1014 const random = timestamp + ''; 1017 const random = timestamp + '';
1015 state.detailModel.id = random; // ID需要重新生成 1018 state.detailModel.id = random; // ID需要重新生成
1016 state.detailModel.y = state.detailModel.y + 50 1019 state.detailModel.y = state.detailModel.y + 50
1017 editor.addNode(state.detailModel); 1020 editor.addNode(state.detailModel);
1021 + editor.closeModel();
1022 + // 保存流程图数据
1023 + state.data.nodes = editor.editorState.graph.save().nodes
1024 + state.data.edges = editor.editorState.graph.save().edges
1018 } else { 1025 } else {
1019 ElNotification.error('开始或者结束节点不可以复制') 1026 ElNotification.error('开始或者结束节点不可以复制')
1020 } 1027 }
......
...@@ -109,6 +109,10 @@ export default { ...@@ -109,6 +109,10 @@ export default {
109 } else { 109 } else {
110 console.warn('graph is not initialized') 110 console.warn('graph is not initialized')
111 } 111 }
112 + },
113 + clearStates: (id) => {
114 + let item = editorState.graph.findById(id)
115 + item.clearStates('selected')
112 } 116 }
113 } 117 }
114 provide(VueFlowEditorProvider, provideContext) 118 provide(VueFlowEditorProvider, provideContext)
......