| 提交 | 用户 | age | ||
| e1bc33 | 1 | <template> |
| V | 2 | <div class="h-full" :class="prefixCls"> |
| 064901 | 3 | <FlowChartToolbar :prefixCls="prefixCls" v-if="toolbar" @view-data="handlePreview" /> |
| e1bc33 | 4 | <div ref="lfElRef" class="h-full"></div> |
| 064901 | 5 | <BasicModal @register="register" title="流程数据" width="50%"> |
| V | 6 | <JsonPreview :data="graphData" /> |
| 7 | </BasicModal> | |
| e1bc33 | 8 | </div> |
| V | 9 | </template> |
| 10 | <script lang="ts"> | |
| 9035fd | 11 | import type { Ref } from 'vue'; |
| e1bc33 | 12 | import type { Definition } from '@logicflow/core'; |
| V | 13 | import { defineComponent, ref, onMounted, unref, nextTick, computed, watch } from 'vue'; |
| 14 | import FlowChartToolbar from './FlowChartToolbar.vue'; | |
| 15 | import LogicFlow from '@logicflow/core'; | |
| fa828f | 16 | import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension'; |
| e1bc33 | 17 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 064901 | 18 | import { useAppStore } from '/@/store/modules/app'; |
| e1bc33 | 19 | import { createFlowChartContext } from './useFlowContext'; |
| V | 20 | import { toLogicFlowData } from './adpterForTurbo'; |
| 064901 | 21 | import { useModal, BasicModal } from '/@/components/Modal'; |
| V | 22 | import { JsonPreview } from '/@/components/CodeEditor'; |
| fa828f | 23 | import { configDefaultDndPanel } from './config'; |
| e1bc33 | 24 | import '@logicflow/core/dist/style/index.css'; |
| 064901 | 25 | import '@logicflow/extension/lib/style/index.css'; |
| fa828f | 26 | |
| e1bc33 | 27 | export default defineComponent({ |
| V | 28 | name: 'FlowChart', |
| 064901 | 29 | components: { BasicModal, FlowChartToolbar, JsonPreview }, |
| e1bc33 | 30 | props: { |
| V | 31 | flowOptions: { |
| 32 | type: Object as PropType<Definition>, | |
| 8b2e0f | 33 | default: () => ({}), |
| e1bc33 | 34 | }, |
| V | 35 | |
| 36 | data: { | |
| 37 | type: Object as PropType<any>, | |
| 8b2e0f | 38 | default: () => ({}), |
| e1bc33 | 39 | }, |
| V | 40 | |
| 41 | toolbar: { | |
| 42 | type: Boolean, | |
| 43 | default: true, | |
| fa828f | 44 | }, |
| V | 45 | patternItems: { |
| 46 | type: Array, | |
| e1bc33 | 47 | }, |
| V | 48 | }, |
| 49 | setup(props) { | |
| 9035fd | 50 | const lfElRef = ref(null); |
| V | 51 | const graphData = ref({}); |
| e1bc33 | 52 | |
| 9035fd | 53 | const lfInstance = ref(null) as Ref<LogicFlow | null>; |
| e1bc33 | 54 | |
| V | 55 | const { prefixCls } = useDesign('flow-chart'); |
| 064901 | 56 | const appStore = useAppStore(); |
| V | 57 | const [register, { openModal }] = useModal(); |
| e1bc33 | 58 | createFlowChartContext({ |
| 3a16f2 | 59 | logicFlow: lfInstance as unknown as LogicFlow, |
| e1bc33 | 60 | }); |
| V | 61 | |
| 62 | const getFlowOptions = computed(() => { | |
| 63 | const { flowOptions } = props; | |
| 64 | ||
| 65 | const defaultOptions: Partial<Definition> = { | |
| 66 | grid: true, | |
| 67 | background: { | |
| 064901 | 68 | color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515', |
| e1bc33 | 69 | }, |
| V | 70 | keyboard: { |
| 71 | enabled: true, | |
| 72 | }, | |
| 73 | ...flowOptions, | |
| 74 | }; | |
| 75 | return defaultOptions as Definition; | |
| 76 | }); | |
| 77 | ||
| 78 | watch( | |
| 79 | () => props.data, | |
| 80 | () => { | |
| 81 | onRender(); | |
| 56a966 | 82 | }, |
| e1bc33 | 83 | ); |
| V | 84 | |
| 4a0354 | 85 | // TODO |
| V | 86 | // watch( |
| 87 | // () => appStore.getDarkMode, | |
| 88 | // () => { | |
| 89 | // init(); | |
| 90 | // } | |
| 91 | // ); | |
| 064901 | 92 | |
| V | 93 | watch( |
| 94 | () => unref(getFlowOptions), | |
| e1bc33 | 95 | (options) => { |
| V | 96 | unref(lfInstance)?.updateEditConfig(options); |
| 56a966 | 97 | }, |
| e1bc33 | 98 | ); |
| V | 99 | |
| 100 | // init logicFlow | |
| 101 | async function init() { | |
| 102 | await nextTick(); | |
| 103 | ||
| 104 | const lfEl = unref(lfElRef); | |
| 105 | if (!lfEl) { | |
| 106 | return; | |
| 107 | } | |
| fa828f | 108 | LogicFlow.use(DndPanel); |
| 4a0354 | 109 | |
| V | 110 | // Canvas configuration |
| 111 | LogicFlow.use(Snapshot); | |
| 112 | // Use the bpmn plug-in to introduce bpmn elements, which can be used after conversion in turbo | |
| 113 | LogicFlow.use(BpmnElement); | |
| 114 | // Start the right-click menu | |
| 115 | LogicFlow.use(Menu); | |
| fa828f | 116 | LogicFlow.use(SelectionSelect); |
| e1bc33 | 117 | |
| V | 118 | lfInstance.value = new LogicFlow({ |
| 119 | ...unref(getFlowOptions), | |
| 120 | container: lfEl, | |
| 121 | }); | |
| fa828f | 122 | const lf = unref(lfInstance)!; |
| V | 123 | lf?.setDefaultEdgeType('line'); |
| e1bc33 | 124 | onRender(); |
| fa828f | 125 | lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf)); |
| e1bc33 | 126 | } |
| V | 127 | |
| 128 | async function onRender() { | |
| 129 | await nextTick(); | |
| 130 | const lf = unref(lfInstance); | |
| 131 | if (!lf) { | |
| 132 | return; | |
| 133 | } | |
| 134 | const lFData = toLogicFlowData(props.data); | |
| 135 | lf.render(lFData); | |
| 136 | } | |
| 137 | ||
| 064901 | 138 | function handlePreview() { |
| V | 139 | const lf = unref(lfInstance); |
| 140 | if (!lf) { | |
| 141 | return; | |
| 142 | } | |
| 143 | graphData.value = unref(lf).getGraphData(); | |
| 144 | openModal(); | |
| 145 | } | |
| 146 | ||
| e1bc33 | 147 | onMounted(init); |
| V | 148 | |
| 149 | return { | |
| 064901 | 150 | register, |
| e1bc33 | 151 | prefixCls, |
| V | 152 | lfElRef, |
| 064901 | 153 | handlePreview, |
| V | 154 | graphData, |
| e1bc33 | 155 | }; |
| V | 156 | }, |
| 157 | }); | |
| 158 | </script> | |
