fix: 修复更改节点名称导致重新渲染的bug
This commit is contained in:
parent
11f369452c
commit
d1742ae98c
@ -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 {
|
||||
|
||||
@ -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({});
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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({});
|
||||
|
||||
@ -1,190 +1,197 @@
|
||||
<template>
|
||||
<div class="node__container" >
|
||||
<!-- 状态栏 -->
|
||||
<NodeTitle :icon="stopLoop" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '结束循环'" nodeDesc="用于立即终止当前所在的循环，跳出循环体" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import NodeTitle from '../../components/NodeTitle.vue'
|
||||
import stopLoop from '../../icon/stopLoop.svg'
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
graphModel: Object,
|
||||
properties: Object,
|
||||
text: String,
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes rotateAnimation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.node__container {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
border-radius: 12px;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 5px 15px 0#00000008;
|
||||
position: relative;
|
||||
|
||||
.title__container {
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: #737a87;
|
||||
font-size: 12px;
|
||||
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;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 170px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.popover__container {
|
||||
min-width: 300px !important;
|
||||
|
||||
.params__container {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.paramsTitle {
|
||||
color: #0c0d0e;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="node__container" >
|
||||
<!-- 状态栏 -->
|
||||
<NodeTitle :icon="stopLoop" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '结束循环'" nodeDesc="用于立即终止当前所在的循环，跳出循环体" @setNodeName="setNodeName" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import NodeTitle from '../../components/NodeTitle.vue'
|
||||
import stopLoop from '../../icon/stopLoop.svg'
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
graphModel: Object,
|
||||
properties: Object,
|
||||
text: String,
|
||||
});
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
name
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@keyframes rotateAnimation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.node__container {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
border-radius: 12px;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 5px 15px 0#00000008;
|
||||
position: relative;
|
||||
|
||||
.title__container {
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
color: #737a87;
|
||||
font-size: 12px;
|
||||
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;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 170px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.popover__container {
|
||||
min-width: 300px !important;
|
||||
|
||||
.params__container {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.paramsTitle {
|
||||
color: #0c0d0e;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user