SmartBench/CMVR-IOT-UI
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: http节点

Browse Source
This commit is contained in:
zhanghao 2026-04-14 16:17:52 +08:00
parent 75f64e8d9f
commit 88460d3bb1
6 changed files with 284 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/utils/flow.js
View File

@ -295,3 +295,52 @@ export const filterEmptyName = (obj) => {
// 基础类型直接返回
return obj;
}
/**
* 将原始表单配置数组 转换为 目标对象格式
* @param {Array} source - 原始数据数组
* @returns {Object} 转换后的目标格式对象
*/
export const transformHttpNodeData = (source) => {
// 初始化结果对象
const result = {};
// 遍历每一个顶级节点
source.forEach(item => {
const { name, children } = item;
if (!name) return; // 过滤无name的无效节点
// 处理普通节点（config/headers/params）：直接取 children 数组
if (name !== 'body') {
result[name] = children || [];
return;
}
// 专门处理 body 节点（特殊结构）
if (name === 'body') {
const bodyObj = {
type: '',
json: '',
formData: []
};
// 遍历body的子项，赋值到对应字段
children?.forEach(child => {
const childName = child.name;
if (childName === 'bodyType') {
bodyObj.type = child.input;
}
if (childName === 'json') {
bodyObj.json = child.input;
}
if (childName === 'formData') {
bodyObj.formData = child.children || [];
}
});
result.body = bodyObj;
}
});
return result;
}

5
src/views/flow/components/NodeTitle.vue
View File

