diff --git a/src/assets/images/app_upload.svg b/src/assets/images/app_upload.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a06500856810a3ecf1b2f1f35bdd981353d7c539
--- /dev/null
+++ b/src/assets/images/app_upload.svg
@@ -0,0 +1,41 @@
+
diff --git a/src/assets/images/app_upload_hover.svg b/src/assets/images/app_upload_hover.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e8b8ee998d156e857335bbc3eab2266ea9d7255e
--- /dev/null
+++ b/src/assets/images/app_upload_hover.svg
@@ -0,0 +1,33 @@
+
diff --git a/src/assets/images/uplod_icon.svg b/src/assets/images/uplod_icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7dbc7e276801d65958d3e2b3136dc44e72aa87b7
--- /dev/null
+++ b/src/assets/images/uplod_icon.svg
@@ -0,0 +1,19 @@
+
diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue
index edd540e1323806643169947dfcc0d6e4ceabbc1a..bf7be859606319bf7371c2f258437049b4163eaa 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 e7b01047d194a46ec11ef9db2f0a1fdabf25fa1f..2429054743d247ba6fb3b029b0f229a9d587de54 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();
+};
-
+
-
+