自动保存

src/views/manage/app/workflow/index.vue

@@ -28,7 +28,10 @@
         <CzrButton type="primary" title="发布" />
       </div>
       <div class="mt-4 flex-1 rounded-sm bg-[var(--czr-main-color)]/5 shadow">
-        <workflowGraph :ID="state.ID" />
+        <workflowGraph
+          :ID="state.ID"
+          @autoSave="(d) => (state.autoSaveTimestamp = d)"
+        />
       </div>
     </div>
     <detailCom
@@ -61,23 +64,7 @@ const state: any = reactive({
     transfer: {},
   },
 })
-watch(
-  () => state.form,
-  (n) => {
-    autoSave(n)
-  },
-  { deep: true },
-)
-const autoSave = debounce((v) => {
-  const loading = ElLoading.service({
-    text: '自动保存中……',
-    background: 'rgba(0, 0,0, 0.3)',
-  })
-  setTimeout(() => {
-    loading.close()
-    state.autoSaveTimestamp = YMDHms(new Date())
-  }, 1000)
-}, 3000)
+
 const onEdit = () => {
   state.detailCom.transfer = {
     mode: 'edit',

src/views/workflow/chart/index.vue

@@ -354,6 +354,7 @@ const state: any = reactive({
     canRedo: false,
     steps: [],
     current: 0,
+    autoSaveInit: false,
   },
   dnd: null,
   dndNode: null,
@@ -596,12 +597,24 @@ const initWatch = () => {
   state.graph.on('scale', ({ sx, sy, ox, oy }) => {
     state.zoom = sx
   })
+  state.graph.on('translate', ({ sx, sy, ox, oy }) => {
+    if (state.autoSaveInit) {
+      WorkflowStore.autoSave()
+    }
+  })
   state.graph.on('history:change', ({ cmds, options }) => {
     if (state.isInitEdges) {
       state.history.canRedo = state.graph.canRedo()
       state.history.canUndo = state.graph.canUndo()
       if (options.name) {
-        state.history.steps.unshift(options.name)
+        const arr = [options.name]
+        state.history.steps.forEach((v, i) => {
+          if (i >= state.history.current) {
+            arr.push(v)
+          }
+        })
+        state.history.steps = arr
+        state.history.current = 0
       }
       if (options.name === GraphHistoryStep.Dnd) {
         const nodeId = cmds[0].data.id
@@ -611,6 +624,11 @@ const initWatch = () => {
             WorkflowStore.layoutPort(nodeId, p.id)
           })
       }
+      if (state.autoSaveInit) {
+        WorkflowStore.autoSave()
+      } else {
+        state.autoSaveInit = true
+      }
     }
   })
 }

src/views/workflow/index.vue

@@ -6,7 +6,7 @@
         :ID="ID"
         :data="state.workflowData"
         ref="ref_workflow"
-        @save="getJsonData"
+        @save="onSave"
       />
     </div>
     <div class="operations">
@@ -18,7 +18,7 @@
           <SvgIcon name="env" />
         </div>
       </div>
-      <a-button type="primary" @click="getJsonData">保存配置</a-button>
+      <a-button type="primary" @click="onSave">保存配置</a-button>
     </div>
     <div class="panel">
       <workflowPanel />
@@ -46,11 +46,13 @@ import {
   workflowDraftDetail,
   workflowDraftSave,
 } from '@/api/modules/workflow/chart'
-import { ElMessage } from 'element-plus'
+import { ElLoading, ElMessage } from 'element-plus'
+import { debounce } from 'lodash'
+import { YMDHms } from '@/utils/czr-util'
 
 const TeleportContainer = getTeleport()
 const WorkflowStore = useWorkflowStore()
-const emit = defineEmits([])
+const emit = defineEmits(['autoSave'])
 const props = defineProps({
   ID: {},
 })
@@ -61,13 +63,16 @@ const state: any = reactive({
 })
 const ref_workflow = ref()
 
+const autoSave = debounce(() => {
+  onSave()
+}, 5000)
 watch(
   () => WorkflowStore.autoSaveFlag,
   () => {
-    console.log('自动保存')
+    autoSave()
   },
 )
-const getJsonData = () => {
+const onSave = () => {
   const data = ref_workflow.value.toJSON()
   const offset = WorkflowStore.graph.translate()
   const res: any = {
@@ -86,7 +91,6 @@ const getJsonData = () => {
   }
   JSON.parse(JSON.stringify(data.cells)).forEach((cell: any) => {
     if (cell.shape === 'workflow-node') {
-      console.log(cell)
       const node: any = {
         id: cell.id,
         type: cell.data.workflowData.type,
@@ -107,10 +111,17 @@ const getJsonData = () => {
       res.graph.edges.push(edge)
     }
   })
-  console.log(res)
+  {{#175317120168.text#}}
+  sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
+  const loading = ElLoading.service({
+    text: '自动保存中……',
+    background: 'rgba(0, 0,0, 0.3)',
+  })
   workflowDraftSave(props.ID, res)
     .then(({ data }: any) => {
+      loading.close()
       state.uniqueHash = data.uniqueHash
+      emit('autoSave', data.updateTime)
     })
     .catch(() => {})
     .finally(() => {})
@@ -118,6 +129,7 @@ const getJsonData = () => {
 const initData = () => {
   workflowDraftDetail(props.ID)
     .then(({ data }: any) => {
+      emit('autoSave', data.updateTime)
       state.uniqueHash = data.uniqueHash
       WorkflowStore.$patch(
         (s: any) => (s.envVars.vars = data.environmentVariables || []),

src/views/workflow/types.ts

@@ -121,7 +121,7 @@ export const MapGraphHistoryStep = new Map([
   [GraphHistoryStep.Root, '会话开始'],
   [GraphHistoryStep.Move, '块已移动'],
   [GraphHistoryStep.NodeAdd, '块已添加'],
-  [GraphHistoryStep.Dnd, '块已添加'],
+  [GraphHistoryStep.Dnd, '块已添加'], // 拖拽元素添加
   [GraphHistoryStep.NodeDel, '块已删除'],
   [GraphHistoryStep.EdgeAdd, '块已连接'],
   [GraphHistoryStep.EdgeDel, '块已断开连接'],