index.vue
3.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<template>
<div class="logic-flow-view">
<!-- 辅助工具栏 -->
<Control class="demo-control" v-if="lf" :lf="lf" :catTurboData="false" @catData="catData" />
<!-- 节点面板 -->
<NodePanel :lf="lf" :nodeList="nodeList" />
<!-- 画布 -->
<div id="LF-Turbo"></div>
<!-- 数据查看面板 -->
<BasicModal @register="register" title="数据">
<DataDialog :graphData="graphData" />
</BasicModal>
</div>
</template>
<script lang="ts">
import { ref, unref, onMounted } from 'vue';
import LogicFlow from '@logicflow/core';
import { Snapshot, BpmnElement, Menu } from '@logicflow/extension';
import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css';
import { Control, NodePanel, DataDialog } from '/@/components/FlowChart';
import { toLogicflowData } from '/@/components/FlowChart/src/adpterForTurbo';
import { BpmnNode } from '/@/components/FlowChart/src/config';
import demoData from './dataTurbo.json';
import { BasicModal, useModal } from '/@/components/Modal';
export default {
components: { NodePanel, Control, DataDialog, BasicModal },
setup() {
let lf = ref(null);
let graphData = ref(null);
let config = ref({
grid: true,
background: {
color: '#f7f9ff',
},
keyboard: {
enabled: true,
},
});
let nodeList = BpmnNode;
const [register, { openModal }] = useModal();
function initLf() {
// 画布配置
LogicFlow.use(Snapshot);
// 使用bpmn插件，引入bpmn元素，这些元素可以在turbo中转换后使用
LogicFlow.use(BpmnElement);
// 启动右键菜单
LogicFlow.use(Menu);
const domLf = new LogicFlow({
...unref(config),
container: document.querySelector('#LF-Turbo'),
});
lf.value = domLf;
// 设置边类型bpmn:sequenceFlow为默认类型
unref(lf).setDefaultEdgeType('bpmn:sequenceFlow');
onRender();
}
function onRender() {
// Turbo数据转换为LogicFlow内部识别的数据结构
const lFData = toLogicflowData(demoData);
lf.value.render(lFData);
}
function catData() {
graphData.value = unref(lf).getGraphData();
openModal();
}
onMounted(() => {
initLf();
});
return {
lf,
graphData,
config,
nodeList,
catData,
register,
openModal,
};
},
};
</script>
<style scoped>
#LF-Turbo {
width: 100vw;
height: 85%;
outline: none;
}
.logic-flow-view {
position: relative;
height: 100%;
}
.demo-title {
margin: 20px;
text-align: center;
}
.demo-control {
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
}
.time-plus {
cursor: pointer;
}
.add-panel {
position: absolute;
z-index: 11;
padding: 10px 5px;
background-color: white;
}
.el-drawer__body {
z-index: 3;
height: 80%;
margin-top: -30px;
overflow: auto;
}
</style>