From 6718e0fb08b51ad39890fa1e3c7b4079051ee7c2 Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Tue, 11 Feb 2025 10:23:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E8=AF=95=E5=88=9B=E5=BB=BA=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E4=B8=8E=E5=88=A0=E9=99=A4=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/apis/workFlow/workFlowService.ts          |  11 +-
 src/views/createapp/components/appConfig.vue  |  38 +--
 src/views/createapp/components/workFlow.vue   | 232 ++++++++++++++----
 .../components/workFlowConfig/BranchNode.vue  |   7 +-
 .../workFlowConfig/CustomSaENode.vue          |   6 +-
 .../components/workFlowConfig/useDnD.js       |  12 +-
 .../workFlowConfig/workFlowDialog.vue         |  99 +++++++-
 src/views/createapp/index.vue                 |  23 +-
 src/views/styles/createApp.scss               |   5 +
 src/views/styles/workFlowArrange.scss         |  22 +-
 11 files changed, 363 insertions(+), 93 deletions(-)

diff --git a/package.json b/package.json
index b5e6982..acb8de5 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "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",
diff --git a/src/apis/workFlow/workFlowService.ts b/src/apis/workFlow/workFlowService.ts
index 6afc3c3..1314394 100644
--- a/src/apis/workFlow/workFlowService.ts
+++ b/src/apis/workFlow/workFlowService.ts
@@ -55,17 +55,16 @@ export const createOrUpdateFlowTopology = (
  * @returns
  */
 export const delFlowTopology = (params: {
-  appId: number;
-  flowId: number;
+  appId: string;
+  flowId: string;
 }): Promise<[any, FcResponse<unknown> | undefined]> => {
-  return del('/api/flow', params);
+  return del(`/api/flow?appId=${params.appId}&flowId=${params.flowId}`);
 };
 
-
 export const workFlowApi = {
   queryAllFlowService,
   querySingleFlowServiceNode,
   querySingleFlowTopology,
   delFlowTopology,
-  createOrUpdateFlowTopology
-};
\ No newline at end of file
+  createOrUpdateFlowTopology,
+};
diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue
index db85caf..a85fe12 100644
--- a/src/views/createapp/components/appConfig.vue
+++ b/src/views/createapp/components/appConfig.vue
@@ -10,6 +10,7 @@ const activeName = ref([1, 2, 3]);
 const activeNames = ref([1, 2, 3]);
 const route = useRoute();
 const props = withDefaults(defineProps(), {});
