| | |
| | | @save-data="handleSave" |
| | | @add-data="handleAdd" |
| | | @addlf="handleAddlf" |
| | | @undo="handleUndo" |
| | | @redo="handleRedo" |
| | | /> |
| | | <div ref="lfElRef" class="h-full"></div> |
| | | <BasicModal @register="register" title="流程数据" width="50%"> |
| | |
| | | import customEdge from './customEdge'; |
| | | import { useMessage } from '/@/hooks/web/useMessage'; |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | import actionRect from './actionRect'; |
| | | import TestNode from './TestNode'; |
| | | import CollectNode from './CollectNode'; |
| | | import AssemblyNode from './AssemblyNode'; |
| | | import PackingNode from './PackingNode'; |
| | | import RepairNode from './RepairNode'; |
| | | |
| | | const { notification } = useMessage(); |
| | | const { t } = useI18n(); |
| | |
| | | type: Array, |
| | | }, |
| | | }, |
| | | emits: ['view-data', 'save-data', 'add-lf'], |
| | | emits: [ |
| | | 'view-data', |
| | | 'save-data', |
| | | 'add-lf', |
| | | 'select-node', |
| | | 'click-blank', |
| | | 'init', |
| | | 'undo', |
| | | 'redo', |
| | | ], |
| | | setup(props, { emit }) { |
| | | const globSetting = useGlobSetting(); |
| | | const lfElRef = ref(null); |
| | |
| | | }); |
| | | const lf = unref(lfInstance)!; |
| | | // lf?.setDefaultEdgeType('line'); |
| | | lf.register(actionRect); |
| | | lf.register(TestNode); |
| | | lf.register(CollectNode); |
| | | lf.register(AssemblyNode); |
| | | lf.register(PackingNode); |
| | | lf.register(RepairNode); |
| | | onRender(); |
| | | lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf)); |
| | | } |
| | |
| | | // const lFData = toLogicFlowData(props.data); |
| | | lf.render(props.data); |
| | | |
| | | if (globSetting.apiUrl == 'http://localhost:9528/api') { |
| | | lf.on('anchor:drop', (data) => { |
| | | const nodeData = data.nodeModel.getData(); |
| | | if (nodeData.properties.isReturn === true) { |
| | | console.log(11, nodeData.properties.isReturn); |
| | | data.nodeModel.graphModel.edges.forEach((element) => { |
| | | if (element.sourceNodeId === data.nodeModel.id) { |
| | | lf.changeEdgeType(element.id, 'custom-edge'); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | } |
| | | lf.on('anchor:drop', (data) => { |
| | | const nodeData = data.nodeModel.getData(); |
| | | if (nodeData.properties.isReturn === true) { |
| | | console.log(11, nodeData.properties.isReturn); |
| | | data.nodeModel.graphModel.edges.forEach((element) => { |
| | | if (element.sourceNodeId === data.nodeModel.id) { |
| | | lf.changeEdgeType(element.id, 'custom-edge'); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | lf.on('node:click,edge:click', (data) => { |
| | | if (data.isSelected) { |
| | | console.log(data.data.text.value, data.isSelected); |
| | | notification.success({ |
| | | message: t('点击了节点'), |
| | | description: `${data.data.text.value}: ${data.isSelected}`, |
| | | duration: 3, |
| | | }); |
| | | // notification.success({ |
| | | // message: t('点击了节点'), |
| | | // description: `${data.data.text.value}: ${data.isSelected}`, |
| | | // duration: 3, |
| | | // }); |
| | | emit('select-node', data, lf); |
| | | } else { |
| | | console.log(data.data.type); |
| | | } |
| | | }); |
| | | |
| | | lf.on('blank:mousedown', (e) => { |
| | | emit('click-blank'); |
| | | }); |
| | | |
| | | lf.on('node:dnd-add', (data, e) => { |
| | | console.log('node:dnd-add', data); |
| | | emit('select-node', data, lf); |
| | | }); |
| | | |
| | | emit('init', lf); |
| | | } |
| | | |
| | | function handlePreview() { |
| | |
| | | emit('add-lf', lf); |
| | | } |
| | | |
| | | function handleUndo() { |
| | | const lf = unref(lfInstance); |
| | | if (!lf) { |
| | | return; |
| | | } |
| | | emit('undo', lf); |
| | | } |
| | | |
| | | function handleRedo() { |
| | | const lf = unref(lfInstance); |
| | | if (!lf) { |
| | | return; |
| | | } |
| | | emit('redo', lf); |
| | | } |
| | | |
| | | onMounted(init); |
| | | |
| | | return { |
| | |
| | | handleSave, |
| | | handleAdd, |
| | | handleAddlf, |
| | | handleUndo, |
| | | handleRedo, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | | ./TestNode |