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 2025-11-17 14:54:32 +08:00
parent 592ebddc25
commit 9a7afa8f6e
10 changed files with 1564 additions and 1219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/utils/flow.js
View File

@ -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 => {

388
src/views/flow/components/NodeTitle.vue
View File

@ -1,171 +1,217 @@
<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>
<el-button circle size="small" @click="deleteNode"> <el-button
<el-icon><Delete /></el-icon> class="input_name_closeBold"
</el-button> circle
</div> size="small"
</div> @click="cancelNodeName"
<div class="subTitle">{{ props.nodeDesc }}</div> >
</div> <el-icon><CloseBold /></el-icon>
</template> </el-button>
<script setup lang="js"> </div>
import { ref } from 'vue' </div>
import { EditPen, Select, CloseBold, Delete } from '@element-plus/icons-vue' </div>
import { ElMessageBox } from 'element-plus' <div class="right">
<el-tooltip
const props = defineProps({ class="box-item"
icon: { effect="dark"
type: String, :content="zoomState ? '缩小' : '放大'"
default: '' placement="top"
}, >
nodeId: { <el-button v-if="showZoom" circle size="small" @click="zoom">
type: String, <el-icon>
default: '' <ZoomOut v-if="zoomState" />
}, <ZoomIn v-else />
nodeProperties: { </el-icon>
type: Object, </el-button>
default: () => {} </el-tooltip>
}, <el-tooltip
nodeDesc: { class="box-item"
type: String, effect="dark"
default: '' content="删除"
}, placement="top"
nodeName: { >
type: String, <el-button circle size="small" @click="deleteNode">
default: '' <el-icon><Delete /></el-icon>
}, </el-button>
nodeType: { </el-tooltip>
type: String, </div>
default: '' </div>
} <div class="subTitle">{{ props.nodeDesc }}</div>
}) </div>
</template>
const showTextTitle = ref(true) <script setup lang="js">
const nodeName = ref(props.nodeProperties.name || props.nodeName) import { ref } from 'vue'
import { EditPen, Select, CloseBold, Delete, ZoomOut, ZoomIn } from '@element-plus/icons-vue'
const confirmNodeName = () => { import { ElMessageBox } from 'element-plus'
const properties = lf.getProperties(props.nodeId)
lf.setProperties(props.nodeId, { const props = defineProps({
...properties, icon: {
name: nodeName.value type: String,
}) default: ''
showTextTitle.value = true },
} nodeId: {
type: String,
const cancelNodeName = () => { default: ''
nodeName.value = props.nodeProperties?.name || props.nodeName },
showTextTitle.value = true nodeProperties: {
} type: Object,
default: () => {}
const deleteNode = () => { },
ElMessageBox.confirm( nodeDesc: {
'是否删除该节点?', type: String,
'警告', default: ''
{ },
confirmButtonText: '确定', nodeName: {
cancelButtonText: '取消', type: String,
type: 'warning', default: ''
} },
) nodeType: {
.then(() => { type: String,
if (props.nodeType === 'selectArea') { default: ''
const children = lf.getNodeModelById(props.nodeId).children },
lf.getNodeModelById(props.nodeId).children = [] showZoom: {
children.forEach(item => { type: Boolean,
lf.getNodeModelById(item).draggable = true default: true
}) },
} zoomState: {
lf.deleteNode(props.nodeId); type: Boolean,
}) default: false
} }
</script> })
<style lang="scss" scoped>
.title__container { const emits = defineEmits(['zoom'])
.title {
display: flex; const showTextTitle = ref(true)
align-items: center; const nodeName = ref(props.nodeProperties.name || props.nodeName)
justify-content: space-between;
const confirmNodeName = () => {
.left { const properties = lf.getProperties(props.nodeId)
display: flex; lf.setProperties(props.nodeId, {
...properties,
img { name: nodeName.value
width: 24px; })
height: 24px; showTextTitle.value = true
} }
.text__container { const cancelNodeName = () => {
.text__title { nodeName.value = props.nodeProperties?.name || props.nodeName
display: flex; showTextTitle.value = true
align-items: center; }
.text { const deleteNode = () => {
font-size: 16px; ElMessageBox.confirm(
font-weight: bold; '是否删除该节点?',
margin: 0 12px; '警告',
} {
confirmButtonText: '确定',
.editIcon { cancelButtonText: '取消',
cursor: pointer; type: 'warning',
} }
} )
.then(() => {
.input_name_container { if (props.nodeType === 'selectArea') {
display: flex; const children = lf.getNodeModelById(props.nodeId).children
align-items: center; lf.getNodeModelById(props.nodeId).children = []
children.forEach(item => {
.el-input { lf.getNodeModelById(item).draggable = true
margin-left: 12px; })
} }
lf.deleteNode(props.nodeId);
.input_name_select { })
color: #00b42a; }
margin-left: 4px;
border: none; const zoom = () => {
} emits('zoom', !props.zoomState)
}
.input_name_closeBold { </script>
color: #f53f3f; <style lang="scss" scoped>
margin-left: 4px; .title__container {
border: none; .title {
} display: flex;
} align-items: center;
} justify-content: space-between;
}
.left {
.right { display: flex;
cursor: pointer;
img {
.el-button { width: 24px;
border: none; height: 24px;
} }
}
} .text__container {
.text__title {
.subTitle { display: flex;
color: #737a87; align-items: center;
font-size: 12px;
margin: 8px 0; .text {
} font-size: 16px;
} font-weight: bold;
</style> 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 {
cursor: pointer;
.el-button {
border: none;
}
}
}
.subTitle {
color: #737a87;
font-size: 12px;
margin: 8px 0;
}
}
</style>

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

@ -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, // 强制全局锚点显示

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

@ -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;
} }

247
src/views/flow/nodes/common/serviceNode.vue
View File

@ -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,33 +250,33 @@ 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) {
const data = toRaw(formData); const data = toRaw(formData);
const properties = lf.getProperties(props.model.id); const properties = lf.getProperties(props.model.id);
@ -287,20 +347,36 @@ const addFormItem = () => {
// 删除顶层表单项 // 删除顶层表单项
const deleteTopLevelItem = (fullPath) => { const deleteTopLevelItem = (fullPath) => {
// 从顶层数据开始查找 // 从顶层数据开始查找
let currentLevel = formData.outputParams; let currentLevel = formData.outputParams;
// 遍历路径（除最后一个索引，因为最后一个是要删除的项） // 遍历路径（除最后一个索引，因为最后一个是要删除的项）
for (let i = 0; i < fullPath.length - 1; i++) { for (let i = 0; i < fullPath.length - 1; i++) {
const index = fullPath[i]; const index = fullPath[i];
// 进入下一层级 // 进入下一层级
currentLevel = currentLevel[index].children; currentLevel = currentLevel[index].children;
} }
// 最后一个索引是当前层级要删除的项 // 最后一个索引是当前层级要删除的项
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) => {
@ -509,13 +588,13 @@ defineExpose({
:deep(.el-row) { :deep(.el-row) {
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 {

63
src/views/flow/nodes/common/startNode.vue
View File

@ -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;
}
} }
} }

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

@ -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>

868
src/views/flow/nodes/function/sleep.vue
View File

@ -1,425 +1,443 @@
<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 v-if="props.properties.outputType === 'json'" :value="outputJsonData" copyable boxed sort theme="light" />
<el-image <el-image
v-if="props.properties.outputType === 'img'" v-if="props.properties.outputType === 'img'"
v-for="item in outputJsonData.imageUrl" v-for="item in outputJsonData.imageUrl"
style="width: 60px; height: 60px" style="width: 60px; height: 60px"
:src="item" :src="item"
:preview-src-list="outputJsonData.imageUrl" :preview-src-list="outputJsonData.imageUrl"
:preview-teleported="true" :preview-teleported="true"
show-progress show-progress
fit="fill" 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
:icon="props.properties.icon" :icon="props.properties.icon"
:nodeId="props.model.id" :nodeId="props.model.id"
: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"
<div class="input__container"> @zoom="zoom"
<div class="title"> />
<div class="left"> <div class="input__container" v-show="nodeZoom">
<div class="tag"></div> <div class="title">
<div class="text">输入</div> <div class="left">
</div> <div class="tag"></div>
<div class="right" v-if="properties.properties?.canAddFormItem"> <div class="text">输入</div>
<el-button </div>
:disabled="flowStore.disableForm" <div class="right" v-if="properties.properties?.canAddFormItem">
@click="addFormItem" <el-button
class="addFormItem" :disabled="flowStore.disableForm"
> @click="addFormItem"
<el-icon :size="20"><Plus /></el-icon> class="addFormItem"
</el-button> >
</div> <el-icon :size="20"><Plus /></el-icon>
</div> </el-button>
<div class="form__container"> </div>
<el-form </div>
:inline="true" <div class="form__container" v-show="nodeZoom">
:model="formData" <el-form
:rules="rules" :inline="true"
ref="dynamicForm" :model="formData"
label-position="top" :rules="rules"
label-width="auto" ref="dynamicForm"
:disabled="flowStore.disableForm" label-position="top"
> label-width="auto"
<div v-for="(property, index) in formData.nodeParams" :key="index"> :disabled="flowStore.disableForm"
<el-row> >
<el-form-item <div v-for="(property, index) in formData.nodeParams" :key="index">
:label="index === 0 ? '参数名' : ''" <el-row>
:prop="`nodeParams.${index}.name`" <el-form-item
:rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]" :label="index === 0 ? '参数名' : ''"
> :prop="`nodeParams.${index}.name`"
<el-input :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]"
:disabled="property?.disabled || false" >
v-model="property.name" <el-input
placeholder="请输入" :disabled="property?.disabled || false"
clearable v-model="property.name"
/> placeholder="请输入"
</el-form-item> clearable
<el-form-item />
:label="index === 0 ? '参数值' : ''" </el-form-item>
:prop="`nodeParams.${index}.type`" <el-form-item
> :label="index === 0 ? '参数值' : ''"
<el-select v-model="property.type" @change="handleTypeChange(index)"> :prop="`nodeParams.${index}.type`"
<el-option label="引用" value="quote" /> >
<el-option label="输入" value="input" /> <el-select v-model="property.type" @change="handleTypeChange(index)">
</el-select> <el-option label="引用" value="quote" />
<el-form-item <el-option label="输入" value="input" />
v-if="property.type === 'input'" </el-select>
:rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" <el-form-item
:prop="`nodeParams.${index}.input`" v-if="property.type === 'input'"
> :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]"
<el-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable /> :prop="`nodeParams.${index}.input`"
<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-input-number v-if="property.componentType === 'number'" v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
</el-select> <el-select v-model="property.input" v-else-if="property.componentType === 'select'" >
<el-input v-else v-model="property.input" placeholder="请输入" clearable /> <el-option v-for="item in property.selectOptions" :key="item" :label="item" :value="item" />
</el-form-item> </el-select>
<el-form-item <el-input v-else v-model="property.input" placeholder="请输入" clearable />
v-if="property.type === 'quote'" </el-form-item>
:rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" <el-form-item
:prop="`nodeParams.${index}.quote`" v-if="property.type === 'quote'"
> :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]"
<el-cascader :prop="`nodeParams.${index}.quote`"
v-model="property.quote" >
:options="quoteOptions" <el-cascader
placeholder="请选择" v-model="property.quote"
@visible-change="visibleChange" :options="quoteOptions"
/> placeholder="请选择"
</el-form-item> @visible-change="visibleChange"
</el-form-item> />
</el-row> </el-form-item>
</div> </el-form-item>
</el-form> </el-row>
</div> </div>
</div> </el-form>
<div class="output__container" v-if="props.properties?.outputParams?.length > 0"> </div>
<div class="title"> </div>
<div class="tag"></div> <div class="output__container" v-if="props.properties?.outputParams?.length > 0">
<div class="text">输出</div> <div class="title">
</div> <div class="tag"></div>
<div class="text">输出</div>
<div class="form__container"> </div>
<el-form
:inline="true" <div class="form__container">
label-position="top" <el-form
label-width="auto" :inline="true"
:disabled="true" label-position="top"
> label-width="auto"
<el-row v-for="(item, index) in props.properties.outputParams"> :disabled="true"
<el-form-item label="参数名" > >
<el-input :value="item.name" /> <el-row v-for="(item, index) in props.properties.outputParams">
</el-form-item> <el-form-item label="参数名" >
<el-form-item label="参数类型" > <el-input :value="item.name" />
<el-input :value="item.type" /> </el-form-item>
</el-form-item> <el-form-item label="参数类型" >
<el-form-item label="描述" > <el-input :value="item.type" />
<el-input :value="item.desc" /> </el-form-item>
</el-form-item> <el-form-item label="描述" >
</el-row> <el-input :value="item.desc" />
</el-form> </el-form-item>
</div> </el-row>
</div> </el-form>
</div> </div>
</template> </div>
</div>
<script setup> </template>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { getInput } from "@/utils/flow"; <script setup>
import { useFlowStore } from "@/store/modules/flow"; import { ref, reactive, onMounted, onUnmounted } from "vue";
import { Plus } from "@element-plus/icons-vue"; import { getInput, addNewEdge } from "@/utils/flow";
import NodeTitle from "../../components/NodeTitle.vue"; import { useFlowStore } from "@/store/modules/flow";
import NodeState from "../../components/NodeState.vue"; import { Plus } from "@element-plus/icons-vue";
import "vue3-json-viewer/dist/index.css"; import NodeTitle from "../../components/NodeTitle.vue";
import { emitter } from "@/utils/eventBus"; import NodeState from "../../components/NodeState.vue";
import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue"; import "vue3-json-viewer/dist/index.css";
import { emitter } from "@/utils/eventBus";
const props = defineProps({ import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
model: Object,
properties: Object, const props = defineProps({
}); model: Object,
properties: Object,
const emits = defineEmits(["contentChange"]); });
const flowStore = useFlowStore(); const emits = defineEmits(["contentChange"]);
const formData = reactive({ const flowStore = useFlowStore();
nodeParams: [],
}); const formData = reactive({
nodeParams: [],
const rules = reactive({}); });
const quoteOptions = ref([]); const rules = reactive({});
const handleTypeChange = (index) => {
if (formData.nodeParams[index].type === "input") { const quoteOptions = ref([]);
formData.nodeParams[index].quote = ""; const handleTypeChange = (index) => {
} else { if (formData.nodeParams[index].type === "input") {
formData.nodeParams[index].input = ""; formData.nodeParams[index].quote = "";
const option = getInput(props.model.id); } else {
if (option) { formData.nodeParams[index].input = "";
quoteOptions.value = option; const option = getInput(props.model.id);
} if (option) {
} quoteOptions.value = option;
}; }
}
const dynamicForm = ref(); };
const setNodeProperties = async () => { const dynamicForm = ref();
try {
const result = await dynamicForm.value.validate(); const setNodeProperties = async () => {
if (result) { try {
const data = toRaw(formData); const result = await dynamicForm.value.validate();
const properties = lf.getProperties(props.model.id); if (result) {
lf.setProperties(props.model.id, { const data = toRaw(formData);
...properties, const properties = lf.getProperties(props.model.id);
...data, lf.setProperties(props.model.id, {
}); ...properties,
emits("contentChange"); ...data,
} });
} catch { emits("contentChange");
dynamicForm.value.clearValidate(); }
} } catch {
}; dynamicForm.value.clearValidate();
}
const nodeOperatingStatus = ref("NORMAL"); };
const inputJsonData = ref({});
const outputJsonData = ref({}); const nodeOperatingStatus = ref("NORMAL");
const inputJsonData = ref({});
const visibleChange = (value) => { const outputJsonData = ref({});
if (value) {
const option = getInput(props.model.id); const visibleChange = (value) => {
if (option) { if (value) {
quoteOptions.value = option; const option = getInput(props.model.id);
} if (option) {
} quoteOptions.value = option;
}; }
}
const validateForm = async () => { };
try {
const result = await dynamicForm.value.validate(); const validateForm = async () => {
if (result) { try {
return { valid: true, message: "验证通过" }; const result = await dynamicForm.value.validate();
} else { if (result) {
return { valid: false, message: "验证失败" }; return { valid: true, message: "验证通过" };
} } else {
} catch { return { valid: false, message: "验证失败" };
return { valid: false, message: "验证失败" }; }
} } catch {
}; return { valid: false, message: "验证失败" };
}
const addFormItem = () => { };
formData.nodeParams.push({
name: "", const addFormItem = () => {
type: "", formData.nodeParams.push({
desc: "", name: "",
required: false, type: "",
children: [], desc: "",
}); required: false,
emits("contentChange"); children: [],
}; });
emits("contentChange");
watch( };
() => props.properties,
() => { const nodeZoom = ref(true)
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) { const zoom = (flag) => {
formData.nodeParams = props.properties.nodeParams; nodeZoom.value = flag
const option = getInput(props.model.id); const nodes = document.getElementsByClassName(props.model.id)
if (option) { if (nodes.length > 0) {
quoteOptions.value = option; const node = nodes[0]
} const parent = node.closest('.node__box');
} if (nodeZoom.value) {
}, parent.style.width = '680px'
{ } else {
immediate: true, parent.style.width = '300px'
deep: true, }
} addNewEdge(props.model.id)
); }
}
onMounted(() => {
emitter.on("changeNodeState", (data) => { watch(
if (data.nodeId === props.model.id) { () => props.properties,
nodeOperatingStatus.value = data.status; () => {
let inputData = {}; if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
let output = {}; formData.nodeParams = props.properties.nodeParams;
try { const option = getInput(props.model.id);
inputData = JSON.parse(data.paramsIn) || {}; if (option) {
output = JSON.parse(data.paramsOut) || {}; quoteOptions.value = option;
} catch (error) { }
inputData = data.paramsIn || {}; }
output = data.paramsOut || {}; },
} {
inputJsonData.value = inputData; immediate: true,
outputJsonData.value = output; deep: true,
emits("contentChange"); }
} );
});
onMounted(() => {
emitter.on("contentChange", (data) => { emitter.on("changeNodeState", (data) => {
if (data.id === props.model.id) { if (data.nodeId === props.model.id) {
nodeOperatingStatus.value = "NORMAL"; nodeOperatingStatus.value = data.status;
inputJsonData.value = {}; let inputData = {};
outputJsonData.value = {}; let output = {};
emits("contentChange"); try {
} inputData = JSON.parse(data.paramsIn) || {};
}); output = JSON.parse(data.paramsOut) || {};
}); } catch (error) {
inputData = data.paramsIn || {};
onUnmounted(() => { output = data.paramsOut || {};
emitter.off("changeNodeState"); }
emitter.off("contentChange"); inputJsonData.value = inputData;
}); outputJsonData.value = output;
emits("contentChange");
defineExpose({ }
validateForm, });
setNodeProperties,
}); emitter.on("contentChange", (data) => {
</script> if (data.id === props.model.id) {
nodeOperatingStatus.value = "NORMAL";
<style lang="scss" scoped> inputJsonData.value = {};
.node__container { outputJsonData.value = {};
width: 100%; emits("contentChange");
height: auto; }
});
.input__container { });
width: 100%;
background-color: #fafbfc; onUnmounted(() => {
padding: 0 16px; emitter.off("changeNodeState");
border-radius: 8px; emitter.off("contentChange");
box-sizing: border-box; });
.title { defineExpose({
height: 32px; validateForm,
display: flex; setNodeProperties,
align-items: center; });
justify-content: space-between; </script>
.left { <style lang="scss" scoped>
display: flex; .node__container {
align-items: center; width: 100%;
height: auto;
.tag {
width: 3px; .input__container {
height: 16px; width: 100%;
background: #1664ff; background-color: #fafbfc;
border-radius: 0 4px 4px 0; padding: 0 16px;
margin-right: 12px; border-radius: 8px;
} box-sizing: border-box;
.text { .title {
font-size: 16px; height: 32px;
font-weight: 700; display: flex;
color: #0c0d0e; align-items: center;
} justify-content: space-between;
}
.left {
.right { display: flex;
.addFormItem { align-items: center;
border: none;
background: transparent; .tag {
cursor: pointer; width: 3px;
} height: 16px;
} background: #1664ff;
} border-radius: 0 4px 4px 0;
margin-right: 12px;
.form__container { }
margin: 12px 0;
.text {
.sub-properties { font-size: 16px;
margin-left: 10px; font-weight: 700;
.zw { color: #0c0d0e;
margin-left: 15px; }
&::before { }
content: "";
position: absolute; .right {
left: 0; .addFormItem {
top: -4px; border: none;
width: 10px; background: transparent;
border-left: 1px solid gray; cursor: pointer;
border-bottom: 1px solid gray; }
border-bottom-left-radius: 4px; }
background-color: transparent; }
height: 24px;
} .form__container {
} margin: 12px 0;
}
.sub-properties {
.gSon-properties { margin-left: 10px;
margin-left: 10px; .zw {
.zw { margin-left: 15px;
margin-left: 15px; &::before {
&::before { content: "";
content: ""; position: absolute;
position: absolute; left: 0;
left: 0; top: -4px;
top: -4px; width: 10px;
width: 10px; border-left: 1px solid gray;
border-left: 1px solid gray; border-bottom: 1px solid gray;
border-bottom: 1px solid gray; border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px; background-color: transparent;
background-color: transparent; height: 24px;
height: 24px; }
} }
} }
}
} .gSon-properties {
} margin-left: 10px;
.zw {
.output__container { margin-left: 15px;
width: 100%; &::before {
background-color: #fafbfc; content: "";
padding: 0 16px; position: absolute;
border-radius: 8px; left: 0;
box-sizing: border-box; top: -4px;
width: 10px;
.title { border-left: 1px solid gray;
height: 32px; border-bottom: 1px solid gray;
display: flex; border-bottom-left-radius: 4px;
align-items: center; background-color: transparent;
height: 24px;
.tag { }
width: 3px; }
height: 16px; }
background: #1664ff; }
border-radius: 0 4px 4px 0; }
margin-right: 12px;
} .output__container {
width: 100%;
.text { background-color: #fafbfc;
font-size: 16px; padding: 0 16px;
font-weight: 700; border-radius: 8px;
color: #0c0d0e; box-sizing: border-box;
}
} .title {
height: 32px;
.form__container { display: flex;
margin: 12px 0; align-items: center;
}
} .tag {
width: 3px;
:deep(.el-row) { height: 16px;
align-items: end; background: #1664ff;
border-radius: 0 4px 4px 0;
.el-input { margin-right: 12px;
--el-input-width: 170px; }
}
.text {
.el-select { font-size: 16px;
--el-select-width: 170px; font-weight: 700;
} color: #0c0d0e;
}
.el-cascader { }
--el-form-inline-content-width: 170px;
} .form__container {
} margin: 12px 0;
} }
</style> }
: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>

998
src/views/flow/nodes/function/switch.vue
View File

@ -1,440 +1,558 @@
<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)"> </div>
<el-icon :size="16" ><Minus /></el-icon> <div>
</el-button> <el-form
</div> :inline="true"
</div> :model="formData"
<div class="withOr"> :rules="rules"
<div class="title">条件</div> ref="dynamicForm"
<div> label-position="top"
<el-select v-model="params.withOr" placeholder="Select" style="width: 240px"> label-width="auto"
<el-option key="and" label="AND" value="and" /> :disabled="flowStore.disableForm"
<el-option key="or" label="OR" value="or" /> >
</el-select> <div
</div> class="condition"
</div> v-for="(params, index) in formData.nodeParams"
<div class="form__container"> :id="params.id"
<el-row v-for="(property, pIndex) in params.list"> >
<!-- :prop="`nodeParams.${index}.list.${pIndex}.name`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]" --> <div class="title__container">
<el-form-item :label="pIndex === 0 ? '引用变量' : ''" :prop="`nodeParams.${index}.list.${pIndex}.nameType`"> <div class="left">
<!-- <el-input v-model="property.name" placeholder="请输入" clearable /> --> <div class="space"></div>
<el-select v-model="property.nameType" @change="handleTypeChange(index, pIndex)"> <div class="title">{{ index === 0 ? "If" : "Else If" }}</div>
<el-option label="引用" value="quote" /> </div>
<el-option label="输入" value="input" /> <div class="right">
</el-select> <el-button
<el-form-item v-if="property.nameType === 'input'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.name`"> :disabled="flowStore.disableForm"
<el-input v-model="property.name" placeholder="请输入" clearable /> circle
</el-form-item> size="small"
<el-form-item v-if="property.nameType === 'quote'" :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.nameQuote`"> @click="deleteFormItem(params.id, index)"
<el-cascader v-model="property.nameQuote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange" /> >
</el-form-item> <el-icon :size="16"><Minus /></el-icon>
</el-form-item> </el-button>
<el-form-item :label="pIndex === 0 ? '选择条件' : ''" :prop="`nodeParams.${index}.list.${pIndex}.condition`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]"> </div>
<el-select v-model="property.condition"> </div>
<el-option label="等于" value="equal" /> <div class="withOr">
<el-option label="不等于" value="notEqualTo" /> <div class="title">条件</div>
<el-option label="为空" value="null" /> <div>
<el-option label="不为空" value="notNull" /> <el-select
<el-option label="包含" value="include" /> v-model="params.withOr"
<el-option label="不包含" value="notInclude" /> placeholder="Select"
<el-option label="大于" value="greaterThan" /> style="width: 240px"
<el-option label="大于等于" value="greaterThanOrEqual" /> >
<el-option label="小于" value="lessThan" /> <el-option key="and" label="AND" value="and" />
<el-option label="小于等于" value="lessThanOrEqual" /> <el-option key="or" label="OR" value="or" />
</el-select> </el-select>
</el-form-item> </div>
<el-form-item :label="pIndex === 0 ? '比较值' : ''" :prop="`nodeParams.${index}.list.${pIndex}.type`" > </div>
<el-select v-model="property.type" @change="handleTypeChange(index, pIndex)"> <div class="form__container">
<el-option label="引用" value="quote" /> <el-row v-for="(property, pIndex) in params.list">
<el-option label="输入" value="input" /> <!-- :prop="`nodeParams.${index}.list.${pIndex}.name`" :rules="[{ required: true, message: '请输入变量名', trigger: 'blur' }]" -->
</el-select> <el-form-item
<el-form-item v-if="property.type === 'input'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.input`"> :label="pIndex === 0 ? '引用变量' : ''"
<el-input v-model="property.input" placeholder="请输入" clearable /> :prop="`nodeParams.${index}.list.${pIndex}.nameType`"
</el-form-item> >
<el-form-item v-if="property.type === 'quote'" :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.list.${pIndex}.quote`"> <!-- <el-input v-model="property.name" placeholder="请输入" clearable /> -->
<el-cascader v-model="property.quote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange" /> <el-select
</el-form-item> v-model="property.nameType"
</el-form-item> @change="handleTypeChange(index, pIndex)"
<el-form-item :label="pIndex === 0 ? '操作' : ''"> >
<el-button :disabled="flowStore.disableForm" circle size="small" @click="addListItem(index)"> <el-option label="引用" value="quote" />
<el-icon :size="12" ><Plus /></el-icon> <el-option label="输入" value="input" />
</el-button> </el-select>
<el-button :disabled="flowStore.disableForm" circle size="small" @click="removeListItem(index, pIndex)"> <el-form-item
<el-icon :size="12" ><Minus /></el-icon> v-if="property.nameType === 'input'"
</el-button> :rules="[
</el-form-item> {
required: true,
</el-row> message: '请输入参数值',
</div> trigger: 'blur',
</div> },
</el-form> ]"
</div> :prop="`nodeParams.${index}.list.${pIndex}.name`"
<div class="else" :id="''.concat(props.model.id, '_else')"> >
<div class="space"></div> <el-input
<div class="title">Else</div> v-model="property.name"
</div> placeholder="请输入"
</div> clearable
</template> />
<script setup> </el-form-item>
import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue' <el-form-item
import NodeTitle from '../../components/NodeTitle.vue' v-if="property.nameType === 'quote'"
import NodeState from "../../components/NodeState.vue"; :rules="[
import switchSvg from '../../icon/switch.svg' {
import { v4 as randomUUID } from 'uuid' required: true,
import { useFlowStore } from '@/store/modules/flow' message: '请选择参数值',
import { Plus, Minus } from '@element-plus/icons-vue' trigger: 'blur',
import { getInput, addNewEdge, removeSwitchEdge } from '@/utils/flow' },
import { emitter } from "@/utils/eventBus"; ]"
:prop="`nodeParams.${index}.list.${pIndex}.nameQuote`"
const props = defineProps({ >
model: Object, <el-cascader
graphModel: Object, v-model="property.nameQuote"
properties: Object, :options="quoteOptions"
nowTime: Number, placeholder="请选择"
}); @visible-change="visibleChange"
/>
const emits = defineEmits(['addAnchor', 'removeAnchor', 'bindRef', 'changeAnchor']) </el-form-item>
</el-form-item>
const switchRef = ref() <el-form-item
const dynamicForm = ref() :label="pIndex === 0 ? '选择条件' : ''"
const flowStore = useFlowStore() :prop="`nodeParams.${index}.list.${pIndex}.condition`"
:rules="[
const formData = reactive({ { required: true, message: '请输入变量名', trigger: 'blur' },
nodeParams: props.properties?.conditions || [] ]"
}) >
<el-select v-model="property.condition">
const addFormItem = () => { <el-option label="等于" value="equal" />
const rect = switchRef.value.getBoundingClientRect(); <el-option label="不等于" value="notEqualTo" />
addCondition(rect.height - 60) <el-option label="为空" value="null" />
} <el-option label="不为空" value="notNull" />
<el-option label="包含" value="include" />
const deleteFormItem = (id, index) => { <el-option label="不包含" value="notInclude" />
if (index === 0) { <el-option label="大于" value="greaterThan" />
return <el-option label="大于等于" value="greaterThanOrEqual" />
} <el-option label="小于" value="lessThan" />
formData.nodeParams.splice(index, 1) <el-option label="小于等于" value="lessThanOrEqual" />
emits('removeAnchor', id) </el-select>
removeSwitchEdge(props.model.id, id) </el-form-item>
nextTick(() => { <el-form-item
changeFormItemHeight() :label="pIndex === 0 ? '比较值' : ''"
}) :prop="`nodeParams.${index}.list.${pIndex}.type`"
} >
<el-select
const quoteOptions = ref([]) v-model="property.type"
const handleTypeChange = (pIndex, index) => { @change="handleTypeChange(index, pIndex)"
if (formData.nodeParams[pIndex].list[index].type === 'input') { >
formData.nodeParams[pIndex].list[index].quote = "" <el-option label="引用" value="quote" />
} else { <el-option label="输入" value="input" />
formData.nodeParams[pIndex].list[index].input = "" </el-select>
const option = getInput(props.model.id, false) <el-form-item
if (option) { v-if="property.type === 'input'"
quoteOptions.value = option :rules="[
} {
} required: true,
} message: '请输入参数值',
trigger: 'blur',
const addCondition = (height) => { },
const id = randomUUID().replace(/-/g, '') ]"
formData.nodeParams.push({ :prop="`nodeParams.${index}.list.${pIndex}.input`"
id, >
withOr: 'and', <el-input
list: [{ v-model="property.input"
name: '', placeholder="请输入"
nameQuote: '', clearable
nameType: 'input', />
type: 'input', </el-form-item>
input: '', <el-form-item
quote: '' v-if="property.type === 'quote'"
}] :rules="[
}) {
emits('addAnchor', height, id) required: true,
message: '请选择参数值',
setTimeout(() => { trigger: 'blur',
addNewEdge(props.model.id) },
}, 50) ]"
:prop="`nodeParams.${index}.list.${pIndex}.quote`"
nextTick(() => { >
changeFormItemHeight() <el-cascader
}) v-model="property.quote"
} :options="quoteOptions"
placeholder="请选择"
const addListItem = (pIndex, cIndex) => { @visible-change="visibleChange"
formData.nodeParams[pIndex].list.push({ />
name: '', </el-form-item>
nameQuote: '', </el-form-item>
nameType: 'input', <el-form-item :label="pIndex === 0 ? '操作' : ''">
type: 'input', <el-button
input: '', :disabled="flowStore.disableForm"
quote: '' circle
}) size="small"
nextTick(() => { @click="addListItem(index)"
changeFormItemHeight() >
}) <el-icon :size="12"><Plus /></el-icon>
} </el-button>
<el-button
const removeListItem = (pIndex, cIndex) => { :disabled="flowStore.disableForm"
if (cIndex === 0) { circle
return size="small"
} @click="removeListItem(index, pIndex)"
formData.nodeParams[pIndex].list.splice(cIndex, 1) >
nextTick(() => { <el-icon :size="12"><Minus /></el-icon>
changeFormItemHeight() </el-button>
}) </el-form-item>
} </el-row>
</div>
const changeFormItemHeight = () => { </div>
formData.nodeParams.forEach(item => { </el-form>
const node = document.getElementById(item.id) </div>
emits('changeAnchor', node.offsetTop, item.id) <div class="else" :id="''.concat(props.model.id, '_else')">
}); <div class="space"></div>
<div class="title">Else</div>
const node = document.getElementById("".concat(props.model.id, "_else")) </div>
emits('changeAnchor', node.offsetTop, "".concat(props.model.id, "_else")) </div>
} </template>
<script setup>
const setNodeProperties = async () => { import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
try { import NodeTitle from "../../components/NodeTitle.vue";
const valid = await dynamicForm.value.validate() import NodeState from "../../components/NodeState.vue";
if (valid) { import switchSvg from "../../icon/switch.svg";
const data = toRaw(formData) import { v4 as randomUUID } from "uuid";
const properties = lf.getProperties(props.model.id) import { useFlowStore } from "@/store/modules/flow";
lf.setProperties(props.model.id, { import { Plus, Minus } from "@element-plus/icons-vue";
...properties, import { getInput, addNewEdge, removeSwitchEdge } from "@/utils/flow";
...data import { emitter } from "@/utils/eventBus";
})
emits('contentChange') const props = defineProps({
} model: Object,
} catch (error) { graphModel: Object,
dynamicForm.value.clearValidate() properties: Object,
} nowTime: Number,
} });
const visibleChange = (value) => { const emits = defineEmits([
if (value) { "addAnchor",
const option = getInput(props.model.id) "removeAnchor",
if (option) { "bindRef",
quoteOptions.value = option "changeAnchor",
} ]);
}
} const switchRef = ref();
const dynamicForm = ref();
const nodeOperatingStatus = ref("NORMAL"); const flowStore = useFlowStore();
const inputJsonData = ref({});
const outputJsonData = ref({}); const formData = reactive({
nodeParams: props.properties?.conditions || [],
watch( });
() => props.properties,
() => { const addFormItem = () => {
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) { const rect = switchRef.value.getBoundingClientRect();
formData.nodeParams = props.properties.nodeParams addCondition(rect.height - 60);
} else { };
if (formData.nodeParams.length === 0) {
addCondition(100) const deleteFormItem = (id, index) => {
} if (index === 0) {
} return;
}, { }
immediate: true, formData.nodeParams.splice(index, 1);
deep: true emits("removeAnchor", id);
} removeSwitchEdge(props.model.id, id);
); nextTick(() => {
changeFormItemHeight();
onMounted(() => { });
emits('addAnchor', 280, "".concat(props.model.id, "_else")) };
emits('bindRef', dynamicForm.value) const quoteOptions = ref([]);
const handleTypeChange = (pIndex, index) => {
emitter.on("changeNodeState", (data) => { if (formData.nodeParams[pIndex].list[index].type === "input") {
if (data.nodeId === props.model.id) { formData.nodeParams[pIndex].list[index].quote = "";
nodeOperatingStatus.value = data.status; } else {
let inputData = {}; formData.nodeParams[pIndex].list[index].input = "";
let output = {}; const option = getInput(props.model.id, false);
try { if (option) {
inputData = JSON.parse(data.paramsIn) || {}; quoteOptions.value = option;
output = JSON.parse(data.paramsOut) || {}; }
} catch (error) { }
inputData = data.paramsIn || {}; };
output = data.paramsOut || {};
} const addCondition = (height) => {
inputJsonData.value = inputData; const id = randomUUID().replace(/-/g, "");
outputJsonData.value = output; formData.nodeParams.push({
id,
emits("contentChange"); withOr: "and",
} list: [
}); {
name: "",
emitter.on("contentChange", (data) => { nameQuote: "",
if (data.id === props.model.id) { nameType: "input",
nodeOperatingStatus.value = "NORMAL"; type: "input",
inputJsonData.value = {}; input: "",
outputJsonData.value = {}; quote: "",
},
emits("contentChange"); ],
} });
}); emits("addAnchor", height, id);
}) setTimeout(() => {
addNewEdge(props.model.id);
onUnmounted(() => { }, 50);
emitter.off("changeNodeState");
emitter.off("contentChange"); nextTick(() => {
}); changeFormItemHeight();
});
};
</script>
<style lang="scss" scoped> const addListItem = (pIndex, cIndex) => {
.node__container { formData.nodeParams[pIndex].list.push({
width: 720px; name: "",
height: auto; nameQuote: "",
background: #fff; nameType: "input",
padding: 12px; type: "input",
cursor: default; input: "",
border-radius: 12px; quote: "",
border: 2px solid white; });
box-shadow: 0 5px 15px 0#00000008; nextTick(() => {
position: relative; changeFormItemHeight();
});
.condition_title_container { };
display: flex;
align-items: center; const removeListItem = (pIndex, cIndex) => {
justify-content: space-between; if (cIndex === 0) {
return;
.left { }
display: flex; formData.nodeParams[pIndex].list.splice(cIndex, 1);
align-items: center; nextTick(() => {
changeFormItemHeight();
.space { });
width: 4px; };
height: 14px;
background: rgb(22, 100, 255); const changeFormItemHeight = () => {
border-radius: 0px 4px 4px 0px; formData.nodeParams.forEach((item) => {
} const node = document.getElementById(item.id);
emits("changeAnchor", node.offsetTop, item.id);
.title { });
margin-left: 8px;
font-size: 14px; const node = document.getElementById("".concat(props.model.id, "_else"));
font-weight: 500; emits("changeAnchor", node.offsetTop, "".concat(props.model.id, "_else"));
} };
}
const setNodeProperties = async () => {
try {
const valid = await dynamicForm.value.validate();
.el-button { if (valid) {
border: none; const data = toRaw(formData);
} const properties = lf.getProperties(props.model.id);
} lf.setProperties(props.model.id, {
...properties,
.condition { ...data,
width: 100%; });
height: auto; emits("contentChange");
margin-bottom: 10px; }
background-color: #fafbfc; } catch (error) {
padding: 8px 16px; dynamicForm.value.clearValidate();
border-radius: 8px; }
box-sizing: border-box; };
.title__container { const visibleChange = (value) => {
display: flex; if (value) {
align-items: center; const option = getInput(props.model.id);
justify-content: space-between; if (option) {
quoteOptions.value = option;
.left { }
display: flex; }
align-items: center; };
.space { const nodeOperatingStatus = ref("NORMAL");
width: 4px; const inputJsonData = ref({});
height: 14px; const outputJsonData = ref({});
background: rgb(22, 100, 255);
border-radius: 0px 4px 4px 0px; watch(
} () => props.properties,
() => {
.title { if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
margin-left: 8px; formData.nodeParams = props.properties.nodeParams;
font-size: 14px; } else {
font-weight: bold; if (formData.nodeParams.length === 0) {
} addCondition(100);
} }
} }
},
.withOr { {
margin-bottom: 12px; immediate: true,
deep: true,
.title { }
font-size: 14px; );
color: #737a87;
margin-bottom: 4px; onMounted(() => {
} emits("addAnchor", 280, "".concat(props.model.id, "_else"));
}
emits("bindRef", dynamicForm.value);
:deep(.form__container) {
emitter.on("changeNodeState", (data) => {
.el-form-item { if (data.nodeId === props.model.id) {
margin-right: 20px; nodeOperatingStatus.value = data.status;
} let inputData = {};
let output = {};
.el-input { try {
width: 92px; inputData = JSON.parse(data.paramsIn) || {};
} output = JSON.parse(data.paramsOut) || {};
} catch (error) {
.el-select { inputData = data.paramsIn || {};
width: 92px; output = data.paramsOut || {};
} }
inputJsonData.value = inputData;
.el-cascader { outputJsonData.value = output;
width: 92px;
} emits("contentChange");
} }
} });
.else { emitter.on("contentChange", (data) => {
display: flex; if (data.id === props.model.id) {
align-items: center; nodeOperatingStatus.value = "NORMAL";
background-color: #fafbfc; inputJsonData.value = {};
padding: 8px 16px; outputJsonData.value = {};
.space { emits("contentChange");
width: 4px; }
height: 14px; });
background: rgb(22, 100, 255); });
border-radius: 0px 4px 4px 0px;
} onUnmounted(() => {
emitter.off("changeNodeState");
.title { emitter.off("contentChange");
margin-left: 8px; });
font-size: 14px; </script>
font-weight: 500; <style lang="scss" scoped>
font-weight: bold; .node__container {
} width: 720px;
} height: auto;
} background: #fff;
</style> padding: 12px;
cursor: default;
border-radius: 12px;
border: 2px solid white;
box-shadow: 0 5px 15px 0#00000008;
position: relative;
.condition_title_container {
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.space {
width: 4px;
height: 14px;
background: rgb(22, 100, 255);
border-radius: 0px 4px 4px 0px;
}
.title {
margin-left: 8px;
font-size: 14px;
font-weight: 500;
}
}
.el-button {
border: none;
}
}
.condition {
width: 100%;
height: auto;
margin-bottom: 10px;
background-color: #fafbfc;
padding: 8px 16px;
border-radius: 8px;
box-sizing: border-box;
.title__container {
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.space {
width: 4px;
height: 14px;
background: rgb(22, 100, 255);
border-radius: 0px 4px 4px 0px;
}
.title {
margin-left: 8px;
font-size: 14px;
font-weight: bold;
}
}
}
.withOr {
margin-bottom: 12px;
.title {
font-size: 14px;
color: #737a87;
margin-bottom: 4px;
}
}
:deep(.form__container) {
.el-form-item {
margin-right: 20px;
}
.el-input {
width: 92px;
}
.el-select {
width: 92px;
}
.el-cascader {
width: 92px;
}
}
}
.else {
display: flex;
align-items: center;
background-color: #fafbfc;
padding: 8px 16px;
.space {
width: 4px;
height: 14px;
background: rgb(22, 100, 255);
border-radius: 0px 4px 4px 0px;
}
.title {
margin-left: 8px;
font-size: 14px;
font-weight: 500;
font-weight: bold;
}
}
}
</style>

4
vite.config.js
View File

@ -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/, '')
} }