UPDATE: VERSION-20260326
This commit is contained in:
@@ -46,6 +46,7 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
|
import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
|
||||||
|
import {useRouter} from 'vue-router';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import { getTeleport } from '@antv/x6-vue-shape';
|
import { getTeleport } from '@antv/x6-vue-shape';
|
||||||
import { Graph, Node, type NodeProperties } from '@antv/x6';
|
import { Graph, Node, type NodeProperties } from '@antv/x6';
|
||||||
@@ -54,8 +55,9 @@ import { Wrapper } from '@/components/wrapper';
|
|||||||
import { safePreventDefault, safeStopPropagation } from '@/utils/event';
|
import { safePreventDefault, safeStopPropagation } from '@/utils/event';
|
||||||
import Header from '../header.vue';
|
import Header from '../header.vue';
|
||||||
|
|
||||||
import type { PlatformWithComponents, Scenario } from './types';
|
import type { Scenario } from './types';
|
||||||
import { createGraphTaskElement, createLineOptions, type GraphContainer, type GraphTaskElement, resolveGraph, useGraphCanvas } from '../graph';
|
import type { PlatformWithComponents } from '../types';
|
||||||
|
import { createLineOptions, type GraphContainer, type GraphTaskElement, resolveGraph, useGraphCanvas } from '../graph';
|
||||||
|
|
||||||
import { registerScenarioElement } from './register';
|
import { registerScenarioElement } from './register';
|
||||||
import { createGraphScenarioElement, createGraphTaskElementFromScenario } from './utils';
|
import { createGraphScenarioElement, createGraphTaskElementFromScenario } from './utils';
|
||||||
@@ -63,7 +65,7 @@ import { createGraphScenarioElement, createGraphTaskElementFromScenario } from '
|
|||||||
import PlatformCard from './platform-card.vue';
|
import PlatformCard from './platform-card.vue';
|
||||||
import NodesCard from './nodes-card.vue';
|
import NodesCard from './nodes-card.vue';
|
||||||
import { saveScenario } from './api';
|
import { saveScenario } from './api';
|
||||||
import {resolveConnectionRelation} from './relation'
|
import { resolveConnectionRelation } from './relation';
|
||||||
|
|
||||||
const TeleportContainer = defineComponent(getTeleport());
|
const TeleportContainer = defineComponent(getTeleport());
|
||||||
|
|
||||||
@@ -82,6 +84,7 @@ export default defineComponent({
|
|||||||
TeleportContainer,
|
TeleportContainer,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
|
const router = useRouter();
|
||||||
const canvas = ref<HTMLDivElement | null>(null);
|
const canvas = ref<HTMLDivElement | null>(null);
|
||||||
const graph = ref<Graph | null>(null);
|
const graph = ref<Graph | null>(null);
|
||||||
const currentZoom = ref<number>(1);
|
const currentZoom = ref<number>(1);
|
||||||
@@ -105,6 +108,19 @@ export default defineComponent({
|
|||||||
resizeCanvas,
|
resizeCanvas,
|
||||||
} = useGraphCanvas();
|
} = useGraphCanvas();
|
||||||
|
|
||||||
|
const destroy = ()=> {
|
||||||
|
window.removeEventListener('resize', handleResize);
|
||||||
|
if (graph.value) {
|
||||||
|
try {
|
||||||
|
graph.value.clearCells();
|
||||||
|
} catch (error) {
|
||||||
|
console.warn('销毁画布时出错:', error);
|
||||||
|
}
|
||||||
|
graph.value = null;
|
||||||
|
console.log('画布已销毁');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 处理拖动开始
|
// 处理拖动开始
|
||||||
const handleDragStart = (nm: PlatformWithComponents) => {
|
const handleDragStart = (nm: PlatformWithComponents) => {
|
||||||
draggedNodeData.value = nm;
|
draggedNodeData.value = nm;
|
||||||
@@ -293,6 +309,14 @@ export default defineComponent({
|
|||||||
currentScenarioEditing.value = null !== currentScenario.value;
|
currentScenarioEditing.value = null !== currentScenario.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
handleGraphEvent('node:dblclick', () => {
|
||||||
|
destroy()
|
||||||
|
window.location.href = '/app/decision/designer'
|
||||||
|
// router.push({
|
||||||
|
// path: '/app/decision/designer'
|
||||||
|
// })
|
||||||
|
});
|
||||||
|
|
||||||
handleGraphEvent('node:click', (args: any) => {
|
handleGraphEvent('node:click', (args: any) => {
|
||||||
const node = args.node as Node<NodeProperties>;
|
const node = args.node as Node<NodeProperties>;
|
||||||
const newElement = node.getData() as GraphTaskElement;
|
const newElement = node.getData() as GraphTaskElement;
|
||||||
@@ -382,18 +406,7 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 清理
|
// 清理
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => destroy());
|
||||||
window.removeEventListener('resize', handleResize);
|
|
||||||
if (graph.value) {
|
|
||||||
try {
|
|
||||||
graph.value.clearCells();
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('销毁画布时出错:', error);
|
|
||||||
}
|
|
||||||
graph.value = null;
|
|
||||||
console.log('画布已销毁');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
scenariosCardRef,
|
scenariosCardRef,
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import type { ApiDataResponse, NullableString, PageableResponse } from '@/types';
|
import type { NullableString, PageableResponse } from '@/types';
|
||||||
import type { GraphContainer } from '../graph';
|
import type { GraphContainer } from '../graph';
|
||||||
import type { Platform, PlatformComponent } from '../types';
|
import type { Platform, PlatformComponent } from '../types';
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
import type { GraphRect, GraphTaskElement } from '../graph';
|
import type { GraphRect, GraphTaskElement } from '../graph';
|
||||||
import { generateKey } from '@/utils/strings';
|
import { generateKey } from '@/utils/strings';
|
||||||
import type { PlatformWithComponents } from './types';
|
import type { PlatformWithComponents } from '../types';
|
||||||
|
|
||||||
export const createGraphTaskElementFromScenario = (
|
export const createGraphTaskElementFromScenario = (
|
||||||
platform: PlatformWithComponents,
|
platform: PlatformWithComponents,
|
||||||
@@ -28,6 +28,7 @@ export const createGraphTaskElementFromScenario = (
|
|||||||
template: 0,
|
template: 0,
|
||||||
templateType: null,
|
templateType: null,
|
||||||
category: null,
|
category: null,
|
||||||
|
multiable: false,
|
||||||
group: null,
|
group: null,
|
||||||
description: platform.description,
|
description: platform.description,
|
||||||
order: 0,
|
order: 0,
|
||||||
|
|||||||
@@ -69,11 +69,12 @@
|
|||||||
|
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
|
|
||||||
<a-tabs v-if="currentElement" v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs">
|
<a-tabs v-if="currentElement?.multiable === true" v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs">
|
||||||
<template #leftExtra>
|
<template #leftExtra>
|
||||||
<span class="ks-model-builder-title-icon icon-input"></span>
|
<span class="ks-model-builder-title-icon icon-input"></span>
|
||||||
</template>
|
</template>
|
||||||
<a-tab-pane key="1" tab="节点变量">
|
<a-tab-pane key="1" tab="节点变量">
|
||||||
|
|
||||||
<a-form
|
<a-form
|
||||||
v-if="currentElement.parameters && currentElement.parameters.length > 0"
|
v-if="currentElement.parameters && currentElement.parameters.length > 0"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
@@ -217,6 +218,7 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const updateNode = () => {
|
const updateNode = () => {
|
||||||
|
console.error('currentElement.value',currentElement.value)
|
||||||
if (currentNode.value && currentElement.value) {
|
if (currentNode.value && currentElement.value) {
|
||||||
// 深拷贝当前元素数据
|
// 深拷贝当前元素数据
|
||||||
const newElement = JSON.parse(JSON.stringify(currentElement.value)) as GraphTaskElement;
|
const newElement = JSON.parse(JSON.stringify(currentElement.value)) as GraphTaskElement;
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ export interface NodeTemplate {
|
|||||||
templateType: NullableString;
|
templateType: NullableString;
|
||||||
englishName: NullableString;
|
englishName: NullableString;
|
||||||
parameters: ElementParameter[],
|
parameters: ElementParameter[],
|
||||||
|
multiable?: boolean,
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface NodeDragTemplate extends NodeTemplate {
|
export interface NodeDragTemplate extends NodeTemplate {
|
||||||
|
|||||||
@@ -27,6 +27,7 @@ export const createGraphTaskElementFromTemplate = (
|
|||||||
category: template.type,
|
category: template.type,
|
||||||
group: template.group,
|
group: template.group,
|
||||||
description: template.description,
|
description: template.description,
|
||||||
|
multiable: template.multiable === true,
|
||||||
order: 0,
|
order: 0,
|
||||||
position: {
|
position: {
|
||||||
x: realRect.x ?? 0,
|
x: realRect.x ?? 0,
|
||||||
|
|||||||
@@ -67,6 +67,7 @@ export interface ElementParameter {
|
|||||||
defaultValue: NullableString,
|
defaultValue: NullableString,
|
||||||
description: NullableString,
|
description: NullableString,
|
||||||
templateType: NullableString,
|
templateType: NullableString,
|
||||||
|
groupIndex: number,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -84,6 +85,7 @@ export interface GraphTaskElement extends GraphBaseElement {
|
|||||||
inputs: any;
|
inputs: any;
|
||||||
outputs: any;
|
outputs: any;
|
||||||
order: number;
|
order: number;
|
||||||
|
multiable:boolean,
|
||||||
variables: ElementVariable[];
|
variables: ElementVariable[];
|
||||||
parameters: ElementParameter[];
|
parameters: ElementParameter[];
|
||||||
children?: GraphTaskElement[],
|
children?: GraphTaskElement[],
|
||||||
|
|||||||
@@ -183,6 +183,11 @@ export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {
|
|||||||
emitGraphEvent('node:click', ctx);
|
emitGraphEvent('node:click', ctx);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
graph.value.on('node:dblclick', (ctx: NodeViewPositionEventArgs<Dom.ClickEvent>) => {
|
||||||
|
console.info('node:dblclick', ctx);
|
||||||
|
emitGraphEvent('node:dblclick', ctx);
|
||||||
|
});
|
||||||
|
|
||||||
// 监听节点选中事件
|
// 监听节点选中事件
|
||||||
graph.value.on('node:selected', ({ node }) => {
|
graph.value.on('node:selected', ({ node }) => {
|
||||||
console.info('node select', node);
|
console.info('node select', node);
|
||||||
|
|||||||
Reference in New Issue
Block a user