You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.9 KiB
104 lines
3.9 KiB
<template>
|
|
<div class="flow-detail-page">
|
|
<el-page-header @back="$router.back()" :content="flow?.name || '流详情'" />
|
|
|
|
<el-row :gutter="20" style="margin-top: 20px">
|
|
<el-col :span="16">
|
|
<el-card>
|
|
<template #header>流定义</template>
|
|
<el-descriptions :column="2" border>
|
|
<el-descriptions-item label="名称">{{ flow?.name }}</el-descriptions-item>
|
|
<el-descriptions-item label="状态">
|
|
<el-tag :type="flow?.status === 'published' ? 'success' : 'info'">{{ flow?.status }}</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="创建者">{{ flow?.created_by || '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ flow?.created_at ? new Date(flow.created_at).toLocaleString() : '-' }}</el-descriptions-item>
|
|
<el-descriptions-item label="描述" :span="2">{{ flow?.description || '无' }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<el-divider>节点列表</el-divider>
|
|
<el-table :data="nodes" stripe size="small">
|
|
<el-table-column prop="id" label="ID" width="120" />
|
|
<el-table-column prop="type" label="类型" width="120">
|
|
<template #default="{ row }"><el-tag size="small">{{ row.type }}</el-tag></template>
|
|
</el-table-column>
|
|
<el-table-column prop="label" label="名称" min-width="160" />
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<el-card>
|
|
<template #header>操作</template>
|
|
<el-button type="primary" style="width: 100%; margin-bottom: 12px" @click="installFlow" :loading="installing">
|
|
安装到我的工作流
|
|
</el-button>
|
|
<el-button style="width: 100%; margin-bottom: 12px" @click="testRun" :loading="testing">
|
|
测试运行
|
|
</el-button>
|
|
<el-button style="width: 100%" @click="$router.push(`/admin/flow/editor/${flowId}`)">
|
|
编辑此流
|
|
</el-button>
|
|
</el-card>
|
|
|
|
<el-card style="margin-top: 20px">
|
|
<template #header>连接关系</template>
|
|
<div v-for="(edge, i) in edges" :key="i" style="padding: 4px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px">
|
|
{{ edge.source }} → {{ edge.target }}
|
|
</div>
|
|
<el-empty v-if="!edges.length" description="无连接" :image-size="40" />
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { flowApi } from '@/api'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const flowId = computed(() => route.params.id as string)
|
|
const flow = ref<any>(null)
|
|
const nodes = ref<any[]>([])
|
|
const edges = ref<any[]>([])
|
|
const installing = ref(false)
|
|
const testing = ref(false)
|
|
|
|
onMounted(async () => {
|
|
const res: any = await flowApi.getFlow(flowId.value)
|
|
flow.value = res?.data || res || {}
|
|
const def = flow.value.definition_json || {}
|
|
nodes.value = def.nodes || []
|
|
edges.value = def.edges || []
|
|
})
|
|
|
|
async function installFlow() {
|
|
installing.value = true
|
|
try {
|
|
const res: any = await flowApi.createFlow({
|
|
name: flow.value.name + ' (副本)',
|
|
description: flow.value.description,
|
|
nodes: nodes.value,
|
|
edges: edges.value,
|
|
trigger: {},
|
|
})
|
|
const newFlow = res?.data || res || {}
|
|
ElMessage.success('已安装到我的工作流')
|
|
router.push(`/admin/flow/editor/${newFlow.id}`)
|
|
} catch { ElMessage.error('安装失败') }
|
|
finally { installing.value = false }
|
|
}
|
|
|
|
async function testRun() {
|
|
testing.value = true
|
|
try {
|
|
await flowApi.testFlow(flowId.value)
|
|
ElMessage.success('测试运行完成')
|
|
} catch { ElMessage.error('测试失败') }
|
|
finally { testing.value = false }
|
|
}
|
|
</script>
|