fix: 修复更改节点名称导致重新渲染的bug

This commit is contained in:
zhanghao 2025-12-17 13:39:02 +08:00
parent 11f369452c
commit d1742ae98c
6 changed files with 248 additions and 196 deletions

View File

@ -11,7 +11,7 @@
/></el-icon>
</div>
<div class="input_name_container" v-else>
<el-input v-model="nodeName" />
<el-input v-model="nodeName" @keydown="handleInputKeydown" />
<el-button
class="input_name_select"
circle
@ -112,17 +112,13 @@ const props = defineProps({
}
})
const emits = defineEmits(['zoom'])
const emits = defineEmits(['zoom', 'setNodeName'])
const showTextTitle = ref(true)
const nodeName = ref(props.nodeProperties.name || props.nodeName)
const confirmNodeName = () => {
const properties = lf.getProperties(props.nodeId)
lf.setProperties(props.nodeId, {
...properties,
name: nodeName.value
})
emits('setNodeName', nodeName.value)
showTextTitle.value = true
}
@ -165,6 +161,15 @@ const execute = () => {
});
document.dispatchEvent(myEvent);
}
const handleInputKeydown = (e) => {
// Logic Flow
e.stopPropagation();
// Ctrl+V
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
e.returnValue = true; //
}
}
</script>
<style lang="scss" scoped>
.title__container {

View File

@ -39,6 +39,7 @@
:nodeDesc="props.properties.desc"
:zoom-state="nodeZoom"
@zoom="zoom"
@setNodeName="setNodeName"
/>
<div class="input__container" v-show="nodeZoom">
<div class="title">
@ -293,6 +294,15 @@ const setNodeProperties = async () => {
}
};
const setNodeName = (name) => {
const properties = lf.getProperties(props.model.id);
lf.setProperties(props.model.id, {
...properties,
name
});
emits("contentChange");
}
const nodeOperatingStatus = ref("NORMAL");
const inputJsonData = ref({});
const outputJsonData = ref({});

View File

@ -7,6 +7,7 @@
:nodeName="props.properties?.name || '循环'"
nodeDesc="循环执行一系列任务,直至输出所有结果"
:showZoom="false"
@setNodeName="setNodeName"
/>
<div class="loop__container">
<div>
@ -198,6 +199,15 @@ const setNodeProperties = async () => {
}
};
const setNodeName = (name) => {
const properties = lf.getProperties(props.model.id);
lf.setProperties(props.model.id, {
...properties,
name
});
emits("contentChange");
}
const visibleChange = async (value, index, quote) => {
if (value) {
const option = getInput(props.model.id);

View File

@ -27,6 +27,7 @@
:nodeDesc="props.properties.desc"
:zoom-state="nodeZoom"
@zoom="zoom"
@setNodeName="setNodeName"
/>
<div class="input__container" v-show="nodeZoom">
<div class="title">
@ -194,6 +195,15 @@ const setNodeProperties = async () => {
}
};
const setNodeName = (name) => {
const properties = lf.getProperties(props.model.id);
lf.setProperties(props.model.id, {
...properties,
name
});
emits("contentChange");
}
const nodeOperatingStatus = ref("NORMAL");
const inputJsonData = ref({});
const outputJsonData = ref({});

View File

@ -1,7 +1,7 @@
<template>
<div class="node__container" >
<!-- 状态栏 -->
<NodeTitle :icon="stopLoop" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '结束循环'" nodeDesc="用于立即终止当前所在的循环,跳出循环体" />
<NodeTitle :icon="stopLoop" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '结束循环'" nodeDesc="用于立即终止当前所在的循环,跳出循环体" @setNodeName="setNodeName" />
</div>
</template>
@ -16,6 +16,13 @@ const props = defineProps({
text: String,
});
const setNodeName = (name) => {
const properties = lf.getProperties(props.model.id);
lf.setProperties(props.model.id, {
...properties,
name
});
}
</script>

View File

@ -14,6 +14,7 @@
:nodeProperties="props.properties"
:nodeName="props.properties?.name || '分支'"
nodeDesc="连接多个下游分支,根据设定的条件按照顺序查找的方式来匹配运行的分支,如果匹配到某条件则只运行该条件对应的分支,否则继续匹配下一条件直至结束"
@setNodeName="setNodeName"
/>
<div class="condition_title_container">
<div class="left">
@ -362,6 +363,15 @@ const setNodeProperties = async () => {
}
};
const setNodeName = (name) => {
const properties = lf.getProperties(props.model.id);
lf.setProperties(props.model.id, {
...properties,
name
});
emits("contentChange");
}
const visibleChange = (value) => {
if (value) {
const option = getInput(props.model.id);