From b542bde490f642bedb2f3c5e8a62b29fa1f88779 Mon Sep 17 00:00:00 2001 From: li-shengren-123456 Date: Wed, 12 Feb 2025 16:55:58 +0800 Subject: [PATCH] =?UTF-8?q?=E8=81=94=E8=B0=83=E5=88=86=E6=94=AF=E8=8A=82?= =?UTF-8?q?=E7=82=B9=E8=BE=B9=E4=BF=9D=E5=AD=98=E6=8E=A5=E5=8F=A3=EF=BC=8C?= =?UTF-8?q?yaml=E7=BC=96=E8=BE=91=E6=8A=BD=E5=B1=89=E5=88=9D=E6=AD=A5?= =?UTF-8?q?=E5=88=86=E7=A6=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- MyDemo/workFlow.vue | 554 ------------------ package.json | 2 +- .../components/codeMirror/mirrorTextArea.vue | 4 + src/views/createapp/components/workFlow.vue | 51 +- .../components/workFlowConfig/BranchNode.vue | 6 +- .../components/workFlowConfig/CustomNode.vue | 4 +- .../components/workFlowConfig/useDnD.js | 5 +- .../workFlowConfig/workFlowDialog.vue | 4 +- .../workFlowConfig/yamlEditDrawer.vue | 54 +- 9 files changed, 94 insertions(+), 590 deletions(-) delete mode 100644 MyDemo/workFlow.vue diff --git a/MyDemo/workFlow.vue b/MyDemo/workFlow.vue deleted file mode 100644 index db566dfa..00000000 --- a/MyDemo/workFlow.vue +++ /dev/null @@ -1,554 +0,0 @@ - - diff --git a/package.json b/package.json index acb8de5f..cc306759 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "highlight.js": "11.10.0", "js-yaml": "^4.1.0", "marked": "4.3", - "nanoid": "^5.0.9", "pinia": "2.1.6", "sass": "1.62.0", "typescript": "4.9.5", @@ -66,6 +65,7 @@ "globals": "15.13.0", "prettier": "3.4.2", "typescript-eslint": "8.17.0", + "uuid": "^11.0.5", "vite-plugin-qiankun": "1.0.15" } } diff --git a/src/views/createapp/components/codeMirror/mirrorTextArea.vue b/src/views/createapp/components/codeMirror/mirrorTextArea.vue index 7c5c3be6..719a7b4f 100644 --- a/src/views/createapp/components/codeMirror/mirrorTextArea.vue +++ b/src/views/createapp/components/codeMirror/mirrorTextArea.vue @@ -5,6 +5,7 @@ :autofocus="true" :extensions="extensions" :indent-with-tab="true" + :disabled="isDisabled" @change="handleChange" :tab-size="2" /> @@ -16,6 +17,7 @@ import { yaml } from '@codemirror/lang-yaml'; const emits = defineEmits(['update:updateVal']); const code = ref(''); +const isDisabled = ref(false); const extensions = [yaml()]; const handleChange = (e: string) => { code.value = e; @@ -23,11 +25,13 @@ const handleChange = (e: string) => { }; const props = defineProps<{ yamlCode: any; + disabled: boolean; }>(); watch( () => props.yamlCode, () => { code.value = props.yamlCode; + isDisabled.value = props.disabled; }, { deep: true, immediate: true }, ); diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue index f4f06362..b074b9c0 100644 --- a/src/views/createapp/components/workFlow.vue +++ b/src/views/createapp/components/workFlow.vue @@ -175,9 +175,13 @@ const handleChangeZoom = zoomValue => { watch( props, () => { - nodes.value = initNodes.value; // 获取当前工作流 workFlowList.value = [...props.flowList]; + if (workFlowList.value.length) { + nodes.value = initNodes.value; + // 默认选中第一个 + choiceFlowId(workFlowList.value?.[0]); + } }, { deep: true, immediate: true }, ); @@ -234,7 +238,7 @@ const delNode = id => { }; // 编辑yaml const editYamlDrawer = (name, yamlCode) => { - yamlContent.value = yaml.dump(yamlCode); + yamlContent.value = yamlCode; nodeName.value = name; isEditYaml.value = true; }; @@ -366,14 +370,15 @@ const nodesChange = nodes => { const getCreatedFlow = createdFlowObj => { if (flowObj) { flowObj.value = { ...createdFlowObj }; + workFlowItemName.value = createdFlowObj.name; + redrageFlow(createdFlowObj?.nodes, createdFlowObj?.edges); } // 更新当前应用下的工作流列表下拉框 - queryFlow(); + queryFlow('create'); handleClose(); - redrageFlow(flowObj.value.nodes, flowObj.value.edges); }; -const queryFlow = () => { +const queryFlow = (deal: string) => { // 查询当前应用下的flowIdList if (route.query?.appId) { api @@ -383,7 +388,15 @@ const queryFlow = () => { .then(res => { const appInfo = res?.[1]?.result; if (appInfo) { - workFlowList.value = appInfo.workflows || []; + workFlowList.value = appInfo.workflows ? [...appInfo.workflows] : []; + if (!workFlowList.value.length) { + nodes.value = []; + } else { + if (deal === 'del') { + // 默认展示第一个 + choiceFlowId(workFlowList.value[0]); + } + } } }); } @@ -404,6 +417,7 @@ const editFlow = item => { }); }; +// 删除工作流 const delFlow = item => { // 删除的如果是当前选中的，需要将选中的清空 if (workFlowItemName.value === item.name) { @@ -417,8 +431,8 @@ const delFlow = item => { .then(res => { if (res[1]?.result) { ElMessage.success('删除工作流成功'); - // 并且需要更新工作流下拉框 - queryFlow(); + // 并且需要更新工作流下拉框--默认选中第一项 + queryFlow('del'); } }); }; @@ -427,11 +441,9 @@ const delFlow = item => { const choiceFlowId = flowItem => { workFlowItemName.value = flowItem.name; editFlow(flowItem); - console.log(flowItem); }; const redrageFlow = (nodesList, edgesList) => { - console.log(getEdges.value, 'getEdge'); const newNodeList = nodesList.map(node => { let newNode = { id: node.nodeId, @@ -439,6 +451,7 @@ const redrageFlow = (nodesList, edgesList) => { data: { name: node.name, description: node.description, + parameters: node.parameters, }, position: node.position, deletable: true, @@ -452,6 +465,7 @@ const redrageFlow = (nodesList, edgesList) => { newNode.deletable = false; } else if (node.type === 'choice') { newNode.type = 'branch'; + newNode.data.parameters['input_parameters'] = node.parameters; } else { newNode.type = 'custom'; } @@ -464,6 +478,7 @@ const redrageFlow = (nodesList, edgesList) => { target: edge.targetNode, branchId: edge.branchId, type: 'normal', + sourceHandle: edge.branchId, // 这里是分支边需要以确定源头handle }; // 线分支条件需后续添加 return newEdge; @@ -474,7 +489,6 @@ const redrageFlow = (nodesList, edgesList) => { const saveFlow = () => { const appId = route.query?.appId; - if (!flowObj.value.flowId) { return; } @@ -498,6 +512,13 @@ const saveFlow = () => { nodeId: item.id, type: item.type, }; + } else if (item.type === 'branch') { + // 这里是需要将parameters + newItem = { + ...newItem, + type: 'choice', + parameters: item.data.parameters, + }; } return newItem; }); @@ -535,7 +556,7 @@ const saveFlow = () => { .then(res => { if (res[1].result) { ElMessage.success('更新成功'); - queryFlow(); + queryFlow('update'); } }); }; @@ -657,13 +678,15 @@ defineExpose({ -
+
{{ item.name }}
diff --git a/src/views/createapp/components/workFlowConfig/BranchNode.vue b/src/views/createapp/components/workFlowConfig/BranchNode.vue index 46a41c42..2c1dd27a 100644 --- a/src/views/createapp/components/workFlowConfig/BranchNode.vue +++ b/src/views/createapp/components/workFlowConfig/BranchNode.vue @@ -61,7 +61,7 @@ const editYaml = (nodeName, yamlCode) => {
- 编辑 删除 @@ -69,8 +69,8 @@ const editYaml = (nodeName, yamlCode) => {
{{ props.data.description }}
-
-
{{ item.description }}
+
+
{{ item.description }}
{
- 编辑 + 编辑 删除
diff --git a/src/views/createapp/components/workFlowConfig/useDnD.js b/src/views/createapp/components/workFlowConfig/useDnD.js index f545cc4a..a7733d6c 100644 --- a/src/views/createapp/components/workFlowConfig/useDnD.js +++ b/src/views/createapp/components/workFlowConfig/useDnD.js @@ -1,13 +1,12 @@ import { useVueFlow } from '@vue-flow/core'; import { ref, watch } from 'vue'; - -let id = 3; +import { v4 as uuidv4 } from 'uuid'; /** * @returns {string} - A unique id. */ function getId() { - return `node${id++}`; + return uuidv4(); } /** diff --git a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue index a49b5743..e5a6c557 100644 --- a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue +++ b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue @@ -41,7 +41,7 @@ import { ref } from 'vue'; import { api } from 'src/apis'; import { useRoute } from 'vue-router'; -import { nanoid } from 'nanoid'; +import { v4 as uuidv4 } from 'uuid'; import { ElMessage } from 'element-plus'; const workFlowDiaVisible = ref(true); const route = useRoute(); @@ -70,7 +70,7 @@ const handleSubmit = () => { // 创建工作流 const appId = route.query?.appId; // 创建使用生成的flowId - const flowId = nanoid(); + const flowId = uuidv4(); // 调用接口新建工作流 api .createOrUpdateFlowTopology( diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue index 4b51b343..fc3ab6bb 100644 --- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue +++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue @@ -13,7 +13,23 @@