perf: 优化应用编排历史版本

Author: shaohuzhang1

ui/src/components/dynamics-form/index.ts

@@ -16,7 +16,9 @@ const install = (app: App) => {
     const commentName: string = key
       .substring(key.lastIndexOf('/') + 1, key.length)
       .replace('.vue', '')
-    app.component(commentName, components[key].default)
+    if (key !== '/src/components/dynamics-form/constructor/index.vue') {
+      app.component(commentName, components[key].default)
+    }
   })
   app.component('DynamicsForm', DynamicsForm)
 }

ui/src/views/application-workflow/index.vue

@@ -134,14 +134,14 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import Workflow from '@/workflow/index.vue'
 import DropdownMenu from '@/views/application-workflow/component/DropdownMenu.vue'
 import PublishHistory from '@/views/application-workflow/component/PublishHistory.vue'
 import applicationApi from '@/api/application'
 import { isAppIcon } from '@/utils/application'
-import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import { MsgSuccess, MsgError } from '@/utils/message'
 import { datetimeFormat } from '@/utils/time'
 import useStore from '@/stores'
 import { WorkFlowInstance } from '@/workflow/common/validate'
@@ -182,34 +182,31 @@ function clickoutsideHistory() {
 
 function refreshVersion(item?: any) {
   if (item) {
-    getHistortyDetail(item.id)
+    renderGraphData(item)
   }
   if (hasPermission(`APPLICATION:MANAGE:${id}`, 'AND') && isSave.value) {
     initInterval()
   }
   showHistory.value = false
   disablePublic.value = false
 }
+
 function checkVersion(item: any) {
   disablePublic.value = true
-  getHistortyDetail(item.id)
   currentVersion.value = item
+  renderGraphData(item)
   closeInterval()
 }
 
-function getHistortyDetail(versionId: string) {
-  applicationApi.getWorkFlowVersionDetail(id, versionId, loading).then((res: any) => {
-    res.data?.work_flow['nodes'].map((v: any) => {
-      v['properties']['noRender'] = true
-    })
-    detail.value.work_flow = res.data.work_flow
-    detail.value.stt_model_id = res.data.stt_model
-    detail.value.tts_model_id = res.data.tts_model
-    detail.value.tts_type = res.data.tts_type
-    saveTime.value = res.data?.update_time
-    setTimeout(() => {
-      workflowRef.value?.renderGraphData()
-    }, 200)
+function renderGraphData(item: any) {
+  item.work_flow['nodes'].map((v: any) => {
+    v['properties']['noRender'] = true
+  })
+  detail.value.work_flow = item.work_flow
+  saveTime.value = item?.update_time
+  workflowRef.value?.clearGraphData()
+  nextTick(() => {
+    workflowRef.value?.render(item.work_flow)
   })
 }
 
@@ -259,7 +256,6 @@ function publicHandle() {
         return
       }
       applicationApi.putPublishApplication(id as String, obj, loading).then(() => {
-        getDetail()
         MsgSuccess('发布成功')
       })
     })
@@ -317,7 +313,7 @@ function getGraphData() {
 }
 
 function getDetail() {
-  application.asyncGetApplicationDetail(id, loading).then((res: any) => {
+  application.asyncGetApplicationDetail(id).then((res: any) => {
     res.data?.work_flow['nodes'].map((v: any) => {
       v['properties']['noRender'] = true
     })
@@ -326,9 +322,10 @@ function getDetail() {
     detail.value.tts_model_id = res.data.tts_model
     detail.value.tts_type = res.data.tts_type
     saveTime.value = res.data?.update_time
-    setTimeout(() => {
-      workflowRef.value?.renderGraphData()
-    }, 200)
+    workflowRef.value?.clearGraphData()
+    nextTick(() => {
+      workflowRef.value?.renderGraphData(detail.value.work_flow)
+    })
   })
 }
 

ui/src/workflow/common/app-node.ts

@@ -193,20 +193,20 @@ class AppNodeModel extends HtmlResize.model {
   get_width() {
     return this.properties?.width || 340
   }
-  
+
   setAttributes() {
     this.width = this.get_width()
-    const isLoop=(node_id:string,target_node_id:string)=>{
-      const up_node_list=this.graphModel.getNodeIncomingNode(node_id)
+    const isLoop = (node_id: string, target_node_id: string) => {
+      const up_node_list = this.graphModel.getNodeIncomingNode(node_id)
       for (const index in up_node_list) {
-        const item=up_node_list[index]
-        if(item.id===target_node_id){
-          return true
-        }else{
-         const result= isLoop(item.id,target_node_id)
-         if(result){
+        const item = up_node_list[index]
+        if (item.id === target_node_id) {
           return true
-         }
+        } else {
+          const result = isLoop(item.id, target_node_id)
+          if (result) {
+            return true
+          }
         }
       }
       return false
@@ -220,7 +220,7 @@ class AppNodeModel extends HtmlResize.model {
     this.sourceRules.push({
       message: '不可循环连线',
       validate: (sourceNode: any, targetNode: any, sourceAnchor: any, targetAnchor: any) => {
-       return !isLoop(sourceNode.id,targetNode.id)
+        return !isLoop(sourceNode.id, targetNode.id)
       }
     })
 

ui/src/workflow/index.vue

@@ -51,8 +51,13 @@ const lf = ref()
 onMounted(() => {
   renderGraphData()
 })
-
-const renderGraphData = () => {
+const render = (data: any) => {
+  lf.value.render(data)
+}
+const renderGraphData = (data?: any) => {
+  if (data) {
+    graphData.value = data
+  }
   const container: any = document.querySelector('#container')
   if (container) {
     lf.value = new LogicFlow({
@@ -133,7 +138,7 @@ const addNode = (shapeItem: ShapeItem) => {
 }
 
 const clearGraphData = () => {
-  return lf.value.graphModel.clearData()
+  return lf.value.clearData()
 }
 
 defineExpose({
@@ -142,7 +147,8 @@ defineExpose({
   getGraphData,
   addNode,
   clearGraphData,
-  renderGraphData
+  renderGraphData,
+  render
 })
 </script>
 <style lang="scss">