From 3d2c48733b86a03fc2e5a1f12ac3667ab0863b80 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期五, 08 十一月 2024 01:03:56 +0800
Subject: [PATCH] 标签模板，主页，默认工艺路线更新
---
src/components/FlowChart/src/FlowChart.vue | 488 ++++++++++++++++++++++++++---------------------------
1 files changed, 241 insertions(+), 247 deletions(-)
diff --git a/src/components/FlowChart/src/FlowChart.vue b/src/components/FlowChart/src/FlowChart.vue
index dde4080..dd5b5ae 100644
--- a/src/components/FlowChart/src/FlowChart.vue
+++ b/src/components/FlowChart/src/FlowChart.vue
@@ -16,21 +16,22 @@
</BasicModal>
</div>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import type { Ref } from 'vue';
import type { Definition } from '@logicflow/core';
- import { defineComponent, ref, onMounted, unref, nextTick, computed, watch } from 'vue';
+ import { ref, onMounted, unref, nextTick, computed, watch } from 'vue';
import FlowChartToolbar from './FlowChartToolbar.vue';
import LogicFlow from '@logicflow/core';
import { Snapshot, BpmnElement, Menu, DndPanel, SelectionSelect } from '@logicflow/extension';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { useAppStore } from '/@/store/modules/app';
+ 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 { toLogicFlowData } from './adpterForTurbo';
+ import { useModal, BasicModal } from '@/components/Modal';
+ import { JsonPreview } from '@/components/CodeEditor';
import { configDefaultDndPanel } from './config';
- import '@logicflow/core/dist/style/index.css';
+ import '@logicflow/core/lib/style/index.css';
+ // import '@logicflow/core/dist/style/index.css';
import '@logicflow/extension/lib/style/index.css';
import { useGlobSetting } from '/@/hooks/setting';
import customEdge from './customEdge';
@@ -42,250 +43,243 @@
import AssemblyNode from './AssemblyNode';
import PackingNode from './PackingNode';
import RepairNode from './RepairNode';
+import SpecPackingNode from './SpecPackingNode';
- const { notification } = useMessage();
- const { t } = useI18n();
+ defineOptions({ name: 'FlowChart' });
- export default defineComponent({
- name: 'FlowChart',
- components: { BasicModal, FlowChartToolbar, JsonPreview },
- props: {
- flowOptions: {
- type: Object as PropType<Definition>,
- default: () => ({}),
- },
-
- data: {
- type: Object as PropType<any>,
- default: () => ({}),
- },
-
- toolbar: {
- type: Boolean,
- default: true,
- },
- patternItems: {
- type: Array,
- },
+ const props = defineProps({
+ flowOptions: {
+ type: Object as PropType<Definition>,
+ default: () => ({}),
},
- 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 graphData = ref({});
- const lfInstance = ref(null) as Ref<LogicFlow | null>;
+ data: {
+ type: Object as PropType<any>,
+ default: () => ({}),
+ },
- const { prefixCls } = useDesign('flow-chart');
- const appStore = useAppStore();
- const [register, { openModal }] = useModal();
- createFlowChartContext({
- logicFlow: lfInstance as unknown as LogicFlow,
- });
-
- const getFlowOptions = computed(() => {
- const { flowOptions } = props;
-
- const defaultOptions: Partial<Definition> = {
- grid: true,
- background: {
- color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515',
- },
- keyboard: {
- enabled: true,
- },
- edgeType: 'bezier',
- ...flowOptions,
- };
- return defaultOptions as Definition;
- });
-
- watch(
- () => props.data,
- () => {
- onRender();
- },
- );
-
- // TODO
- // watch(
- // () => appStore.getDarkMode,
- // () => {
- // init();
- // }
- // );
-
- watch(
- () => unref(getFlowOptions),
- (options) => {
- unref(lfInstance)?.updateEditConfig(options);
- },
- );
-
- // init logicFlow
- async function init() {
- await nextTick();
-
- const lfEl = unref(lfElRef);
- if (!lfEl) {
- return;
- }
- LogicFlow.use(DndPanel);
-
- // 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(SelectionSelect);
-
- lfInstance.value = new LogicFlow({
- ...unref(getFlowOptions),
- container: lfEl,
- edgeGenerator: (sourceNode) => {
- // console.log('a');
- // 璧峰鑺傜偣绫诲瀷 rect 鏃朵娇鐢� 鑷畾涔夌殑杈� custom-edge
- if (sourceNode.properties.isReturn) return 'custom-edge';
- // if (sourceNode.type === 'rect') return 'custom-edge';
- // return 'custom-edge';
- },
- });
- 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));
- }
-
- async function onRender() {
- await nextTick();
- const lf = unref(lfInstance);
- if (!lf) {
- return;
- }
- lf.register(customEdge);
- // const lFData = toLogicFlowData(props.data);
- lf.render(props.data);
-
- 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,
- // });
- 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() {
- const lf = unref(lfInstance);
- if (!lf) {
- return;
- }
- graphData.value = unref(lf).getGraphData();
- openModal();
- }
-
- function handleSave() {
- // console.log('handleSave');
- const lf = unref(lfInstance);
- if (!lf) {
- return;
- }
- emit('save-data', lf);
- }
-
- function handleAdd() {
- const lf = unref(lfInstance);
- console.log('handleAdd');
- if (!lf) {
- return;
- }
- // lf.clearData();
- lf.render({});
- }
-
- function handleAddlf() {
- const lf = unref(lfInstance);
- if (!lf) {
- return;
- }
- 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 {
- register,
- prefixCls,
- lfElRef,
- handlePreview,
- graphData,
- handleSave,
- handleAdd,
- handleAddlf,
- handleUndo,
- handleRedo,
- };
+ toolbar: {
+ type: Boolean,
+ default: true,
+ },
+ patternItems: {
+ type: Array,
},
});
+
+ const emit = defineEmits([
+ 'view-data',
+ 'save-data',
+ 'add-lf',
+ 'select-node',
+ 'click-blank',
+ 'init',
+ 'undo',
+ 'redo',
+ 'anchor-drop',
+ 'anchor-dragend',
+ ]);
+ const lfElRef = ref(null);
+ const graphData = ref({});
+
+ const lfInstance = ref(null) as Ref<LogicFlow | null>;
+
+ const { prefixCls } = useDesign('flow-chart');
+ const appStore = useAppStore();
+ const [register, { openModal }] = useModal();
+ createFlowChartContext({
+ logicFlow: lfInstance as unknown as LogicFlow,
+ });
+
+ const getFlowOptions = computed(() => {
+ const { flowOptions } = props;
+
+ const defaultOptions: Partial<Definition> = {
+ grid: true,
+ background: {
+ color: appStore.getDarkMode === 'light' ? '#f7f9ff' : '#151515',
+ },
+ keyboard: {
+ enabled: true,
+ },
+ edgeType: 'polyline',
+ ...flowOptions,
+ };
+ return defaultOptions as Definition;
+ });
+
+ watch(
+ () => props.data,
+ () => {
+ onRender();
+ },
+ );
+
+ // TODO
+ // watch(
+ // () => appStore.getDarkMode,
+ // () => {
+ // init();
+ // }
+ // );
+
+ watch(
+ () => unref(getFlowOptions),
+ (options) => {
+ unref(lfInstance)?.updateEditConfig(options);
+ },
+ );
+
+ // init logicFlow
+ async function init() {
+ await nextTick();
+
+ const lfEl = unref(lfElRef);
+ if (!lfEl) {
+ return;
+ }
+ LogicFlow.use(DndPanel);
+
+ // 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(SelectionSelect);
+
+ lfInstance.value = new LogicFlow({
+ ...unref(getFlowOptions),
+ container: lfEl,
+ edgeGenerator: (sourceNode) => {
+ // console.log('a');
+ // 璧峰鑺傜偣绫诲瀷 rect 鏃朵娇鐢� 鑷畾涔夌殑杈� custom-edge
+ if (sourceNode.properties.isReturn) return 'custom-edge';
+ // if (sourceNode.type === 'rect') return 'custom-edge';
+ // return 'custom-edge';
+ },
+ });
+ const lf = unref(lfInstance)!;
+ lf?.setDefaultEdgeType('polyline');
+ lf.register(actionRect);
+ lf.register(TestNode);
+ lf.register(CollectNode);
+ lf.register(AssemblyNode);
+ lf.register(PackingNode);
+ lf.register(RepairNode);
+ lf.register(customEdge);
+ lf.register(SpecPackingNode);
+ onRender();
+ lf?.setPatternItems(props.patternItems || configDefaultDndPanel(lf));
+ }
+
+ async function onRender() {
+ await nextTick();
+ const lf = unref(lfInstance);
+ if (!lf) {
+ return;
+ }
+ const lFData = toLogicFlowData(props.data);
+ lf.render(lFData);
+
+ 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');
+ }
+ });
+ }
+ emit('anchor-drop', data, lf);
+ });
+
+ /**
+ * @description: 閿氱偣杩炵嚎缁撴潫锛屼笉绠℃槸鍚﹀垱寤鸿繛绾块兘浼氳Е鍙戙��
+ * @return {*}
+ */
+ lf.on('anchor:dragend', (data, e, nodeModel) => {
+ emit('anchor-dragend',data, e, nodeModel, lf);
+ });
+
+ 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,
+ // });
+ 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() {
+ const lf = unref(lfInstance);
+ if (!lf) {
+ return;
+ }
+ graphData.value = unref(lf).getGraphData();
+ openModal();
+ }
+
+ function handleSave() {
+ // console.log('handleSave');
+ const lf = unref(lfInstance);
+ if (!lf) {
+ return;
+ }
+ emit('save-data', lf);
+ }
+
+ function handleAdd() {
+ const lf = unref(lfInstance);
+ console.log('handleAdd');
+ if (!lf) {
+ return;
+ }
+ // lf.clearData();
+ lf.render({});
+ }
+
+ function handleAddlf() {
+ const lf = unref(lfInstance);
+ if (!lf) {
+ return;
+ }
+ 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);
</script>
-./TestNode
--
Gitblit v1.9.3