84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="chat-wrap">
|
||
|
|
<div class="chat-contain">
|
||
|
|
<a-layout>
|
||
|
|
<a-layout-header>
|
||
|
|
<div>
|
||
|
|
<span > <icon-left /> 返回空间 </span>
|
||
|
|
</div>
|
||
|
|
</a-layout-header>
|
||
|
|
<a-layout>
|
||
|
|
<a-layout-sider width="20%">
|
||
|
|
<HistoryChat :cozeInfo="cozeInfo" />
|
||
|
|
</a-layout-sider>
|
||
|
|
<a-layout-sider class="layout-sider" width="17%">
|
||
|
|
<DynamicForm :formFields="formFields" :formData="formData" @submit="handleSubmit" />
|
||
|
|
</a-layout-sider>
|
||
|
|
<a-layout-content ref="contentRef" class="content-container">
|
||
|
|
<a-spin :loading="loading" tip="生成中">
|
||
|
|
<div>
|
||
|
|
<span class="work-res-span">
|
||
|
|
{{ workFlowRes.output }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</a-spin>
|
||
|
|
</a-layout-content>
|
||
|
|
</a-layout>
|
||
|
|
</a-layout>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive } from 'vue';
|
||
|
|
import HistoryChat from './components/historyChat.vue';
|
||
|
|
import { executeWorkFlow, getWorkFlowInfo } from '@/api/all/agent';
|
||
|
|
import { useRoute } from 'vue-router';
|
||
|
|
import DynamicForm from './components/DynamicForm.vue';
|
||
|
|
|
||
|
|
const formFields = ref([]);
|
||
|
|
|
||
|
|
// 表单数据对象（动态生成初始值）
|
||
|
|
const formData = ref({});
|
||
|
|
|
||
|
|
const route = useRoute();
|
||
|
|
const id = route.query.id;
|
||
|
|
const query = reactive({
|
||
|
|
id: id,
|
||
|
|
});
|
||
|
|
|
||
|
|
const loading = ref(false);
|
||
|
|
|
||
|
|
const cozeInfo = reactive({
|
||
|
|
title: '',
|
||
|
|
description: '',
|
||
|
|
icon_url: '',
|
||
|
|
workflow_id: '',
|
||
|
|
});
|
||
|
|
const getData = async () => {
|
||
|
|
const { code, data } = await getWorkFlowInfo(query.id);
|
||
|
|
Object.assign(cozeInfo, data.info);
|
||
|
|
formFields.value = data.form_config;
|
||
|
|
};
|
||
|
|
const workFlowRes = reactive({});
|
||
|
|
// 提交表单
|
||
|
|
const handleSubmit = async (formData) => {
|
||
|
|
console.log(formData, 'formData');
|
||
|
|
const param = { form_data: formData, workflow_id: cozeInfo.workflow_id };
|
||
|
|
loading.value = true;
|
||
|
|
const { code, data } = await executeWorkFlow(param);
|
||
|
|
if (code === 200) {
|
||
|
|
Object.assign(workFlowRes, data.data);
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
getData();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
@import './style.scss';
|
||
|
|
</style>
|