feat: 节点缩小
This commit is contained in:
parent
592ebddc25
commit
9a7afa8f6e
@ -127,6 +127,34 @@ export const formatTableData = (arr, data = {}) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const addNewEdge = (nodeId) => {
|
export const addNewEdge = (nodeId) => {
|
||||||
|
const { edges } = lf.getGraphData();
|
||||||
|
const ttt = edges.slice(); // 浅拷贝（比 JSON 深拷贝高效 10x+）
|
||||||
|
|
||||||
|
const edgesToDelete = ttt.filter(_edge =>
|
||||||
|
_edge.sourceNodeId === nodeId || _edge.targetNodeId === nodeId
|
||||||
|
);
|
||||||
|
|
||||||
|
edgesToDelete.forEach(edge => lf.deleteEdge(edge.id));
|
||||||
|
|
||||||
|
if (window.addNewEdgeTimer) {
|
||||||
|
clearTimeout(window.addNewEdgeTimer); // 清理上一次未执行的定时器
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addNewEdgeTimer = setTimeout(() => {
|
||||||
|
edgesToDelete.forEach(item => {
|
||||||
|
lf.addEdge({
|
||||||
|
type: "bezier",
|
||||||
|
sourceNodeId: item.sourceNodeId,
|
||||||
|
targetNodeId: item.targetNodeId,
|
||||||
|
sourceAnchorId: item.sourceAnchorId,
|
||||||
|
targetAnchorId: item.targetAnchorId
|
||||||
|
});
|
||||||
|
})
|
||||||
|
delete window.addNewEdgeTimer;
|
||||||
|
}, 50)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const newEdge = (nodeId) => {
|
||||||
const { edges } = lf.getGraphData();
|
const { edges } = lf.getGraphData();
|
||||||
const arr = JSON.parse(JSON.stringify(edges))
|
const arr = JSON.parse(JSON.stringify(edges))
|
||||||
arr.forEach(_edge => {
|
arr.forEach(_edge => {
|
||||||
|
|||||||
@ -1,36 +1,68 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="title__container">
|
<div class="title__container">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<img :src="icon" alt="">
|
<img :src="icon" alt="" />
|
||||||
<div class="text__container">
|
<div class="text__container">
|
||||||
<div class="text__title" v-if="showTextTitle">
|
<div class="text__title" v-if="showTextTitle">
|
||||||
<span class="text">{{ nodeName }}</span>
|
<span class="text">{{ nodeName }}</span>
|
||||||
<el-icon class="editIcon" @click="showTextTitle = false"><EditPen /></el-icon>
|
<el-icon class="editIcon" @click="showTextTitle = false"
|
||||||
</div>
|
><EditPen
|
||||||
<div class="input_name_container" v-else>
|
/></el-icon>
|
||||||
<el-input v-model="nodeName" />
|
</div>
|
||||||
<el-button class="input_name_select" circle size="small" @click="confirmNodeName">
|
<div class="input_name_container" v-else>
|
||||||
<el-icon><Select /></el-icon>
|
<el-input v-model="nodeName" />
|
||||||
</el-button>
|
<el-button
|
||||||
<el-button class="input_name_closeBold" circle size="small" @click="cancelNodeName">
|
class="input_name_select"
|
||||||
<el-icon><CloseBold /></el-icon>
|
circle
|
||||||
</el-button>
|
size="small"
|
||||||
</div>
|
@click="confirmNodeName"
|
||||||
</div>
|
>
|
||||||
</div>
|
<el-icon><Select /></el-icon>
|
||||||
<div class="right">
|
|
||||||
<el-button circle size="small" @click="deleteNode">
|
|
||||||
<el-icon><Delete /></el-icon>
|
|
||||||
</el-button>
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
class="input_name_closeBold"
|
||||||
|
circle
|
||||||
|
size="small"
|
||||||
|
@click="cancelNodeName"
|
||||||
|
>
|
||||||
|
<el-icon><CloseBold /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="subTitle">{{ props.nodeDesc }}</div>
|
<div class="right">
|
||||||
|
<el-tooltip
|
||||||
|
class="box-item"
|
||||||
|
effect="dark"
|
||||||
|
:content="zoomState ? '缩小' : '放大'"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<el-button v-if="showZoom" circle size="small" @click="zoom">
|
||||||
|
<el-icon>
|
||||||
|
<ZoomOut v-if="zoomState" />
|
||||||
|
<ZoomIn v-else />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip
|
||||||
|
class="box-item"
|
||||||
|
effect="dark"
|
||||||
|
content="删除"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<el-button circle size="small" @click="deleteNode">
|
||||||
|
<el-icon><Delete /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="subTitle">{{ props.nodeDesc }}</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="js">
|
<script setup lang="js">
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { EditPen, Select, CloseBold, Delete } from '@element-plus/icons-vue'
|
import { EditPen, Select, CloseBold, Delete, ZoomOut, ZoomIn } from '@element-plus/icons-vue'
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -57,9 +89,19 @@ const props = defineProps({
|
|||||||
nodeType: {
|
nodeType: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
},
|
||||||
|
showZoom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
zoomState: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emits = defineEmits(['zoom'])
|
||||||
|
|
||||||
const showTextTitle = ref(true)
|
const showTextTitle = ref(true)
|
||||||
const nodeName = ref(props.nodeProperties.name || props.nodeName)
|
const nodeName = ref(props.nodeProperties.name || props.nodeName)
|
||||||
|
|
||||||
@ -98,74 +140,78 @@ const deleteNode = () => {
|
|||||||
lf.deleteNode(props.nodeId);
|
lf.deleteNode(props.nodeId);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const zoom = () => {
|
||||||
|
emits('zoom', !props.zoomState)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.title__container {
|
.title__container {
|
||||||
.title {
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.left {
|
img {
|
||||||
display: flex;
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
img {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text__container {
|
|
||||||
.text__title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.editIcon {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input_name_container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.el-input {
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input_name_select {
|
|
||||||
color: #00b42a;
|
|
||||||
margin-left: 4px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input_name_closeBold {
|
|
||||||
color: #f53f3f;
|
|
||||||
margin-left: 4px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.text__container {
|
||||||
cursor: pointer;
|
.text__title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.el-button {
|
.text {
|
||||||
border: none;
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.editIcon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input_name_container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input_name_select {
|
||||||
|
color: #00b42a;
|
||||||
|
margin-left: 4px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input_name_closeBold {
|
||||||
|
color: #f53f3f;
|
||||||
|
margin-left: 4px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.subTitle {
|
.right {
|
||||||
color: #737a87;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
|
||||||
margin: 8px 0;
|
.el-button {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.subTitle {
|
||||||
|
color: #737a87;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -42,6 +42,11 @@ export const lfConfig = {
|
|||||||
// foldSize: 30, // 折叠后显示的图标尺寸
|
// foldSize: 30, // 折叠后显示的图标尺寸
|
||||||
// },
|
// },
|
||||||
edgeType: "bezier",
|
edgeType: "bezier",
|
||||||
|
zoomConfig: {
|
||||||
|
min: 0.05, // 最小缩放比例（支持更小值，如 0.01，但不建议过小）
|
||||||
|
max: 3, // 最大缩放比例（可自定义）
|
||||||
|
step: 0.1 // 每次滚轮缩放的步长（默认 0.1）
|
||||||
|
},
|
||||||
style: {
|
style: {
|
||||||
anchor: {
|
anchor: {
|
||||||
show: true, // 强制全局锚点显示
|
show: true, // 强制全局锚点显示
|
||||||
|
|||||||
@ -54,7 +54,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-container>
|
<el-container class="container">
|
||||||
<el-aside v-if="!flowStore.disableForm">
|
<el-aside v-if="!flowStore.disableForm">
|
||||||
<Aside />
|
<Aside />
|
||||||
</el-aside>
|
</el-aside>
|
||||||
@ -79,7 +79,7 @@ import Aside from "./components/Aside.vue";
|
|||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { useFlowStore } from '@/store/modules/flow'
|
import { useFlowStore } from '@/store/modules/flow'
|
||||||
import { emitter } from '@/utils/eventBus';
|
import { emitter } from '@/utils/eventBus';
|
||||||
import { recursiveFilter, addNewEdge, convertToTree } from '@/utils/flow'
|
import { recursiveFilter, newEdge, convertToTree } from '@/utils/flow'
|
||||||
import { flowDeploy, flowView, flowPause, flowResume, flowStop } from '@/api/device/flow'
|
import { flowDeploy, flowView, flowPause, flowResume, flowStop } from '@/api/device/flow'
|
||||||
import { getDetect } from '@/api/test/detect'
|
import { getDetect } from '@/api/test/detect'
|
||||||
import { Location } from "@element-plus/icons-vue";
|
import { Location } from "@element-plus/icons-vue";
|
||||||
@ -502,7 +502,6 @@ const initFlow = () => {
|
|||||||
const node = lf.getNodeModelById(item.id)
|
const node = lf.getNodeModelById(item.id)
|
||||||
node.updateSize()
|
node.updateSize()
|
||||||
})
|
})
|
||||||
|
|
||||||
operationEdge(arr)
|
operationEdge(arr)
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -588,7 +587,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
const operationEdge = (arr) => {
|
const operationEdge = (arr) => {
|
||||||
arr.forEach(item => {
|
arr.forEach(item => {
|
||||||
addNewEdge(item.id)
|
newEdge(item.id)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -601,6 +600,7 @@ onUnmounted(() => {
|
|||||||
.page {
|
.page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.page__container {
|
.page__container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -622,6 +622,10 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
}
|
||||||
|
|
||||||
.el-main {
|
.el-main {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,22 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="node__container">
|
<div class="node__container" :class="props.model.id">
|
||||||
<NodeState :state="nodeOperatingStatus">
|
<NodeState :state="nodeOperatingStatus">
|
||||||
<template #input>
|
<template #input>
|
||||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||||
</template>
|
</template>
|
||||||
<template #output>
|
<template #output>
|
||||||
<JsonViewer v-if="props.properties.outputType === 'json'" :value="outputJsonData" copyable boxed sort theme="light" />
|
<JsonViewer
|
||||||
<el-image
|
v-if="props.properties.outputType === 'json'"
|
||||||
v-if="props.properties.outputType === 'img'"
|
:value="outputJsonData"
|
||||||
v-for="item in outputJsonData.imageUrl"
|
copyable
|
||||||
style="width: 60px; height: 60px"
|
boxed
|
||||||
:src="item"
|
sort
|
||||||
:preview-src-list="outputJsonData.imageUrl"
|
theme="light"
|
||||||
:preview-teleported="true"
|
/>
|
||||||
show-progress
|
<el-image
|
||||||
fit="fill"
|
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"
|
||||||
/>
|
/>
|
||||||
<IPlayer v-if="props.properties.outputType === 'video'" v-for="item in outputJsonData.videoUrl" :videoUrl="item" />
|
|
||||||
</template>
|
</template>
|
||||||
</NodeState>
|
</NodeState>
|
||||||
<NodeTitle
|
<NodeTitle
|
||||||
@ -25,8 +36,10 @@
|
|||||||
:nodeProperties="props.properties"
|
:nodeProperties="props.properties"
|
||||||
:nodeName="props.properties.name"
|
:nodeName="props.properties.name"
|
||||||
:nodeDesc="props.properties.desc"
|
:nodeDesc="props.properties.desc"
|
||||||
|
:zoom-state="nodeZoom"
|
||||||
|
@zoom="zoom"
|
||||||
/>
|
/>
|
||||||
<div class="input__container">
|
<div class="input__container" v-show="nodeZoom">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="tag"></div>
|
<div class="tag"></div>
|
||||||
@ -57,7 +70,9 @@
|
|||||||
<el-form-item
|
<el-form-item
|
||||||
:label="index === 0 ? '参数名' : ''"
|
:label="index === 0 ? '参数名' : ''"
|
||||||
:prop="`nodeParams.${index}.name`"
|
:prop="`nodeParams.${index}.name`"
|
||||||
:rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
|
:rules="[
|
||||||
|
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||||
|
]"
|
||||||
>
|
>
|
||||||
<el-input
|
<el-input
|
||||||
:disabled="property?.disabled || false"
|
:disabled="property?.disabled || false"
|
||||||
@ -71,33 +86,76 @@
|
|||||||
:label="index === 0 ? '参数值' : ''"
|
:label="index === 0 ? '参数值' : ''"
|
||||||
:prop="`nodeParams.${index}.type`"
|
:prop="`nodeParams.${index}.type`"
|
||||||
>
|
>
|
||||||
<el-select v-model="property.type" @change="handleTypeChange(index)">
|
<el-select
|
||||||
|
v-model="property.type"
|
||||||
|
@change="handleTypeChange(index)"
|
||||||
|
>
|
||||||
<el-option label="引用" value="quote" />
|
<el-option label="引用" value="quote" />
|
||||||
<el-option label="输入" value="input" />
|
<el-option label="输入" value="input" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="property.type === 'input'"
|
v-if="property.type === 'input'"
|
||||||
:rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入参数值',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
]"
|
||||||
:prop="`nodeParams.${index}.input`"
|
: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-input-number
|
||||||
<el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
|
v-if="property.componentType === 'number'"
|
||||||
<el-option v-for="item in property.selectOptions" :key="item.value" :label="item.label" :value="item.value" />
|
v-model="property.input"
|
||||||
</el-select>
|
:min="0"
|
||||||
<el-input @keydown="handleInputKeydown" v-else v-model="property.input" placeholder="请输入" clearable />
|
: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.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>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="property.type === 'quote'"
|
v-if="property.type === 'quote'"
|
||||||
:rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择参数值',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
]"
|
||||||
:prop="`nodeParams.${index}.quote`"
|
:prop="`nodeParams.${index}.quote`"
|
||||||
>
|
>
|
||||||
<el-cascader
|
<el-cascader
|
||||||
:ref="el => { if (el) cascaderRefs[index] = el }"
|
:ref="
|
||||||
|
(el) => {
|
||||||
|
if (el) cascaderRefs[index] = el;
|
||||||
|
}
|
||||||
|
"
|
||||||
v-model="property.quote"
|
v-model="property.quote"
|
||||||
:checkStrictly="true"
|
:checkStrictly="true"
|
||||||
:options="quoteOptions"
|
:options="quoteOptions"
|
||||||
placeholder="请选择"
|
placeholder="请选择"
|
||||||
@visible-change="(visible) => visibleChange(visible, index, property.quote)"
|
@visible-change="
|
||||||
|
(visible) => visibleChange(visible, index, property.quote)
|
||||||
|
"
|
||||||
@change="(value) => cascaderChange(value, index)"
|
@change="(value) => cascaderChange(value, index)"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -107,43 +165,45 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="output__container" v-if="props.properties?.outputParams?.length > 0">
|
<div class="output__container" v-show="nodeZoom">
|
||||||
<div class="title">
|
<div v-if="props.properties?.outputParams?.length > 0">
|
||||||
<div class="left">
|
<div class="title">
|
||||||
<div class="tag"></div>
|
<div class="left">
|
||||||
<div class="text">输出</div>
|
<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>
|
||||||
<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">
|
<div class="form__container">
|
||||||
<el-form
|
<el-form
|
||||||
:inline="true"
|
:inline="true"
|
||||||
:model="formData"
|
:model="formData"
|
||||||
label-position="top"
|
label-position="top"
|
||||||
label-width="auto"
|
label-width="auto"
|
||||||
:rules="outputRules"
|
:rules="outputRules"
|
||||||
ref="outputFormRef"
|
ref="outputFormRef"
|
||||||
>
|
>
|
||||||
<FormItemRecursive
|
<FormItemRecursive
|
||||||
formType="output"
|
formType="output"
|
||||||
:current-list="formData.outputParams"
|
:current-list="formData.outputParams"
|
||||||
prop-path="outputParams"
|
prop-path="outputParams"
|
||||||
:depth="0"
|
:depth="0"
|
||||||
:is-first-level="true"
|
:is-first-level="true"
|
||||||
:endDepth="2"
|
:endDepth="2"
|
||||||
:parent-path="[]"
|
:parent-path="[]"
|
||||||
@delete-item="deleteTopLevelItem"
|
@delete-item="deleteTopLevelItem"
|
||||||
/>
|
/>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -151,7 +211,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||||||
import { getInput } from "@/utils/flow";
|
import { getInput, addNewEdge } from "@/utils/flow";
|
||||||
import { useFlowStore } from "@/store/modules/flow";
|
import { useFlowStore } from "@/store/modules/flow";
|
||||||
import { Plus } from "@element-plus/icons-vue";
|
import { Plus } from "@element-plus/icons-vue";
|
||||||
import NodeTitle from "../../components/NodeTitle.vue";
|
import NodeTitle from "../../components/NodeTitle.vue";
|
||||||
@ -172,7 +232,7 @@ const flowStore = useFlowStore();
|
|||||||
|
|
||||||
const formData = reactive({
|
const formData = reactive({
|
||||||
nodeParams: [],
|
nodeParams: [],
|
||||||
outputParams: []
|
outputParams: [],
|
||||||
});
|
});
|
||||||
|
|
||||||
const rules = reactive({});
|
const rules = reactive({});
|
||||||
@ -190,31 +250,31 @@ const handleTypeChange = (index) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const cascaderRefs = ref([])
|
const cascaderRefs = ref([]);
|
||||||
const outputRules = reactive({});
|
const outputRules = reactive({});
|
||||||
const cascaderChange = (value, index) => {
|
const cascaderChange = (value, index) => {
|
||||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||||
formData.nodeParams[index].quote = value
|
formData.nodeParams[index].quote = value;
|
||||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type
|
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||||
}
|
};
|
||||||
|
|
||||||
const addOutputFormItem = () => {
|
const addOutputFormItem = () => {
|
||||||
formData.outputParams.push({
|
formData.outputParams.push({
|
||||||
name: '',
|
name: "",
|
||||||
type: '',
|
type: "",
|
||||||
desc: '',
|
desc: "",
|
||||||
children: []
|
children: [],
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const dynamicForm = ref();
|
const dynamicForm = ref();
|
||||||
const outputFormRef = ref()
|
const outputFormRef = ref();
|
||||||
const setNodeProperties = async () => {
|
const setNodeProperties = async () => {
|
||||||
try {
|
try {
|
||||||
const result = await dynamicForm.value.validate();
|
const result = await dynamicForm.value.validate();
|
||||||
let flag = true
|
let flag = true;
|
||||||
if (outputFormRef.value) {
|
if (outputFormRef.value) {
|
||||||
flag = await outputFormRef.value.validate()
|
flag = await outputFormRef.value.validate();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (result && flag) {
|
if (result && flag) {
|
||||||
@ -287,7 +347,7 @@ const addFormItem = () => {
|
|||||||
|
|
||||||
// 删除顶层表单项
|
// 删除顶层表单项
|
||||||
const deleteTopLevelItem = (fullPath) => {
|
const deleteTopLevelItem = (fullPath) => {
|
||||||
// 从顶层数据开始查找
|
// 从顶层数据开始查找
|
||||||
let currentLevel = formData.outputParams;
|
let currentLevel = formData.outputParams;
|
||||||
|
|
||||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||||
@ -301,6 +361,22 @@ const deleteTopLevelItem = (fullPath) => {
|
|||||||
const lastIndex = fullPath[fullPath.length - 1];
|
const lastIndex = fullPath[fullPath.length - 1];
|
||||||
currentLevel.splice(lastIndex, 1);
|
currentLevel.splice(lastIndex, 1);
|
||||||
emits("contentChange");
|
emits("contentChange");
|
||||||
|
};
|
||||||
|
|
||||||
|
const nodeZoom = ref(true)
|
||||||
|
const zoom = (flag) => {
|
||||||
|
nodeZoom.value = flag
|
||||||
|
const nodes = document.getElementsByClassName(props.model.id)
|
||||||
|
if (nodes.length > 0) {
|
||||||
|
const node = nodes[0]
|
||||||
|
const parent = node.closest('.node__box');
|
||||||
|
if (nodeZoom.value) {
|
||||||
|
parent.style.width = '680px'
|
||||||
|
} else {
|
||||||
|
parent.style.width = '300px'
|
||||||
|
}
|
||||||
|
addNewEdge(props.model.id)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
@ -313,7 +389,10 @@ watch(
|
|||||||
quoteOptions.value = option;
|
quoteOptions.value = option;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (props.properties.outputParams && props.properties.outputParams.length > 0) {
|
if (
|
||||||
|
props.properties.outputParams &&
|
||||||
|
props.properties.outputParams.length > 0
|
||||||
|
) {
|
||||||
formData.outputParams = props.properties.outputParams;
|
formData.outputParams = props.properties.outputParams;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -327,10 +406,10 @@ const handleInputKeydown = (e) => {
|
|||||||
// 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
|
// 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
// 可选：明确放行 Ctrl+V（增强兼容性）
|
// 可选：明确放行 Ctrl+V（增强兼容性）
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
|
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
|
||||||
e.returnValue = true; // 允许默认粘贴行为
|
e.returnValue = true; // 允许默认粘贴行为
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
emitter.on("changeNodeState", (data) => {
|
emitter.on("changeNodeState", (data) => {
|
||||||
@ -511,11 +590,11 @@ defineExpose({
|
|||||||
align-items: end;
|
align-items: end;
|
||||||
|
|
||||||
.el-input {
|
.el-input {
|
||||||
--el-input-width: 148px;
|
--el-input-width: 148px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-select {
|
.el-select {
|
||||||
--el-select-width: 148px;
|
--el-select-width: 148px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-cascader {
|
.el-cascader {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="node__container">
|
<div class="node__container" :class="props.model.id">
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
<NodeState :state="nodeOperatingStatus">
|
<NodeState :state="nodeOperatingStatus">
|
||||||
<template #input>
|
<template #input>
|
||||||
@ -12,12 +12,29 @@
|
|||||||
</keep-alive>
|
</keep-alive>
|
||||||
<div class="title__container">
|
<div class="title__container">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<img src="../../icon/start.svg" alt="" />
|
<div class="left">
|
||||||
<span class="text">Start</span>
|
<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 size="small" @click="zoom">
|
||||||
|
<el-icon>
|
||||||
|
<ZoomOut v-if="nodeZoom" />
|
||||||
|
<ZoomIn v-else />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="subTitle">工作流的起始节点，用于设定启动工作流需要的信息</div>
|
<div class="subTitle">工作流的起始节点，用于设定启动工作流需要的信息</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="input__container">
|
<div class="input__container" v-show="nodeZoom">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="tag"></div>
|
<div class="tag"></div>
|
||||||
@ -61,8 +78,9 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { watch, reactive, toRaw, ref, onMounted, onUnmounted } from "vue";
|
import { watch, reactive, toRaw, ref, onMounted, onUnmounted } from "vue";
|
||||||
import { Plus } from "@element-plus/icons-vue";
|
import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
|
||||||
import { useFlowStore } from "@/store/modules/flow";
|
import { useFlowStore } from "@/store/modules/flow";
|
||||||
|
import { addNewEdge } from "@/utils/flow";
|
||||||
import NodeState from "../../components/NodeState.vue";
|
import NodeState from "../../components/NodeState.vue";
|
||||||
import "vue3-json-viewer/dist/index.css";
|
import "vue3-json-viewer/dist/index.css";
|
||||||
import { emitter } from "@/utils/eventBus";
|
import { emitter } from "@/utils/eventBus";
|
||||||
@ -200,6 +218,22 @@ const validateForm = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const nodeZoom = ref(true)
|
||||||
|
const zoom = () => {
|
||||||
|
nodeZoom.value = !nodeZoom.value
|
||||||
|
const nodes = document.getElementsByClassName(props.model.id)
|
||||||
|
if (nodes.length > 0) {
|
||||||
|
const node = nodes[0]
|
||||||
|
const parent = node.closest('.node__box');
|
||||||
|
if (nodeZoom.value) {
|
||||||
|
parent.style.width = '680px'
|
||||||
|
} else {
|
||||||
|
parent.style.width = '300px'
|
||||||
|
}
|
||||||
|
addNewEdge(props.model.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
emitter.off("changeNodeState");
|
emitter.off("changeNodeState");
|
||||||
emitter.off("contentChange");
|
emitter.off("contentChange");
|
||||||
@ -220,16 +254,19 @@ defineExpose({
|
|||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
img {
|
.left {
|
||||||
width: 24px;
|
img {
|
||||||
height: 24px;
|
width: 24px;
|
||||||
}
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,107 +1,117 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="group__container" @mouseleave="setNodeProperties">
|
<div class="group__container" :class="props.model.id" @mouseleave="setNodeProperties">
|
||||||
<NodeTitle
|
<NodeTitle
|
||||||
:icon="loop"
|
:icon="loop"
|
||||||
:nodeId="props.model.id"
|
:nodeId="props.model.id"
|
||||||
:nodeProperties="props.properties"
|
:nodeProperties="props.properties"
|
||||||
:nodeName="props.properties?.name || '循环'"
|
:nodeName="props.properties?.name || '循环'"
|
||||||
nodeDesc="循环执行一系列任务，直至输出所有结果"
|
nodeDesc="循环执行一系列任务，直至输出所有结果"
|
||||||
|
:showZoom="false"
|
||||||
/>
|
/>
|
||||||
<div class="loop__container">
|
<div class="loop__container">
|
||||||
<div>
|
<div>
|
||||||
<el-form
|
<el-form
|
||||||
:inline="true"
|
:inline="true"
|
||||||
:model="formData"
|
:model="formData"
|
||||||
:rules="rules"
|
:rules="rules"
|
||||||
ref="dynamicForm"
|
ref="dynamicForm"
|
||||||
label-position="top"
|
label-position="top"
|
||||||
label-width="auto"
|
label-width="auto"
|
||||||
:disabled="flowStore.disableForm"
|
:disabled="flowStore.disableForm"
|
||||||
>
|
>
|
||||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||||
<el-row>
|
<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
|
<el-form-item
|
||||||
v-if="property.type === 'input'"
|
:label="index === 0 ? '参数名' : ''"
|
||||||
|
:prop="`nodeParams.${index}.name`"
|
||||||
:rules="[
|
:rules="[
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入参数值',
|
message: '请输入参数名',
|
||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
:prop="`nodeParams.${index}.input`"
|
|
||||||
>
|
>
|
||||||
<el-input-number
|
<el-input
|
||||||
v-model="property.input"
|
:disabled="index === 0"
|
||||||
:min="0"
|
v-model="property.name"
|
||||||
:controls="false"
|
|
||||||
:step-strictly="true"
|
|
||||||
placeholder="请输入"
|
placeholder="请输入"
|
||||||
clearable
|
clearable
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-if="property.type === 'quote'"
|
:label="index === 0 ? '参数值' : ''"
|
||||||
:rules="[
|
:prop="`nodeParams.${index}.type`"
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请选择参数值',
|
|
||||||
trigger: 'blur',
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
:prop="`nodeParams.${index}.quote`"
|
|
||||||
>
|
>
|
||||||
<el-cascader
|
<el-select
|
||||||
:ref="
|
v-model="property.type"
|
||||||
(el) => {
|
@change="handleTypeChange(index)"
|
||||||
if (el) cascaderRefs[index] = el;
|
>
|
||||||
}
|
<el-option label="引用" value="quote" />
|
||||||
"
|
<el-option label="输入" value="input" />
|
||||||
v-model="property.quote"
|
</el-select>
|
||||||
:checkStrictly="true"
|
<el-form-item
|
||||||
:options="quoteOptions"
|
v-if="property.type === 'input'"
|
||||||
placeholder="请选择"
|
:rules="[
|
||||||
@visible-change="
|
{
|
||||||
(visible) => visibleChange(visible, index, property.quote)
|
required: true,
|
||||||
"
|
message: '请输入参数值',
|
||||||
@change="(value) => cascaderChange(value, index)"
|
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-form-item>
|
||||||
</el-form-item>
|
</el-row>
|
||||||
</el-row>
|
</div>
|
||||||
</div>
|
</el-form>
|
||||||
</el-form>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>循环体</div>
|
||||||
|
<div
|
||||||
|
class="child__container"
|
||||||
|
@drop="handleDrop"
|
||||||
|
@dragover="handleDragover"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div>循环体</div>
|
|
||||||
<div class="child__container" @drop="handleDrop" @dragover="handleDragover">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="node__container">
|
<div class="node__container" :class="props.model.id">
|
||||||
<NodeState :state="nodeOperatingStatus">
|
<NodeState :state="nodeOperatingStatus">
|
||||||
<template #input>
|
<template #input>
|
||||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||||
@ -25,8 +25,10 @@
|
|||||||
:nodeProperties="props.properties"
|
:nodeProperties="props.properties"
|
||||||
:nodeName="props.properties.name"
|
:nodeName="props.properties.name"
|
||||||
:nodeDesc="props.properties.desc"
|
:nodeDesc="props.properties.desc"
|
||||||
|
:zoom-state="nodeZoom"
|
||||||
|
@zoom="zoom"
|
||||||
/>
|
/>
|
||||||
<div class="input__container">
|
<div class="input__container" v-show="nodeZoom">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="tag"></div>
|
<div class="tag"></div>
|
||||||
@ -42,7 +44,7 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form__container">
|
<div class="form__container" v-show="nodeZoom">
|
||||||
<el-form
|
<el-form
|
||||||
:inline="true"
|
:inline="true"
|
||||||
:model="formData"
|
:model="formData"
|
||||||
@ -135,7 +137,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||||||
import { getInput } from "@/utils/flow";
|
import { getInput, addNewEdge } from "@/utils/flow";
|
||||||
import { useFlowStore } from "@/store/modules/flow";
|
import { useFlowStore } from "@/store/modules/flow";
|
||||||
import { Plus } from "@element-plus/icons-vue";
|
import { Plus } from "@element-plus/icons-vue";
|
||||||
import NodeTitle from "../../components/NodeTitle.vue";
|
import NodeTitle from "../../components/NodeTitle.vue";
|
||||||
@ -228,6 +230,22 @@ const addFormItem = () => {
|
|||||||
emits("contentChange");
|
emits("contentChange");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const nodeZoom = ref(true)
|
||||||
|
const zoom = (flag) => {
|
||||||
|
nodeZoom.value = flag
|
||||||
|
const nodes = document.getElementsByClassName(props.model.id)
|
||||||
|
if (nodes.length > 0) {
|
||||||
|
const node = nodes[0]
|
||||||
|
const parent = node.closest('.node__box');
|
||||||
|
if (nodeZoom.value) {
|
||||||
|
parent.style.width = '680px'
|
||||||
|
} else {
|
||||||
|
parent.style.width = '300px'
|
||||||
|
}
|
||||||
|
addNewEdge(props.model.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.properties,
|
() => props.properties,
|
||||||
() => {
|
() => {
|
||||||
|
|||||||
@ -1,119 +1,235 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="node__container" ref="switchRef" @mouseleave="setNodeProperties">
|
<div class="node__container" ref="switchRef" @mouseleave="setNodeProperties">
|
||||||
<NodeState :state="nodeOperatingStatus">
|
<NodeState :state="nodeOperatingStatus">
|
||||||
<template #input>
|
<template #input>
|
||||||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||||||
</template>
|
</template>
|
||||||
<template #output>
|
<template #output>
|
||||||
<JsonViewer :value="outputJsonData" copyable boxed sort theme="light" />
|
<JsonViewer :value="outputJsonData" copyable boxed sort theme="light" />
|
||||||
</template>
|
</template>
|
||||||
</NodeState>
|
</NodeState>
|
||||||
<NodeTitle :icon="switchSvg" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '分支'" nodeDesc="连接多个下游分支，根据设定的条件按照顺序查找的方式来匹配运行的分支，如果匹配到某条件则只运行该条件对应的分支，否则继续匹配下一条件直至结束" />
|
<NodeTitle
|
||||||
<div class="condition_title_container">
|
:icon="switchSvg"
|
||||||
<div class="left">
|
:nodeId="props.model.id"
|
||||||
<div class="space"></div>
|
:nodeProperties="props.properties"
|
||||||
<div class="title">所有条件</div>
|
:nodeName="props.properties?.name || '分支'"
|
||||||
</div>
|
nodeDesc="连接多个下游分支，根据设定的条件按照顺序查找的方式来匹配运行的分支，如果匹配到某条件则只运行该条件对应的分支，否则继续匹配下一条件直至结束"
|
||||||
<div class="right">
|
/>
|
||||||
<el-button :disabled="flowStore.disableForm" @click="addFormItem" class="addFormItem">
|
<div class="condition_title_container">
|
||||||
<el-icon :size="20" ><Plus /></el-icon>
|
<div class="left">
|
||||||
</el-button>
|
<div class="space"></div>
|
||||||
</div>
|
<div class="title">所有条件</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="right">
|
||||||
<el-form :inline="true" :model="formData" :rules="rules" ref="dynamicForm" label-position="top" label-width="auto" :disabled="flowStore.disableForm">
|
<el-button
|
||||||
<div class="condition" v-for="(params, index) in formData.nodeParams" :id="params.id">
|
:disabled="flowStore.disableForm"
|
||||||
<div class="title__container">
|
@click="addFormItem"
|
||||||
<div class="left">
|
class="addFormItem"
|
||||||
<div class="space"></div>
|
>
|
||||||
<div class="title">{{ index ===0 ? 'If' : 'Else If' }}</div>
|
<el-icon :size="20"><Plus /></el-icon>
|
||||||
</div>
|
</el-button>
|
||||||
<div class="right">
|
</div>
|
||||||
<el-button :disabled="flowStore.disableForm" circle size="small" @click="deleteFormItem(params.id, index)">
|
|
||||||
<el-icon :size="16" ><Minus /></el-icon>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="withOr">
|
|
||||||
<div class="title">条件</div>
|
|
||||||
<div>
|
|
||||||
<el-select v-model="params.withOr" placeholder="Select" style="width: 240px">
|
|
||||||
<el-option key="and" label="AND" value="and" />
|
|
||||||
<el-option key="or" label="OR" value="or" />
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form__container">
|
|
||||||
<el-row v-for="(property, pIndex) in params.list">
|
|
||||||
<!-- :prop="`nodeParams.${index}.list.${pIndex}.name`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]" -->
|
|
||||||
<el-form-item :label="pIndex === 0 ? '引用变量' : ''" :prop="`nodeParams.${index}.list.${pIndex}.nameType`">
|
|
||||||
<!-- <el-input v-model="property.name" placeholder="请输入" clearable /> -->
|
|
||||||
<el-select v-model="property.nameType" @change="handleTypeChange(index, pIndex)">
|
|
||||||
<el-option label="引用" value="quote" />
|
|
||||||
<el-option label="输入" value="input" />
|
|
||||||
</el-select>
|
|
||||||
<el-form-item v-if="property.nameType === 'input'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.name`">
|
|
||||||
<el-input v-model="property.name" placeholder="请输入" clearable />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-if="property.nameType === 'quote'" :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.nameQuote`">
|
|
||||||
<el-cascader v-model="property.nameQuote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="pIndex === 0 ? '选择条件' : ''" :prop="`nodeParams.${index}.list.${pIndex}.condition`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]">
|
|
||||||
<el-select v-model="property.condition">
|
|
||||||
<el-option label="等于" value="equal" />
|
|
||||||
<el-option label="不等于" value="notEqualTo" />
|
|
||||||
<el-option label="为空" value="null" />
|
|
||||||
<el-option label="不为空" value="notNull" />
|
|
||||||
<el-option label="包含" value="include" />
|
|
||||||
<el-option label="不包含" value="notInclude" />
|
|
||||||
<el-option label="大于" value="greaterThan" />
|
|
||||||
<el-option label="大于等于" value="greaterThanOrEqual" />
|
|
||||||
<el-option label="小于" value="lessThan" />
|
|
||||||
<el-option label="小于等于" value="lessThanOrEqual" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="pIndex === 0 ? '比较值' : ''" :prop="`nodeParams.${index}.list.${pIndex}.type`" >
|
|
||||||
<el-select v-model="property.type" @change="handleTypeChange(index, pIndex)">
|
|
||||||
<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}.list.${pIndex}.input`">
|
|
||||||
<el-input 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}.list.${pIndex}.quote`">
|
|
||||||
<el-cascader v-model="property.quote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item :label="pIndex === 0 ? '操作' : ''">
|
|
||||||
<el-button :disabled="flowStore.disableForm" circle size="small" @click="addListItem(index)">
|
|
||||||
<el-icon :size="12" ><Plus /></el-icon>
|
|
||||||
</el-button>
|
|
||||||
<el-button :disabled="flowStore.disableForm" circle size="small" @click="removeListItem(index, pIndex)">
|
|
||||||
<el-icon :size="12" ><Minus /></el-icon>
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div class="else" :id="''.concat(props.model.id, '_else')">
|
|
||||||
<div class="space"></div>
|
|
||||||
<div class="title">Else</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:model="formData"
|
||||||
|
:rules="rules"
|
||||||
|
ref="dynamicForm"
|
||||||
|
label-position="top"
|
||||||
|
label-width="auto"
|
||||||
|
:disabled="flowStore.disableForm"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="condition"
|
||||||
|
v-for="(params, index) in formData.nodeParams"
|
||||||
|
:id="params.id"
|
||||||
|
>
|
||||||
|
<div class="title__container">
|
||||||
|
<div class="left">
|
||||||
|
<div class="space"></div>
|
||||||
|
<div class="title">{{ index === 0 ? "If" : "Else If" }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<el-button
|
||||||
|
:disabled="flowStore.disableForm"
|
||||||
|
circle
|
||||||
|
size="small"
|
||||||
|
@click="deleteFormItem(params.id, index)"
|
||||||
|
>
|
||||||
|
<el-icon :size="16"><Minus /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="withOr">
|
||||||
|
<div class="title">条件</div>
|
||||||
|
<div>
|
||||||
|
<el-select
|
||||||
|
v-model="params.withOr"
|
||||||
|
placeholder="Select"
|
||||||
|
style="width: 240px"
|
||||||
|
>
|
||||||
|
<el-option key="and" label="AND" value="and" />
|
||||||
|
<el-option key="or" label="OR" value="or" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form__container">
|
||||||
|
<el-row v-for="(property, pIndex) in params.list">
|
||||||
|
<!-- :prop="`nodeParams.${index}.list.${pIndex}.name`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]" -->
|
||||||
|
<el-form-item
|
||||||
|
:label="pIndex === 0 ? '引用变量' : ''"
|
||||||
|
:prop="`nodeParams.${index}.list.${pIndex}.nameType`"
|
||||||
|
>
|
||||||
|
<!-- <el-input v-model="property.name" placeholder="请输入" clearable /> -->
|
||||||
|
<el-select
|
||||||
|
v-model="property.nameType"
|
||||||
|
@change="handleTypeChange(index, pIndex)"
|
||||||
|
>
|
||||||
|
<el-option label="引用" value="quote" />
|
||||||
|
<el-option label="输入" value="input" />
|
||||||
|
</el-select>
|
||||||
|
<el-form-item
|
||||||
|
v-if="property.nameType === 'input'"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入参数值',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:prop="`nodeParams.${index}.list.${pIndex}.name`"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
v-model="property.name"
|
||||||
|
placeholder="请输入"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
v-if="property.nameType === 'quote'"
|
||||||
|
:rules="[
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择参数值',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:prop="`nodeParams.${index}.list.${pIndex}.nameQuote`"
|
||||||
|
>
|
||||||
|
<el-cascader
|
||||||
|
v-model="property.nameQuote"
|
||||||
|
:options="quoteOptions"
|
||||||
|
placeholder="请选择"
|
||||||
|
@visible-change="visibleChange"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
:label="pIndex === 0 ? '选择条件' : ''"
|
||||||
|
:prop="`nodeParams.${index}.list.${pIndex}.condition`"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '请输入变量名', trigger: 'blur' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<el-select v-model="property.condition">
|
||||||
|
<el-option label="等于" value="equal" />
|
||||||
|
<el-option label="不等于" value="notEqualTo" />
|
||||||
|
<el-option label="为空" value="null" />
|
||||||
|
<el-option label="不为空" value="notNull" />
|
||||||
|
<el-option label="包含" value="include" />
|
||||||
|
<el-option label="不包含" value="notInclude" />
|
||||||
|
<el-option label="大于" value="greaterThan" />
|
||||||
|
<el-option label="大于等于" value="greaterThanOrEqual" />
|
||||||
|
<el-option label="小于" value="lessThan" />
|
||||||
|
<el-option label="小于等于" value="lessThanOrEqual" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
:label="pIndex === 0 ? '比较值' : ''"
|
||||||
|
:prop="`nodeParams.${index}.list.${pIndex}.type`"
|
||||||
|
>
|
||||||
|
<el-select
|
||||||
|
v-model="property.type"
|
||||||
|
@change="handleTypeChange(index, pIndex)"
|
||||||
|
>
|
||||||
|
<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}.list.${pIndex}.input`"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
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}.list.${pIndex}.quote`"
|
||||||
|
>
|
||||||
|
<el-cascader
|
||||||
|
v-model="property.quote"
|
||||||
|
:options="quoteOptions"
|
||||||
|
placeholder="请选择"
|
||||||
|
@visible-change="visibleChange"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="pIndex === 0 ? '操作' : ''">
|
||||||
|
<el-button
|
||||||
|
:disabled="flowStore.disableForm"
|
||||||
|
circle
|
||||||
|
size="small"
|
||||||
|
@click="addListItem(index)"
|
||||||
|
>
|
||||||
|
<el-icon :size="12"><Plus /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
:disabled="flowStore.disableForm"
|
||||||
|
circle
|
||||||
|
size="small"
|
||||||
|
@click="removeListItem(index, pIndex)"
|
||||||
|
>
|
||||||
|
<el-icon :size="12"><Minus /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="else" :id="''.concat(props.model.id, '_else')">
|
||||||
|
<div class="space"></div>
|
||||||
|
<div class="title">Else</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
|
||||||
import NodeTitle from '../../components/NodeTitle.vue'
|
import NodeTitle from "../../components/NodeTitle.vue";
|
||||||
import NodeState from "../../components/NodeState.vue";
|
import NodeState from "../../components/NodeState.vue";
|
||||||
import switchSvg from '../../icon/switch.svg'
|
import switchSvg from "../../icon/switch.svg";
|
||||||
import { v4 as randomUUID } from 'uuid'
|
import { v4 as randomUUID } from "uuid";
|
||||||
import { useFlowStore } from '@/store/modules/flow'
|
import { useFlowStore } from "@/store/modules/flow";
|
||||||
import { Plus, Minus } from '@element-plus/icons-vue'
|
import { Plus, Minus } from "@element-plus/icons-vue";
|
||||||
import { getInput, addNewEdge, removeSwitchEdge } from '@/utils/flow'
|
import { getInput, addNewEdge, removeSwitchEdge } from "@/utils/flow";
|
||||||
import { emitter } from "@/utils/eventBus";
|
import { emitter } from "@/utils/eventBus";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -123,130 +239,137 @@ const props = defineProps({
|
|||||||
nowTime: Number,
|
nowTime: Number,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emits = defineEmits(['addAnchor', 'removeAnchor', 'bindRef', 'changeAnchor'])
|
const emits = defineEmits([
|
||||||
|
"addAnchor",
|
||||||
|
"removeAnchor",
|
||||||
|
"bindRef",
|
||||||
|
"changeAnchor",
|
||||||
|
]);
|
||||||
|
|
||||||
const switchRef = ref()
|
const switchRef = ref();
|
||||||
const dynamicForm = ref()
|
const dynamicForm = ref();
|
||||||
const flowStore = useFlowStore()
|
const flowStore = useFlowStore();
|
||||||
|
|
||||||
const formData = reactive({
|
const formData = reactive({
|
||||||
nodeParams: props.properties?.conditions || []
|
nodeParams: props.properties?.conditions || [],
|
||||||
})
|
});
|
||||||
|
|
||||||
const addFormItem = () => {
|
const addFormItem = () => {
|
||||||
const rect = switchRef.value.getBoundingClientRect();
|
const rect = switchRef.value.getBoundingClientRect();
|
||||||
addCondition(rect.height - 60)
|
addCondition(rect.height - 60);
|
||||||
}
|
};
|
||||||
|
|
||||||
const deleteFormItem = (id, index) => {
|
const deleteFormItem = (id, index) => {
|
||||||
if (index === 0) {
|
if (index === 0) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
formData.nodeParams.splice(index, 1)
|
formData.nodeParams.splice(index, 1);
|
||||||
emits('removeAnchor', id)
|
emits("removeAnchor", id);
|
||||||
removeSwitchEdge(props.model.id, id)
|
removeSwitchEdge(props.model.id, id);
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
changeFormItemHeight()
|
changeFormItemHeight();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const quoteOptions = ref([])
|
const quoteOptions = ref([]);
|
||||||
const handleTypeChange = (pIndex, index) => {
|
const handleTypeChange = (pIndex, index) => {
|
||||||
if (formData.nodeParams[pIndex].list[index].type === 'input') {
|
if (formData.nodeParams[pIndex].list[index].type === "input") {
|
||||||
formData.nodeParams[pIndex].list[index].quote = ""
|
formData.nodeParams[pIndex].list[index].quote = "";
|
||||||
} else {
|
} else {
|
||||||
formData.nodeParams[pIndex].list[index].input = ""
|
formData.nodeParams[pIndex].list[index].input = "";
|
||||||
const option = getInput(props.model.id, false)
|
const option = getInput(props.model.id, false);
|
||||||
if (option) {
|
if (option) {
|
||||||
quoteOptions.value = option
|
quoteOptions.value = option;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const addCondition = (height) => {
|
const addCondition = (height) => {
|
||||||
const id = randomUUID().replace(/-/g, '')
|
const id = randomUUID().replace(/-/g, "");
|
||||||
formData.nodeParams.push({
|
formData.nodeParams.push({
|
||||||
id,
|
id,
|
||||||
withOr: 'and',
|
withOr: "and",
|
||||||
list: [{
|
list: [
|
||||||
name: '',
|
{
|
||||||
nameQuote: '',
|
name: "",
|
||||||
nameType: 'input',
|
nameQuote: "",
|
||||||
type: 'input',
|
nameType: "input",
|
||||||
input: '',
|
type: "input",
|
||||||
quote: ''
|
input: "",
|
||||||
}]
|
quote: "",
|
||||||
})
|
},
|
||||||
emits('addAnchor', height, id)
|
],
|
||||||
|
});
|
||||||
|
emits("addAnchor", height, id);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
addNewEdge(props.model.id)
|
addNewEdge(props.model.id);
|
||||||
}, 50)
|
}, 50);
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
changeFormItemHeight()
|
changeFormItemHeight();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const addListItem = (pIndex, cIndex) => {
|
const addListItem = (pIndex, cIndex) => {
|
||||||
formData.nodeParams[pIndex].list.push({
|
formData.nodeParams[pIndex].list.push({
|
||||||
name: '',
|
name: "",
|
||||||
nameQuote: '',
|
nameQuote: "",
|
||||||
nameType: 'input',
|
nameType: "input",
|
||||||
type: 'input',
|
type: "input",
|
||||||
input: '',
|
input: "",
|
||||||
quote: ''
|
quote: "",
|
||||||
})
|
});
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
changeFormItemHeight()
|
changeFormItemHeight();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const removeListItem = (pIndex, cIndex) => {
|
const removeListItem = (pIndex, cIndex) => {
|
||||||
if (cIndex === 0) {
|
if (cIndex === 0) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
formData.nodeParams[pIndex].list.splice(cIndex, 1)
|
formData.nodeParams[pIndex].list.splice(cIndex, 1);
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
changeFormItemHeight()
|
changeFormItemHeight();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const changeFormItemHeight = () => {
|
const changeFormItemHeight = () => {
|
||||||
formData.nodeParams.forEach(item => {
|
formData.nodeParams.forEach((item) => {
|
||||||
const node = document.getElementById(item.id)
|
const node = document.getElementById(item.id);
|
||||||
emits('changeAnchor', node.offsetTop, item.id)
|
emits("changeAnchor", node.offsetTop, item.id);
|
||||||
});
|
});
|
||||||
|
|
||||||
const node = document.getElementById("".concat(props.model.id, "_else"))
|
const node = document.getElementById("".concat(props.model.id, "_else"));
|
||||||
emits('changeAnchor', node.offsetTop, "".concat(props.model.id, "_else"))
|
emits("changeAnchor", node.offsetTop, "".concat(props.model.id, "_else"));
|
||||||
}
|
};
|
||||||
|
|
||||||
const setNodeProperties = async () => {
|
const setNodeProperties = async () => {
|
||||||
try {
|
try {
|
||||||
const valid = await dynamicForm.value.validate()
|
const valid = await dynamicForm.value.validate();
|
||||||
if (valid) {
|
if (valid) {
|
||||||
const data = toRaw(formData)
|
const data = toRaw(formData);
|
||||||
const properties = lf.getProperties(props.model.id)
|
const properties = lf.getProperties(props.model.id);
|
||||||
lf.setProperties(props.model.id, {
|
lf.setProperties(props.model.id, {
|
||||||
...properties,
|
...properties,
|
||||||
...data
|
...data,
|
||||||
})
|
});
|
||||||
emits('contentChange')
|
emits("contentChange");
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
dynamicForm.value.clearValidate()
|
dynamicForm.value.clearValidate();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const visibleChange = (value) => {
|
const visibleChange = (value) => {
|
||||||
if (value) {
|
if (value) {
|
||||||
const option = getInput(props.model.id)
|
const option = getInput(props.model.id);
|
||||||
if (option) {
|
if (option) {
|
||||||
quoteOptions.value = option
|
quoteOptions.value = option;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const nodeOperatingStatus = ref("NORMAL");
|
const nodeOperatingStatus = ref("NORMAL");
|
||||||
const inputJsonData = ref({});
|
const inputJsonData = ref({});
|
||||||
@ -256,22 +379,23 @@ watch(
|
|||||||
() => props.properties,
|
() => props.properties,
|
||||||
() => {
|
() => {
|
||||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||||
formData.nodeParams = props.properties.nodeParams
|
formData.nodeParams = props.properties.nodeParams;
|
||||||
} else {
|
} else {
|
||||||
if (formData.nodeParams.length === 0) {
|
if (formData.nodeParams.length === 0) {
|
||||||
addCondition(100)
|
addCondition(100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true
|
deep: true,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
emits('addAnchor', 280, "".concat(props.model.id, "_else"))
|
emits("addAnchor", 280, "".concat(props.model.id, "_else"));
|
||||||
|
|
||||||
emits('bindRef', dynamicForm.value)
|
emits("bindRef", dynamicForm.value);
|
||||||
|
|
||||||
emitter.on("changeNodeState", (data) => {
|
emitter.on("changeNodeState", (data) => {
|
||||||
if (data.nodeId === props.model.id) {
|
if (data.nodeId === props.model.id) {
|
||||||
@ -301,15 +425,12 @@ onMounted(() => {
|
|||||||
emits("contentChange");
|
emits("contentChange");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
});
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
emitter.off("changeNodeState");
|
emitter.off("changeNodeState");
|
||||||
emitter.off("contentChange");
|
emitter.off("contentChange");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.node__container {
|
.node__container {
|
||||||
@ -346,8 +467,6 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.el-button {
|
.el-button {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
@ -397,7 +516,6 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:deep(.form__container) {
|
:deep(.form__container) {
|
||||||
|
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
@ -423,18 +541,18 @@ onUnmounted(() => {
|
|||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
|
||||||
.space {
|
.space {
|
||||||
width: 4px;
|
width: 4px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
background: rgb(22, 100, 255);
|
background: rgb(22, 100, 255);
|
||||||
border-radius: 0px 4px 4px 0px;
|
border-radius: 0px 4px 4px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -35,8 +35,8 @@ export default defineConfig(({mode, command}) => {
|
|||||||
//杨 http://192.168.0.10:13080
|
//杨 http://192.168.0.10:13080
|
||||||
//赵 http://10.148.108.58:13080
|
//赵 http://10.148.108.58:13080
|
||||||
// dev http://10.148.20.34:13080
|
// dev http://10.148.20.34:13080
|
||||||
// target: VITE_API_URL,
|
target: VITE_API_URL,
|
||||||
target: command === 'build' ? VITE_API_URL : 'http://192.168.0.10:13080',
|
// target: command === 'build' ? VITE_API_URL : 'http://192.168.0.10:13080',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user