hookehuyr

新增复制节点功能

...@@ -274,10 +274,16 @@ ...@@ -274,10 +274,16 @@
274 </template> 274 </template>
275 <!-- 工具栏 --> 275 <!-- 工具栏 -->
276 <template v-slot:toolbar> 276 <template v-slot:toolbar>
277 + <el-tooltip content="复制节点">
278 + <div :class="['vue-flow-editor-toolbar-item', state.detailModel ? '' : 'vue-flow-editor-toolbar-item-disabled']" @click="copyData">
279 + <i class="el-icon-coin" style=" margin-top: 4px;" />
280 + <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">复制</span>
281 + </div>
282 + </el-tooltip>
277 <el-tooltip content="保存流程图数据"> 283 <el-tooltip content="保存流程图数据">
278 <div class="vue-flow-editor-toolbar-item" @click="saveData"> 284 <div class="vue-flow-editor-toolbar-item" @click="saveData">
279 <i class="el-icon-coin" style=" margin-top: 4px;" /> 285 <i class="el-icon-coin" style=" margin-top: 4px;" />
280 - <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">保存</span> 286 + <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">保存流程</span>
281 </div> 287 </div>
282 </el-tooltip> 288 </el-tooltip>
283 <!-- <el-tooltip content="启用流程图数据"> 289 <!-- <el-tooltip content="启用流程图数据">
...@@ -289,9 +295,9 @@ ...@@ -289,9 +295,9 @@
289 </template> 295 </template>
290 <!-- 表单底部按钮 --> 296 <!-- 表单底部按钮 -->
291 <template v-slot:foot> 297 <template v-slot:foot>
292 - <div v-if="state.main_attr_set"> 298 + <div v-if="state.main_attr_set" style="width: 100%; text-align: center;">
293 - <el-button type="primary" @click="saveForm">保存</el-button> 299 + <el-button type="primary" @click="saveForm" style="width: 40%;">保存</el-button>
294 - <el-button @click="cancel">取消</el-button> 300 + <el-button @click="cancel" style="width: 40%;">关闭</el-button>
295 </div> 301 </div>
296 </template> 302 </template>
297 </vue-flow-editor> 303 </vue-flow-editor>
...@@ -510,12 +516,6 @@ export default { ...@@ -510,12 +516,6 @@ export default {
510 if (showConfirmation) { 516 if (showConfirmation) {
511 // 取消事件的默认行为(弹出确认对话框) 517 // 取消事件的默认行为(弹出确认对话框)
512 event.preventDefault(); 518 event.preventDefault();
513 - // Chrome 和 Firefox 需要返回一个值以显示确认对话框
514 - event.returnValue = '';
515 - // 显示自定义的提示信息
516 - var confirmationMessage = '确定要离开此页面吗?';
517 - (event || window.event).returnValue = confirmationMessage; // 兼容旧版浏览器
518 - return confirmationMessage;
519 } 519 }
520 }); 520 });
521 // 监听 unload 事件 521 // 监听 unload 事件
...@@ -646,6 +646,7 @@ export default { ...@@ -646,6 +646,7 @@ export default {
646 let editor: { 646 let editor: {
647 openModel: () => void 647 openModel: () => void
648 closeModel: () => void 648 closeModel: () => void
649 + addNode: (arg0: any) => void
649 updateModel: (arg0: any) => void 650 updateModel: (arg0: any) => void
650 editorState: { 651 editorState: {
651 graph: { 652 graph: {
...@@ -996,6 +997,18 @@ export default { ...@@ -996,6 +997,18 @@ export default {
996 console.log('onDragEndNode', model) 997 console.log('onDragEndNode', model)
997 } 998 }
998 999
1000 + const copyData = () => { // 复制节点回调
1001 + if (state.detailModel.control !== 'start' && state.detailModel.control !== 'end') {
1002 + const timestamp = Date.now();
1003 + const random = timestamp + '';
1004 + state.detailModel.id = random; // ID需要重新生成
1005 + state.detailModel.y = state.detailModel.y + 50
1006 + editor.addNode(state.detailModel);
1007 + } else {
1008 + ElNotification.error('开始或者结束节点不可以复制')
1009 + }
1010 + }
1011 +
999 /** 1012 /**
1000 * 保存流程图数据 1013 * 保存流程图数据
1001 * 1014 *
...@@ -1052,8 +1065,8 @@ export default { ...@@ -1052,8 +1065,8 @@ export default {
1052 * @return {Array} - The filtered array of buttons 1065 * @return {Array} - The filtered array of buttons
1053 */ 1066 */
1054 function toolbarButtonHandler(buttons: any[]): Array<any> { 1067 function toolbarButtonHandler(buttons: any[]): Array<any> {
1055 - // TAG:测试隐藏缩略图 1068 + // TAG:测试隐藏缩略图和网格
1056 - let map = buttons.filter((item) => item.key !== 'miniMapSwitcher') 1069 + let map = buttons.filter((item) => item.key !== 'miniMapSwitcher' && item.key !=='gridSwitcher')
1057 return map 1070 return map
1058 } 1071 }
1059 1072
...@@ -1090,6 +1103,7 @@ export default { ...@@ -1090,6 +1103,7 @@ export default {
1090 onCloseUserView, 1103 onCloseUserView,
1091 onConfirmUserView, 1104 onConfirmUserView,
1092 1105
1106 + copyData,
1093 saveData, 1107 saveData,
1094 startFlow, 1108 startFlow,
1095 toolbarButtonHandler, 1109 toolbarButtonHandler,
......
...@@ -88,6 +88,10 @@ export default { ...@@ -88,6 +88,10 @@ export default {
88 closeModel: () => { 88 closeModel: () => {
89 editorState.showModel = false 89 editorState.showModel = false
90 }, 90 },
91 + addNode: (model) => {
92 + // TAG: 新增节点
93 + editorState.graph.add('node', model)
94 + },
91 updateModel: (model) => { 95 updateModel: (model) => {
92 // TAG: 自定义节点 更新Model 96 // TAG: 自定义节点 更新Model
93 formatNodeModel(model, props.activityConfig) 97 formatNodeModel(model, props.activityConfig)
......
...@@ -28,7 +28,7 @@ export function flatten(array) { ...@@ -28,7 +28,7 @@ export function flatten(array) {
28 return flattend; 28 return flattend;
29 } 29 }
30 30
31 -export const DEFAULT_SIZE = { // 不同类型的默认宽高 31 +export const DEFAULT_SIZE = { // TAG: 不同类型的默认宽高
32 rect: [130, 40], 32 rect: [130, 40],
33 ellipse: [100, 50], 33 ellipse: [100, 50],
34 diamond: [140, 50], 34 diamond: [140, 50],
...@@ -37,7 +37,7 @@ export const DEFAULT_SIZE = { // 不同类型的默认宽高 ...@@ -37,7 +37,7 @@ export const DEFAULT_SIZE = { // 不同类型的默认宽高
37 star: [80, 80], 37 star: [80, 80],
38 // TAG: 自定义节点 - 自定义属性 38 // TAG: 自定义节点 - 自定义属性
39 activity: [200, 80], 39 activity: [200, 80],
40 - control: [130, 40], 40 + control: [180, 40],
41 } 41 }
42 42
43 export function formatPos(option: { x: number, y: number, size: [number, number], shape: string }): { x: number, y: number, size: [number, number], shape } { 43 export function formatPos(option: { x: number, y: number, size: [number, number], shape: string }): { x: number, y: number, size: [number, number], shape } {
......