hookehuyr

新增复制节点功能

......@@ -274,10 +274,16 @@
</template>
<!-- 工具栏 -->
<template v-slot:toolbar>
<el-tooltip content="复制节点">
<div :class="['vue-flow-editor-toolbar-item', state.detailModel ? '' : 'vue-flow-editor-toolbar-item-disabled']" @click="copyData">
<i class="el-icon-coin" style=" margin-top: 4px;" />
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">复制</span>
</div>
</el-tooltip>
<el-tooltip content="保存流程图数据">
<div class="vue-flow-editor-toolbar-item" @click="saveData">
<i class="el-icon-coin" style=" margin-top: 4px;" />
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">保存</span>
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">保存流程</span>
</div>
</el-tooltip>
<!-- <el-tooltip content="启用流程图数据">
......@@ -289,9 +295,9 @@
</template>
<!-- 表单底部按钮 -->
<template v-slot:foot>
<div v-if="state.main_attr_set">
<el-button type="primary" @click="saveForm">保存</el-button>
<el-button @click="cancel">取消</el-button>
<div v-if="state.main_attr_set" style="width: 100%; text-align: center;">
<el-button type="primary" @click="saveForm" style="width: 40%;">保存</el-button>
<el-button @click="cancel" style="width: 40%;">关闭</el-button>
</div>
</template>
</vue-flow-editor>
......@@ -510,12 +516,6 @@ export default {
if (showConfirmation) {
// 取消事件的默认行为(弹出确认对话框)
event.preventDefault();
// Chrome 和 Firefox 需要返回一个值以显示确认对话框
event.returnValue = '';
// 显示自定义的提示信息
var confirmationMessage = '确定要离开此页面吗?';
(event || window.event).returnValue = confirmationMessage; // 兼容旧版浏览器
return confirmationMessage;
}
});
// 监听 unload 事件
......@@ -646,6 +646,7 @@ export default {
let editor: {
openModel: () => void
closeModel: () => void
addNode: (arg0: any) => void
updateModel: (arg0: any) => void
editorState: {
graph: {
......@@ -996,6 +997,18 @@ export default {
console.log('onDragEndNode', model)
}
const copyData = () => { // 复制节点回调
if (state.detailModel.control !== 'start' && state.detailModel.control !== 'end') {
const timestamp = Date.now();
const random = timestamp + '';
state.detailModel.id = random; // ID需要重新生成
state.detailModel.y = state.detailModel.y + 50
editor.addNode(state.detailModel);
} else {
ElNotification.error('开始或者结束节点不可以复制')
}
}
/**
* 保存流程图数据
*
......@@ -1052,8 +1065,8 @@ export default {
* @return {Array} - The filtered array of buttons
*/
function toolbarButtonHandler(buttons: any[]): Array<any> {
// TAG:测试隐藏缩略图
let map = buttons.filter((item) => item.key !== 'miniMapSwitcher')
// TAG:测试隐藏缩略图和网格
let map = buttons.filter((item) => item.key !== 'miniMapSwitcher' && item.key !=='gridSwitcher')
return map
}
......@@ -1090,6 +1103,7 @@ export default {
onCloseUserView,
onConfirmUserView,
copyData,
saveData,
startFlow,
toolbarButtonHandler,
......
......@@ -88,6 +88,10 @@ export default {
closeModel: () => {
editorState.showModel = false
},
addNode: (model) => {
// TAG: 新增节点
editorState.graph.add('node', model)
},
updateModel: (model) => {
// TAG: 自定义节点 更新Model
formatNodeModel(model, props.activityConfig)
......
......@@ -28,7 +28,7 @@ export function flatten(array) {
return flattend;
}
export const DEFAULT_SIZE = { // 不同类型的默认宽高
export const DEFAULT_SIZE = { // TAG: 不同类型的默认宽高
rect: [130, 40],
ellipse: [100, 50],
diamond: [140, 50],
......@@ -37,7 +37,7 @@ export const DEFAULT_SIZE = { // 不同类型的默认宽高
star: [80, 80],
// TAG: 自定义节点 - 自定义属性
activity: [200, 80],
control: [130, 40],
control: [180, 40],
}
export function formatPos(option: { x: number, y: number, size: [number, number], shape: string }): { x: number, y: number, size: [number, number], shape } {
......