From c584e1e3245b74d376a4a65161515707e103dab4 Mon Sep 17 00:00:00 2001 From: li-shengren-123456 Date: Mon, 20 Jan 2025 16:29:17 +0800 Subject: [PATCH] =?UTF-8?q?=E7=95=8C=E9=9D=A2=E9=85=8D=E7=BD=AE=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0=E5=9B=BE=E6=A0=87=E6=9B=BF=E6=8D=A2=EF=BC=8C=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=B5=81=E7=A8=8B=E5=9B=BE=E8=8A=82=E7=82=B9=E8=BF=9E?= =?UTF-8?q?=E7=BA=BF=E6=A0=A1=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/app_upload.svg | 41 ++++++++++++++ src/assets/images/app_upload_hover.svg | 33 ++++++++++++ src/assets/images/uplod_icon.svg | 19 +++++++ src/views/createapp/components/appConfig.vue | 3 +- src/views/createapp/components/workFlow.vue | 53 ++++++++++++++++--- .../components/workFlowConfig/useDnD.js | 23 +++----- src/views/createapp/index.vue | 9 +++- src/views/createapp/style.scss | 27 +++++++--- 8 files changed, 174 insertions(+), 34 deletions(-) create mode 100644 src/assets/images/app_upload.svg create mode 100644 src/assets/images/app_upload_hover.svg create mode 100644 src/assets/images/uplod_icon.svg diff --git a/src/assets/images/app_upload.svg b/src/assets/images/app_upload.svg new file mode 100644 index 0000000..a065008 --- /dev/null +++ b/src/assets/images/app_upload.svg @@ -0,0 +1,41 @@ + + + Created with Pixso. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/app_upload_hover.svg b/src/assets/images/app_upload_hover.svg new file mode 100644 index 0000000..e8b8ee9 --- /dev/null +++ b/src/assets/images/app_upload_hover.svg @@ -0,0 +1,33 @@ + + + Created with Pixso. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/uplod_icon.svg b/src/assets/images/uplod_icon.svg new file mode 100644 index 0000000..7dbc7e2 --- /dev/null +++ b/src/assets/images/uplod_icon.svg @@ -0,0 +1,19 @@ + + + Created with Pixso. + + + + + + + + + + + + + + + + diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue index edd540e..bf7be85 100644 --- a/src/views/createapp/components/appConfig.vue +++ b/src/views/createapp/components/appConfig.vue @@ -102,7 +102,8 @@ const httpRequest = res => { :http-request="httpRequest" > - +
+
上传图标 diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue index e7b0104..2429054 100644 --- a/src/views/createapp/components/workFlow.vue +++ b/src/views/createapp/components/workFlow.vue @@ -28,6 +28,8 @@ const editData = ref(); const dialogType = ref(''); const isEditYaml = ref(false); const flowZoom = ref(1); +const isNodeAndLineConnect = ref(false); +const emits = defineEmits(['validateConnect']); function hanleAsideVisible(): void { if (!copilotAside.value) return; if (isCopilotAsideVisible.value) { @@ -39,7 +41,7 @@ function hanleAsideVisible(): void { const { onConnect, addEdges, getNodes, getEdges, findNode, removeNodes, setViewport, getViewport, fitView } = useVueFlow(); -const { layout } = useLayout(); +const { layout } = useLayout(); const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } = useDragAndDrop(); // 这里是初始化的开始结束的节点 @@ -65,7 +67,7 @@ const nodes = ref([ target: 'target', }, position: { x: 600, y: 160 }, - } + }, ]); // 开始的边默认为空数组【当然回显时应该有值】 const edges = ref([]); @@ -115,8 +117,9 @@ onConnect(e => { ...e, type: 'custom', }); + // 添加边连接时-判断节点是否都连接 + nodeAndLineConnection(); }); - const handleChange = () => {}; // 打开新增工作流弹窗 const addWorkFlow = () => { @@ -133,6 +136,8 @@ const delNode = id => { if (id) { const node = findNode(id); node ? removeNodes(node) : ''; + // 删除节点时-判断节点是否都连接 + nodeAndLineConnection(); } }; // 编辑yaml @@ -150,16 +155,52 @@ const handleZommOnScroll = () => { }; async function layoutGraph(direction) { - nodes.value = layout(nodes.value, edges.value, direction); nextTick(() => { fitView(); }); } + +const nodeAndLineConnection = () => { + // 获取当前所有节点和边 + const curNodes = [...getNodes.value]; + const curEdges = [...getEdges.value]; + // 判断开始节点是否连接 + let isNodeConnect = true; + const len = curNodes.length; + // 遍历每个节点 + for (let i = 0; i < len; i++) { + if (curNodes[i].type === 'custom-start') { + // 判断开始节点是否连接 + isNodeConnect = curEdges.some(item => item.sourceNode?.type === 'custom-start'); + } else if (curNodes[i].type === 'custom-end') { + // 判断结束节点是否连接 + isNodeConnect = curEdges.some(item => item.targetNode?.type === 'custom-end'); + } else { + // 判断普通节点是否有连接-普通节点开始和结束都需要进行判断 + const isStartCustomNodeConnect = curEdges.some(item => item.sourceNode?.id === curNodes[i].id); + const isEndCustomNodeConnect = curEdges.some(item => item.targetNode?.id === curNodes[i].id); + isNodeConnect = isStartCustomNodeConnect && isEndCustomNodeConnect; + } + if (!isNodeConnect) { + break; + } + } + // 是否所有节点都已连接 + isNodeAndLineConnect.value = isNodeConnect; + emits('validateConnect', isNodeAndLineConnect.value); +}; + +// 拖拽添加 +const dropFunc = e => { + onDrop(e); + // 添加节点时-判断节点是否都连接 + nodeAndLineConnection(); +};