Showing
3 changed files
with
32 additions
and
14 deletions
| ... | @@ -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 } { | ... | ... |
-
Please register or login to post a comment