@ -6,9 +6,7 @@
<div class="text__container">
<div class="text__title" v-if="showTextTitle">
<span class="text">{{ nodeName }}</span>
<el-icon class="editIcon" @click="showTextTitle = false"
><EditPen
/></el-icon>
<el-icon class="editIcon" @click="showTextTitle = false"><EditPen/></el-icon>
</div>
<div class="input_name_container" v-else>
<el-input v-model="nodeName" @keydown="handleInputKeydown" />
@ -213,6 +211,7 @@ const imageUrl = () => {
.el-input {
margin-left: 12px;
width: 120px;
}
.input_name_select {

250
src/views/flow/components/ParamsDrawer.vue
View File

@ -4,7 +4,9 @@
custom-class="custom-drawer-header"
class="no-header-margin"
:title="props.data.properties?.name || '参数配置'"
:before-close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
>
<div class="input__container" v-if="props.data.type === 'start'">
<el-collapse v-model="activeNames">
@ -169,6 +171,7 @@
:icon="Minus"
circle
size="small"
:disabled="property?.disabled || false"
@click="handleDelete(index)"
class="deleteBtn"
/>
@ -343,6 +346,7 @@
circle
size="small"
@click="handleDelete(index)"
:disabled="property?.disabled || false"
class="deleteBtn"
/>
</el-row>
@ -541,7 +545,7 @@
<el-row>
<el-form-item
:label="index === 0 ? '参数名' : ''"
:prop="`headers.${index}.name`"
:prop="httpNodeData.headers.length > index ? `headers.${index}.name` : undefined"
:rules="[
{ required: true, message: '请输入参数名', trigger: 'blur' },
]"
@ -555,7 +559,7 @@
</el-form-item>
<el-form-item
:label="index === 0 ? '参数值' : ''"
:prop="`headers.${index}.input`"
:prop="httpNodeData.headers.length > index ? `headers.${index}.input` : undefined"
>
<el-select
v-model="property.type"
@ -635,6 +639,13 @@
/>
</el-form-item>
</el-form-item>
<el-button
:icon="Minus"
circle
size="small"
@click="handleHttpNodeDelete('headers', index)"
class="deleteBtn"
/>
</el-row>
</div>
</div>
@ -656,9 +667,9 @@
<el-row>
<el-form-item
:label="index === 0 ? '参数名' : ''"
:prop="`params.${index}.name`"
:prop="httpNodeData.params.length > index ? `params.${index}.name` : undefined"
:rules="[
{ required: true, message: '请输入参数名', trigger: 'blur' },
{ required: true, message: '请输入参数名123', trigger: 'blur' },
]"
>
<el-input
@ -670,7 +681,7 @@
</el-form-item>
<el-form-item
:label="index === 0 ? '参数值' : ''"
:prop="`params.${index}.input`"
:prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined"
>
<el-select
v-model="property.type"
@ -689,7 +700,7 @@
trigger: 'blur',
},
]"
:prop="`params.${index}.input`"
:prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined"
>
<el-input-number
class="param-value"
@ -750,6 +761,13 @@
/>
</el-form-item>
</el-form-item>
<el-button
:icon="Minus"
circle
size="small"
@click="handleHttpNodeDelete('params', index)"
class="deleteBtn"
/>
</el-row>
</div>
</div>
@ -762,6 +780,7 @@
size="small"
@click="(e) => addHttpNodeFormItem(e, 'body')"
class="addFormItem"
v-if="httpNodeData.body.type === 'form-data'"
>
<el-icon :size="14"><Plus /></el-icon>
</el-button>
@ -775,12 +794,12 @@
<div class="code__container" v-show="httpNodeData.body.type === 'json'">
<div ref="codeRef" style="width: 100%; height: 100%"></div>
</div>
<div class="test" v-show="httpNodeData.body.type === 'form-data'">
<div class="test" v-if="httpNodeData.body.type === 'form-data'">
<div v-for="(property, index) in httpNodeData.body.formData" :key="index">
<el-row>
<el-form-item
:label="index === 0 ? '参数名' : ''"
:prop="`params.${index}.name`"
:prop="`body.formData.${index}.name`"
:rules="[
{ required: true, message: '请输入参数名', trigger: 'blur' },
]"
@ -874,6 +893,13 @@
/>
</el-form-item>
</el-form-item>
<el-button
:icon="Minus"
circle
size="small"
@click="handleHttpNodeDelete('body', index)"
class="deleteBtn"
/>
</el-row>
</div>
</div>
@ -884,8 +910,7 @@
</div>
<template #footer>
<el-button @click="handleClose">关闭</el-button>
<el-button type="primary" @click="confirm">确定</el-button>
<el-button type="primary" @click="confirm">保存</el-button>
</template>
</el-drawer>
</template>
@ -893,9 +918,9 @@
<script setup>
import FormItemRecursive from "./FormItemRecursive.vue";
import { Plus, Minus } from "@element-plus/icons-vue";
import { getInput, filterEmptyName } from "@/utils/flow";
import { ElMessage } from 'element-plus'
import { getInput, filterEmptyName, transformHttpNodeData } from "@/utils/flow";
import { emitter } from "@/utils/eventBus";
import "vue3-json-viewer/dist/index.css";
import * as monaco from 'monaco-editor';
import { nextTick, onUnmounted, watch } from "vue";
@ -917,46 +942,97 @@ const rules = reactive({});
const codeRef = ref()
let editorInstance
const handleClose = (done) => {
const dynamicForm = ref()
const outputFormRef = ref()
const confirm = async () => {
if (props.data.type === 'http') {
const nodeParams = []
nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
if (httpNodeData.value.headers.length) {
nodeParams.push({ name: "headers", type: "input", input: "", children: httpNodeData.value.headers, disabled: true, required: true })
if (dynamicForm.value) {
await dynamicForm.value.validate((valid, fields) => {
if (valid) {
if (httpNodeData.value.body.type === 'json') {
if (hasErrors()) {
ElMessage.error('JSON中存在错误，请修正后再保存！');
return;
}
}
const nodeParams = []
nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
console.log('httpNodeData.value:', httpNodeData.value)
if (httpNodeData.value?.headers?.length > 0) {
nodeParams.push({ name: "headers", type: "input", input: "", children: httpNodeData.value.headers, disabled: true, required: true })
}
if (httpNodeData.value?.params?.length > 0) {
nodeParams.push({ name: "params", type: "input", input: "", children: httpNodeData.value.params, disabled: true, required: true })
}
if (httpNodeData.value.body.type !== 'none') {
const bodyObj = {
name: "body", type: "input", input: "", children: [
{ name: 'bodyType', type: "input", input: "json", disabled: true },
{ name: 'json', type: "input", input: editorInstance.getValue() || '' },
{ name: 'formData', type: "input", input: "", children: httpNodeData.value.body.formData }
]
}
nodeParams.push(bodyObj)
}
lf.setProperties(props.data.id, {
...props.data.properties,
nodeParams
});
emitter.emit("setProperties", { id: props.data.id});
emits('close')
} else {
console.log('error submit!', fields)
}
});
}
if (httpNodeData.value.params.length) {
nodeParams.push({ name: "params", type: "input", input: "", children: httpNodeData.value.params, disabled: true, required: true })
}
if (httpNodeData.value.body.type !== 'none') {
const bodyObj = {
name: "body", type: "input", input: "", children: [
{ name: 'bodyType', type: "input", input: "json", disabled: true },
{ name: 'json', type: "input", input: editorInstance.getValue() || '' },
{ name: 'formData', type: "input", input: "", children: httpNodeData.value.body.formData }
]
}
nodeParams.push(bodyObj)
}
lf.setProperties(props.data.id, {
...props.data.properties,
nodeParams
});
} else {
const filteredObj = {
inputParams: filterEmptyName(formData.inputParams),
nodeParams: filterEmptyName(formData.nodeParams),
outputParams: filterEmptyName(formData.outputParams),
};
if (props.data.type === 'code') {
if (hasErrors()) {
ElMessage.error('代码中存在错误，请修正后再保存！');
return;
}
lf.setProperties(props.data.id, {
...props.data.properties,
...filteredObj
});
const targetObj = formData.nodeParams.find(item => item.name === 'code');
if (targetObj) {
// 存在：修改该对象的 input 属性
targetObj.input = editorInstance.getValue();
} else {
formData.nodeParams.push(
{ name: "code", type: "input", input: editorInstance.getValue() }
)
}
}
let inputValidate = true
let outputValidate = true
if (dynamicForm.value) {
await dynamicForm.value.validate((valid) => {
if (!valid) {
inputValidate = false
}
});
}
if (outputFormRef.value) {
await outputFormRef.value.validate((valid) => {
if (!valid) {
outputValidate = false
}
})
}
// 验证通过
if (inputValidate && outputValidate) {
lf.setProperties(props.data.id, {
...props.data.properties,
...formData
});
emitter.emit("setProperties", { id: props.data.id});
emits('close')
}
}
emitter.emit("setProperties", { id: props.data.id});
emits('close')
}
// 删除顶层表单项
@ -992,6 +1068,10 @@ const addFormItem = (e, type) => {
formData[type].push(obj);
};
const handleDelete = (index) => {
formData.nodeParams.splice(index, 1);
};
const quoteOptions = ref([]);
const handleTypeChange = (index) => {
if (formData.nodeParams[index].type === "input") {
@ -1137,25 +1217,24 @@ const httpMethodOptions = () => {
}
const httpNodeData = ref({
config: [
{ name: "url", type: "input", input: "", disabled: true, required: true },
{ name: "method", type: "input", input: "POST", componentType: 'select', selectOptions: httpMethodOptions(), disabled: true },
{ name: "timeout", type: "input", input: "10000", componentType: 'number', disabled: true }
],
headers: [
{ name: "", type: "input", input: ""}
],
params: [
{ name: "", type: "input", input: ""}
],
body: {
type: 'json',
json: '{}',
formData: [
{ name: "", type: "input", input: ""}
]
},
timeout: 10000
// config: [
// { name: "url", type: "input", input: "", disabled: true, required: true },
// { name: "method", type: "input", input: "POST", componentType: 'select', selectOptions: httpMethodOptions(), disabled: true },
// { name: "timeout", type: "input", input: "10000", componentType: 'number', disabled: true }
// ],
// headers: [
// { name: "", type: "input", input: ""}
// ],
// params: [
// { name: "", type: "input", input: ""}
// ],
// body: {
// type: 'json',
// json: '{}',
// formData: [
// { name: "", type: "input", input: ""}
// ]
// }
});
const addHttpNodeFormItem = (e, type) => {
@ -1167,17 +1246,33 @@ const addHttpNodeFormItem = (e, type) => {
}
};
const handleHttpNodeDelete = (type, index) => {
if (type === 'body') {
httpNodeData.value.body.formData.splice(index, 1);
} else {
httpNodeData.value[type].splice(index, 1);
}
// nextTick(() => {
// dynamicForm.value?.clearValidate()
// });
};
watch(
() => props.data,
() => {
if (props.data.type === "start") {
formData.inputParams = props.data.properties?.inputParams || [];
const inputParams = JSON.parse(JSON.stringify(props.data.properties.inputParams || []))
formData.inputParams = inputParams;
} else if (['currentLoop', 'serviceNode', 'sleep', 'loop'].includes(props.data.type)) {
formData.nodeParams = props.data.properties.nodeParams;
formData.outputParams = props.data.properties.outputParams;
const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
formData.nodeParams = nodeParams;
formData.outputParams = outputParams;
} else if (props.data.type === "code") {
formData.nodeParams = props.data.properties.nodeParams;
formData.outputParams = props.data.properties.outputParams;
const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
formData.nodeParams = nodeParams;
formData.outputParams = outputParams;
const codeParams = props.data.properties.nodeParams.find(item => item.name === 'code')
if (codeParams) {
setTimeout(() => {
@ -1187,7 +1282,18 @@ watch(
}, 100)
}
} else if (props.data.type === 'http') {
const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
const transformedData = transformHttpNodeData(nodeParams);
console.log('transformedData', transformedData);
httpNodeData.value = transformedData;
if (transformedData.body.type === 'json') {
setTimeout(() => {
if (editorInstance) {
setValue(transformedData.body.json || '{}')
}
}, 100)
}
}
},
{

51
src/views/flow/config.js
View File

@ -253,20 +253,20 @@ export const collapseList = [
action: 'STOP_LOOP',
desc: "用于立即终止当前所在的循环，跳出循环体",
},
{
icon: startSvg,
name: "单次循环开始",
type: "subStart",
action: 'SUB_START',
desc: "循环体内部工作流的开始节点，开始循环体内部的单次流程",
},
{
icon: endSvg,
name: "单次循环结束",
type: "subEnd",
action: 'SUB_END',
desc: "循环体内部工作流的终止节点，结束循环体内部的单次流程",
},
// {
// icon: startSvg,
// name: "单次循环开始",
// type: "subStart",
// action: 'SUB_START',
// desc: "循环体内部工作流的开始节点，开始循环体内部的单次流程",
// },
// {
// icon: endSvg,
// name: "单次循环结束",
// type: "subEnd",
// action: 'SUB_END',
// desc: "循环体内部工作流的终止节点，结束循环体内部的单次流程",
// },
{
icon: switchSvg,
name: "分支",
@ -293,11 +293,24 @@ export const collapseList = [
desc: "HTTP请求",
action: 'HTTP',
nodeParams: [
{ name: "url", type: "input", input: "", disabled: true, required: true },
{ name: "method", type: "input", input: "POST", componentType: 'select', selectOptions: httpMethodOptions(), disabled: true },
{ name: "timeout", type: "input", input: "10000", componentType: 'number', required: false },
{ name: "headers", type: "input", input: "", disabled: true, required: false },
{ name: "body", type: "input", input: "", disabled: true, required: true },
{ name: "config", type: "input", input: "", children: [
{ name: "url", type: "input", input: "", disabled: true, required: true },
{ name: "method", type: "input", input: "POST", componentType: 'select', selectOptions: httpMethodOptions(), disabled: true },
{ name: "timeout", type: "input", input: "10000", componentType: 'number', required: false, disabled: true }
], disabled: true, required: true },
{ name: "headers", type: "input", input: "", children: [
{ name: "", type: "input", input: ""}
], disabled: true, required: true },
{ name: "params", type: "input", input: "", children: [
{ name: "", type: "input", input: ""}
], disabled: true, required: true },
{ name: "body", type: "input", input: "", children: [
{ name: 'bodyType', type: "input", input: "json", disabled: true },
{ name: 'json', type: "input", input: '{}' },
{ name: 'formData', type: "input", input: "", children: [
{ name: "", type: "input", input: ""}
]}
], required: true },
],
outputType: 'json',
outputParams: [{ name: 'result', type: 'Object', children: [], desc: 'HTTP请求结果'}]

33
src/views/flow/index.vue
View File

@ -224,7 +224,7 @@ const drop = (e) => {
}
const point = lf.getPointByClient(e.clientX, e.clientY);
const { type, ...other } = node;
lf.addNode({
const newNode = lf.addNode({
type,
x: point.canvasOverlayPosition.x,
y: point.canvasOverlayPosition.y,
@ -232,6 +232,12 @@ const drop = (e) => {
...other,
},
});
if (!["selectArea", 'branch', 'stopLoop', 'subStart', 'subEnd'].includes(newNode.type)) {
showParamsDrawer.value = true;
console.log('newNode', newNode)
paramsDrawerData.value = newNode;
}
};
const flowStore = useFlowStore();
@ -621,16 +627,16 @@ const initFlow = () => {
});
// 监听历史记录变化
// lf.on("history:change", ({ data }) => {
// if (flowStore.disableForm) {
// return;
// }
// const flowData = lf.getGraphData();
// if (JSON.stringify(oldFlowData) === JSON.stringify(flowData)) {
// return;
// }
// flowState.value = "updateData";
// });
lf.on("history:change", ({ data }) => {
if (flowStore.disableForm) {
return;
}
const flowData = lf.getGraphData();
if (JSON.stringify(oldFlowData) === JSON.stringify(flowData)) {
return;
}
flowState.value = "updateData";
});
// 监听子节点拖动事件
lf.on("node:mousemove", ({ data, e }) => {
@ -651,9 +657,12 @@ const initFlow = () => {
});
lf.on("node:dbclick", ({ data, e }) => {
if (["selectArea", 'branch', 'stopLoop', 'subStart', 'subEnd'].includes(data.type)) {
return;
}
console.log('data', data)
showParamsDrawer.value = true;
paramsDrawerData.value = data;
console.log(data)
});
lfRef.value = lf;

217
src/views/flow/nodes/common/FormItemRecursive.vue
View File

@ -1,217 +0,0 @@
<!-- components/FormItemRecursive.vue -->
<template>
<div class="form-item-recursive">
<!-- 循环渲染当前层级的所有表单项 -->
<div v-for="(item, index) in currentList" :key="index">
<el-row>
<!-- 名称输入 -->
<el-form-item
:label="isFirstLevel && index === 0 ? '参数名' : ''"
:prop="`${propPath}.${index}.name`"
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
>
<el-input
:disabled="item.disabled"
v-model="item.name"
placeholder="请输入"
clearable
/>
</el-form-item>
<!-- 类型选择 -->
<el-form-item
:label="isFirstLevel && index === 0 ? '参数类型' : ''"
:prop="`${propPath}.${index}.type`"
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
>
<el-select
:disabled="item.disabled"
v-model="item.type"
@change="handleTypeChange(item)"
>
<el-option label="String" value="string" />
<el-option label="Number" value="number" />
<el-option label="Boolean" value="boolean" />
<el-option v-if="depth < endDepth" label="Object" value="object" />
<el-option label="Array<String>" value="array<string>" />
<el-option label="Array<Number>" value="array<number>" />
<el-option label="Array<Boolean>" value="array<boolean>" />
<el-option v-if="depth < endDepth" label="Array<Object>" value="array<object>" />
</el-select>
</el-form-item>
<!-- 描述输入 -->
<el-form-item
:label="isFirstLevel && index === 0 ? '描述' : ''"
:prop="`${propPath}.${index}.desc`"
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
>
<el-input
:disabled="item.disabled"
v-model="item.desc"
placeholder="请输入"
clearable
/>
</el-form-item>
<!-- 是否必填 -->
<el-form-item v-if="formType === 'input'" :label="isFirstLevel && index === 0 ? '必填' : ''">
<el-switch
:disabled="item.disabled"
v-model="item.required"
/>
</el-form-item>
<!-- 删除按钮（第一层第一个不能删） -->
<el-button
v-if="!item?.disabled"
:icon="Minus"
circle
size="small"
@click="handleDelete(index)"
class="deleteBtn"
/>
<!-- 添加子项按钮（当类型是object/array<object>时） -->
<el-button
v-if="['object', 'array<object>'].includes(item.type)"
:icon="Plus"
circle
size="small"
@click="handleAddChild(item)"
class="addBtn"
/>
</el-row>
<!-- 递归渲染子项（如果有子项且类型匹配） -->
<!-- 层级越深，缩进越多 -->
<div
v-if="['object', 'array<object>'].includes(item.type) && item.children.length"
class="nested-form-items"
:style="{ marginLeft: `${depth * 20}px` }"
>
<!-- 递归调用自身，处理下一层级 -->
<!-- 非第一层 -->
<!-- 复用添加逻辑 -->
<FormItemRecursive
:formType="formType"
:current-list="item.children"
:prop-path="`${propPath}.${index}.children`"
:depth="depth + 1"
:is-first-level="false"
:endDepth="endDepth"
:parent-path="[...parentPath, index] "
@add-item="handleAddChild(item)"
@delete-item="handleChildDelete"
/>
</div>
</div>
</div>
</template>
<script setup>
import { Plus, Minus } from "@element-plus/icons-vue";
// 定义props
const { formType, currentList, propPath, depth, isFirstLevel, endDepth, parentPath } = defineProps({
formType: {
type: String,
default: 'input'
},
currentList: {
type: Array,
default: () => []
},
propPath: {
type: String,
default: ''
},
depth: {
type: Number,
default: 0
},
isFirstLevel: {
type: Boolean,
default: true
},
endDepth: {
type: Number,
default: 2
},
parentPath: {
type: String,
default: ''
},
});
// 定义emit事件
const emit = defineEmits(['add-item', 'delete-item'])
// 处理类型变化（清空或添加子项）
const handleTypeChange = (item) => {
if (!["object", "array<object>"].includes(item.type)) {
item.children = []; // 非对象类型清空子项
} else if (item.children.length === 0) {
handleAddChild(item); // 首次切换为对象类型时添加一个子项
}
};
// 添加子项
const handleAddChild = (parentItem) => {
parentItem.children.push({
name: "",
type: "",
desc: "",
required: false,
children: [],
});
// emit("add-item", parentItem); // 通知父组件（可选）
};
// 删除当前项
const handleDelete = (index) => {
// 完整路径 = 父级路径 + 当前索引（如果是顶层，parentPath为undefined）
const fullPath = parentPath ? [...parentPath, index] : [index];
emit("delete-item", fullPath); // 向上传递完整路径
}
// 接收子组件的删除事件，继续向上传递
const handleChildDelete = (childFullPath) => {
emit("delete-item", childFullPath);
}
</script>
<style lang="scss" scoped>
.nested-form-items {
border-left: 1px dashed #ccc; /* 层级连接线 */
padding-left: 16px;
margin-top: 8px;
margin-bottom: 8px;
}
.deleteBtn {
margin-bottom: 22px;
cursor: pointer;
}
.addBtn {
margin-bottom: 22px;
cursor: pointer;
}
:deep(.el-row) {
align-items: end;
.el-input {
--el-input-width: 140px;
}
.el-select {
--el-select-width: 140px;
}
.el-cascader {
--el-form-inline-content-width: 140px;
}
}
</style>