|
|
|
@ -1,7 +1,10 @@ |
|
|
|
<template> |
|
|
|
<div class="h-full" :class="prefixCls"> |
|
|
|
<FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" /> |
|
|
|
<FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" @view-data="handlePreview" /> |
|
|
|
<div ref="lfElRef" class="h-full"></div> |
|
|
|
<BasicModal @register="register" title="流程数据" width="50%"> |
|
|
|
<JsonPreview :data="graphData" /> |
|
|
|
</BasicModal> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script lang="ts"> |
|
|
|
@ -14,15 +17,18 @@ |
|
|
|
import { Snapshot, BpmnElement, Menu, DndPanel } from '@logicflow/extension'; |
|
|
|
|
|
|
|
import { useDesign } from '/@/hooks/web/useDesign'; |
|
|
|
import { useAppStore } from '/@/store/modules/app'; |
|
|
|
import { createFlowChartContext } from './useFlowContext'; |
|
|
|
|
|
|
|
import { toLogicFlowData } from './adpterForTurbo'; |
|
|
|
import { useModal, BasicModal } from '/@/components/Modal'; |
|
|
|
import { JsonPreview } from '/@/components/CodeEditor'; |
|
|
|
|
|
|
|
import '@logicflow/core/dist/style/index.css'; |
|
|
|
import './index.css'; |
|
|
|
import '@logicflow/extension/lib/style/index.css'; |
|
|
|
export default defineComponent({ |
|
|
|
name: 'FlowChart', |
|
|
|
components: { FlowChartToolbar }, |
|
|
|
components: { BasicModal, FlowChartToolbar, JsonPreview }, |
|
|
|
props: { |
|
|
|
flowOptions: { |
|
|
|
type: Object as PropType<Definition>, |
|
|
|
@ -41,10 +47,13 @@ |
|
|
|
}, |
|
|
|
setup(props) { |
|
|
|
const lfElRef = ref<ElRef>(null); |
|
|
|
const graphData = ref<Recordable>({}); |
|
|
|
|
|
|
|
const lfInstance = ref<Nullable<LogicFlow>>(null); |
|
|
|
|
|
|
|
const { prefixCls } = useDesign('flow-chart'); |
|
|
|
const appStore = useAppStore(); |
|
|
|
const [register, { openModal }] = useModal(); |
|
|
|
createFlowChartContext({ |
|
|
|
logicFlow: (lfInstance as unknown) as LogicFlow, |
|
|
|
}); |
|
|
|
@ -55,7 +64,7 @@ |
|
|
|
const defaultOptions: Partial<Definition> = { |
|
|
|
grid: true, |
|
|
|
background: { |
|
|
|
color: '#f7f9ff', |
|
|
|
color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515', |
|
|
|
}, |
|
|
|
keyboard: { |
|
|
|
enabled: true, |
|
|
|
@ -73,12 +82,20 @@ |
|
|
|
); |
|
|
|
|
|
|
|
watch( |
|
|
|
() => props.flowOptions, |
|
|
|
() => appStore.getDarkMode, |
|
|
|
() => { |
|
|
|
init(); |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
watch( |
|
|
|
() => unref(getFlowOptions), |
|
|
|
(options) => { |
|
|
|
unref(lfInstance)?.updateEditConfig(options); |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
let isInit = false; |
|
|
|
// init logicFlow |
|
|
|
async function init() { |
|
|
|
await nextTick(); |
|
|
|
@ -87,14 +104,17 @@ |
|
|
|
if (!lfEl) { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!isInit) { |
|
|
|
// Canvas configuration |
|
|
|
LogicFlow.use(Snapshot); |
|
|
|
// Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo |
|
|
|
LogicFlow.use(BpmnElement); |
|
|
|
// Start the right-click menu |
|
|
|
LogicFlow.use(Menu); |
|
|
|
LogicFlow.use(DndPanel); |
|
|
|
isInit = true; |
|
|
|
} |
|
|
|
|
|
|
|
// Canvas configuration |
|
|
|
LogicFlow.use(Snapshot); |
|
|
|
// Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo |
|
|
|
LogicFlow.use(BpmnElement); |
|
|
|
// Start the right-click menu |
|
|
|
LogicFlow.use(Menu); |
|
|
|
LogicFlow.use(DndPanel); |
|
|
|
lfInstance.value = new LogicFlow({ |
|
|
|
...unref(getFlowOptions), |
|
|
|
container: lfEl, |
|
|
|
@ -113,11 +133,24 @@ |
|
|
|
lf.render(lFData); |
|
|
|
} |
|
|
|
|
|
|
|
function handlePreview() { |
|
|
|
const lf = unref(lfInstance); |
|
|
|
if (!lf) { |
|
|
|
return; |
|
|
|
} |
|
|
|
graphData.value = unref(lf).getGraphData(); |
|
|
|
|
|
|
|
openModal(); |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(init); |
|
|
|
|
|
|
|
return { |
|
|
|
register, |
|
|
|
prefixCls, |
|
|
|
lfElRef, |
|
|
|
handlePreview, |
|
|
|
graphData, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
Vben
5 years ago