132 lines
4.2 KiB
Vue
132 lines
4.2 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, ref } from 'vue';
|
||
import { useRoute } from 'vue-router';
|
||
|
||
import { sortNodes } from '@easyflow/utils';
|
||
|
||
import { ArrowLeft } from '@element-plus/icons-vue';
|
||
import { ElAvatar, ElButton, ElCard, ElCol, ElRow } from 'element-plus';
|
||
|
||
import { api } from '#/api/request';
|
||
import workflowIcon from '#/assets/ai/workflow/workflowIcon.png';
|
||
import { $t } from '#/locales';
|
||
import { router } from '#/router';
|
||
import ExecResult from '#/views/ai/workflow/components/ExecResult.vue';
|
||
import WorkflowForm from '#/views/ai/workflow/components/WorkflowForm.vue';
|
||
import WorkflowSteps from '#/views/ai/workflow/components/WorkflowSteps.vue';
|
||
|
||
onMounted(async () => {
|
||
pageLoading.value = true;
|
||
await Promise.all([getWorkflowInfo(workflowId.value), getRunningParams()]);
|
||
pageLoading.value = false;
|
||
});
|
||
const pageLoading = ref(false);
|
||
const route = useRoute();
|
||
const workflowId = ref(route.query.id);
|
||
const workflowInfo = ref<any>({});
|
||
const runParams = ref<any>(null);
|
||
const initState = ref(false);
|
||
const tinyFlowData = ref<any>(null);
|
||
const workflowForm = ref();
|
||
async function getWorkflowInfo(workflowId: any) {
|
||
api.get(`/api/v1/workflow/detail?id=${workflowId}`).then((res) => {
|
||
workflowInfo.value = res.data;
|
||
tinyFlowData.value = workflowInfo.value.content
|
||
? JSON.parse(workflowInfo.value.content)
|
||
: {};
|
||
});
|
||
}
|
||
async function getRunningParams() {
|
||
api
|
||
.get(`/api/v1/workflow/getRunningParameters?id=${workflowId.value}`)
|
||
.then((res) => {
|
||
runParams.value = res.data;
|
||
});
|
||
}
|
||
function onSubmit() {
|
||
initState.value = !initState.value;
|
||
}
|
||
function resumeChain(data: any) {
|
||
workflowForm.value?.resume(data);
|
||
}
|
||
const chainInfo = ref<any>(null);
|
||
function onAsyncExecute(info: any) {
|
||
chainInfo.value = info;
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
v-loading="pageLoading"
|
||
class="bg-background-deep flex h-full max-h-[calc(100vh-90px)] w-full flex-col gap-6 overflow-hidden p-6"
|
||
>
|
||
<div>
|
||
<ElButton :icon="ArrowLeft" @click="router.back()">
|
||
{{ $t('button.back') }}
|
||
</ElButton>
|
||
</div>
|
||
<div
|
||
class="flex h-[150px] shrink-0 items-center gap-6 rounded-lg border border-[var(--el-border-color)] bg-[var(--el-bg-color)] pl-11"
|
||
>
|
||
<ElAvatar
|
||
class="shrink-0"
|
||
:src="workflowInfo.icon ?? workflowIcon"
|
||
:size="72"
|
||
/>
|
||
<div class="flex flex-col gap-5">
|
||
<span class="text-2xl font-medium">{{ workflowInfo.title }}</span>
|
||
<span class="text-base text-[#75808d]">{{
|
||
workflowInfo.description
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<ElRow class="h-full overflow-hidden" :gutter="10">
|
||
<ElCol :span="10" class="h-full overflow-hidden">
|
||
<div class="grid h-full grid-rows-2 gap-2.5">
|
||
<ElCard shadow="never" style="height: 100%; overflow: auto">
|
||
<div class="mb-2.5 font-semibold">
|
||
{{ $t('aiWorkflow.params') }}：
|
||
</div>
|
||
<WorkflowForm
|
||
v-if="runParams && tinyFlowData"
|
||
ref="workflowForm"
|
||
:workflow-id="workflowId"
|
||
:workflow-params="runParams"
|
||
:on-submit="onSubmit"
|
||
:on-async-execute="onAsyncExecute"
|
||
:tiny-flow-data="tinyFlowData"
|
||
/>
|
||
</ElCard>
|
||
<ElCard shadow="never" style="height: 100%; overflow: auto">
|
||
<div class="mb-2.5 font-semibold">
|
||
{{ $t('aiWorkflow.steps') }}：
|
||
</div>
|
||
<WorkflowSteps
|
||
v-if="tinyFlowData"
|
||
:workflow-id="workflowId"
|
||
:node-json="sortNodes(tinyFlowData)"
|
||
:init-signal="initState"
|
||
:polling-data="chainInfo"
|
||
@resume="resumeChain"
|
||
/>
|
||
</ElCard>
|
||
</div>
|
||
</ElCol>
|
||
<ElCol :span="14">
|
||
<ElCard shadow="never" style="height: 100%; overflow: auto">
|
||
<div class="mb-2.5 mt-2.5 font-semibold">
|
||
{{ $t('aiWorkflow.result') }}：
|
||
</div>
|
||
<ExecResult
|
||
v-if="tinyFlowData"
|
||
:workflow-id="workflowId"
|
||
:node-json="sortNodes(tinyFlowData)"
|
||
:init-signal="initState"
|
||
:polling-data="chainInfo"
|
||
/>
|
||
</ElCard>
|
||
</ElCol>
|
||
</ElRow>
|
||
</div>
|
||
</template>
|