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

feat: 循环节点

Browse Source
This commit is contained in:
zhanghao 2026-04-13 11:27:13 +08:00
parent 5da44c5588
commit 1918528812
8 changed files with 324 additions and 527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,7 +42,7 @@
</el-form>
</div>
<div v-if="props.data.type === 'serviceNode'">
<div v-if="['currentLoop', 'serviceNode'].includes(props.data.type)">
<div class="input__container">
<div class="title">
<div class="left">
@ -342,7 +342,7 @@ watch(
() => {
if (props.data.type === "start") {
formData.inputParams = props.data.properties?.inputParams || [];
} else if (props.data.type === "serviceNode") {
} else if (['currentLoop', 'serviceNode'].includes(props.data.type)) {
formData.nodeParams = props.data.properties.nodeParams;
formData.outputParams = props.data.properties.outputParams;
console.log('formData', formData)

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

@ -306,7 +306,7 @@ export const collapseList = [
{ name: "input", type: "input", input: "", required: true }
],
outputType: 'json',
outputParams: [{ name: 'result', type: 'Object', children: [], desc: 'js节点返回'}]
outputParams: [{ name: 'result', type: 'object', children: [], desc: 'js节点返回'}]
},
{
icon: microphoneSvg,
@ -316,12 +316,14 @@ export const collapseList = [
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: '当前循环对象', }
]
},
],

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

@ -282,15 +282,15 @@ const testRun = async () => {
}
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;
}
}
}
// 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 (allValid) {
isOpen.value = true;
@ -645,7 +645,9 @@ 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 }) => {

6
src/views/flow/nodes/common/serviceNode.js
View File

@ -150,9 +150,9 @@ class ServiceNodeHtmlModel extends HtmlNodeModel {
return result
}
setCustomProperties() {
this.componentInstance.setNodeProperties()
}
// setCustomProperties() {
// this.componentInstance.setNodeProperties()
// }
/**
* 设置节点属性

217
src/views/flow/nodes/function/currentLoop.vue
View File

@ -26,119 +26,8 @@
: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>
@ -146,7 +35,6 @@
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 NodeTitle from "../../components/NodeTitle.vue";
import NodeState from "../../components/NodeState.vue";
import "vue3-json-viewer/dist/index.css";
@ -160,46 +48,11 @@ 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);
@ -214,72 +67,6 @@ const nodeOperatingStatus = ref("NORMAL");
const inputJsonData = ref({});
const outputJsonData = ref({});
const visibleChange = (value) => {
if (value) {
const option = getInput(props.model.id);
if (option) {
quoteOptions.value = option;
}
}
};
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: "验证失败" };
}
} 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) {
@ -314,10 +101,6 @@ onUnmounted(() => {
emitter.off("contentChange");
});
defineExpose({
validateForm,
setNodeProperties,
});
</script>
<style lang="scss" scoped>

6
src/views/flow/nodes/function/currentLoopNode.js
View File

@ -150,9 +150,9 @@ class CurrentLoopNodeHtmlModel extends HtmlNodeModel {
return result
}
setCustomProperties() {
this.componentInstance.setNodeProperties()
}
// setCustomProperties() {
// this.componentInstance.setNodeProperties()
// }
/**
* 设置节点属性

6
src/views/flow/nodes/function/loop.js
View File

@ -50,15 +50,16 @@ class loopBodyModel extends GroupNodeModel {
});
let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
nextTick(() => {
children.forEach((node) => {
let width = node.width === 0 ? 600 : node.width
let width = node.width === 0 ? 320 : node.width
let height = node.height === 0 ? 200 : 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.width = maxX - minX + 300; // 增加内边距
this.height = maxY - minY + 260;
this.x = (minX + maxX) / 2;
this.y = (minY + maxY) / 2 - 120;
@ -69,6 +70,7 @@ class loopBodyModel extends GroupNodeModel {
height: this.height
})
this.getDefaultAnchor()
})
}
updateSize() {

28
src/views/flow/nodes/function/loop.vue
View File

@ -35,6 +35,7 @@
>
<el-input
:disabled="index === 0"
class="param-name"
v-model="property.name"
placeholder="请输入"
clearable
@ -45,6 +46,7 @@
:prop="`nodeParams.${index}.type`"
>
<el-select
class="param-type"
v-model="property.type"
@change="handleTypeChange(index)"
>
@ -63,6 +65,7 @@
:prop="`nodeParams.${index}.input`"
>
<el-input-number
class="param-value"
v-model="property.input"
:min="0"
:controls="false"
@ -83,6 +86,7 @@
:prop="`nodeParams.${index}.quote`"
>
<el-cascader
class="param-value"
:ref="
(el) => {
if (el) cascaderRefs[index] = el;
@ -116,7 +120,7 @@
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import { ref, onMounted } from "vue";
import NodeTitle from "../../components/NodeTitle.vue";
import loop from "../../icon/loop.svg";
import { useFlowStore } from "@/store/modules/flow";
@ -285,20 +289,24 @@ onMounted(() => {
:deep(.loop__container) {
height: auto;
.el-input {
width: 240px;
.el-row {
align-items: end;
.el-form-item {
margin-right: 12px;
}
.el-input-number {
width: 92px;
}
.el-select {
.param-name {
width: 120px;
}
.el-cascader {
width: 240px;
.param-type {
width: 80px;
}
.param-desc {
width: 120px;
}
}
}