134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
|
<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>
|