Skip to content

P
Pangea-Agent
Commit 9073d710 authored by 高如斌's avatar 高如斌
Browse files
Options

联调真是接口数据，进行表单渲染及提交

parent fb1f853d
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 47 deletions
frontend/package-lock.json
View file @ 9073d710
......@@ -18,7 +18,7 @@
"lodash-es": "^4.17.21",
"marked": "^17.0.1",
"pako": "^2.1.0",
"pangea-ui": "^0.14.2-beta.9",
"pangea-ui": "1.0.1-beta.2",
"pinia": "^2.1.7",
"snabbdom": "^3.6.3",
"vue": "^3.4.0",
......@@ -5441,9 +5441,9 @@
"integrity": "sha512-VLv+FacZ/vjwgPIg39//bAr+KPAKE08kscnpXFfTFJ1mZ2OMVeyYDrGDVY3z0CY+wfQRzuzd3c8LCUK9KgLRPw=="
},
"node_modules/pangea-ui": {
"version": "0.14.2-beta.9",
"resolved": "http://nexus.hisense.com/repository/npm-public/pangea-ui/-/pangea-ui-0.14.2-beta.9.tgz",
"integrity": "sha512-kQAc8hy/1XiRR64n8TQmcxATu6TBrr4HtKar2NxzOShl8NHVsXoMgb4AcI2ZAg32JVb7mTZ0lEwqw7HQCzs/BQ==",
"version": "1.0.1-beta.2",
"resolved": "http://nexus.hisense.com/repository/npm-public/pangea-ui/-/pangea-ui-1.0.1-beta.2.tgz",
"integrity": "sha512-jiwofEV32keFFbYb/duW4TJzbyogJu+VA9nIbJcYaZepEMLbzbWhhbkqgP5JEHoNeMNHqiuJNvNlh1lXrd+Stw==",
"dependencies": {
"@arco-iconbox/vue-syma-component": "1.0.24",
"@arco-iconbox/vue-syma-supplement": "1.0.17",
......@@ -5462,9 +5462,9 @@
"mavon-editor": "3.0.2",
"mitt": "^3.0.0",
"mockjs": "^1.1.0",
"pangea-component": "^1.2.2-beta.3",
"pangea-component": "^1.3.1",
"pangea-formula": "^1.2.11",
"pangea-ui-common": "^1.0.1-beta.6",
"pangea-ui-common": "^1.1.1",
"sortablejs": "1.14.0",
"tinycolor2": "1.6.0",
"tinymce": "^6.4.2",
......
frontend/package.json
View file @ 9073d710
......@@ -20,7 +20,7 @@
"lodash-es": "^4.17.21",
"marked": "^17.0.1",
"pako": "^2.1.0",
"pangea-ui": "^0.14.2-beta.9",
"pangea-ui": "1.0.1-beta.2",
"pinia": "^2.1.7",
"snabbdom": "^3.6.3",
"vue": "^3.4.0",
......
frontend/src/components/ChatArea.vue
View file @ 9073d710
......@@ -413,7 +413,6 @@ const processSSELine = async (
) => {
if (!line.trim()) return false;
console.log("line", line);
if (line.startsWith("event:")) {
currentEventRef.value = line.slice(6).trim();
return false;
......@@ -583,6 +582,7 @@ const processSSELine = async (
break;
case "tool_call":
case "embed":
// 处理工具调用和嵌入事件，将其发送到时间轴面板
// 构建事件标题
......@@ -651,38 +651,40 @@ const processSSELine = async (
);
}
break;
case "form":
if (data && data.coms) {
// formJson.value = data;
formJson.value = data;
}
break;
}
// 模拟后端返回form类型的时间，并将form表单的json存到store
formJson.value = {
coms: [
{
key: 1766473421208,
name: "输入框",
code: "HiInput",
props: {
title: "输入框",
status: "default",
placeholder: "请输入",
name: "INPUT_6CP8HIBK",
},
bindProps: {},
},
{
key: 1766476676439,
name: "日期",
code: "HiDatePicker",
props: {
title: "日期",
type: "date",
format: "YYYY-MM-DD",
status: "default",
name: "DATE_PA9TUPQQ",
},
bindProps: {},
},
],
};
// formJson.value = {
// coms: [
// {
// key: 1766626350013,
// name: "输入框",
// code: "HiInput",
// props: {
// title: "访问园区",
// status: "default",
// name: "INPUT_8USD455B",
// },
// },
// {
// key: 1766626350014,
// name: "日期",
// code: "HiDatePicker",
// props: {
// title: "开始日期",
// status: "default",
// name: "DATE_8USD455D",
// },
// },
// ],
// };
// 重置当前事件类型
currentEventRef.value = "";
......@@ -868,6 +870,15 @@ const sendMessage = async () => {
}
if (formJson.value) {
// 设置表单提交回调函数
formStore.setSubmitCallback((formData: any) => {
console.log("表单提交数据:", formData);
// 将表单数据作为消息发送
inputMessage.value = JSON.stringify(formData);
sendMessage();
});
// 打开表单
formStore.openForm(formJson.value);
}
......
frontend/src/components/FormRender.vue
View file @ 9073d710
......@@ -13,6 +13,7 @@
<script lang="ts" setup>
import { ref } from "vue";
import { useFormStore } from "@/stores/form";
import { ElMessage } from "element-plus";
import HiPageTemplate from "pangea-ui/hi-page-template";
// 获取表单 store
......@@ -23,8 +24,16 @@ const templateRef = ref();
// 表单提交回调
const submit = () => {
templateRef.value?.ctx.validate(1, (res: boolean, data: any) => {
console.log(res, data);
templateRef.value?.ctx.validate(1, (isValid: boolean, formData: any) => {
if (isValid) {
console.log("表单验证通过，提交数据:", formData);
// 调用 store 的 submitForm 方法，触发回调
formStore.submitForm(formData);
ElMessage.success("表单提交成功");
} else {
console.log("表单验证失败");
ElMessage.error("请检查表单填写是否正确");
}
});
};
</script>
......
frontend/src/stores/form.ts
View file @ 9073d710
......@@ -8,8 +8,11 @@
import { defineStore } from "pinia";
import { cloneDeep } from "lodash-es";
// 初始页面json外层
const INIT_FORM_JSON = {
/**
* 获取初始表单 JSON 配置
* 使用函数返回新对象，避免共享引用
*/
const getInitFormJson = () => ({
pages: [
{
key: 0,
......@@ -54,15 +57,18 @@ const INIT_FORM_JSON = {
apis: [],
funcs: [],
pageTemplate: {},
};
});
export const useFormStore = defineStore("form", {
state: () => ({
// 表单 JSON 配置（使用深拷贝避免共享引用）
formJson: cloneDeep(INIT_FORM_JSON),
// 表单 JSON 配置
formJson: getInitFormJson(),
// 是否显示表单页面
showForm: false,
// 表单提交回调函数
onSubmitCallback: null as ((data: any) => void) | null,
}),
actions: {
......@@ -78,7 +84,27 @@ export const useFormStore = defineStore("form", {
* 清空表单 JSON 配置
*/
clearFormJson() {
this.formJson = cloneDeep(INIT_FORM_JSON);
this.formJson = getInitFormJson();
},
/**
* 设置表单提交回调函数
* @param callback 回调函数
*/
setSubmitCallback(callback: (data: any) => void) {
this.onSubmitCallback = callback;
},
/**
* 触发表单提交
* @param data 表单数据
*/
submitForm(data: any) {
if (this.onSubmitCallback) {
this.onSubmitCallback(data);
}
// 提交后关闭表单
this.closeForm();
},
/**
......@@ -93,8 +119,8 @@ export const useFormStore = defineStore("form", {
return;
}
// 深拷贝 INIT_FORM_JSON 避免修改原始对象
const formConfig = cloneDeep(INIT_FORM_JSON);
// 获取初始表单配置
const formConfig = getInitFormJson();
// 将接收到的 coms 放入表单容器的 coms 数组中
// 表单容器位于 pages[0].coms[0]（HiFormContainer）
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment