diff --git a/MyDemo/workFlow.vue b/MyDemo/workFlow.vue deleted file mode 100644 index db566dfa70adfdc0d60b78cc3320dc09cdedd74a..0000000000000000000000000000000000000000 --- a/MyDemo/workFlow.vue +++ /dev/null @@ -1,554 +0,0 @@ - - diff --git a/package.json b/package.json index acb8de5f256a3a9adbc4d6ef2362beba72048e92..cc306759201967ff7e85740ef893b0532491b92a 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 7c5c3be67e39ef314e4abe5e05ae353ad6f1200f..719a7b4f1ffd7d03d6d4298b52f2ec36ff8adc90 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 f4f0636201d132cfbdb174c5a06b8bc1b961fa5b..b074b9c02e2ae9e7d95c8c43c660a1d6bb848f2c 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 46a41c4274982d9dd784f69b7f89d942495e7083..2c1dd27a1ca29e7549f29ea9d67cc47a03ef20f0 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 f545cc4a32877c7bce5219e6ef6f78aa6fc7e375..a7733d6ca2f19bb5c43caadf507c5d534c593f8d 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 a49b57430b05d14e92fb02093c826912dae539ee..e5a6c5573a7fe16f454deadc683e8c39ed687551 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 4b51b343efdc2b866ecd6c1a39d6dd750d4fc59f..fc3ab6bbff96de9221080d1199702210d85e1ab6 100644 --- a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue +++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue @@ -13,7 +13,23 @@