工作流历史版本展示切换++

src/components/workflow/workflow.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref, useSlots, watch } from 'vue';
 import VueDragResize from 'vue-drag-resize/src';
 import { $t } from '@/locales';
+import { fetchWorkflowHistory, fetchWorkflowHistoryDetail } from '@/service/api';
 import NodeWrap from './modules/nodes/node-wrap.vue';
 import StartNode from './modules/nodes/start-node.vue';
 
@@ -58,6 +59,31 @@ watch(
   }
 );
 
+const historyID = ref('0');
+
+watch(
+  () => nodeData.value, // 监听响应式数据
+  async (newVal) => {
+    if (newVal) { // 确保值有效
+      try {
+        const { data, error } = await fetchWorkflowHistory(newVal.id);
+        console.log(error)
+        if (!error) {
+          syncOptions.value = data.map(item => ({
+            label: 'v' + item.version,
+            key: item.id+'_'+item.version
+          }));
+        } else {
+          // window.$message?.error('获取工作流历史版本失败');
+        }
+      } catch (error) {
+        console.error('请求失败:', error);
+      }
+    }
+  },
+  { immediate: true } // 可选：初始时立即执行一次
+);
+
 const onZoom = (n: number) => {
   zoom.value += 10 * n;
 
@@ -97,11 +123,54 @@ const handleWeel = (e: WheelEvent) => {
   }
 };
 
+const syncOptions = ref([
+  {
+    label: '未查询到历史记录',
+    key: '-1',
+    disabled: true
+  },
+  {
+    label: '最新版本',
+    key: '0',
+    disabled: true
+  }
+]);
+
+// const getWorkflowHistory = async (id: number) => {
+//   console.log('id=2=='+historyID)
+//   const { data, error } = await fetchWorkflowHistory(id);
+//   if (!error) {
+//     syncOptions.value = data.map(item => ({
+//       label: item.version,
+//       key: item.id+'_'+item.version
+//     }));
+//   } else {
+//     window.$message?.error('获取工作流历史版本失败');
+//   }
+// };
+
+const handleSyncSelect = async (id: string) => {
+  console.log('id==='+id)
+  if(id =='-1'){
+    return
+  }
+  // hid.value = id
+  let version = id.split("_")[1];
+  let sid = id.split("_")[0];
+  historyID.value = 'v' + id.split("_")[1];
+  const { data, error } = await fetchWorkflowHistoryDetail(sid, version);
+  if (!error) {
+    nodeData.value = data;
+  }
+};
+
 onMounted(() => {
   const workflowDom: HTMLDivElement | null = document.querySelector('.workflow');
   if (workflowDom) {
     workflowDom.onwheel = (ev: WheelEvent) => handleWeel(ev);
   }
+  // historyID.value = syncOptions.value[syncOptions.value.length-1].label
+  historyID.value = syncOptions.value.filter(item => item.key == '0')[0].label
 });
 
 const onDragging = () => {
@@ -143,6 +212,23 @@ const onDragstop = () => {
               放大
             </NTooltip>
           </div>
+          <div v-if="!slots.buttons" class="buttons">
+            <NDropdown trigger="hover" width="trigger" :options="syncOptions" @select="handleSyncSelect">
+              <NTooltip placement="left">
+                <template #trigger>
+                  <NButton dashed class="w-136px" >
+                    <template #icon>
+                      <div class="flex-center gap-8px">
+                        {{ historyID }}
+                        <SvgIcon icon="material-symbols:expand-more-rounded" />
+                      </div>
+                    </template>
+                  </NButton>
+                </template>
+                选择历史版本
+              </NTooltip>
+            </NDropdown>
+          </div>
           <div v-if="!disabled" class="buttons">
             <NButton type="info" @click="save">保存</NButton>
             <NButton class="ml-16px" @click="cancel">取消</NButton>

src/service/api/workflow.ts

@@ -144,3 +144,17 @@ export function fetchBatchDeleteWorkflowBatch(data: string[]) {
     data
   });
 }
+
+export function fetchWorkflowHistory(id: string) {
+  return request({
+    url: `/workflow/history/${id}`,
+    method: 'get'
+  });
+}
+
+export function fetchWorkflowHistoryDetail(id: string, version: string) {
+  return request({
+    url: `/workflow/historyDetail/${id}?version=${version}`,
+    method: 'get'
+  });
+}