From 02cd5cdcb18fed337ca28f692ddbe1767e8dddec Mon Sep 17 00:00:00 2001 From: li-shengren-123456 Date: Tue, 11 Feb 2025 16:57:28 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E6=99=AE=E9=80=9A?= =?UTF-8?q?=E8=BE=B9=E5=92=8C=E7=BA=BF=E7=9A=84=E4=BF=9D=E5=AD=98=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E4=BB=A5=E5=8F=8A=E5=BA=94=E7=94=A8=E4=B8=AD=E5=BF=83?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=8C=E6=AC=A1=E5=88=A0=E9=99=A4=E7=A1=AE?= =?UTF-8?q?=E5=AE=9A=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/app/index.vue | 42 ++++++---- src/views/app/style.scss | 24 ++++++ src/views/createapp/components/workFlow.vue | 83 +++++++++++++++---- .../workFlowConfig/workFlowDialog.vue | 4 +- src/views/styles/workFlowArrange.scss | 27 ++++-- 5 files changed, 134 insertions(+), 46 deletions(-) diff --git a/src/views/app/index.vue b/src/views/app/index.vue index 30480e39..44eb2f6a 100644 --- a/src/views/app/index.vue +++ b/src/views/app/index.vue @@ -89,10 +89,11 @@ import TextMoreTootip from '@/components/textMoreTootip/index.vue'; import { IconCaretDown, IconSearch, IconFavorite, IconUnfavorite, IconSuccess } from '@computing/opendesign-icons'; import './style.scss'; -import { ref, onMounted, watch } from 'vue'; +import { ref, onMounted, watch, markRaw } from 'vue'; import { useRouter } from 'vue-router'; import { api } from 'src/apis'; -import { ElMessage } from 'element-plus'; +import { ElMessage, ElMessageBox } from 'element-plus'; +import { IconAlarm } from '@computing/opendesign-icons'; const router = useRouter(); const appType = ref('my'); const appSearchType = ref('all'); @@ -184,22 +185,27 @@ const handleSearchAppList = type => { const handleDelApp = (e, item) => { e.stopPropagation(); - api - .deleteSingleAppData({ - id: item.appId, - }) - .then(res => { - if (res[1]) { - ElMessage({ - showClose: true, - message: '删除成功', - icon: IconSuccess, - customClass: 'o-message--success', - duration: 3000, - }); - handleParmasQueryAppList(); - } - }); + ElMessageBox.confirm('确定删除此应用吗？', '提示', { + type: 'warning', + icon: markRaw(IconAlarm), + }).then(() => { + api + .deleteSingleAppData({ + id: item.appId, + }) + .then(res => { + if (res[1]) { + ElMessage({ + showClose: true, + message: '删除成功', + icon: IconSuccess, + customClass: 'o-message--success', + duration: 3000, + }); + handleParmasQueryAppList(); + } + }); + }); }; const handleEditApp = (e, item) => { diff --git a/src/views/app/style.scss b/src/views/app/style.scss index b4915a67..607b3272 100644 --- a/src/views/app/style.scss +++ b/src/views/app/style.scss @@ -180,3 +180,27 @@ color: var(--o-color-white) !important; } } +// 应用中心删除二次提示样式 +.el-message-box { + min-width: 400px; + padding: 0px !important; + border-radius: 8px; + .el-message-box__headerbtn { + width: 16px; + height: 16px; + right: 20px; + } + .el-message-box__status { + top: 0px; + } + .el-message-box__message { + padding-left: 4px; + } + .el-message-box__btns { + flex-direction: row; + .el-button { + width: 64px; + height: 24px; + } + } +} diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue index 985e39d1..f4f06362 100644 --- a/src/views/createapp/components/workFlow.vue +++ b/src/views/createapp/components/workFlow.vue @@ -3,7 +3,7 @@ import '../../styles/workFlowArrange.scss'; import { onMounted, ref, watch } from 'vue'; import { useI18n } from 'vue-i18n'; import { ElTooltip, ElMessage } from 'element-plus'; -import { VueFlow, useVueFlow, Panel } from '@vue-flow/core'; +import { VueFlow, useVueFlow, Panel, Position } from '@vue-flow/core'; import { Background } from '@vue-flow/background'; import { MiniMap } from '@vue-flow/minimap'; import BranchNode from './workFlowConfig/BranchNode.vue'; @@ -28,7 +28,7 @@ const isCopilotAsideVisible = ref(true); const apiSearchValue = ref(); const activeNames = ref([]); const activeName = ref(); -const workFlowItem = ref(); +const workFlowItemName = ref(); const isAddWorkFlow = ref(false); const editData = ref(); const dialogType = ref(''); @@ -44,7 +44,7 @@ const emits = defineEmits(['validateConnect']); const route = useRoute(); const workFlowList = ref([]); const props = defineProps(['flowList']); -const flowObj = ref(); +const flowObj = ref({}); const nodes = ref([]); const hanleAsideVisible = () => { if (!copilotAside.value) return; @@ -363,13 +363,15 @@ const nodesChange = nodes => { }; // 子组件获取的flow -const getCreatedFlow = (flowObj) => { +const getCreatedFlow = createdFlowObj => { if (flowObj) { - flowObj.value = flowObj; + flowObj.value = { ...createdFlowObj }; } + // 更新当前应用下的工作流列表下拉框 queryFlow(); handleClose(); -} + redrageFlow(flowObj.value.nodes, flowObj.value.edges); +}; const queryFlow = () => { // 查询当前应用下的flowIdList @@ -397,11 +399,16 @@ const editFlow = item => { .then(res => { if (res[1]?.result?.flow) { flowObj.value = res[1].result.flow; + redrageFlow(flowObj.value.nodes, flowObj.value.edges); } }); }; const delFlow = item => { + // 删除的如果是当前选中的，需要将选中的清空 + if (workFlowItemName.value === item.name) { + workFlowItemName.value = ''; + } api .delFlowTopology({ appId: route.query?.appId, @@ -418,7 +425,51 @@ const delFlow = item => { // 下拉选择对应的工作流 const choiceFlowId = flowItem => { - workFlowItem.value = flowItem.name; + 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, + type: node.type, + data: { + name: node.name, + description: node.description, + }, + position: node.position, + deletable: true, + }; + if (node.type === 'start' || node.type === 'end') { + newNode.data = { + ...newNode.data, + target: node.type === 'start' ? 'source' : 'target', + nodePosition: node.type === 'start' ? 'Right' : 'Left', + }; + newNode.deletable = false; + } else if (node.type === 'choice') { + newNode.type = 'branch'; + } else { + newNode.type = 'custom'; + } + return newNode; + }); + const newEdgeList = edgesList.map(edge => { + let newEdge = { + id: edge.edgeId, + source: edge.sourceNode, + target: edge.targetNode, + branchId: edge.branchId, + type: 'normal', + }; + // 线分支条件需后续添加 + return newEdge; + }); + setNodes(newNodeList); + setEdges(newEdgeList); }; const saveFlow = () => { @@ -433,10 +484,10 @@ const saveFlow = () => { enable: true, editable: false, position: item.position, - apiId: item.data.nodeMetaDataId, + apiId: item.data.nodeMetaDataId, serviceId: item.data.serviceId, nodeId: item.id, - ...item.data + ...item.data, }; if (item.type === 'end' || item.type === 'start') { // 更新开始结束节点结构 @@ -457,7 +508,7 @@ const saveFlow = () => { sourceNode: item.sourceNode.id, targetNode: item.targetNode.id, type: item.type, - branchId: item.sourceHandle || '' + branchId: item.sourceHandle || '', }; return newEdge; }); @@ -483,7 +534,7 @@ const saveFlow = () => { ) .then(res => { if (res[1].result) { - ElMessage.success('更新成功') + ElMessage.success('更新成功'); queryFlow(); } }); @@ -516,11 +567,7 @@ defineExpose({
- +