+const emits = defineEmits(['getFlowList']);
 
 const createAppForm = ref({
   icon: '',
@@ -17,10 +18,11 @@ const createAppForm = ref({
   description: '',
   links: [],
   recommendedQuestions: [],
-  dialogRounds: 1,
-  permissionType: 'all',
+  dialogRounds: 3,
+  permissionType: 'private',
   selectedPeople: [],
 });
+const flowDataList = ref([]);
 const searchName = ref('');
 const permissionTypeList = [
   {
@@ -42,6 +44,8 @@ const curPersonList = ref([...permissionList.value]);
 const createAppRole = ref({
   name: [{ required: true, message: '应用名称不能为空', trigger: 'blur' }],
   description: [{ required: true, message: '应用简介不能为空', trigger: 'change' }],
+  dialogRounds: [{ required: true, message: '对话轮次不能为空', trigger: 'change' }],
+  descripermissionTypeption: [{ required: true, message: '权限不能为空', trigger: 'change' }],
 });
 const createAppFormRef = ref();
 const modeOptions = reactive([
@@ -85,17 +89,21 @@ onMounted(() => {
         id: route.query?.appId as string,
       })
       .then(res => {
-        let appInfo = res?.[1]?.result;
-        createAppForm.value = {
-          icon: appInfo.icon,
-          name: appInfo.name,
-          description: appInfo.description,
-          links: appInfo.links.map(item => item.url),
-          recommendedQuestions: appInfo.recommendedQuestions,
-          dialogRounds: appInfo.dialogRounds,
-          permission: { visibility: appInfo.permission.visibility },
-          permissionType: appInfo.permission.visibility,
-        };
+        const appInfo = res?.[1]?.result;
+        if (appInfo) {
+          createAppForm.value = {
+            icon: appInfo.icon,
+            name: appInfo.name,
+            description: appInfo.description,
+            links: appInfo.links.map(item => item.url),
+            recommendedQuestions: appInfo.recommendedQuestions,
+            dialogRounds: appInfo.dialogRounds,
+            permission: { visibility: appInfo.permission.visibility },
+            permissionType: appInfo.permission.visibility,
+          };
+          flowDataList.value = appInfo.workflows;
+          emits('getFlowList', flowDataList.value);
+        }
       });
   }
 });
@@ -213,7 +221,7 @@ defineExpose({
             <IconCaretRight />
           </el-icon>
         </template>
-        <el-form-item label="请选择对话轮次" prop="multiSession" class="notRequired">
+        <el-form-item label="请选择对话轮次" prop="dialogRounds">
           <div class="multiSessionItem">
             <el-input-number v-model="createAppForm.dialogRounds" :step="1" :min="1" :max="10"></el-input-number>
             <span class="sessionUnit">(1 ~ 10)</span>
@@ -227,7 +235,7 @@ defineExpose({
             <IconCaretRight />
           </el-icon>
         </template>
-        <el-form-item label="权限" prop="permissionType" class="permissionItem notRequired">
+        <el-form-item label="权限" prop="permissionType" class="permissionItem">
           <div class="permissionSelect">
             <el-radio-group v-model="createAppForm.permissionType">
               <el-radio v-for="(item, index) in permissionTypeList" :key="index" :value="item.value">
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 4e1276e..985e39d 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import '../../styles/workFlowArrange.scss';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ElTooltip } from 'element-plus';
+import { ElTooltip, ElMessage } from 'element-plus';
 import { VueFlow, useVueFlow, Panel } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { MiniMap } from '@vue-flow/minimap';
@@ -20,6 +20,7 @@ import EditYamlDrawer from './workFlowConfig/yamlEditDrawer.vue';
 import { api } from 'src/apis';
 import yaml from 'js-yaml';
 import { BranchSourceIdType } from './types';
+import { useRoute } from 'vue-router';
 
 const { t } = useI18n();
 const copilotAside = ref<HTMLElement>();
@@ -40,6 +41,11 @@ const apiServiceList = ref([]);
 const yamlContent = ref();
 const hasWorkFlow = ref(true);
 const emits = defineEmits(['validateConnect']);
+const route = useRoute();
+const workFlowList = ref([]);
+const props = defineProps(['flowList']);
+const flowObj = ref();
+const nodes = ref([]);
 const hanleAsideVisible = () => {
   if (!copilotAside.value) return;
   if (isCopilotAsideVisible.value) {
@@ -68,13 +74,13 @@ const { layout } = useLayout();
 
 const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } = useDragAndDrop();
 // 这里是初始化的开始结束的节点
-const nodes = ref([
+const initNodes = ref([
   {
     id: 'node1',
-    type: 'custom-start',
+    type: 'start',
     data: {
       name: '开始',
-      desc: '',
+      description: '',
       nodePosition: 'Right',
       target: 'source',
     },
@@ -83,10 +89,10 @@ const nodes = ref([
   },
   {
     id: 'node2',
-    type: 'custom-end',
+    type: 'end',
     data: {
       name: '结束',
-      desc: '',
+      description: '',
       nodePosition: 'Left',
       target: 'target',
     },
@@ -158,8 +164,6 @@ const nodeStancesList = ref([
   },
 ]);
 
-const apiServiceNodeList = ref([]);
-
 const handleChangeZoom = zoomValue => {
   setViewport({
     zoom: zoomValue,
@@ -168,6 +172,16 @@ const handleChangeZoom = zoomValue => {
   });
 };
 
+watch(
+  props,
+  () => {
+    nodes.value = initNodes.value;
+    // 获取当前工作流
+    workFlowList.value = [...props.flowList];
+  },
+  { deep: true, immediate: true },
+);
+
 onConnect(e => {
   // 边的起点和终点节点的两个状态
   const sourceItem = findNode(e.source);
@@ -175,13 +189,17 @@ onConnect(e => {
   // 获取当前状态
   const sourceStatus = sourceItem?.data?.status || 'default';
   const targetStatus = targetItem?.data?.status || 'default';
+  // 更新source源节点handle连接状态
+  if (sourceItem?.id) {
+    updateConnectNodeHandle(sourceItem.id, e.sourceHandle, false);
+  }
   addEdges({
     ...e,
     data: {
       sourceStatus,
       targetStatus,
     },
-    type: 'custom',
+    type: 'normal',
   });
   // 添加边连接时-判断节点是否都连接
   nodeAndLineConnection();
@@ -190,20 +208,6 @@ const handleChange = activeList => {
   activeNames.value = activeName.value;
 };
 
-const serviceIdObj = ref({});
-
-const handleClickCollapse = serviceId => {
-  if (!serviceIdObj.value[serviceId]) {
-    api
-      .querySingleFlowServiceNode({
-        serviceId: serviceId,
-      })
-      .then(node => {
-        serviceIdObj.value[serviceId] = node[1]?.result.nodeMetaDatas;
-        apiServiceNodeList.value = node[1]?.result.nodeMetaDatas;
-      });
-  }
-};
 // 打开新增工作流弹窗
 const addWorkFlow = () => {
   // 待增加新增弹窗
@@ -257,12 +261,12 @@ const nodeAndLineConnection = () => {
   const len = curNodes.length;
   // 遍历每个节点
   for (let i = 0; i < len; i++) {
-    if (curNodes[i].type === 'custom-start') {
+    if (curNodes[i].type === 'start') {
       // 判断开始节点是否连接
-      isNodeConnect = curEdges.some(item => item.sourceNode?.type === 'custom-start');
-    } else if (curNodes[i].type === 'custom-end') {
+      isNodeConnect = curEdges.some(item => item.sourceNode?.type === 'start');
+    } else if (curNodes[i].type === 'end') {
       // 判断结束节点是否连接
-      isNodeConnect = curEdges.some(item => item.targetNode?.type === 'custom-end');
+      isNodeConnect = curEdges.some(item => item.targetNode?.type === 'end');
     } else {
       // 判断普通节点是否有连接-普通节点开始和结束都需要进行判断
       const isStartCustomNodeConnect = curEdges.some(item => item.sourceNode?.id === curNodes[i].id);
@@ -280,6 +284,10 @@ const nodeAndLineConnection = () => {
 
 // 拖拽添加
 const dropFunc = e => {
+  if (!flowObj.value?.flowId) {
+    ElMessage.warning('请先创建/编辑工作流');
+    return;
+  }
   onDrop(e);
   // 添加节点时-判断节点是否都连接
   nodeAndLineConnection();
@@ -315,14 +323,6 @@ onMounted(() => {
       apiServiceList.value = res[1]?.result.services;
       activeName.value = [res[1]?.result.services[0]?.serviceId];
       activeNames.value = [res[1]?.result.services[0]?.serviceId];
-      api
-        .querySingleFlowServiceNode({
-          serviceId: res[1]?.result.services[0]?.serviceId,
-        })
-        .then(node => {
-          serviceIdObj.value[res[1]?.result.services[0]?.serviceId] = node[1]?.result.nodeMetaDatas;
-          apiServiceNodeList.value = node[1]?.result.nodeMetaDatas;
-        });
     });
 });
 
@@ -362,8 +362,136 @@ const nodesChange = nodes => {
   }
 };
 
+// 子组件获取的flow
+const getCreatedFlow = (flowObj) => {
+  if (flowObj) {
+    flowObj.value = flowObj;
+  }
+  queryFlow();
+  handleClose();
+}
+
+const queryFlow = () => {
+  // 查询当前应用下的flowIdList
+  if (route.query?.appId) {
+    api
+      .querySingleAppData({
+        id: route.query?.appId as string,
+      })
+      .then(res => {
+        const appInfo = res?.[1]?.result;
+        if (appInfo) {
+          workFlowList.value = appInfo.workflows || [];
+        }
+      });
+  }
+};
+
+// 点击编辑工作流--查询当前工作流数据-后续添加回显
+const editFlow = item => {
+  api
+    .querySingleFlowTopology({
+      appId: route.query?.appId,
+      flowId: item.id,
+    })
+    .then(res => {
+      if (res[1]?.result?.flow) {
+        flowObj.value = res[1].result.flow;
+      }
+    });
+};
+
+const delFlow = item => {
+  api
+    .delFlowTopology({
+      appId: route.query?.appId,
+      flowId: item.id,
+    })
+    .then(res => {
+      if (res[1]?.result) {
+        ElMessage.success('删除工作流成功');
+        // 并且需要更新工作流下拉框
+        queryFlow();
+      }
+    });
+};
+
+// 下拉选择对应的工作流
+const choiceFlowId = flowItem => {
+  workFlowItem.value = flowItem.name;
+};
+
+const saveFlow = () => {
+  const appId = route.query?.appId;
+
+  if (!flowObj.value.flowId) {
+    return;
+  }
+  // 将对应的节点和边存储格式改造
+  const updateNodes = getNodes.value.map(item => {
+    let newItem = {
+      enable: true,
+      editable: false,
+      position: item.position,
+      apiId: item.data.nodeMetaDataId, 
+      serviceId: item.data.serviceId,
+      nodeId: item.id,
+      ...item.data
+    };
+    if (item.type === 'end' || item.type === 'start') {
+      // 更新开始结束节点结构
+      newItem = {
+        ...newItem,
+        apiId: item.type, // 这两个id个应该没有-暂时随意复制
+        serviceId: item.type,
+        nodeId: item.id,
+        type: item.type,
+      };
+    }
+    return newItem;
+  });
+  // 更新对应的边的结构
+  const updateEdges = getEdges.value.map(item => {
+    let newEdge = {
+      edgeId: item.id,
+      sourceNode: item.sourceNode.id,
+      targetNode: item.targetNode.id,
+      type: item.type,
+      branchId: item.sourceHandle || ''
+    };
+    return newEdge;
+  });
+  // 更新最新的节点与边的数据
+  api
+    .createOrUpdateFlowTopology(
+      {
+        appId: appId,
+        flowId: flowObj.value.flowId,
+        topologyCheck: false,
+      },
+      {
+        flow: {
+          ...flowObj.value,
+          nodes: updateNodes,
+          edges: updateEdges,
+        },
+        focusPoint: {
+          x: 800,
+          y: 800,
+        },
+      },
+    )
+    .then(res => {
+      if (res[1].result) {
+        ElMessage.success('更新成功')
+        queryFlow();
+      }
+    });
+};
+
 defineExpose({
   handleDemo,
+  saveFlow,
 });
 </script>
 <template>
@@ -390,7 +518,6 @@ defineExpose({
               <el-collapse v-model="activeName" @change="handleChange" class="o-hpc-collapse">
                 <el-collapse-item
                   title="Consistency"
-                  @click="handleClickCollapse(item.serviceId)"
                   :name="item.serviceId"
                   v-for="item in apiServiceList"
                 >
@@ -405,10 +532,10 @@ defineExpose({
                   </template>
                   <div
                     class="stancesItem"
-                    v-for="(node, index) in serviceIdObj[item.serviceId]"
-                    :key="node.apiId"
+                    v-for="(node, index) in item.nodeMetaDatas"
+                    :key="index"
                     :draggable="true"
-                    @dragstart="onDragStart($event, 'custom', { serviceId: item.serviceId, ...node })"
+                    @dragstart="onDragStart($event, node.type, { serviceId: item.serviceId, ...node }, flowObj?.flowId)"
                   >
                     {{ node.name }}
                   </div>
@@ -447,16 +574,16 @@ defineExpose({
           <BranchNode v-bind="branchNodeProps" @delNode="delNode" @editYamlDrawer="editYamlDrawer"></BranchNode>
         </template>
 
-        <template #node-custom-start="customNodeStartProps">
-          <CustomSaENode v-bind="customNodeStartProps"></CustomSaENode>
+        <template #node-start="nodeStartProps">
+          <CustomSaENode v-bind="nodeStartProps"></CustomSaENode>
         </template>
 
-        <template #node-custom-end="customNodeEndProps">
-          <CustomSaENode v-bind="customNodeEndProps"></CustomSaENode>
+        <template #node-end="nodeEndProps">
+          <CustomSaENode v-bind="nodeEndProps"></CustomSaENode>
         </template>
 
         <!-- 自定义边线 -->
-        <template #edge-custom="props">
+        <template #edge-normal="props">
           <CustomEdge
             :id="props.id"
             :key="props.id"
@@ -486,6 +613,20 @@ defineExpose({
       <div class="workFlowOps" v-if="hasWorkFlow">
         <div class="workFlowSelect">
           <el-select v-model="workFlowItem" placeholder="请选择" :suffix-icon="IconCaretDown">
+            <el-option
+              class="workFlowOption"
+              v-for="(item, index) in workFlowList"
+              :key="index"
+              @click="choiceFlowId(item)"
+            >
+              <div class="flowName">{{ item.name }}</div>
+              <div class="dealIcon">
+                <img class="conversation-title__svg" src="@/assets/svgs/light_editor.svg" @click="editFlow(item)" />
+              </div>
+              <div class="dealIcon">
+                <img class="conversation-title__svg" src="@/assets/svgs/light_delete.svg" @click.stop="delFlow(item)" />
+              </div>
+            </el-option>
             <template #footer class="selectFooter">
               <div class="addWorkFlow" @click="addWorkFlow">
                 <el-icon>
@@ -513,6 +654,7 @@ defineExpose({
       :editData="editData"
       :dialogType="dialogType"
       @handleClose="handleClose"
+      @createFlowId="getCreatedFlow"
     ></WorkFlowDialog>
   </div>
   <EditYamlDrawer
diff --git a/src/views/createapp/components/workFlowConfig/BranchNode.vue b/src/views/createapp/components/workFlowConfig/BranchNode.vue
index e7d38f7..46a41c4 100644
--- a/src/views/createapp/components/workFlowConfig/BranchNode.vue
+++ b/src/views/createapp/components/workFlowConfig/BranchNode.vue
@@ -19,10 +19,6 @@ const props = defineProps({
     type: Object,
     required: false,
   },
-  mark: {
-    type: String,
-    required: false,
-  },
 });
 const emits = defineEmits(['delNode', 'editYamlDrawer']);
 
@@ -73,6 +69,9 @@ const editYaml = (nodeName, yamlCode) => {
         </div>
       </div>
       <div class="desc" v-if="props.data.description">{{ props.data.description }}</div>
+      <div class="branchDesc" v-if="props.data.parametersTemplate?.choice">
+        <div v-for="(item, index) in props.data.parametersTemplate.choice" :key="index"> {{ item.description }}</div>
+      </div>
     </div>
     <Handle
       class="souceFirstHandle"
diff --git a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
index 12eb285..db3bdbd 100644
--- a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
@@ -7,7 +7,7 @@ const props = defineProps({
     required: true,
   },
   data: {
-    type: Object, // 目前定义的对象中只有label，desc属性是有的，后续可能会有展开的情形
+    type: Object, // 目前定义的对象中只有label，description属性是有的，后续可能会有展开的情形
     required: true,
   },
   type: {
@@ -59,8 +59,8 @@ watch(
 </template>
 
 <style lang="scss">
-.vue-flow__node-custom-start,
-.vue-flow__node-custom-end {
+.vue-flow__node-start,
+.vue-flow__node-end {
   margin-top: 0px;
   &:has(.default) {
     margin-top: -4px;
diff --git a/src/views/createapp/components/workFlowConfig/useDnD.js b/src/views/createapp/components/workFlowConfig/useDnD.js
index 41b7a39..f545cc4 100644
--- a/src/views/createapp/components/workFlowConfig/useDnD.js
+++ b/src/views/createapp/components/workFlowConfig/useDnD.js
@@ -38,7 +38,7 @@ export default function useDragAndDrop() {
       event.dataTransfer.setData('application/vueflow', type);
       event.dataTransfer.effectAllowed = 'move';
     }
-    draggedType.value = type;
+    draggedType.value = type === 'choice' ? 'branch' : 'custom';
     isDragging.value = true;
     nodeData.value = { ...info };
 
@@ -102,16 +102,14 @@ export default function useDragAndDrop() {
     const { off } = onNodesInitialized(() => {
       const vueFlowContainer = document.querySelector('.my-diagram-class');
       updateNode(nodeId, node => ({
-        
-          position: {
-            x: node.position.x - node.dimensions.width / 2,
-            y: node.position.y - node.dimensions.height / 2,
-          }
+        position: {
+          x: node.position.x - node.dimensions.width / 2,
+          y: node.position.y - node.dimensions.height / 2,
+        },
       }));
 
       off();
     });
-
     addNodes(newNode);
   }
 
diff --git a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
index a59a5c3..9d9d24e 100644
--- a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
+++ b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
@@ -9,10 +9,24 @@
       label-position="left"
     >
       <el-form-item prop="name" label="工作流名称">
-        <el-input v-model="workFlowData.name" placeholder="请输入" maxlength="20" class="w320 o-validate-input" clearable></el-input>
+        <el-input
+          v-model="workFlowData.name"
+          placeholder="请输入"
+          maxlength="20"
+          class="w320 o-validate-input"
+          clearable
+        ></el-input>
       </el-form-item>
       <el-form-item prop="desc" label="工作流描述">
-        <el-input type="textarea" show-word-limit maxlength="150" v-model="workFlowData.desc" placeholder="请输入" class="w320 workFlowDesc o-validate-input" clearable></el-input>
+        <el-input
+          type="textarea"
+          show-word-limit
+          maxlength="150"
+          v-model="workFlowData.description"
+          placeholder="请输入"
+          class="w320 workFlowDesc o-validate-input"
+          clearable
+        ></el-input>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -25,7 +39,12 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { api } from 'src/apis';
+import { useRoute } from 'vue-router';
+import { nanoid } from 'nanoid';
+import { ElMessage } from 'element-plus';
 const workFlowDiaVisible = ref(true);
+const route = useRoute();
 const props = defineProps({
   diaType: {
     type: String,
@@ -34,20 +53,88 @@ const props = defineProps({
     type: Object,
   },
 });
-const emits = defineEmits(['handleClose']);
+const emits = defineEmits(['handleClose', 'createFlowId']);
 const workFlowForm = ref();
 const workFlowData = ref({
   name: '',
-  desc: '',
+  description: '',
 });
 const workFlowRules = ref({
   name: [{ required: true, message: '请输入工作流名称', trigger: 'blur' }],
-  desc: [{ required: true, message: '请输入工作流描述', trigger: 'blur' }],
+  description: [{ required: true, message: '请输入工作流描述', trigger: 'blur' }],
 });
 const onCancel = () => {
   emits('handleClose');
 };
-const handleSubmit = () => {};
+const handleSubmit = () => {
+  // 创建工作流
+  const appId = route.query?.appId;
+  // 创建使用生成的flowId
+  const flowId = nanoid();
+  // 调用接口新建工作流
+  api
+    .createOrUpdateFlowTopology(
+      {
+        appId: appId,
+        flowId,
+        topologyCheck: false,
+      },
+      {
+        flow: {
+          name: workFlowData.value.name,
+          description: workFlowData.value.description,
+          enable: true,
+          editable: true,
+          // 创建工作流时，默认包含开始结束固定两节点，这两个节点非后端返回，其apiId与serviceId不为空即可
+          nodes: [
+            {
+              apiId: 'startId',
+              name: 'start',
+              serviceId: 'startService',
+              type: 'start',
+              description: 'startNode',
+              editable: false,
+              enable: true,
+              nodeId: 'node1',
+              position: {
+                x: 100,
+                y: 160,
+              },
+            },
+            {
+              apiId: 'endId',
+              name: 'end',
+              serviceId: 'endService',
+              type: 'end',
+              description: 'endNode',
+              editable: false,
+              enable: true,
+              nodeId: 'node2',
+              position: {
+                x: 600,
+                y: 160,
+              },
+            },
+          ],
+          // 初始创建的工作流边为空
+          edges: [
+          ],
+        },
+        focusPoint: {
+          x: 800,
+          y: 800,
+        },
+      },
+    )
+    .then(res => {
+      if (res[1]?.result?.flow) {
+        ElMessage.success('创建成功');
+        // 将创建成功后的flow对象传给父组件
+        emits('createFlowId', {...res[1].result.flow});
+        onCancel();
+      }
+    });
+};
 </script>
 <style lang="scss">
 .workFlowDia.el-dialog {
diff --git a/src/views/createapp/index.vue b/src/views/createapp/index.vue
index b76a3ca..92f0edc 100644
--- a/src/views/createapp/index.vue
+++ b/src/views/createapp/index.vue
@@ -16,6 +16,10 @@ const appFormValidate = ref(true);
 const createAppType = ref('appConfig');
 const appConfigRef = ref();
 const workFlowRef = ref();
+const flowList = ref([]);
+// 后续的判断校验图标
+const interfaceValid = ref('');
+const flowValid = ref('');
 const handleChangeAppType = type => {
   createAppType.value = type;
 };
@@ -60,6 +64,15 @@ const validateConnect = valid => {
   publishValidate.value = !valid;
 };
 
+// 获取工作流列表
+const getFlowList = (flowDataList) => {
+  flowList.value = flowDataList;
+}
+
+// 保存当前工作流
+const saveFlow = () => {
+  workFlowRef.value.saveFlow();
+}
 watch(
   () => router,
   () => {
@@ -94,26 +107,26 @@ const handleJumperAppCenter = () => {
           :class="{ createAppBtnActive: createAppType === 'appConfig' }"
           @click="handleChangeAppType('appConfig')"
         >
-          界面配置
+          界面配置<span>{{ interfaceValid }}</span>
         </div>
         <div
           class="createAppBtn"
           :class="{ createAppBtnActive: createAppType !== 'appConfig' }"
           @click="handleChangeAppType('workFlow')"
         >
-          工作流编排
+          工作流编排<span>{{ flowValid }}</span>
         </div>
       </div>
     </div>
     <div class="createAppContainerMain" v-show="createAppType === 'appConfig'">
-      <AppConfig :handleValidateContent="handleValidateContent" ref="appConfigRef" />
+      <AppConfig :handleValidateContent="handleValidateContent" @getFlowList="getFlowList" ref="appConfigRef" />
     </div>
     <div class="createWorkFlowContainerMain" v-show="createAppType !== 'appConfig'">
-      <WorkFlow @validateConnect="validateConnect" ref="workFlowRef" />
+      <WorkFlow @validateConnect="validateConnect" :flowList="flowList" ref="workFlowRef" />
     </div>
     <div class="createAppContainerFooter">
       <el-button>取消</el-button>
-      <el-button>保存</el-button>
+      <el-button @click="saveFlow">保存</el-button>
       <el-button :disabled="true">预览</el-button>
       <el-button type="primary" :disabled="publishValidate" @click="handlePulishApp()">发布</el-button>
     </div>
diff --git a/src/views/styles/createApp.scss b/src/views/styles/createApp.scss
index a1749b2..b737cb8 100644
--- a/src/views/styles/createApp.scss
+++ b/src/views/styles/createApp.scss
@@ -232,6 +232,11 @@
         }
         .el-form-item__label {
           height: 16px;
+          &::before {
+            content: '*';
+            margin-right: 4px;
+            color: var(--el-color-danger);
+          }
         }
         .el-radio-group {
           display: flex;
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index 523f9d6..8f9ffb5 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -112,6 +112,9 @@
         padding: 0 !important;
         height: 28px;
       }
+      .el-collapse-item__content {
+        margin-left: 0px;
+      }
     }
   }
 
@@ -230,6 +233,18 @@
   }
 }
 
+.workFlowOption {
+  display: flex;
+  .flowName {
+    flex: 1;
+  }
+  .dealIcon {
+    display: inline-block;
+    width: 16px;
+    line-height: 32px;
+    flex: right;
+  }
+}
 // 各节点的状态样式提取
 .vue-flow__node {
   min-width: 200px;
@@ -278,6 +293,9 @@
         font-size: 12px;
         color: var(--o-text-color-tertiary);
       }
+      .branchDesc {
+        font-size: 12px;
+      }
     }
     .vue-flow__handle-right {
       top: 50%;
@@ -344,10 +362,10 @@
     }
     .delOverShadow {
       width: 8px;
-      height: 40px;
+      height: 60%;
       position: absolute;
       background-color: transparent;
-      top: 20px;
+      top: 20%;
       z-index: 1;
     }
     .leftBox {
-- 
Gitee