Merge branch 'refactor_flow' into 'dev'
Refactor flow See merge request smart_bench/cmvr-iot-ui!1
This commit is contained in:
commit
9d3ed51349
@ -109,7 +109,7 @@ export const recursiveFilter = (data, id, type = ['loop', 'customGroup'], result
|
||||
data.forEach((item) => {
|
||||
if (type.includes(item.type) && item.children && item.children.includes(id)) {
|
||||
result.push(item)
|
||||
recursiveFilter(data, item.id, result)
|
||||
recursiveFilter(data, item.id, type, result)
|
||||
}
|
||||
});
|
||||
return result
|
||||
@ -264,3 +264,107 @@ export const convertToTree = (data) => {
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
export const filterEmptyName = (obj) => {
|
||||
// 1. 如果是数组，遍历每一项递归处理
|
||||
if (Array.isArray(obj)) {
|
||||
return obj
|
||||
.map(item => filterEmptyName(item)) // 先递归处理子项
|
||||
.filter(item => item !== null); // 过滤掉被剔除的空项
|
||||
}
|
||||
|
||||
// 2. 如果是对象，先检查 name 是否为空，为空直接返回 null（剔除）
|
||||
if (typeof obj === 'object' && obj !== null) {
|
||||
// 核心：name 为空字符串 → 直接剔除这个对象
|
||||
if (obj.name === '') {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 创建新对象，保留原有属性
|
||||
const newObj = { ...obj };
|
||||
|
||||
// 如果有 children，递归过滤子节点
|
||||
if (newObj.children && Array.isArray(newObj.children)) {
|
||||
newObj.children = filterEmptyName(newObj.children);
|
||||
}
|
||||
|
||||
return newObj;
|
||||
}
|
||||
|
||||
// 基础类型直接返回
|
||||
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;
|
||||
}
|
||||
|
||||
export const transformSdAgentNodeData = (source) => {
|
||||
// 初始化结果对象
|
||||
const result = {};
|
||||
|
||||
// 遍历每一个顶级节点
|
||||
source.forEach(item => {
|
||||
const { name, children } = item;
|
||||
if (!name) return; // 过滤无name的无效节点
|
||||
|
||||
// 处理普通节点（config/headers/params）：直接取 children 数组
|
||||
if (name !== 'invokeTts') {
|
||||
result[name] = children || [];
|
||||
return;
|
||||
}
|
||||
|
||||
// 专门处理 tts 节点（特殊结构）
|
||||
if (name === 'invokeTts') {
|
||||
result.invokeTts = item.input;
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
@ -6,12 +6,12 @@
|
||||
<el-row>
|
||||
<!-- 名称输入 -->
|
||||
<el-form-item
|
||||
:label="isFirstLevel && index === 0 ? '参数名' : ''"
|
||||
:label="isFirstLevel && index === 0 ? '变量名' : ''"
|
||||
:prop="`${propPath}.${index}.name`"
|
||||
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="item.disabled"
|
||||
class="param-name"
|
||||
v-model="item.name"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
@ -20,13 +20,13 @@
|
||||
|
||||
<!-- 类型选择 -->
|
||||
<el-form-item
|
||||
:label="isFirstLevel && index === 0 ? '参数类型' : ''"
|
||||
:label="isFirstLevel && index === 0 ? '变量类型' : ''"
|
||||
:prop="`${propPath}.${index}.type`"
|
||||
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
|
||||
>
|
||||
<el-select
|
||||
:disabled="item.disabled"
|
||||
v-model="item.type"
|
||||
class="param-type"
|
||||
@change="handleTypeChange(item)"
|
||||
>
|
||||
<el-option label="String" value="string" />
|
||||
@ -47,7 +47,7 @@
|
||||
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="item.disabled"
|
||||
class="param-desc"
|
||||
v-model="item.desc"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
@ -57,14 +57,12 @@
|
||||
<!-- 是否必填 -->
|
||||
<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"
|
||||
@ -160,7 +158,7 @@ const handleTypeChange = (item) => {
|
||||
const handleAddChild = (parentItem) => {
|
||||
parentItem.children.push({
|
||||
name: "",
|
||||
type: "",
|
||||
type: "string",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
@ -184,7 +182,8 @@ const handleChildDelete = (childFullPath) => {
|
||||
<style lang="scss" scoped>
|
||||
.nested-form-items {
|
||||
border-left: 1px dashed #ccc; /* 层级连接线 */
|
||||
padding-left: 16px;
|
||||
padding-left: 12px;
|
||||
margin-left: 0 !important;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@ -202,16 +201,21 @@ const handleChildDelete = (childFullPath) => {
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 140px;
|
||||
.el-form-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 140px;
|
||||
.param-name {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
--el-form-inline-content-width: 140px;
|
||||
.param-type {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.param-desc {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="state__container" :class="`nodeState-${props.state}`">
|
||||
<div class="context">
|
||||
<div class="context" v-show="showState !== 'NORMAL'">
|
||||
<div class="state">
|
||||
<el-icon>
|
||||
<SuccessFilled v-if="props.state === 'SUCCESS'" />
|
||||
@ -10,8 +10,17 @@
|
||||
<Loading v-if="props.state === 'RUNNING'" />
|
||||
</el-icon>
|
||||
<div class="text">{{ getStateText() }}</div>
|
||||
<el-tag :type="props.state === 'SUCCESS' ? 'success' : 'danger'">
|
||||
{{ props.runtimes }}ms
|
||||
</el-tag>
|
||||
</div>
|
||||
<div
|
||||
class="resultText"
|
||||
v-popover="popoverRef"
|
||||
@click="popoverVisible = !popoverVisible"
|
||||
>
|
||||
{{ popoverVisible ? "隐藏结果" : "展示结果" }}
|
||||
</div>
|
||||
<div class="resultText" v-popover="popoverRef" @click="popoverVisible = !popoverVisible">{{ popoverVisible ? '隐藏结果' : '展示结果' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,14 +51,18 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="js">
|
||||
import { ref, useSlots } from 'vue'
|
||||
import { ref, useSlots, watch } from 'vue'
|
||||
import { SuccessFilled, CircleCloseFilled, Loading, VideoPause } from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
state: {
|
||||
type: String,
|
||||
default: 'NORMAL'
|
||||
}
|
||||
},
|
||||
runtimes: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
})
|
||||
|
||||
const slots = useSlots()
|
||||
@ -69,6 +82,18 @@ const getStateText = () => {
|
||||
const popoverRef = ref();
|
||||
const popoverVisible = ref(false);
|
||||
|
||||
const showState = ref('NORMAL')
|
||||
|
||||
watch(() => props.state, (newVal) => {
|
||||
showState.value = newVal;
|
||||
});
|
||||
|
||||
const closePopover = () => {
|
||||
showState.value = 'NORMAL';
|
||||
popoverVisible.value = false;
|
||||
};
|
||||
|
||||
defineExpose({ closePopover })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.state__container {
|
||||
@ -96,9 +121,9 @@ const popoverVisible = ref(false);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nodeState-SUCCESS {
|
||||
.nodeState-SUCCESS {
|
||||
display: block;
|
||||
background-color: #eef9f1;
|
||||
|
||||
@ -106,9 +131,9 @@ const popoverVisible = ref(false);
|
||||
font-size: 16px;
|
||||
color: #309256;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nodeState-FAILED {
|
||||
.nodeState-FAILED {
|
||||
display: block;
|
||||
background-color: #fdf5f5;
|
||||
|
||||
@ -116,9 +141,9 @@ const popoverVisible = ref(false);
|
||||
font-size: 16px;
|
||||
color: #ee3f38;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nodeState-STOPPED {
|
||||
.nodeState-STOPPED {
|
||||
display: block;
|
||||
background-color: #fdf5f5;
|
||||
|
||||
@ -126,9 +151,9 @@ const popoverVisible = ref(false);
|
||||
font-size: 16px;
|
||||
color: #ee3f38;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nodeState-PAUSED {
|
||||
.nodeState-PAUSED {
|
||||
display: block;
|
||||
background-color: #cbcbcb;
|
||||
|
||||
@ -136,9 +161,9 @@ const popoverVisible = ref(false);
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nodeState-RUNNING {
|
||||
.nodeState-RUNNING {
|
||||
display: block;
|
||||
background-color: #f4f7ff;
|
||||
|
||||
@ -147,5 +172,5 @@ const popoverVisible = ref(false);
|
||||
font-size: 16px;
|
||||
animation: rotateAnimation 2s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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" />
|
||||
@ -44,7 +42,7 @@
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
<!-- <el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="zoomState ? '缩小' : '放大'"
|
||||
@ -56,7 +54,7 @@
|
||||
<ZoomIn v-else />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-tooltip> -->
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
@ -213,6 +211,7 @@ const imageUrl = () => {
|
||||
|
||||
.el-input {
|
||||
margin-left: 12px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.input_name_select {
|
||||
|
||||
@ -30,7 +30,7 @@ onMounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__box {
|
||||
width: 680px;
|
||||
width: 320px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
|
||||
1794
src/views/flow/components/ParamsDrawer.vue
Normal file
1794
src/views/flow/components/ParamsDrawer.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -171,6 +171,7 @@ export const collapseList = [
|
||||
nodeParams: [
|
||||
{ name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
|
||||
],
|
||||
outputParams: [],
|
||||
outputType: 'json'
|
||||
},
|
||||
{
|
||||
@ -196,6 +197,7 @@ export const collapseList = [
|
||||
nodeParams: [
|
||||
{ name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
|
||||
],
|
||||
outputParams: [],
|
||||
outputType: 'json'
|
||||
},
|
||||
],
|
||||
@ -213,6 +215,7 @@ export const collapseList = [
|
||||
nodeParams: [
|
||||
{ name: "deviceId", type: "input", input: "", componentType: 'select', selectOptions: deviceOptions(), disabled: true }
|
||||
],
|
||||
outputParams: [],
|
||||
outputType: 'json'
|
||||
},
|
||||
{
|
||||
@ -239,6 +242,9 @@ export const collapseList = [
|
||||
type: "loop",
|
||||
action: 'START_LOOP',
|
||||
desc: "实现对列表对象循环执行一系列任务",
|
||||
nodeParams: [{ name: "loopNum", type: "input", input: null, quote: "" }],
|
||||
outputParams: [],
|
||||
outputType: 'json'
|
||||
},
|
||||
{
|
||||
icon: stopLoopSvg,
|
||||
@ -247,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: "分支",
|
||||
@ -275,8 +281,9 @@ export const collapseList = [
|
||||
desc: "用于睡眠整个流程，表示延迟多少毫秒",
|
||||
action: 'sleep',
|
||||
nodeParams: [
|
||||
{ name: "delayMs", type: "input", componentType: 'number', input: "", disabled: true }
|
||||
{ name: "delayMs", type: "input", componentType: 'number', input: 0, disabled: true }
|
||||
],
|
||||
outputParams: [],
|
||||
outputType: 'json'
|
||||
},
|
||||
{
|
||||
@ -285,12 +292,24 @@ export const collapseList = [
|
||||
type: "http",
|
||||
desc: "HTTP请求",
|
||||
action: 'HTTP',
|
||||
nodeType: 'HTTP',
|
||||
nodeParams: [
|
||||
{ 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 },
|
||||
{ name: "headers", type: "input", input: "", disabled: true, required: false },
|
||||
{ name: "body", type: "input", input: "", disabled: true, required: 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: []}
|
||||
], required: true },
|
||||
],
|
||||
outputType: 'json',
|
||||
outputParams: [{ name: 'result', type: 'Object', children: [], desc: 'HTTP请求结果'}]
|
||||
@ -303,10 +322,24 @@ export const collapseList = [
|
||||
action: 'CODE',
|
||||
canAddFormItem: true,
|
||||
nodeParams: [
|
||||
{ name: "input", type: "input", input: "", required: true }
|
||||
{ name: "input", type: "input", input: "", required: true },
|
||||
{ name: "code", type: "input", input: `
|
||||
// 方法定义不能修改
|
||||
function handler(params) {
|
||||
// 返回值是一个可序列化成 json 的 dict 或 object
|
||||
const result ={
|
||||
type: 2,
|
||||
message: params.input
|
||||
}
|
||||
return result
|
||||
}
|
||||
`, required: true }
|
||||
],
|
||||
outputType: 'json',
|
||||
outputParams: [{ name: 'result', type: 'Object', children: [], desc: 'js节点返回'}]
|
||||
outputParams: [{ name: 'result', type: 'object', children: [
|
||||
{name: 'type', type: 'number', desc: '占位属性'},
|
||||
{name: 'message', type: 'string', desc: '占位属性'}
|
||||
], desc: 'js节点返回'}]
|
||||
},
|
||||
{
|
||||
icon: microphoneSvg,
|
||||
@ -314,14 +347,15 @@ export const collapseList = [
|
||||
type: "currentLoop",
|
||||
desc: "获取当前循环对象",
|
||||
action: 'GET_CURRENT_OBJECT',
|
||||
nodeType: 'getCurrentObject',
|
||||
nodeParams: [
|
||||
{ name: "array", type: "input", input: "", disabled: true }
|
||||
{ name: "array", type: "input", input: "" }
|
||||
],
|
||||
outputType: 'json',
|
||||
outputParams: [
|
||||
{ name: 'index', type: 'number', desc: '索引', disabled: true},
|
||||
{ name: 'object', type: 'Object', children: [], desc: '当前循环对象', }
|
||||
{ name: 'index', type: 'number', desc: '索引'},
|
||||
{ name: 'object', type: 'object', children: [
|
||||
{ name: 'test', type: 'string', desc: '占位属性' }
|
||||
], desc: '当前循环对象', }
|
||||
]
|
||||
},
|
||||
],
|
||||
@ -398,7 +432,10 @@ export const collapseList = [
|
||||
{ name: "vehType", type: "input", input: "su7", disabled: true },
|
||||
],
|
||||
outputType: 'json',
|
||||
outputParams: [{ name: 'coordinates', type: 'Object', children: [], desc: '坐标对象', }]
|
||||
outputParams: [{ name: 'coordinates', type: 'object', children: [
|
||||
{ name: 'x', type: 'number', desc: 'x坐标' },
|
||||
{ name: 'y', type: 'number', desc: 'y坐标' }
|
||||
], desc: '坐标对象', }]
|
||||
}, {
|
||||
icon: dialogueSvg,
|
||||
name: "tts语音合成",
|
||||
@ -422,14 +459,24 @@ export const collapseList = [
|
||||
}, {
|
||||
icon: dialogueSvg,
|
||||
name: "商道智能体",
|
||||
type: "serviceNode",
|
||||
type: "sdAgent",
|
||||
desc: "通过apiKey调用商道大模型",
|
||||
action: 'AI_AGENT_PLATFORM',
|
||||
nodeType: "LLM",
|
||||
outputType: 'json',
|
||||
nodeParams: [
|
||||
{ name: "config", type: "input", input: "", children: [
|
||||
{ name: 'apiKey', type: "input", input: "", disabled: true },
|
||||
{ name: 'text', type: "input", input: "", disabled: true }
|
||||
{ name: 'text', type: "input", input: "", disabled: true },
|
||||
]},
|
||||
{ name: 'invokeTts', type: "input", input: false },
|
||||
{ name: 'tts', type: "input", input: "", children: [
|
||||
{ name: 'url', type: "input", input: "", disabled: true },
|
||||
{ name: 'text', type: "input", input: "", disabled: true },
|
||||
{ name: 'speed', type: "input", input: "", max: 100, disabled: true },
|
||||
{ name: 'voice', type: "input", input: "", componentType: 'select', selectOptions: voiceOptions(), disabled: true },
|
||||
{ name: 'volume', type: "input", input: "", componentType: 'number', max: 100, disabled: true }
|
||||
], disabled: true }
|
||||
],
|
||||
outputParams: [{ name: 'result', type: 'string', desc: '商道大模型的返回文案', disabled: true}]
|
||||
}, {
|
||||
|
||||
@ -8,21 +8,15 @@
|
||||
</div>
|
||||
<div class="btn__container">
|
||||
<div class="btn">
|
||||
<el-tag style="margin-right: 12px;" v-if="['testRunError', 'testRunFinish'].includes(flowState)" :type="flowState === 'testRunFinish' ? 'success' : 'danger'">
|
||||
{{ totalRunningTime }}ms
|
||||
</el-tag>
|
||||
<el-button v-if="['testRunError', 'testRunFinish', 'stop'].includes(flowState)" @click="clearRun">清除上一次运行结果</el-button>
|
||||
<el-button @click="group">分组</el-button>
|
||||
<el-button v-if="flowState !== 'testRunning'" @click="testRun"
|
||||
>试运行</el-button
|
||||
>
|
||||
<el-button v-if="flowState === 'testRunning'" @click="flowPauseFn"
|
||||
>暂停</el-button
|
||||
>
|
||||
<el-button v-if="flowState === 'pause'" @click="flowResumeFn"
|
||||
>恢复</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="['testRunning', 'pause'].includes(flowState)"
|
||||
@click="flowStopFn"
|
||||
>终止</el-button
|
||||
>
|
||||
<el-button v-if="flowState !== 'testRunning'" @click="testRun">试运行</el-button>
|
||||
<el-button v-if="flowState === 'testRunning'" @click="flowPauseFn">暂停</el-button>
|
||||
<el-button v-if="flowState === 'pause'" @click="flowResumeFn">恢复</el-button>
|
||||
<el-button v-if="['testRunning', 'pause'].includes(flowState)" @click="flowStopFn">终止</el-button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-tooltip
|
||||
@ -34,9 +28,7 @@
|
||||
>
|
||||
<el-button type="primary" :disabled="true">发布</el-button>
|
||||
</el-tooltip>
|
||||
<el-button v-else @click="deployFlow" type="primary"
|
||||
>发布</el-button
|
||||
>
|
||||
<el-button v-else @click="deployFlow" type="primary">发布</el-button>
|
||||
|
||||
<el-popover
|
||||
:width="260"
|
||||
@ -95,6 +87,12 @@
|
||||
@changeState="changeState"
|
||||
:flowId="flowInfoData.itemId"
|
||||
/>
|
||||
|
||||
<ParamsDrawer
|
||||
:drawer="showParamsDrawer"
|
||||
:data="paramsDrawerData"
|
||||
@close="showParamsDrawer = false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="visible" width="500" append-to-body>
|
||||
@ -117,9 +115,7 @@
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||
]"
|
||||
:rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="property?.disabled || false"
|
||||
@ -131,9 +127,7 @@
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入参数值', trigger: 'blur' },
|
||||
]"
|
||||
:rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="property.componentType === 'number'"
|
||||
@ -170,21 +164,20 @@
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="execute">
|
||||
确定
|
||||
</el-button>
|
||||
<el-button type="primary" @click="execute"> 确定 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import LogicFlow, { action } from "@logicflow/core";
|
||||
import LogicFlow from "@logicflow/core";
|
||||
import "@logicflow/core/es/index.css";
|
||||
import "@logicflow/core/lib/style/index.css";
|
||||
import "@logicflow/extension/lib/style/index.css";
|
||||
import { lfConfig, registerCustomizeNode } from "./config";
|
||||
import TestRun from "./components/TestRun.vue";
|
||||
import ParamsDrawer from "./components/ParamsDrawer.vue";
|
||||
import Aside from "./components/Aside.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
@ -196,7 +189,7 @@ import {
|
||||
flowPause,
|
||||
flowResume,
|
||||
flowStop,
|
||||
flowAction
|
||||
flowAction,
|
||||
} from "@/api/device/flow";
|
||||
import { getDetect } from "@/api/test/detect";
|
||||
import { Location } from "@element-plus/icons-vue";
|
||||
@ -217,7 +210,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,
|
||||
@ -225,6 +218,13 @@ const drop = (e) => {
|
||||
...other,
|
||||
},
|
||||
});
|
||||
|
||||
if (
|
||||
!["selectArea", "branch", "stopLoop", "subStart", "subEnd"].includes(newNode.type)
|
||||
) {
|
||||
showParamsDrawer.value = true;
|
||||
paramsDrawerData.value = newNode;
|
||||
}
|
||||
};
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
@ -274,22 +274,12 @@ const testRun = async () => {
|
||||
return;
|
||||
}
|
||||
|
||||
let allValid = true;
|
||||
for (const node of nodes) {
|
||||
const nodeModel = lf.getNodeModelById(node.id);
|
||||
if (nodeModel && nodeModel.validateForm) {
|
||||
const result = await nodeModel.validateForm();
|
||||
if (!result.valid) {
|
||||
allValid = false;
|
||||
}
|
||||
}
|
||||
if (nodeErrorList.value.length > 0) {
|
||||
ElMessage.warning("存在参数错误的节点，请检查！");
|
||||
return;
|
||||
}
|
||||
|
||||
if (allValid) {
|
||||
isOpen.value = true;
|
||||
} else {
|
||||
ElMessage.error("部分节点验证失败，请查看详情");
|
||||
}
|
||||
};
|
||||
|
||||
// 流程暂停
|
||||
@ -301,6 +291,8 @@ const flowPauseFn = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const totalRunningTime = ref(0);
|
||||
|
||||
const flowResumeFn = async () => {
|
||||
const res = await flowResume(instId.value);
|
||||
if (res.code === 200) {
|
||||
@ -427,14 +419,15 @@ const loopFlowView = async (instId, taskId = null) => {
|
||||
if (!flowInfoData.value.isLog) {
|
||||
flowStore.updateDisableForm(false);
|
||||
flowState.value = "testRunFinish";
|
||||
totalRunningTime.value = arr[arr.length - 1].endTime - arr[0].startTime
|
||||
}
|
||||
} else {
|
||||
if (!flowInfoData.value.isLog) {
|
||||
if (["PAUSED", "STOPPED"].includes(arr[arr.length - 1]?.status)) {
|
||||
flowState.value =
|
||||
arr[arr.length - 1]?.status === "PAUSED" ? "pause" : "stop";
|
||||
flowState.value = arr[arr.length - 1]?.status === "PAUSED" ? "pause" : "stop";
|
||||
} else {
|
||||
flowState.value = "testRunError";
|
||||
totalRunningTime.value = arr[arr.length - 1].endTime - arr[0].startTime
|
||||
flowStore.updateDisableForm(false);
|
||||
}
|
||||
}
|
||||
@ -549,10 +542,7 @@ const initFlow = () => {
|
||||
keys: ["backspace", "delete"], // 覆盖删除键
|
||||
callback: () => {
|
||||
const activeElem = document.activeElement;
|
||||
if (
|
||||
activeElem.tagName === "INPUT" ||
|
||||
activeElem.tagName === "TEXTAREA"
|
||||
) {
|
||||
if (activeElem.tagName === "INPUT" || activeElem.tagName === "TEXTAREA") {
|
||||
return; // 不处理输入框内的删除
|
||||
}
|
||||
|
||||
@ -638,7 +628,19 @@ const initFlow = () => {
|
||||
|
||||
lf.on("node:mouseleave", ({ data }) => {
|
||||
const node = lf.getNodeModelById(data.id);
|
||||
node.setCustomProperties && node.setCustomProperties();
|
||||
if (node.setCustomProperties) {
|
||||
node.setCustomProperties();
|
||||
}
|
||||
});
|
||||
|
||||
lf.on("node:dbclick", ({ data, e }) => {
|
||||
if (
|
||||
["selectArea", "branch", "stopLoop", "subStart", "subEnd"].includes(data.type)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
showParamsDrawer.value = true;
|
||||
paramsDrawerData.value = data;
|
||||
});
|
||||
|
||||
lfRef.value = lf;
|
||||
@ -667,6 +669,8 @@ const group = () => {
|
||||
}
|
||||
});
|
||||
if (children.length === 0) {
|
||||
lf.clearSelectElements();
|
||||
lf.extension.selectionSelect.closeSelectionSelect();
|
||||
return;
|
||||
}
|
||||
let width = maxX - minX + PADDING;
|
||||
@ -710,58 +714,93 @@ const fitView = () => {
|
||||
};
|
||||
|
||||
const nodeName = ref("");
|
||||
const visible = ref(false)
|
||||
const visible = ref(false);
|
||||
const formData = reactive({
|
||||
nodeParams: [],
|
||||
})
|
||||
const rules = reactive({})
|
||||
const executeForm = ref()
|
||||
const nodeAction = ref('')
|
||||
});
|
||||
const rules = reactive({});
|
||||
const executeForm = ref();
|
||||
const nodeAction = ref("");
|
||||
|
||||
const singleNodeExecution = (e) => {
|
||||
const { name, nodeType, nodeParams, action } = e.detail;
|
||||
nodeName.value = name;
|
||||
visible.value = true;
|
||||
nodeAction.value = action
|
||||
if (nodeType === 'EDGE') {
|
||||
nodeAction.value = action;
|
||||
if (nodeType === "EDGE") {
|
||||
formData.nodeParams = [
|
||||
{
|
||||
disabled: true,
|
||||
input: "",
|
||||
name: "terminalId",
|
||||
type: "input"
|
||||
type: "input",
|
||||
},
|
||||
...nodeParams
|
||||
]
|
||||
...nodeParams,
|
||||
];
|
||||
} else {
|
||||
formData.nodeParams = nodeParams
|
||||
formData.nodeParams = nodeParams;
|
||||
}
|
||||
};
|
||||
|
||||
const execute = async () => {
|
||||
const result = await executeForm.value.validate();
|
||||
if (result) {
|
||||
const obj = {}
|
||||
formData.nodeParams.forEach(item => {
|
||||
obj[item.name] = item.input
|
||||
})
|
||||
const obj = {};
|
||||
formData.nodeParams.forEach((item) => {
|
||||
obj[item.name] = item.input;
|
||||
});
|
||||
const res = await flowAction({
|
||||
action: nodeAction.value,
|
||||
payload: obj
|
||||
})
|
||||
payload: obj,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('执行成功')
|
||||
ElMessage.success("执行成功");
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
ElMessage.error(res.msg);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const showParamsDrawer = ref(false);
|
||||
const paramsDrawerData = ref({});
|
||||
|
||||
const clearRun = () => {
|
||||
const { nodes } = lf.getGraphData();
|
||||
nodes.forEach((item) => {
|
||||
const node = lf.getNodeModelById(item.id);
|
||||
if (node.closePopover) {
|
||||
node.closePopover();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const nodeErrorList = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
justLoadFlow();
|
||||
initFlow();
|
||||
document.addEventListener("singleNodeExecution", singleNodeExecution);
|
||||
registerBeforeUnload();
|
||||
|
||||
emitter.on("openParamsDrawer", (node) => {
|
||||
showParamsDrawer.value = true;
|
||||
paramsDrawerData.value = node;
|
||||
});
|
||||
|
||||
emitter.on("throwAnError", (data) => {
|
||||
// 处理错误抛出逻辑
|
||||
const { id, hasError } = data;
|
||||
const element = document.getElementsByClassName(`node__container ${id}`)[0].parentElement;
|
||||
if (hasError) {
|
||||
if (!nodeErrorList.value.includes(id)) {
|
||||
nodeErrorList.value.push(id);
|
||||
element.style.background = "#ff00001a";
|
||||
}
|
||||
} else {
|
||||
nodeErrorList.value = nodeErrorList.value.filter((item) => item !== id);
|
||||
element.style.background = "#fff";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const operationEdge = (arr) => {
|
||||
@ -772,6 +811,9 @@ const operationEdge = (arr) => {
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("openParamsDrawer");
|
||||
emitter.off("throwAnError");
|
||||
|
||||
window.removeEventListener("beforeunload", handleBeforeUnload);
|
||||
document.removeEventListener("singleNodeExecution", singleNodeExecution);
|
||||
});
|
||||
@ -849,8 +891,6 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.node-relationship-network-popover {
|
||||
@ -885,7 +925,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.el-textarea {
|
||||
width: 200px
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -144,14 +144,8 @@ class ServiceNodeHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
const result = this.componentInstance.validateForm()
|
||||
return result
|
||||
}
|
||||
|
||||
setCustomProperties() {
|
||||
this.componentInstance.setNodeProperties()
|
||||
closePopover() {
|
||||
this.componentInstance.closePopover()
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="node__container" :class="props.model.id">
|
||||
<NodeState :state="nodeOperatingStatus">
|
||||
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
|
||||
<template #input>
|
||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||
</template>
|
||||
@ -41,192 +41,20 @@
|
||||
:nodeName="props.properties.name"
|
||||
:nodeDesc="props.properties.desc"
|
||||
:zoom-state="nodeZoom"
|
||||
@zoom="zoom"
|
||||
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
<div class="input__container" v-show="nodeZoom" @mousedown="(e) => e.stopPropagation()" @keydown="handleInputKeydown">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right" v-if="properties.properties?.canAddFormItem">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="property?.disabled || false"
|
||||
v-model="property.name"
|
||||
@keydown="handleInputKeydown"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.type`"
|
||||
>
|
||||
<el-select
|
||||
v-model="property.type"
|
||||
@change="handleTypeChange(index)"
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[
|
||||
{
|
||||
required: property?.required ?? true,
|
||||
message: '请输入参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="property.componentType === 'number'"
|
||||
v-model="property.input"
|
||||
:min="0"
|
||||
:max="property.max || Infinity"
|
||||
:controls="false"
|
||||
:step-strictly="true"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
@keydown="handleInputKeydown"
|
||||
/>
|
||||
<el-select
|
||||
v-model="property.input"
|
||||
v-else-if="property.componentType === 'select'"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in property.selectOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
@keydown="handleInputKeydown"
|
||||
v-else
|
||||
v-model="property.input"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="property.type === 'quote'"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.quote`"
|
||||
>
|
||||
<el-cascader
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) cascaderRefs[index] = el;
|
||||
}
|
||||
"
|
||||
v-model="property.quote"
|
||||
:checkStrictly="true"
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="
|
||||
(visible) => visibleChange(visible, index, property.quote)
|
||||
"
|
||||
@change="(value) => cascaderChange(value, index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output__container" v-show="nodeZoom">
|
||||
<div v-if="props.properties?.outputParams?.length > 0">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输出</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addOutputFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:rules="outputRules"
|
||||
ref="outputFormRef"
|
||||
>
|
||||
<FormItemRecursive
|
||||
formType="output"
|
||||
:current-list="formData.outputParams"
|
||||
prop-path="outputParams"
|
||||
:depth="0"
|
||||
:is-first-level="true"
|
||||
:endDepth="2"
|
||||
:parent-path="[]"
|
||||
@delete-item="deleteTopLevelItem"
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- @zoom="zoom" -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { getInput, initNodeZoom } from "@/utils/flow";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
|
||||
import FormItemRecursive from "./FormItemRecursive.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
@ -235,70 +63,6 @@ const props = defineProps({
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const formData = reactive({
|
||||
nodeParams: [],
|
||||
outputParams: [],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = "";
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const outputRules = reactive({});
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
const addOutputFormItem = () => {
|
||||
formData.outputParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
children: [],
|
||||
});
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
const outputFormRef = ref();
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
let flag = true;
|
||||
if (outputFormRef.value) {
|
||||
flag = await outputFormRef.value.validate();
|
||||
}
|
||||
|
||||
if (result && flag) {
|
||||
const data = toRaw(formData);
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
// dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
@ -309,124 +73,27 @@ const setNodeName = (name) => {
|
||||
}
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const runtimes = ref(0);
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
const errorInfoData = ref('');
|
||||
|
||||
const visibleChange = (value, index, quote) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
const currentValue = [...quote];
|
||||
// 强制级联选择器重新处理选中值与选项的匹配
|
||||
if (cascaderRefs.value[index]) {
|
||||
// 等待DOM更新后再设置值，确保新options已生效
|
||||
setTimeout(() => {
|
||||
// 如果当前有选中值，重新设置一次以触发重新匹配
|
||||
if (currentValue.length) {
|
||||
formData.nodeParams[index].quote = [];
|
||||
// 确保响应式更新
|
||||
setTimeout(() => {
|
||||
formData.nodeParams[index].quote = currentValue;
|
||||
}, 0);
|
||||
}
|
||||
// 手动触发级联选择器的重新渲染
|
||||
// cascaderRefs.value[index].updatePopper();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const nodeStateRef = ref(null);
|
||||
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
const closePopover = () => {
|
||||
if (nodeStateRef.value) {
|
||||
nodeStateRef.value.closePopover();
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
};
|
||||
|
||||
const addFormItem = () => {
|
||||
formData.nodeParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
// 删除顶层表单项
|
||||
const deleteTopLevelItem = (fullPath) => {
|
||||
// 从顶层数据开始查找
|
||||
let currentLevel = formData.outputParams;
|
||||
|
||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||
for (let i = 0; i < fullPath.length - 1; i++) {
|
||||
const index = fullPath[i];
|
||||
// 进入下一层级
|
||||
currentLevel = currentLevel[index].children;
|
||||
}
|
||||
|
||||
// 最后一个索引是当前层级要删除的项
|
||||
const lastIndex = fullPath[fullPath.length - 1];
|
||||
currentLevel.splice(lastIndex, 1);
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
const nodeZoom = ref(props?.properties?.zoom ?? true)
|
||||
const zoom = (flag) => {
|
||||
nodeZoom.value = flag
|
||||
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
|
||||
})
|
||||
}
|
||||
if (
|
||||
props.properties.outputParams &&
|
||||
props.properties.outputParams.length > 0
|
||||
) {
|
||||
formData.outputParams = props.properties.outputParams;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
const handleInputKeydown = (e) => {
|
||||
// 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
|
||||
e.stopPropagation();
|
||||
// 可选：明确放行 Ctrl+V（增强兼容性）
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
|
||||
e.returnValue = true; // 允许默认粘贴行为
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
if (data.endTime && data.startTime) {
|
||||
runtimes.value = data.endTime - data.startTime;
|
||||
}
|
||||
let inputData = {};
|
||||
let output = {};
|
||||
errorInfoData.value = data?.message || ''
|
||||
@ -451,168 +118,27 @@ onMounted(() => {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
setNodeProperties,
|
||||
});
|
||||
defineExpose({ closePopover })
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gSon-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.output__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 148px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 148px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
--el-form-inline-content-width: 148px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -142,14 +142,8 @@ class StartNodeHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
const result = this.componentInstance.validateForm()
|
||||
return result
|
||||
}
|
||||
|
||||
setCustomProperties() {
|
||||
this.componentInstance.setNodeProperties()
|
||||
closePopover() {
|
||||
this.componentInstance.closePopover()
|
||||
}
|
||||
|
||||
/**
|
||||
@ -197,6 +191,7 @@ export function registerStartNode(lf) {
|
||||
type: "start",
|
||||
view: StartNodeHtmlNode,
|
||||
model: StartNodeHtmlModel,
|
||||
effect: ['status'],
|
||||
events: {
|
||||
remove: (event) => {
|
||||
// 阻止默认的删除事件
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="node__container" :class="props.model.id">
|
||||
<keep-alive>
|
||||
<NodeState :state="nodeOperatingStatus">
|
||||
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
|
||||
<template #input>
|
||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||
</template>
|
||||
@ -16,75 +16,17 @@
|
||||
<img src="../../icon/start.svg" alt="" />
|
||||
<span class="text">Start</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="nodeZoom ? '缩小' : '放大'"
|
||||
placement="top"
|
||||
>
|
||||
<el-button circle @click="zoom">
|
||||
<el-icon>
|
||||
<ZoomOut v-if="nodeZoom" />
|
||||
<ZoomIn v-else />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subTitle">工作流的起始节点，用于设定启动工作流需要的信息</div>
|
||||
</div>
|
||||
<div class="input__container" v-show="nodeZoom">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<FormItemRecursive
|
||||
formType="input"
|
||||
:current-list="formData.inputParams"
|
||||
prop-path="inputParams"
|
||||
:depth="0"
|
||||
:is-first-level="true"
|
||||
:endDepth="2"
|
||||
:parent-path="[]"
|
||||
@delete-item="deleteTopLevelItem"
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watch, reactive, toRaw, ref, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { initNodeZoom } from "@/utils/flow";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import FormItemRecursive from "./FormItemRecursive.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
@ -92,96 +34,27 @@ const props = defineProps({
|
||||
});
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const formData = reactive({
|
||||
inputParams: [
|
||||
{
|
||||
name: "terminalId",
|
||||
type: "string",
|
||||
desc: "机器人ip",
|
||||
disabled: true,
|
||||
required: true,
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const addFormItem = () => {
|
||||
formData.inputParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
const data = toRaw(formData);
|
||||
lf.setProperties(props.model.id, {
|
||||
...props.properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
dynamicForm.value.clearValidate()
|
||||
}
|
||||
};
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const runtimes = ref(0);
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.inputParams && props.properties.inputParams.length > 0) {
|
||||
formData.inputParams = props.properties.inputParams;
|
||||
nextTick(() => {
|
||||
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
const nodeStateRef = ref(null);
|
||||
|
||||
// 删除顶层表单项
|
||||
const deleteTopLevelItem = (fullPath) => {
|
||||
// 从顶层数据开始查找
|
||||
let currentLevel = formData.inputParams;
|
||||
|
||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||
for (let i = 0; i < fullPath.length - 1; i++) {
|
||||
const index = fullPath[i];
|
||||
// 进入下一层级
|
||||
currentLevel = currentLevel[index].children;
|
||||
const closePopover = () => {
|
||||
if (nodeStateRef.value) {
|
||||
nodeStateRef.value.closePopover();
|
||||
}
|
||||
|
||||
// 最后一个索引是当前层级要删除的项
|
||||
const lastIndex = fullPath[fullPath.length - 1];
|
||||
currentLevel.splice(lastIndex, 1);
|
||||
emits("contentChange");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setNodeProperties();
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
if (data.endTime && data.startTime) {
|
||||
runtimes.value = data.endTime - data.startTime;
|
||||
}
|
||||
let inputData = {};
|
||||
let output = {};
|
||||
try {
|
||||
@ -207,36 +80,23 @@ onMounted(() => {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
};
|
||||
|
||||
const nodeZoom = ref(props?.properties?.zoom ?? true)
|
||||
const zoom = () => {
|
||||
nodeZoom.value = !nodeZoom.value
|
||||
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
setNodeProperties
|
||||
});
|
||||
defineExpose({ closePopover })
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -277,116 +137,6 @@ defineExpose({
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gSon-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deleteBtn {
|
||||
margin-bottom: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
margin-bottom: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 120px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 120px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
--el-form-inline-content-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -144,14 +144,8 @@ class CodeNodeHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
const result = this.componentInstance.validateForm()
|
||||
return result
|
||||
}
|
||||
|
||||
setCustomProperties() {
|
||||
this.componentInstance.setNodeProperties()
|
||||
closePopover() {
|
||||
this.componentInstance.closePopover()
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="node__container" :class="props.model.id">
|
||||
<NodeState :state="nodeOperatingStatus">
|
||||
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
|
||||
<template #input>
|
||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||
</template>
|
||||
@ -40,196 +40,17 @@
|
||||
:nodeType="props.properties.nodeType || 'NONE'"
|
||||
:nodeName="props.properties.name"
|
||||
:nodeDesc="props.properties.desc"
|
||||
:zoom-state="nodeZoom"
|
||||
@zoom="zoom"
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
<div class="input__container" v-show="nodeZoom" @mousedown="(e) => e.stopPropagation()" @keydown="handleInputKeydown">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right" v-if="properties?.canAddFormItem">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row v-if="property.name !== 'code'">
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="property?.disabled || false"
|
||||
v-model="property.name"
|
||||
@keydown="handleInputKeydown"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.type`"
|
||||
>
|
||||
<el-select
|
||||
v-model="property.type"
|
||||
@change="handleTypeChange(index)"
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[
|
||||
{
|
||||
required: property?.required ?? true,
|
||||
message: '请输入参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="property.componentType === 'number'"
|
||||
v-model="property.input"
|
||||
:min="0"
|
||||
:controls="false"
|
||||
:step-strictly="true"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
@keydown="handleInputKeydown"
|
||||
/>
|
||||
<el-select
|
||||
v-model="property.input"
|
||||
v-else-if="property.componentType === 'select'"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in property.selectOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
@keydown="handleInputKeydown"
|
||||
v-else
|
||||
v-model="property.input"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="property.type === 'quote'"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.quote`"
|
||||
>
|
||||
<el-cascader
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) cascaderRefs[index] = el;
|
||||
}
|
||||
"
|
||||
v-model="property.quote"
|
||||
:checkStrictly="true"
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="
|
||||
(visible) => visibleChange(visible, index, property.quote)
|
||||
"
|
||||
@change="(value) => cascaderChange(value, index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="code__container">
|
||||
<div ref="codeRef" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output__container" v-show="nodeZoom">
|
||||
<div v-if="props.properties?.outputParams?.length > 0">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输出</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addOutputFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:rules="outputRules"
|
||||
ref="outputFormRef"
|
||||
>
|
||||
<FormItemRecursive
|
||||
formType="output"
|
||||
:current-list="formData.outputParams"
|
||||
prop-path="outputParams"
|
||||
:depth="0"
|
||||
:is-first-level="true"
|
||||
:endDepth="2"
|
||||
:parent-path="[]"
|
||||
@delete-item="deleteTopLevelItem"
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { getInput, initNodeZoom } from "@/utils/flow";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
|
||||
import FormItemRecursive from "../common/FormItemRecursive.vue";
|
||||
import * as monaco from 'monaco-editor';
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
@ -238,87 +59,6 @@ const props = defineProps({
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const codeRef = ref()
|
||||
let editorInstance
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const formData = reactive({
|
||||
nodeParams: [],
|
||||
outputParams: [],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = "";
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const outputRules = reactive({});
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
const addOutputFormItem = () => {
|
||||
formData.outputParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
children: [],
|
||||
});
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
const outputFormRef = ref();
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
let flag = true;
|
||||
if (outputFormRef.value) {
|
||||
flag = await outputFormRef.value.validate();
|
||||
}
|
||||
if (hasErrors()) {
|
||||
console.log('编辑器中有错误')
|
||||
return
|
||||
}
|
||||
if (result && flag) {
|
||||
const data = toRaw(formData);
|
||||
const targetObj = data.nodeParams.find(item => item.name === 'code');
|
||||
if (targetObj) {
|
||||
// 存在：修改该对象的 input 属性
|
||||
targetObj.input = editorInstance.getValue();
|
||||
} else {
|
||||
data.nodeParams.push(
|
||||
{ name: "code", type: "input", input: editorInstance.getValue() }
|
||||
)
|
||||
}
|
||||
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
console.log(12323)
|
||||
// dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
@ -329,211 +69,27 @@ const setNodeName = (name) => {
|
||||
}
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const runtimes = ref(0);
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
const errorInfoData = ref('');
|
||||
|
||||
const visibleChange = (value, index, quote) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
const currentValue = [...quote];
|
||||
// 强制级联选择器重新处理选中值与选项的匹配
|
||||
if (cascaderRefs.value[index]) {
|
||||
// 等待DOM更新后再设置值，确保新options已生效
|
||||
setTimeout(() => {
|
||||
// 如果当前有选中值，重新设置一次以触发重新匹配
|
||||
if (currentValue.length) {
|
||||
formData.nodeParams[index].quote = [];
|
||||
// 确保响应式更新
|
||||
setTimeout(() => {
|
||||
formData.nodeParams[index].quote = currentValue;
|
||||
}, 0);
|
||||
}
|
||||
// 手动触发级联选择器的重新渲染
|
||||
// cascaderRefs.value[index].updatePopper();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const nodeStateRef = ref(null);
|
||||
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
};
|
||||
|
||||
const addFormItem = () => {
|
||||
formData.nodeParams.push({
|
||||
name: "",
|
||||
type: "input",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
// 删除顶层表单项
|
||||
const deleteTopLevelItem = (fullPath) => {
|
||||
// 从顶层数据开始查找
|
||||
let currentLevel = formData.outputParams;
|
||||
|
||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||
for (let i = 0; i < fullPath.length - 1; i++) {
|
||||
const index = fullPath[i];
|
||||
// 进入下一层级
|
||||
currentLevel = currentLevel[index].children;
|
||||
}
|
||||
|
||||
// 最后一个索引是当前层级要删除的项
|
||||
const lastIndex = fullPath[fullPath.length - 1];
|
||||
currentLevel.splice(lastIndex, 1);
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
const nodeZoom = ref(props?.properties?.zoom ?? true)
|
||||
const zoom = (flag) => {
|
||||
nodeZoom.value = flag
|
||||
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||
|
||||
// .filter(item => item.name !== 'code')
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const codeParams = props.properties.nodeParams.find(item => item.name === 'code')
|
||||
if (codeParams) {
|
||||
nextTick(() => {
|
||||
if (editorInstance) {
|
||||
setValue(codeParams.input)
|
||||
}
|
||||
})
|
||||
}
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
|
||||
})
|
||||
}
|
||||
if (
|
||||
props.properties.outputParams &&
|
||||
props.properties.outputParams.length > 0
|
||||
) {
|
||||
formData.outputParams = props.properties.outputParams;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
const handleInputKeydown = (e) => {
|
||||
// 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
|
||||
e.stopPropagation();
|
||||
// 可选：明确放行 Ctrl+V（增强兼容性）
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
|
||||
e.returnValue = true; // 允许默认粘贴行为
|
||||
}
|
||||
};
|
||||
|
||||
function hasErrors() {
|
||||
const model = editorInstance.getModel();
|
||||
if (!model) return false;
|
||||
|
||||
// 获取当前模型的所有标记
|
||||
const markers = monaco.editor.getModelMarkers({ resource: model.uri });
|
||||
// 检查是否存在错误级别标记
|
||||
return markers.some(marker => marker.severity === monaco.MarkerSeverity.Error);
|
||||
}
|
||||
|
||||
const initEditor = () => {
|
||||
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
||||
target: monaco.languages.typescript.ScriptTarget.ES2020,
|
||||
allowNonTsExtensions: true, // 允许非 ts 扩展名（.js）
|
||||
checkJs: true, // 对 .js 文件进行类型检查
|
||||
strict: true, // 启用所有严格检查
|
||||
noImplicitAny: false, // 禁止隐式 any
|
||||
noUnusedLocals: true, // 未使用的局部变量报错（可选）
|
||||
noUnusedParameters: true, // 未使用的参数报错（可选）
|
||||
});
|
||||
|
||||
// 确保语义验证开启（默认就是开启的，但可以显式设置）
|
||||
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
||||
noSemanticValidation: false, // 开启语义检查
|
||||
noSyntaxValidation: false, // 开启语法检查
|
||||
});
|
||||
|
||||
|
||||
editorInstance = monaco.editor.create(codeRef.value, {
|
||||
value: [`
|
||||
// 方法定义不能修改
|
||||
function handler(params) {
|
||||
// 返回值是一个可序列化成 json 的 dict 或 object
|
||||
const ret={
|
||||
result: {
|
||||
type: 2,
|
||||
message: params.input
|
||||
}
|
||||
|
||||
}
|
||||
return ret
|
||||
}`].join('\n'),
|
||||
language: 'javascript',
|
||||
fontSize: 14,
|
||||
lineNumbers: 'on',
|
||||
roundedSelection: true,
|
||||
scrollBeyondLastLine: false,
|
||||
formatOnPaste: true,
|
||||
formatOnType: true,
|
||||
quickSuggestions: true,
|
||||
suggestOnTriggerCharacters: true,
|
||||
// 自动完成
|
||||
suggest: {
|
||||
showWords: true,
|
||||
showFunctions: true,
|
||||
showVariables: true,
|
||||
showClasses: true,
|
||||
showModules: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 设置代码值
|
||||
const setValue = (value) => {
|
||||
if (editorInstance) {
|
||||
editorInstance.setValue(value)
|
||||
const closePopover = () => {
|
||||
if (nodeStateRef.value) {
|
||||
nodeStateRef.value.closePopover();
|
||||
}
|
||||
}
|
||||
|
||||
// 销毁编辑器
|
||||
const disposeEditor = () => {
|
||||
if (editorInstance) {
|
||||
editorInstance.dispose()
|
||||
editorInstance = null
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
if (data.endTime && data.startTime) {
|
||||
runtimes.value = data.endTime - data.startTime;
|
||||
}
|
||||
let inputData = {};
|
||||
let output = {};
|
||||
errorInfoData.value = data?.message || ''
|
||||
@ -559,179 +115,25 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
|
||||
initEditor()
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
disposeEditor()
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
setNodeProperties,
|
||||
});
|
||||
defineExpose({ closePopover })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code__container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
text-align: initial;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gSon-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.output__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 148px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 148px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
--el-form-inline-content-width: 148px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="node__container" :class="props.model.id">
|
||||
<NodeState :state="nodeOperatingStatus">
|
||||
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
|
||||
<template #input>
|
||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||
</template>
|
||||
@ -26,127 +26,13 @@
|
||||
:nodeName="props.properties.name"
|
||||
:nodeDesc="props.properties.desc"
|
||||
:zoom-state="nodeZoom"
|
||||
@zoom="zoom"
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
<div class="input__container" v-show="nodeZoom">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right" v-if="properties.properties?.canAddFormItem">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container" v-show="nodeZoom">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="property?.disabled || false"
|
||||
v-model="property.name"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.type`"
|
||||
>
|
||||
<el-select v-model="property.type" @change="handleTypeChange(index)">
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
|
||||
<el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
|
||||
<el-option v-for="item in property.selectOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<el-input v-else v-model="property.input" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="property.type === 'quote'"
|
||||
:rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
|
||||
:prop="`nodeParams.${index}.quote`"
|
||||
>
|
||||
<el-cascader
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) cascaderRefs[index] = el;
|
||||
}
|
||||
"
|
||||
v-model="property.quote"
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="visibleChange"
|
||||
@change="(value) => cascaderChange(value, index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output__container" v-if="props.properties?.outputParams?.length > 0">
|
||||
<div class="title">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输出</div>
|
||||
</div>
|
||||
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="true"
|
||||
>
|
||||
<el-row v-for="(item, index) in props.properties.outputParams">
|
||||
<el-form-item :label="index === 0 ? '参数名' : ''" >
|
||||
<el-input :value="item.name" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="index === 0 ? '参数类型' : ''" >
|
||||
<el-input :value="item.type" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="index === 0 ? '描述' : ''" >
|
||||
<el-input :value="item.desc" />
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { getInput, initNodeZoom } from "@/utils/flow";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
@ -160,47 +46,6 @@ const props = defineProps({
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const formData = reactive({
|
||||
nodeParams: [],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = "";
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
const data = toRaw(formData);
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
@ -211,79 +56,25 @@ const setNodeName = (name) => {
|
||||
}
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const runtimes = ref(0);
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
|
||||
const visibleChange = (value) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
const nodeStateRef = ref(null);
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
const closePopover = () => {
|
||||
if (nodeStateRef.value) {
|
||||
nodeStateRef.value.closePopover();
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
};
|
||||
|
||||
const addFormItem = () => {
|
||||
formData.nodeParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
const nodeZoom = ref(props?.properties?.zoom ?? true)
|
||||
const zoom = (flag) => {
|
||||
nodeZoom.value = flag
|
||||
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
nextTick(() => {
|
||||
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
if (data.endTime && data.startTime) {
|
||||
runtimes.value = data.endTime - data.startTime;
|
||||
}
|
||||
let inputData = {};
|
||||
let output = {};
|
||||
try {
|
||||
@ -307,17 +98,22 @@ onMounted(() => {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
setNodeProperties,
|
||||
});
|
||||
defineExpose({ closePopover })
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -150,8 +150,8 @@ class CurrentLoopNodeHtmlModel extends HtmlNodeModel {
|
||||
return result
|
||||
}
|
||||
|
||||
setCustomProperties() {
|
||||
this.componentInstance.setNodeProperties()
|
||||
closePopover() {
|
||||
this.componentInstance.closePopover()
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -144,14 +144,8 @@ class HttpNodeHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
const result = this.componentInstance.validateForm()
|
||||
return result
|
||||
}
|
||||
|
||||
setCustomProperties() {
|
||||
this.componentInstance.setNodeProperties()
|
||||
closePopover() {
|
||||
this.componentInstance.closePopover()
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="node__container" :class="props.model.id">
|
||||
<NodeState :state="nodeOperatingStatus">
|
||||
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
|
||||
<template #input>
|
||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||
</template>
|
||||
@ -44,188 +44,16 @@
|
||||
@zoom="zoom"
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
<div class="input__container" v-show="nodeZoom">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right" v-if="properties.properties?.canAddFormItem">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="property?.disabled || false"
|
||||
v-model="property.name"
|
||||
@keydown="handleInputKeydown"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.type`"
|
||||
>
|
||||
<el-select
|
||||
v-model="property.type"
|
||||
@change="handleTypeChange(index)"
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[
|
||||
{
|
||||
required: property?.required ?? true,
|
||||
message: '请输入参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="property.componentType === 'number'"
|
||||
v-model="property.input"
|
||||
:min="0"
|
||||
:controls="false"
|
||||
:step-strictly="true"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
@keydown="handleInputKeydown"
|
||||
/>
|
||||
<el-select
|
||||
v-model="property.input"
|
||||
v-else-if="property.componentType === 'select'"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in property.selectOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input
|
||||
@keydown="handleInputKeydown"
|
||||
v-else
|
||||
v-model="property.input"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="property.type === 'quote'"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.quote`"
|
||||
>
|
||||
<el-cascader
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) cascaderRefs[index] = el;
|
||||
}
|
||||
"
|
||||
v-model="property.quote"
|
||||
:checkStrictly="true"
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="
|
||||
(visible) => visibleChange(visible, index, property.quote)
|
||||
"
|
||||
@change="(value) => cascaderChange(value, index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output__container" v-show="nodeZoom">
|
||||
<div v-if="props.properties?.outputParams?.length > 0">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输出</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addOutputFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:rules="outputRules"
|
||||
ref="outputFormRef"
|
||||
>
|
||||
<FormItemRecursive
|
||||
formType="output"
|
||||
:current-list="formData.outputParams"
|
||||
prop-path="outputParams"
|
||||
:depth="0"
|
||||
:is-first-level="true"
|
||||
:endDepth="2"
|
||||
:parent-path="[]"
|
||||
@delete-item="deleteTopLevelItem"
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { getInput, initNodeZoom } from "@/utils/flow";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
|
||||
import FormItemRecursive from "../common/FormItemRecursive.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
@ -234,70 +62,6 @@ const props = defineProps({
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const formData = reactive({
|
||||
nodeParams: [],
|
||||
outputParams: [],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = "";
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const outputRules = reactive({});
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
const addOutputFormItem = () => {
|
||||
formData.outputParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
children: [],
|
||||
});
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
const outputFormRef = ref();
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
let flag = true;
|
||||
if (outputFormRef.value) {
|
||||
flag = await outputFormRef.value.validate();
|
||||
}
|
||||
|
||||
if (result && flag) {
|
||||
const data = toRaw(formData);
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
// dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
@ -308,124 +72,26 @@ const setNodeName = (name) => {
|
||||
}
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const runtimes = ref(0);
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
const errorInfoData = ref('');
|
||||
|
||||
const visibleChange = (value, index, quote) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
const currentValue = [...quote];
|
||||
// 强制级联选择器重新处理选中值与选项的匹配
|
||||
if (cascaderRefs.value[index]) {
|
||||
// 等待DOM更新后再设置值，确保新options已生效
|
||||
setTimeout(() => {
|
||||
// 如果当前有选中值，重新设置一次以触发重新匹配
|
||||
if (currentValue.length) {
|
||||
formData.nodeParams[index].quote = [];
|
||||
// 确保响应式更新
|
||||
setTimeout(() => {
|
||||
formData.nodeParams[index].quote = currentValue;
|
||||
}, 0);
|
||||
}
|
||||
// 手动触发级联选择器的重新渲染
|
||||
// cascaderRefs.value[index].updatePopper();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
const nodeStateRef = ref(null);
|
||||
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
const closePopover = () => {
|
||||
if (nodeStateRef.value) {
|
||||
nodeStateRef.value.closePopover();
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
};
|
||||
|
||||
const addFormItem = () => {
|
||||
formData.nodeParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
// 删除顶层表单项
|
||||
const deleteTopLevelItem = (fullPath) => {
|
||||
// 从顶层数据开始查找
|
||||
let currentLevel = formData.outputParams;
|
||||
|
||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||
for (let i = 0; i < fullPath.length - 1; i++) {
|
||||
const index = fullPath[i];
|
||||
// 进入下一层级
|
||||
currentLevel = currentLevel[index].children;
|
||||
}
|
||||
|
||||
// 最后一个索引是当前层级要删除的项
|
||||
const lastIndex = fullPath[fullPath.length - 1];
|
||||
currentLevel.splice(lastIndex, 1);
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
const nodeZoom = ref(props?.properties?.zoom ?? true)
|
||||
const zoom = (flag) => {
|
||||
nodeZoom.value = flag
|
||||
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
|
||||
})
|
||||
}
|
||||
if (
|
||||
props.properties.outputParams &&
|
||||
props.properties.outputParams.length > 0
|
||||
) {
|
||||
formData.outputParams = props.properties.outputParams;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
const handleInputKeydown = (e) => {
|
||||
// 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
|
||||
e.stopPropagation();
|
||||
// 可选：明确放行 Ctrl+V（增强兼容性）
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
|
||||
e.returnValue = true; // 允许默认粘贴行为
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
if (data.endTime && data.startTime) {
|
||||
runtimes.value = data.endTime - data.startTime;
|
||||
}
|
||||
let inputData = {};
|
||||
let output = {};
|
||||
errorInfoData.value = data?.message || ''
|
||||
@ -450,168 +116,26 @@ onMounted(() => {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
setNodeProperties,
|
||||
});
|
||||
defineExpose({ closePopover })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gSon-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.output__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 148px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 148px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
--el-form-inline-content-width: 148px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,6 +7,7 @@ import { registerSleepNode } from './sleep'
|
||||
import { registerHttpNode } from './httpNode'
|
||||
import { registerCodeNode } from './codeNode'
|
||||
import { registerCurrentLoopNode } from './currentLoopNode'
|
||||
import { registerSdAgentNode } from './sdAgent'
|
||||
|
||||
export const registerFunction = (lf) => {
|
||||
registerLoopBodyNode(lf)
|
||||
@ -18,4 +19,5 @@ export const registerFunction = (lf) => {
|
||||
registerHttpNode(lf)
|
||||
registerCodeNode(lf)
|
||||
registerCurrentLoopNode(lf)
|
||||
registerSdAgentNode(lf)
|
||||
}
|
||||
@ -20,48 +20,57 @@ class loopBodyModel extends GroupNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
if (this.componentInstance && this.componentInstance.validate) {
|
||||
try {
|
||||
const result = await this.componentInstance.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
// 递归获取所有有效子节点（包含多层嵌套 children）
|
||||
getAllValidChildren = (nodeIds, graphModel) => {
|
||||
const validNodes = [];
|
||||
// 遍历当前层节点 ID
|
||||
Array.from(nodeIds).forEach((id) => {
|
||||
const node = graphModel.getNodeModelById(id);
|
||||
if (node) {
|
||||
// 当前节点有效，加入结果
|
||||
validNodes.push(node);
|
||||
// 如果节点还有 children，递归获取下级节点
|
||||
if (node.children && node.children.size > 0) {
|
||||
const childNodes = this.getAllValidChildren(node.children, graphModel);
|
||||
validNodes.push(...childNodes);
|
||||
}
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
}
|
||||
return { valid: true, message: "无验证方法" };
|
||||
// 无效 ID，从集合中删除
|
||||
nodeIds.delete(id);
|
||||
}
|
||||
});
|
||||
return validNodes;
|
||||
};
|
||||
|
||||
// 计算子节点的包围盒(包含所有子节点的最小矩形区域)
|
||||
getChildrenBBox() {
|
||||
const children = []
|
||||
Array.from(this.children).forEach((id) => {
|
||||
const node = this.graphModel.getNodeModelById(id)
|
||||
if (node) {
|
||||
children.push(this.graphModel.getNodeModelById(id))
|
||||
} else {
|
||||
this.children.delete(id)
|
||||
}
|
||||
});
|
||||
const children = this.getAllValidChildren(this.children, this.graphModel)
|
||||
console.log('children', children)
|
||||
// Array.from(this.children).forEach((id) => {
|
||||
// const node = this.graphModel.getNodeModelById(id)
|
||||
// if (node) {
|
||||
// children.push(this.graphModel.getNodeModelById(id))
|
||||
// } else {
|
||||
// this.children.delete(id)
|
||||
// }
|
||||
// });
|
||||
|
||||
let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
|
||||
nextTick(() => {
|
||||
children.forEach((node) => {
|
||||
let width = node.width === 0 ? 600 : node.width
|
||||
let height = node.height === 0 ? 200 : node.height
|
||||
let _width = node.type === 'loop' ? 500 : 320
|
||||
let _height = node.type === 'loop' ? 300 : 200
|
||||
let width = node.width === 0 ? _width : node.width
|
||||
let height = node.height === 0 ? _height : node.height
|
||||
minX = Math.min(minX, node.x - width / 2);
|
||||
maxX = Math.max(maxX, node.x + width / 2);
|
||||
minY = Math.min(minY, node.y - height / 2);
|
||||
maxY = Math.max(maxY, node.y + height / 2);
|
||||
});
|
||||
this.width = maxX - minX + 200; // 增加内边距
|
||||
this.height = maxY - minY + 260;
|
||||
this.width = maxX - minX + 180; // 增加内边距
|
||||
this.height = maxY - minY + 300;
|
||||
this.x = (minX + maxX) / 2;
|
||||
this.y = (minY + maxY) / 2 - 120;
|
||||
this.y = (minY + maxY) / 2;
|
||||
const properties = lf.getProperties(this.id)
|
||||
this.setProperties({
|
||||
...properties,
|
||||
@ -69,6 +78,7 @@ class loopBodyModel extends GroupNodeModel {
|
||||
height: this.height
|
||||
})
|
||||
this.getDefaultAnchor()
|
||||
})
|
||||
}
|
||||
|
||||
updateSize() {
|
||||
@ -99,14 +109,14 @@ class loopBodyModel extends GroupNodeModel {
|
||||
return [
|
||||
{
|
||||
x: x + width / 2 ,
|
||||
y: y - 25,
|
||||
y: y + height / 2,
|
||||
name: "right",
|
||||
id: "".concat(this.id, "_1"),
|
||||
properties: { connectionType: "source" },
|
||||
},
|
||||
{
|
||||
x: x - width / 2,
|
||||
y: y - 25,
|
||||
y: y + height / 2,
|
||||
name: "left",
|
||||
id: "".concat(this.id, "_3"),
|
||||
properties: { connectionType: "target" },
|
||||
|
||||
@ -9,102 +9,6 @@
|
||||
:showZoom="false"
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
<div class="loop__container">
|
||||
<div>
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入参数名',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="index === 0"
|
||||
v-model="property.name"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.type`"
|
||||
>
|
||||
<el-select
|
||||
v-model="property.type"
|
||||
@change="handleTypeChange(index)"
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="property.input"
|
||||
:min="0"
|
||||
:controls="false"
|
||||
:step-strictly="true"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="property.type === 'quote'"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.quote`"
|
||||
>
|
||||
<el-cascader
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) cascaderRefs[index] = el;
|
||||
}
|
||||
"
|
||||
v-model="property.quote"
|
||||
:checkStrictly="true"
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="
|
||||
(visible) =>
|
||||
visibleChange(visible, index, property.quote)
|
||||
"
|
||||
@change="(value) => cascaderChange(value, index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div>循环体</div>
|
||||
<div
|
||||
class="child__container"
|
||||
@ -116,11 +20,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import loop from "../../icon/loop.svg";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { addNewEdge, getInput } from "@/utils/flow";
|
||||
import { addNewEdge } from "@/utils/flow";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import { onUnmounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
@ -129,25 +33,6 @@ const props = defineProps({
|
||||
nowTime: Number,
|
||||
});
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
const formData = reactive({
|
||||
nodeParams: [{ name: "loopNum", type: "input", input: null, quote: "" }],
|
||||
});
|
||||
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = null;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const emits = defineEmits(["bindRef", "addToGroup", "contentChange"]);
|
||||
|
||||
@ -172,6 +57,11 @@ const handleDrop = (e) => {
|
||||
...other,
|
||||
},
|
||||
});
|
||||
if (
|
||||
!["selectArea", "branch", "stopLoop", "subStart", "subEnd"].includes(node.type)
|
||||
) {
|
||||
emitter.emit("openParamsDrawer", node);
|
||||
}
|
||||
|
||||
emits("addToGroup", node.id);
|
||||
setTimeout(() => {
|
||||
@ -179,26 +69,6 @@ const handleDrop = (e) => {
|
||||
}, 50);
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const valid = await dynamicForm.value.validate();
|
||||
if (valid) {
|
||||
const data = toRaw(formData);
|
||||
setTimeout(() => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
window.lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data,
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
} catch (error) {
|
||||
dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
@ -208,60 +78,10 @@ const setNodeName = (name) => {
|
||||
emits("contentChange");
|
||||
}
|
||||
|
||||
const visibleChange = async (value, index, quote) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
const currentValue = [...quote];
|
||||
// 强制级联选择器重新处理选中值与选项的匹配
|
||||
if (cascaderRefs.value[index]) {
|
||||
// 等待DOM更新后再设置值，确保新options已生效
|
||||
setTimeout(() => {
|
||||
// 如果当前有选中值，重新设置一次以触发重新匹配
|
||||
if (currentValue.length) {
|
||||
formData.nodeParams[index].quote = [];
|
||||
// 确保响应式更新
|
||||
setTimeout(() => {
|
||||
console.log(1247);
|
||||
formData.nodeParams[index].quote = currentValue;
|
||||
}, 0);
|
||||
}
|
||||
// 手动触发级联选择器的重新渲染
|
||||
// cascaderRefs.value[index].updatePopper();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
onUnmounted(() => {
|
||||
emitter.off("openParamsDrawer");
|
||||
})
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
emits("bindRef", dynamicForm.value);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.group__container {
|
||||
@ -282,26 +102,6 @@ onMounted(() => {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
:deep(.loop__container) {
|
||||
height: auto;
|
||||
|
||||
.el-input {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.el-input-number {
|
||||
width: 92px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.child__container {
|
||||
min-height: 100px;
|
||||
flex: 1;
|
||||
|
||||
213
src/views/flow/nodes/function/sdAgent.js
Normal file
213
src/views/flow/nodes/function/sdAgent.js
Normal file
@ -0,0 +1,213 @@
|
||||
// 导入 HtmlNode 及其模型，为后续继承做准备
|
||||
import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
|
||||
// 导入 Vue 相关方法，用于渲染组件
|
||||
import { createApp, h, nextTick } from "vue";
|
||||
import ElementPlus from "element-plus";
|
||||
// 导入 Vue 组件
|
||||
// @ts-ignore
|
||||
import SdAgent from "./sdAgent.vue";
|
||||
import OuterNode from "../../components/OuterNode.vue";
|
||||
import JsonViewer from 'vue3-json-viewer'
|
||||
|
||||
/**
|
||||
* 定义一个 元素的 HTML 节点类，继承自 HtmlNode
|
||||
* 该类负责在 HTML 中渲染 元素，并处理其交互逻辑
|
||||
*/
|
||||
class SdAgentNodeHtmlNode extends HtmlNode {
|
||||
resizeObserver = null;
|
||||
isMounted; // 标记组件是否已挂载
|
||||
r; // 渲染函数
|
||||
app; // Vue 应用实例
|
||||
container = null;
|
||||
|
||||
static reusePool = new Map(); // 节点复用池
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
* @param props 传递给节点的属性，包括模型、图模型等
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initVueApp(props);
|
||||
}
|
||||
|
||||
initVueApp(props) {
|
||||
this.isMounted = false;
|
||||
|
||||
this.hideAnchor = false;
|
||||
this.autoExpand = true; // 防止锚点被折叠
|
||||
this.anchorsPreset = "default"; // 重置锚点预设
|
||||
// 创建 元素的渲染函数
|
||||
this.r = h(OuterNode, {
|
||||
model: props.model,
|
||||
component: SdAgent,
|
||||
properties: {
|
||||
...props.model.getProperties(),
|
||||
},
|
||||
onContentChange: this.handleContentChange.bind(this),
|
||||
onBindRef: this.handleComponentInstance.bind(this)
|
||||
});
|
||||
|
||||
// 创建 Vue 应用实例，并指定渲染函数
|
||||
this.app = createApp({
|
||||
render: () => this.r,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 HTML 内容设置到指定的根元素上
|
||||
* @param rootEl 根元素
|
||||
*/
|
||||
async setHtml(rootEl) {
|
||||
const nodeId = this.props.model.id;
|
||||
if (SdAgentNodeHtmlNode.reusePool.has(nodeId)) {
|
||||
rootEl.appendChild(SdAgentNodeHtmlNode.reusePool.get(nodeId));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isMounted) {
|
||||
this.isMounted = true;
|
||||
this.container = document.createElement("div");
|
||||
this.container.style.display = "inline-block"; // 关键：确保容器自适应内容
|
||||
|
||||
rootEl.appendChild(this.container);
|
||||
this.app.use(ElementPlus);
|
||||
this.app.use(JsonViewer);
|
||||
|
||||
this.app.mount(this.container);
|
||||
await nextTick();
|
||||
this.setupSizeObserver();
|
||||
SdAgentNodeHtmlNode.reusePool.set(nodeId, this.container);
|
||||
} else {
|
||||
this.r.component.props.properties = this.props.model.getProperties();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点文本内容
|
||||
* 对于元素，返回 null，因为其内容由特定组件渲染
|
||||
* @returns {null}
|
||||
*/
|
||||
getText() {
|
||||
return null;
|
||||
}
|
||||
|
||||
handleComponentInstance(data) {
|
||||
// 将组件实例保存到节点模型
|
||||
this.props.model.setComponentInstance(data)
|
||||
}
|
||||
|
||||
handleContentChange() {
|
||||
// 内容变化时强制更新尺寸
|
||||
this.updateNodeSize();
|
||||
}
|
||||
|
||||
// 渲染完成后获取实际尺寸
|
||||
updateNodeSize() {
|
||||
if (this.container) {
|
||||
const { SCALE_X, SCALE_Y } = this.props.graphModel.transformModel;
|
||||
const node = this.container.querySelector(".node__container");
|
||||
const rect = node.getBoundingClientRect();
|
||||
this.props.model.updateSize(rect.width / SCALE_X, rect.height / SCALE_Y);
|
||||
}
|
||||
}
|
||||
|
||||
setupSizeObserver() {
|
||||
// 首次渲染立即检测
|
||||
requestAnimationFrame(() => {
|
||||
this.updateNodeSize();
|
||||
// 持续监听变化
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
this.updateNodeSize();
|
||||
});
|
||||
this.resizeObserver.observe(this.container);
|
||||
});
|
||||
}
|
||||
|
||||
// 组件卸载时移除监听
|
||||
onDestroy() {
|
||||
this.resizeObserver?.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义一个元素的 HTML 模型类，继承自 HtmlNodeModel
|
||||
* 该类主要设置节点的属性和样式
|
||||
*/
|
||||
class SdAgentNodeHtmlModel extends HtmlNodeModel {
|
||||
initNodeData(data) {
|
||||
super.initNodeData(data);
|
||||
}
|
||||
|
||||
// 保存组件实例引用
|
||||
setComponentInstance(instance) {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
closePopover() {
|
||||
this.componentInstance.closePopover()
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
*/
|
||||
setAttributes() {
|
||||
// 初始设置为0，后续动态更新
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.text.editable = false;
|
||||
}
|
||||
|
||||
updateSize(width, height) {
|
||||
this.width = width + 24;
|
||||
this.height = height + 50;
|
||||
this.initNodeData(this); // 触发节点重绘
|
||||
}
|
||||
|
||||
// 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
|
||||
getDefaultAnchor() {
|
||||
let _a = this,
|
||||
x = _a.x,
|
||||
y = _a.y,
|
||||
width = _a.width,
|
||||
height = _a.height;
|
||||
return [
|
||||
{
|
||||
x: x + width / 2 + 4,
|
||||
y: y,
|
||||
name: "right",
|
||||
id: "".concat(this.id, "_1"),
|
||||
properties: { connectionType: "source" },
|
||||
},
|
||||
{
|
||||
x: x - width / 2,
|
||||
y: y,
|
||||
name: "left",
|
||||
id: "".concat(this.id, "_3"),
|
||||
properties: { connectionType: "target" },
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点轮廓样式
|
||||
* 覆盖父类方法，设置 stroke 属性为 none，以适应特定的视觉效果
|
||||
* @returns {object} 节点轮廓样式
|
||||
*/
|
||||
getOutlineStyle() {
|
||||
const style = super.getOutlineStyle();
|
||||
style.stroke = "none";
|
||||
style.hover.stroke = "none";
|
||||
return style;
|
||||
}
|
||||
}
|
||||
|
||||
// 导出方法注册
|
||||
export function registerSdAgentNode(lf) {
|
||||
lf.register({
|
||||
type: "sdAgent",
|
||||
view: SdAgentNodeHtmlNode,
|
||||
model: SdAgentNodeHtmlModel
|
||||
});
|
||||
}
|
||||
126
src/views/flow/nodes/function/sdAgent.vue
Normal file
126
src/views/flow/nodes/function/sdAgent.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="node__container" :class="props.model.id">
|
||||
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
|
||||
<template #input>
|
||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||
</template>
|
||||
<template #output>
|
||||
<JsonViewer v-if="props.properties.outputType === 'json'" :value="outputJsonData" copyable boxed sort theme="light" />
|
||||
<el-image
|
||||
v-if="props.properties.outputType === 'img'"
|
||||
v-for="item in outputJsonData.imageUrl"
|
||||
style="width: 60px; height: 60px"
|
||||
:src="item"
|
||||
:preview-src-list="outputJsonData.imageUrl"
|
||||
:preview-teleported="true"
|
||||
show-progress
|
||||
fit="fill"
|
||||
/>
|
||||
<IPlayer v-if="props.properties.outputType === 'video'" v-for="item in outputJsonData.videoUrl" :videoUrl="item" />
|
||||
</template>
|
||||
</NodeState>
|
||||
<NodeTitle
|
||||
:icon="props.properties.icon"
|
||||
:nodeId="props.model.id"
|
||||
:nodeProperties="props.properties"
|
||||
:nodeName="props.properties.name"
|
||||
:nodeType="props.properties.nodeType || 'NONE'"
|
||||
:nodeDesc="props.properties.desc"
|
||||
:zoom-state="nodeZoom"
|
||||
@zoom="zoom"
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
properties: Object,
|
||||
});
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
name
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const runtimes = ref(0);
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
|
||||
const nodeStateRef = ref(null);
|
||||
|
||||
const closePopover = () => {
|
||||
if (nodeStateRef.value) {
|
||||
nodeStateRef.value.closePopover();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
if (data.endTime && data.startTime) {
|
||||
runtimes.value = data.endTime - data.startTime;
|
||||
}
|
||||
let inputData = {};
|
||||
let output = {};
|
||||
try {
|
||||
inputData = JSON.parse(data.paramsIn) || {};
|
||||
output = JSON.parse(data.paramsOut) || {};
|
||||
} catch (error) {
|
||||
inputData = data.paramsIn || {};
|
||||
output = data.paramsOut || {};
|
||||
}
|
||||
inputJsonData.value = inputData;
|
||||
outputJsonData.value = output;
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("contentChange", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
nodeOperatingStatus.value = "NORMAL";
|
||||
inputJsonData.value = {};
|
||||
outputJsonData.value = {};
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
|
||||
defineExpose({ closePopover })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
@ -144,14 +144,8 @@ class SleepNodeHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
const result = this.componentInstance.validateForm()
|
||||
return result
|
||||
}
|
||||
|
||||
setCustomProperties() {
|
||||
this.componentInstance.setNodeProperties()
|
||||
closePopover() {
|
||||
this.componentInstance.closePopover()
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="node__container" :class="props.model.id">
|
||||
<NodeState :state="nodeOperatingStatus">
|
||||
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
|
||||
<template #input>
|
||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||
</template>
|
||||
@ -29,124 +29,11 @@
|
||||
@zoom="zoom"
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
<div class="input__container" v-show="nodeZoom">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right" v-if="properties.properties?.canAddFormItem">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container" v-show="nodeZoom">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="property?.disabled || false"
|
||||
v-model="property.name"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.type`"
|
||||
>
|
||||
<el-select v-model="property.type" @change="handleTypeChange(index)">
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
|
||||
<el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
|
||||
<el-option v-for="item in property.selectOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<el-input v-else v-model="property.input" placeholder="请输入" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="property.type === 'quote'"
|
||||
:rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
|
||||
:prop="`nodeParams.${index}.quote`"
|
||||
>
|
||||
<el-cascader
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) cascaderRefs[index] = el;
|
||||
}
|
||||
"
|
||||
v-model="property.quote"
|
||||
:options="quoteOptions"
|
||||
placeholder="请选择"
|
||||
@visible-change="visibleChange"
|
||||
@change="(value) => cascaderChange(value, index)"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output__container" v-if="props.properties?.outputParams?.length > 0">
|
||||
<div class="title">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输出</div>
|
||||
</div>
|
||||
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="true"
|
||||
>
|
||||
<el-row v-for="(item, index) in props.properties.outputParams">
|
||||
<el-form-item label="参数名" >
|
||||
<el-input :value="item.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="参数类型" >
|
||||
<el-input :value="item.type" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" >
|
||||
<el-input :value="item.desc" />
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { getInput, initNodeZoom } from "@/utils/flow";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
@ -160,47 +47,6 @@ const props = defineProps({
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const formData = reactive({
|
||||
nodeParams: [],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = "";
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
const data = toRaw(formData);
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
@ -211,79 +57,25 @@ const setNodeName = (name) => {
|
||||
}
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const runtimes = ref(0);
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
|
||||
const visibleChange = (value) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
const nodeStateRef = ref(null);
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
const closePopover = () => {
|
||||
if (nodeStateRef.value) {
|
||||
nodeStateRef.value.closePopover();
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
};
|
||||
|
||||
const addFormItem = () => {
|
||||
formData.nodeParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
const nodeZoom = ref(props?.properties?.zoom ?? true)
|
||||
const zoom = (flag) => {
|
||||
nodeZoom.value = flag
|
||||
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
nextTick(() => {
|
||||
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
if (data.endTime && data.startTime) {
|
||||
runtimes.value = data.endTime - data.startTime;
|
||||
}
|
||||
let inputData = {};
|
||||
let output = {};
|
||||
try {
|
||||
@ -307,154 +99,27 @@ onMounted(() => {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
setNodeProperties,
|
||||
});
|
||||
|
||||
defineExpose({ closePopover })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gSon-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.output__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 170px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 170px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
--el-form-inline-content-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -133,23 +133,6 @@ class StopLoopHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
if (this.componentInstance && this.componentInstance.validate) {
|
||||
try {
|
||||
const result = await this.componentInstance.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
}
|
||||
return { valid: true, message: "无验证方法" };
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
|
||||
@ -128,23 +128,6 @@ class SubEndNodeHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
if (this.componentInstance && this.componentInstance.validate) {
|
||||
try {
|
||||
const result = await this.componentInstance.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
}
|
||||
return { valid: true, message: "无验证方法" };
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
|
||||
@ -128,23 +128,6 @@ class SubStartNodeHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
if (this.componentInstance && this.componentInstance.validate) {
|
||||
try {
|
||||
const result = await this.componentInstance.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
}
|
||||
return { valid: true, message: "无验证方法" };
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
|
||||
@ -211,6 +211,10 @@ class SwitchHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
closePopover() {
|
||||
this.componentInstance.closePopover()
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
if (this.componentInstance && this.componentInstance.validate) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="node__container" ref="switchRef" @mouseleave="setNodeProperties">
|
||||
<NodeState :state="nodeOperatingStatus">
|
||||
<NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
|
||||
<template #input>
|
||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||
</template>
|
||||
@ -385,6 +385,7 @@ const visibleChange = (value) => {
|
||||
};
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const runtimes = ref(0);
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
const errorInfoData = ref('');
|
||||
@ -406,6 +407,14 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
const nodeStateRef = ref(null);
|
||||
|
||||
const closePopover = () => {
|
||||
if (nodeStateRef.value) {
|
||||
nodeStateRef.value.closePopover();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emits("addAnchor", 280, "".concat(props.model.id, "_else"));
|
||||
|
||||
@ -414,6 +423,9 @@ onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
if (data.endTime && data.startTime) {
|
||||
runtimes.value = data.endTime - data.startTime;
|
||||
}
|
||||
let inputData = {};
|
||||
let output = {};
|
||||
errorInfoData.value = data?.message || ''
|
||||
@ -446,6 +458,8 @@ onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
});
|
||||
|
||||
defineExpose({ closePopover })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.node__container {
|
||||
|
||||
@ -47,11 +47,11 @@ export default defineConfig(({mode, command}) => {
|
||||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
'/dev-api': {
|
||||
//杨 http://192.168.0.10:13080
|
||||
//赵 http://10.148.108.58:13080
|
||||
//服务器 http://192.168.0.100:13080
|
||||
//李小龙 http://192.168.0.5:13080
|
||||
// dev http://10.148.20.34:13080
|
||||
// target: VITE_API_URL,
|
||||
target: command === 'build' ? VITE_API_URL : 'http://192.168.0.100:13080',
|
||||
target: command === 'build' ? VITE_API_URL : 'http://192.168.0.5:13080',
|
||||
changeOrigin: true,
|
||||
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user