feat: 调整公共节点参数设置
This commit is contained in:
parent
01fd73db55
commit
5da44c5588
@ -263,4 +263,35 @@ export const convertToTree = (data) => {
|
||||
});
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
export const filterEmptyName = (obj) => {
|
||||
// 1. 如果是数组，遍历每一项递归处理
|
||||
if (Array.isArray(obj)) {
|
||||
return obj
|
||||
.map(item => filterEmptyName(item)) // 先递归处理子项
|
||||
.filter(item => item !== null); // 过滤掉被剔除的空项
|
||||
}
|
||||
|
||||
// 2. 如果是对象，先检查 name 是否为空，为空直接返回 null（剔除）
|
||||
if (typeof obj === 'object' && obj !== null) {
|
||||
// 核心：name 为空字符串 → 直接剔除这个对象
|
||||
if (obj.name === '') {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 创建新对象，保留原有属性
|
||||
const newObj = { ...obj };
|
||||
|
||||
// 如果有 children，递归过滤子节点
|
||||
if (newObj.children && Array.isArray(newObj.children)) {
|
||||
newObj.children = filterEmptyName(newObj.children);
|
||||
}
|
||||
|
||||
return newObj;
|
||||
}
|
||||
|
||||
// 基础类型直接返回
|
||||
return obj;
|
||||
}
|
||||
221
src/views/flow/components/FormItemRecursive.vue
Normal file
221
src/views/flow/components/FormItemRecursive.vue
Normal file
@ -0,0 +1,221 @@
|
||||
<!-- components/FormItemRecursive.vue -->
|
||||
<template>
|
||||
<div class="form-item-recursive">
|
||||
<!-- 循环渲染当前层级的所有表单项 -->
|
||||
<div v-for="(item, index) in currentList" :key="index">
|
||||
<el-row>
|
||||
<!-- 名称输入 -->
|
||||
<el-form-item
|
||||
:label="isFirstLevel && index === 0 ? '变量名' : ''"
|
||||
:prop="`${propPath}.${index}.name`"
|
||||
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
class="param-name"
|
||||
v-model="item.name"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 类型选择 -->
|
||||
<el-form-item
|
||||
:label="isFirstLevel && index === 0 ? '变量类型' : ''"
|
||||
:prop="`${propPath}.${index}.type`"
|
||||
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
|
||||
>
|
||||
<el-select
|
||||
v-model="item.type"
|
||||
class="param-type"
|
||||
@change="handleTypeChange(item)"
|
||||
>
|
||||
<el-option label="String" value="string" />
|
||||
<el-option label="Number" value="number" />
|
||||
<el-option label="Boolean" value="boolean" />
|
||||
<el-option v-if="depth < endDepth" label="Object" value="object" />
|
||||
<el-option label="Array<String>" value="array<string>" />
|
||||
<el-option label="Array<Number>" value="array<number>" />
|
||||
<el-option label="Array<Boolean>" value="array<boolean>" />
|
||||
<el-option v-if="depth < endDepth" label="Array<Object>" value="array<object>" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 描述输入 -->
|
||||
<el-form-item
|
||||
:label="isFirstLevel && index === 0 ? '描述' : ''"
|
||||
:prop="`${propPath}.${index}.desc`"
|
||||
:rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
|
||||
>
|
||||
<el-input
|
||||
class="param-desc"
|
||||
v-model="item.desc"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 是否必填 -->
|
||||
<el-form-item v-if="formType === 'input'" :label="isFirstLevel && index === 0 ? '必填' : ''">
|
||||
<el-switch
|
||||
v-model="item.required"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 删除按钮（第一层第一个不能删） -->
|
||||
<el-button
|
||||
:icon="Minus"
|
||||
circle
|
||||
size="small"
|
||||
@click="handleDelete(index)"
|
||||
class="deleteBtn"
|
||||
/>
|
||||
|
||||
<!-- 添加子项按钮（当类型是object/array<object>时） -->
|
||||
<el-button
|
||||
v-if="['object', 'array<object>'].includes(item.type)"
|
||||
:icon="Plus"
|
||||
circle
|
||||
size="small"
|
||||
@click="handleAddChild(item)"
|
||||
class="addBtn"
|
||||
/>
|
||||
</el-row>
|
||||
|
||||
<!-- 递归渲染子项（如果有子项且类型匹配） -->
|
||||
<!-- 层级越深，缩进越多 -->
|
||||
<div
|
||||
v-if="['object', 'array<object>'].includes(item.type) && item.children.length"
|
||||
class="nested-form-items"
|
||||
:style="{ marginLeft: `${depth * 20}px` }"
|
||||
>
|
||||
<!-- 递归调用自身，处理下一层级 -->
|
||||
<!-- 非第一层 -->
|
||||
<!-- 复用添加逻辑 -->
|
||||
<FormItemRecursive
|
||||
:formType="formType"
|
||||
:current-list="item.children"
|
||||
:prop-path="`${propPath}.${index}.children`"
|
||||
:depth="depth + 1"
|
||||
:is-first-level="false"
|
||||
:endDepth="endDepth"
|
||||
:parent-path="[...parentPath, index] "
|
||||
@add-item="handleAddChild(item)"
|
||||
@delete-item="handleChildDelete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Plus, Minus } from "@element-plus/icons-vue";
|
||||
|
||||
// 定义props
|
||||
const { formType, currentList, propPath, depth, isFirstLevel, endDepth, parentPath } = defineProps({
|
||||
formType: {
|
||||
type: String,
|
||||
default: 'input'
|
||||
},
|
||||
currentList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
propPath: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
depth: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
isFirstLevel: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
endDepth: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
parentPath: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
});
|
||||
|
||||
// 定义emit事件
|
||||
const emit = defineEmits(['add-item', 'delete-item'])
|
||||
|
||||
// 处理类型变化（清空或添加子项）
|
||||
const handleTypeChange = (item) => {
|
||||
if (!["object", "array<object>"].includes(item.type)) {
|
||||
item.children = []; // 非对象类型清空子项
|
||||
} else if (item.children.length === 0) {
|
||||
handleAddChild(item); // 首次切换为对象类型时添加一个子项
|
||||
}
|
||||
};
|
||||
|
||||
// 添加子项
|
||||
const handleAddChild = (parentItem) => {
|
||||
parentItem.children.push({
|
||||
name: "",
|
||||
type: "string",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
// emit("add-item", parentItem); // 通知父组件（可选）
|
||||
};
|
||||
|
||||
// 删除当前项
|
||||
const handleDelete = (index) => {
|
||||
// 完整路径 = 父级路径 + 当前索引（如果是顶层，parentPath为undefined）
|
||||
const fullPath = parentPath ? [...parentPath, index] : [index];
|
||||
emit("delete-item", fullPath); // 向上传递完整路径
|
||||
}
|
||||
|
||||
// 接收子组件的删除事件，继续向上传递
|
||||
const handleChildDelete = (childFullPath) => {
|
||||
emit("delete-item", childFullPath);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nested-form-items {
|
||||
border-left: 1px dashed #ccc; /* 层级连接线 */
|
||||
padding-left: 12px;
|
||||
margin-left: 0 !important;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.deleteBtn {
|
||||
margin-bottom: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
margin-bottom: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-form-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.param-name {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.param-type {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.param-desc {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -44,7 +44,7 @@
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip
|
||||
<!-- <el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="zoomState ? '缩小' : '放大'"
|
||||
@ -56,7 +56,7 @@
|
||||
<ZoomIn v-else />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</el-tooltip> -->
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
|
||||
@ -1,43 +1,43 @@
|
||||
<template>
|
||||
<div class="node__box">
|
||||
<component :is="componentId" :model="props.model" :properties="props.properties" ref="nodeRef" @contentChange="contentChange"></component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
// import ArmNode from '../nodes/mechanical/arm.vue';
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
properties: Object,
|
||||
component: Object,
|
||||
});
|
||||
|
||||
const emits = defineEmits(['contentChange', 'bindRef'])
|
||||
|
||||
const componentId = ref(props.component)
|
||||
|
||||
const contentChange = () => {
|
||||
emits('contentChange')
|
||||
}
|
||||
|
||||
const nodeRef = ref()
|
||||
onMounted(() => {
|
||||
emits('bindRef', nodeRef.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__box {
|
||||
width: 680px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
border-radius: 12px;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 5px 15px 0#00000008;
|
||||
position: relative;
|
||||
}
|
||||
<template>
|
||||
<div class="node__box">
|
||||
<component :is="componentId" :model="props.model" :properties="props.properties" ref="nodeRef" @contentChange="contentChange"></component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
// import ArmNode from '../nodes/mechanical/arm.vue';
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
properties: Object,
|
||||
component: Object,
|
||||
});
|
||||
|
||||
const emits = defineEmits(['contentChange', 'bindRef'])
|
||||
|
||||
const componentId = ref(props.component)
|
||||
|
||||
const contentChange = () => {
|
||||
emits('contentChange')
|
||||
}
|
||||
|
||||
const nodeRef = ref()
|
||||
onMounted(() => {
|
||||
emits('bindRef', nodeRef.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__box {
|
||||
width: 320px;
|
||||
height: auto;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
border-radius: 12px;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 5px 15px 0#00000008;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
530
src/views/flow/components/ParamsDrawer.vue
Normal file
530
src/views/flow/components/ParamsDrawer.vue
Normal file
@ -0,0 +1,530 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="props.drawer"
|
||||
:title="props.data.properties?.name || '参数配置'"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div class="input__container" v-if="props.data.type === 'start'">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<el-button
|
||||
@click="addFormItem('inputParams')"
|
||||
:circle="true"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
>
|
||||
<FormItemRecursive
|
||||
formType="input"
|
||||
:current-list="formData.inputParams"
|
||||
prop-path="inputParams"
|
||||
:depth="0"
|
||||
:is-first-level="true"
|
||||
:endDepth="2"
|
||||
:parent-path="[]"
|
||||
@delete-item="(path) => deleteTopLevelItem(path, 'inputParams')"
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div v-if="props.data.type === 'serviceNode'">
|
||||
<div class="input__container">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button
|
||||
:circle="true"
|
||||
@click="addFormItem('nodeParams')"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="property?.disabled || false"
|
||||
class="param-name"
|
||||
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"
|
||||
class="param-type"
|
||||
@change="handleTypeChange(index)"
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[
|
||||
{
|
||||
required: property?.required ?? true,
|
||||
message: '请输入参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number
|
||||
class="param-value"
|
||||
v-if="property.componentType === 'number'"
|
||||
v-model="property.input"
|
||||
:min="0"
|
||||
:max="property.max || Infinity"
|
||||
:controls="false"
|
||||
:step-strictly="true"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
<el-select
|
||||
v-model="property.input"
|
||||
class="param-value"
|
||||
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
|
||||
class="param-value"
|
||||
v-else
|
||||
v-model="property.input"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="property.type === 'quote'"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.quote`"
|
||||
>
|
||||
<el-cascader
|
||||
:ref="
|
||||
(el) => {
|
||||
if (el) cascaderRefs[index] = el;
|
||||
}
|
||||
"
|
||||
v-model="property.quote"
|
||||
: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-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="output__container">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输出</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button
|
||||
@click="addFormItem('outputParams')"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:rules="outputRules"
|
||||
ref="outputFormRef"
|
||||
>
|
||||
<FormItemRecursive
|
||||
formType="output"
|
||||
:current-list="formData.outputParams"
|
||||
prop-path="outputParams"
|
||||
:depth="0"
|
||||
:is-first-level="true"
|
||||
:endDepth="2"
|
||||
:parent-path="[]"
|
||||
@delete-item="(path) => deleteTopLevelItem(path, 'outputParams')"
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">关闭</el-button>
|
||||
<el-button type="primary" @click="confirm">确定</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormItemRecursive from "./FormItemRecursive.vue";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import { getInput, filterEmptyName } from "@/utils/flow";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
|
||||
const props = defineProps({
|
||||
drawer: Boolean,
|
||||
data: Object
|
||||
})
|
||||
|
||||
const emits = defineEmits(['close'])
|
||||
|
||||
const formData = reactive({
|
||||
inputParams: [],
|
||||
nodeParams: [],
|
||||
outputParams: [],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const handleClose = (done) => {
|
||||
const filteredObj = {
|
||||
inputParams: filterEmptyName(formData.inputParams),
|
||||
nodeParams: filterEmptyName(formData.nodeParams),
|
||||
outputParams: filterEmptyName(formData.outputParams),
|
||||
};
|
||||
|
||||
lf.setProperties(props.data.id, {
|
||||
...props.data.properties,
|
||||
...filteredObj
|
||||
});
|
||||
emitter.emit("setProperties", { id: props.data.id});
|
||||
|
||||
|
||||
emits('close')
|
||||
}
|
||||
|
||||
// 删除顶层表单项
|
||||
const deleteTopLevelItem = (fullPath, propPath) => {
|
||||
// 从顶层数据开始查找
|
||||
let currentLevel = formData[propPath];
|
||||
|
||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||
for (let i = 0; i < fullPath.length - 1; i++) {
|
||||
const index = fullPath[i];
|
||||
// 进入下一层级
|
||||
currentLevel = currentLevel[index].children;
|
||||
}
|
||||
|
||||
// 最后一个索引是当前层级要删除的项
|
||||
const lastIndex = fullPath[fullPath.length - 1];
|
||||
currentLevel.splice(lastIndex, 1);
|
||||
}
|
||||
|
||||
const addFormItem = (type) => {
|
||||
const obj ={
|
||||
name: "",
|
||||
type: type === 'nodeParams' ? 'input' : 'string',
|
||||
required: false,
|
||||
children: [],
|
||||
}
|
||||
if (type === 'inputParams') {
|
||||
obj.desc = ''
|
||||
} else if (type === 'nodeParams' || type === 'outputParams') {
|
||||
obj.input = ''
|
||||
}
|
||||
formData[type].push(obj);
|
||||
};
|
||||
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = "";
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
const visibleChange = (value, index, quote) => {
|
||||
if (value) {
|
||||
const option = getInput(props.data.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
const currentValue = [...quote];
|
||||
// 强制级联选择器重新处理选中值与选项的匹配
|
||||
if (cascaderRefs.value[index]) {
|
||||
// 等待DOM更新后再设置值，确保新options已生效
|
||||
setTimeout(() => {
|
||||
// 如果当前有选中值，重新设置一次以触发重新匹配
|
||||
if (currentValue.length) {
|
||||
formData.nodeParams[index].quote = [];
|
||||
// 确保响应式更新
|
||||
setTimeout(() => {
|
||||
formData.nodeParams[index].quote = currentValue;
|
||||
}, 0);
|
||||
}
|
||||
// 手动触发级联选择器的重新渲染
|
||||
// cascaderRefs.value[index].updatePopper();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
if (props.data.type === "start") {
|
||||
formData.inputParams = props.data.properties?.inputParams || [];
|
||||
} else if (props.data.type === "serviceNode") {
|
||||
formData.nodeParams = props.data.properties.nodeParams;
|
||||
formData.outputParams = props.data.properties.outputParams;
|
||||
console.log('formData', formData)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-form-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.param-name {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.param-type {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gSon-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.output__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-form-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.param-name {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.param-type {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.param-desc {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -398,7 +398,10 @@ export const collapseList = [
|
||||
{ name: "vehType", type: "input", input: "su7", disabled: true },
|
||||
],
|
||||
outputType: 'json',
|
||||
outputParams: [{ name: 'coordinates', type: 'Object', children: [], desc: '坐标对象', }]
|
||||
outputParams: [{ name: 'coordinates', type: 'object', children: [
|
||||
{ name: 'x', type: 'number', desc: 'x坐标' },
|
||||
{ name: 'y', type: 'number', desc: 'y坐标' }
|
||||
], desc: '坐标对象', }]
|
||||
}, {
|
||||
icon: dialogueSvg,
|
||||
name: "tts语音合成",
|
||||
|
||||
@ -95,6 +95,12 @@
|
||||
@changeState="changeState"
|
||||
:flowId="flowInfoData.itemId"
|
||||
/>
|
||||
|
||||
<ParamsDrawer
|
||||
:drawer="showParamsDrawer"
|
||||
:data="paramsDrawerData"
|
||||
@close="showParamsDrawer = false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="visible" width="500" append-to-body>
|
||||
@ -185,6 +191,7 @@ import "@logicflow/core/lib/style/index.css";
|
||||
import "@logicflow/extension/lib/style/index.css";
|
||||
import { lfConfig, registerCustomizeNode } from "./config";
|
||||
import TestRun from "./components/TestRun.vue";
|
||||
import ParamsDrawer from "./components/ParamsDrawer.vue";
|
||||
import Aside from "./components/Aside.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
@ -614,16 +621,16 @@ const initFlow = () => {
|
||||
});
|
||||
|
||||
// 监听历史记录变化
|
||||
lf.on("history:change", ({ data }) => {
|
||||
if (flowStore.disableForm) {
|
||||
return;
|
||||
}
|
||||
const flowData = lf.getGraphData();
|
||||
if (JSON.stringify(oldFlowData) === JSON.stringify(flowData)) {
|
||||
return;
|
||||
}
|
||||
flowState.value = "updateData";
|
||||
});
|
||||
// lf.on("history:change", ({ data }) => {
|
||||
// if (flowStore.disableForm) {
|
||||
// return;
|
||||
// }
|
||||
// const flowData = lf.getGraphData();
|
||||
// if (JSON.stringify(oldFlowData) === JSON.stringify(flowData)) {
|
||||
// return;
|
||||
// }
|
||||
// flowState.value = "updateData";
|
||||
// });
|
||||
|
||||
// 监听子节点拖动事件
|
||||
lf.on("node:mousemove", ({ data, e }) => {
|
||||
@ -641,6 +648,12 @@ const initFlow = () => {
|
||||
node.setCustomProperties && node.setCustomProperties();
|
||||
});
|
||||
|
||||
lf.on("node:dbclick", ({ data, e }) => {
|
||||
showParamsDrawer.value = true;
|
||||
paramsDrawerData.value = data;
|
||||
console.log(data)
|
||||
});
|
||||
|
||||
lfRef.value = lf;
|
||||
window.lf = lf;
|
||||
}
|
||||
@ -757,6 +770,9 @@ const execute = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
const showParamsDrawer = ref(false);
|
||||
const paramsDrawerData = ref({})
|
||||
|
||||
onMounted(() => {
|
||||
justLoadFlow();
|
||||
initFlow();
|
||||
|
||||
@ -41,192 +41,20 @@
|
||||
:nodeName="props.properties.name"
|
||||
:nodeDesc="props.properties.desc"
|
||||
:zoom-state="nodeZoom"
|
||||
@zoom="zoom"
|
||||
|
||||
@setNodeName="setNodeName"
|
||||
/>
|
||||
<div class="input__container" v-show="nodeZoom" @mousedown="(e) => e.stopPropagation()" @keydown="handleInputKeydown">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right" v-if="properties.properties?.canAddFormItem">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<div v-for="(property, index) in formData.nodeParams" :key="index">
|
||||
<el-row>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数名' : ''"
|
||||
:prop="`nodeParams.${index}.name`"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<el-input
|
||||
:disabled="property?.disabled || false"
|
||||
v-model="property.name"
|
||||
@keydown="handleInputKeydown"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="index === 0 ? '参数值' : ''"
|
||||
:prop="`nodeParams.${index}.type`"
|
||||
>
|
||||
<el-select
|
||||
v-model="property.type"
|
||||
@change="handleTypeChange(index)"
|
||||
>
|
||||
<el-option label="引用" value="quote" />
|
||||
<el-option label="输入" value="input" />
|
||||
</el-select>
|
||||
<el-form-item
|
||||
v-if="property.type === 'input'"
|
||||
:rules="[
|
||||
{
|
||||
required: property?.required ?? true,
|
||||
message: '请输入参数值',
|
||||
trigger: 'blur',
|
||||
},
|
||||
]"
|
||||
:prop="`nodeParams.${index}.input`"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="property.componentType === 'number'"
|
||||
v-model="property.input"
|
||||
:min="0"
|
||||
:max="property.max || Infinity"
|
||||
:controls="false"
|
||||
:step-strictly="true"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
@keydown="handleInputKeydown"
|
||||
/>
|
||||
<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
|
||||
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-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output__container" v-show="nodeZoom">
|
||||
<div v-if="props.properties?.outputParams?.length > 0">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<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 class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:rules="outputRules"
|
||||
ref="outputFormRef"
|
||||
>
|
||||
<FormItemRecursive
|
||||
formType="output"
|
||||
:current-list="formData.outputParams"
|
||||
prop-path="outputParams"
|
||||
:depth="0"
|
||||
:is-first-level="true"
|
||||
:endDepth="2"
|
||||
:parent-path="[]"
|
||||
@delete-item="deleteTopLevelItem"
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- @zoom="zoom" -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { getInput, initNodeZoom } from "@/utils/flow";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import NodeTitle from "../../components/NodeTitle.vue";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import IPlayer from "@/views/device/register/components/LogicFlow/IPlayer/index.vue";
|
||||
import FormItemRecursive from "./FormItemRecursive.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
@ -235,70 +63,6 @@ const props = defineProps({
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const formData = reactive({
|
||||
nodeParams: [],
|
||||
outputParams: [],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const quoteOptions = ref([]);
|
||||
const handleTypeChange = (index) => {
|
||||
if (formData.nodeParams[index].type === "input") {
|
||||
formData.nodeParams[index].quote = "";
|
||||
} else {
|
||||
formData.nodeParams[index].input = "";
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const cascaderRefs = ref([]);
|
||||
const outputRules = reactive({});
|
||||
const cascaderChange = (value, index) => {
|
||||
const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
|
||||
formData.nodeParams[index].quote = value;
|
||||
formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
|
||||
};
|
||||
|
||||
const addOutputFormItem = () => {
|
||||
formData.outputParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
children: [],
|
||||
});
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
const outputFormRef = ref();
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
let flag = true;
|
||||
if (outputFormRef.value) {
|
||||
flag = await outputFormRef.value.validate();
|
||||
}
|
||||
|
||||
if (result && flag) {
|
||||
const data = toRaw(formData);
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
// dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
@ -313,115 +77,6 @@ const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
const errorInfoData = ref('');
|
||||
|
||||
const visibleChange = (value, index, quote) => {
|
||||
if (value) {
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
const currentValue = [...quote];
|
||||
// 强制级联选择器重新处理选中值与选项的匹配
|
||||
if (cascaderRefs.value[index]) {
|
||||
// 等待DOM更新后再设置值，确保新options已生效
|
||||
setTimeout(() => {
|
||||
// 如果当前有选中值，重新设置一次以触发重新匹配
|
||||
if (currentValue.length) {
|
||||
formData.nodeParams[index].quote = [];
|
||||
// 确保响应式更新
|
||||
setTimeout(() => {
|
||||
formData.nodeParams[index].quote = currentValue;
|
||||
}, 0);
|
||||
}
|
||||
// 手动触发级联选择器的重新渲染
|
||||
// cascaderRefs.value[index].updatePopper();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
};
|
||||
|
||||
const addFormItem = () => {
|
||||
formData.nodeParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
// 删除顶层表单项
|
||||
const deleteTopLevelItem = (fullPath) => {
|
||||
// 从顶层数据开始查找
|
||||
let currentLevel = formData.outputParams;
|
||||
|
||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||
for (let i = 0; i < fullPath.length - 1; i++) {
|
||||
const index = fullPath[i];
|
||||
// 进入下一层级
|
||||
currentLevel = currentLevel[index].children;
|
||||
}
|
||||
|
||||
// 最后一个索引是当前层级要删除的项
|
||||
const lastIndex = fullPath[fullPath.length - 1];
|
||||
currentLevel.splice(lastIndex, 1);
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
const nodeZoom = ref(props?.properties?.zoom ?? true)
|
||||
const zoom = (flag) => {
|
||||
nodeZoom.value = flag
|
||||
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const option = getInput(props.model.id);
|
||||
if (option) {
|
||||
quoteOptions.value = option;
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
|
||||
})
|
||||
}
|
||||
if (
|
||||
props.properties.outputParams &&
|
||||
props.properties.outputParams.length > 0
|
||||
) {
|
||||
formData.outputParams = props.properties.outputParams;
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
const handleInputKeydown = (e) => {
|
||||
// 阻止事件冒泡到 Logic Flow 节点，避免被其事件拦截
|
||||
e.stopPropagation();
|
||||
// 可选：明确放行 Ctrl+V（增强兼容性）
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
|
||||
e.returnValue = true; // 允许默认粘贴行为
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
@ -451,168 +106,25 @@ onMounted(() => {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
setNodeProperties,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.node__container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gSon-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.output__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 148px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 148px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
--el-form-inline-content-width: 148px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,209 +1,200 @@
|
||||
// 导入 HtmlNode 及其模型，为后续继承做准备
|
||||
import { HtmlNode, HtmlNodeModel } from '@logicflow/core';
|
||||
// 导入 Vue 相关方法，用于渲染组件
|
||||
import { createApp, h, nextTick } from 'vue';
|
||||
import ElementPlus from 'element-plus'
|
||||
// 导入 Vue 组件
|
||||
import StartNode from './startNode.vue';
|
||||
import OuterNode from "../../components/OuterNode.vue";
|
||||
import JsonViewer from 'vue3-json-viewer'
|
||||
|
||||
/**
|
||||
* 定义一个 元素的 HTML 节点类，继承自 HtmlNode
|
||||
* 该类负责在 HTML 中渲染 元素，并处理其交互逻辑
|
||||
*/
|
||||
class StartNodeHtmlNode extends HtmlNode {
|
||||
resizeObserver = null;
|
||||
isMounted; // 标记组件是否已挂载
|
||||
r; // 渲染函数
|
||||
app; // Vue 应用实例
|
||||
container = null;
|
||||
|
||||
static reusePool = new Map(); // 节点复用池
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
* @param props 传递给节点的属性，包括模型、图模型等
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initVueApp(props)
|
||||
}
|
||||
|
||||
initVueApp(props) {
|
||||
this.isMounted = false;
|
||||
|
||||
this.hideAnchor = false;
|
||||
this.autoExpand = true; // 防止锚点被折叠
|
||||
this.anchorsPreset = "default"; // 重置锚点预设
|
||||
// 创建 元素的渲染函数
|
||||
this.r = h(OuterNode, {
|
||||
model: props.model,
|
||||
component: StartNode,
|
||||
properties: {
|
||||
...props.model.getProperties()
|
||||
},
|
||||
onContentChange: this.handleContentChange.bind(this),
|
||||
onBindRef: this.handleComponentInstance.bind(this)
|
||||
});
|
||||
|
||||
// 创建 Vue 应用实例，并指定渲染函数
|
||||
this.app = createApp({
|
||||
render: () => this.r
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 HTML 内容设置到指定的根元素上
|
||||
* @param rootEl 根元素
|
||||
*/
|
||||
async setHtml(rootEl) {
|
||||
const nodeId = this.props.model.id;
|
||||
if (StartNodeHtmlNode.reusePool.has(nodeId)) {
|
||||
rootEl.appendChild(StartNodeHtmlNode.reusePool.get(nodeId));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isMounted) {
|
||||
this.isMounted = true;
|
||||
this.container = document.createElement('div');
|
||||
this.container.style.display = 'inline-block'; // 关键：确保容器自适应内容
|
||||
|
||||
rootEl.appendChild(this.container);
|
||||
this.app.use(ElementPlus) // 关键：单独注册ElementPlus
|
||||
this.app.use(JsonViewer)
|
||||
this.app.mount(this.container);
|
||||
await nextTick();
|
||||
this.setupSizeObserver();
|
||||
StartNodeHtmlNode.reusePool.set(nodeId, this.container);
|
||||
} else {
|
||||
this.r.component.props.properties = this.props.model.getProperties();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点文本内容
|
||||
* 对于元素，返回 null，因为其内容由特定组件渲染
|
||||
* @returns {null}
|
||||
*/
|
||||
getText() {
|
||||
return null;
|
||||
}
|
||||
|
||||
handleComponentInstance(data) {
|
||||
// 将组件实例保存到节点模型
|
||||
this.props.model.setComponentInstance(data)
|
||||
}
|
||||
|
||||
handleContentChange() {
|
||||
// 内容变化时强制更新尺寸
|
||||
this.updateNodeSize();
|
||||
}
|
||||
|
||||
// 渲染完成后获取实际尺寸
|
||||
updateNodeSize () {
|
||||
if (this.container) {
|
||||
const { SCALE_X, SCALE_Y } = this.props.graphModel.transformModel;
|
||||
const node = this.container.querySelector('.node__box')
|
||||
const rect = node.getBoundingClientRect();
|
||||
this.props.model.updateSize(rect.width / SCALE_X, rect.height / SCALE_Y);
|
||||
}
|
||||
}
|
||||
|
||||
setupSizeObserver() {
|
||||
// 首次渲染立即检测
|
||||
requestAnimationFrame(() => {
|
||||
this.updateNodeSize();
|
||||
// 持续监听变化
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
this.updateNodeSize();
|
||||
});
|
||||
this.resizeObserver.observe(this.container);
|
||||
});
|
||||
}
|
||||
|
||||
// 组件卸载时移除监听
|
||||
onDestroy() {
|
||||
this.resizeObserver?.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义一个元素的 HTML 模型类，继承自 HtmlNodeModel
|
||||
* 该类主要设置节点的属性和样式
|
||||
*/
|
||||
class StartNodeHtmlModel extends HtmlNodeModel {
|
||||
initNodeData(data) {
|
||||
super.initNodeData(data);
|
||||
}
|
||||
|
||||
// 保存组件实例引用
|
||||
setComponentInstance(instance) {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
const result = this.componentInstance.validateForm()
|
||||
return result
|
||||
}
|
||||
|
||||
setCustomProperties() {
|
||||
this.componentInstance.setNodeProperties()
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
*/
|
||||
setAttributes() {
|
||||
// 初始设置为0，后续动态更新
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.text.editable = false;
|
||||
this.deletable = false; // 关键代码：禁止删除节点
|
||||
}
|
||||
|
||||
updateSize(width, height) {
|
||||
this.width = width + 24;
|
||||
this.height = height + 50;
|
||||
this.initNodeData(this); // 触发节点重绘
|
||||
}
|
||||
|
||||
// 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
|
||||
getDefaultAnchor() {
|
||||
let _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
|
||||
return [
|
||||
{ x: x + width / 2 - 24, y: y - 25, name: 'right', id: "".concat(this.id, "_1"), properties: { connectionType: 'source' }, onlyAsSource: true },
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点轮廓样式
|
||||
* 覆盖父类方法，设置 stroke 属性为 none，以适应特定的视觉效果
|
||||
* @returns {object} 节点轮廓样式
|
||||
*/
|
||||
getOutlineStyle() {
|
||||
const style = super.getOutlineStyle();
|
||||
style.stroke = 'none';
|
||||
style.hover.stroke = 'none';
|
||||
return style;
|
||||
}
|
||||
}
|
||||
|
||||
// 导出方法注册
|
||||
export function registerStartNode(lf) {
|
||||
lf.register({
|
||||
type: "start",
|
||||
view: StartNodeHtmlNode,
|
||||
model: StartNodeHtmlModel,
|
||||
events: {
|
||||
remove: (event) => {
|
||||
// 阻止默认的删除事件
|
||||
event.preventDefault();
|
||||
// 可以在此处添加自定义的删除逻辑，例如弹出提示框
|
||||
alert('此节点不可删除');
|
||||
},
|
||||
}
|
||||
})
|
||||
// 导入 HtmlNode 及其模型，为后续继承做准备
|
||||
import { HtmlNode, HtmlNodeModel } from '@logicflow/core';
|
||||
// 导入 Vue 相关方法，用于渲染组件
|
||||
import { createApp, h, nextTick } from 'vue';
|
||||
import ElementPlus from 'element-plus'
|
||||
// 导入 Vue 组件
|
||||
import StartNode from './startNode.vue';
|
||||
import OuterNode from "../../components/OuterNode.vue";
|
||||
import JsonViewer from 'vue3-json-viewer'
|
||||
|
||||
/**
|
||||
* 定义一个 元素的 HTML 节点类，继承自 HtmlNode
|
||||
* 该类负责在 HTML 中渲染 元素，并处理其交互逻辑
|
||||
*/
|
||||
class StartNodeHtmlNode extends HtmlNode {
|
||||
resizeObserver = null;
|
||||
isMounted; // 标记组件是否已挂载
|
||||
r; // 渲染函数
|
||||
app; // Vue 应用实例
|
||||
container = null;
|
||||
|
||||
static reusePool = new Map(); // 节点复用池
|
||||
|
||||
/**
|
||||
* 构造函数
|
||||
* @param props 传递给节点的属性，包括模型、图模型等
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.initVueApp(props)
|
||||
}
|
||||
|
||||
initVueApp(props) {
|
||||
this.isMounted = false;
|
||||
|
||||
this.hideAnchor = false;
|
||||
this.autoExpand = true; // 防止锚点被折叠
|
||||
this.anchorsPreset = "default"; // 重置锚点预设
|
||||
// 创建 元素的渲染函数
|
||||
this.r = h(OuterNode, {
|
||||
model: props.model,
|
||||
component: StartNode,
|
||||
properties: {
|
||||
...props.model.getProperties()
|
||||
},
|
||||
onContentChange: this.handleContentChange.bind(this),
|
||||
onBindRef: this.handleComponentInstance.bind(this)
|
||||
});
|
||||
|
||||
// 创建 Vue 应用实例，并指定渲染函数
|
||||
this.app = createApp({
|
||||
render: () => this.r
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 HTML 内容设置到指定的根元素上
|
||||
* @param rootEl 根元素
|
||||
*/
|
||||
async setHtml(rootEl) {
|
||||
const nodeId = this.props.model.id;
|
||||
if (StartNodeHtmlNode.reusePool.has(nodeId)) {
|
||||
rootEl.appendChild(StartNodeHtmlNode.reusePool.get(nodeId));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isMounted) {
|
||||
this.isMounted = true;
|
||||
this.container = document.createElement('div');
|
||||
this.container.style.display = 'inline-block'; // 关键：确保容器自适应内容
|
||||
|
||||
rootEl.appendChild(this.container);
|
||||
this.app.use(ElementPlus) // 关键：单独注册ElementPlus
|
||||
this.app.use(JsonViewer)
|
||||
this.app.mount(this.container);
|
||||
await nextTick();
|
||||
this.setupSizeObserver();
|
||||
StartNodeHtmlNode.reusePool.set(nodeId, this.container);
|
||||
} else {
|
||||
this.r.component.props.properties = this.props.model.getProperties();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点文本内容
|
||||
* 对于元素，返回 null，因为其内容由特定组件渲染
|
||||
* @returns {null}
|
||||
*/
|
||||
getText() {
|
||||
return null;
|
||||
}
|
||||
|
||||
handleComponentInstance(data) {
|
||||
// 将组件实例保存到节点模型
|
||||
this.props.model.setComponentInstance(data)
|
||||
}
|
||||
|
||||
handleContentChange() {
|
||||
// 内容变化时强制更新尺寸
|
||||
this.updateNodeSize();
|
||||
}
|
||||
|
||||
// 渲染完成后获取实际尺寸
|
||||
updateNodeSize () {
|
||||
if (this.container) {
|
||||
const { SCALE_X, SCALE_Y } = this.props.graphModel.transformModel;
|
||||
const node = this.container.querySelector('.node__box')
|
||||
const rect = node.getBoundingClientRect();
|
||||
this.props.model.updateSize(rect.width / SCALE_X, rect.height / SCALE_Y);
|
||||
}
|
||||
}
|
||||
|
||||
setupSizeObserver() {
|
||||
// 首次渲染立即检测
|
||||
requestAnimationFrame(() => {
|
||||
this.updateNodeSize();
|
||||
// 持续监听变化
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
this.updateNodeSize();
|
||||
});
|
||||
this.resizeObserver.observe(this.container);
|
||||
});
|
||||
}
|
||||
|
||||
// 组件卸载时移除监听
|
||||
onDestroy() {
|
||||
this.resizeObserver?.disconnect();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 定义一个元素的 HTML 模型类，继承自 HtmlNodeModel
|
||||
* 该类主要设置节点的属性和样式
|
||||
*/
|
||||
class StartNodeHtmlModel extends HtmlNodeModel {
|
||||
initNodeData(data) {
|
||||
super.initNodeData(data);
|
||||
}
|
||||
|
||||
// 保存组件实例引用
|
||||
setComponentInstance(instance) {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
*/
|
||||
setAttributes() {
|
||||
// 初始设置为0，后续动态更新
|
||||
this.width = 0;
|
||||
this.height = 0;
|
||||
this.text.editable = false;
|
||||
this.deletable = false; // 关键代码：禁止删除节点
|
||||
}
|
||||
|
||||
updateSize(width, height) {
|
||||
this.width = width + 24;
|
||||
this.height = height + 50;
|
||||
this.initNodeData(this); // 触发节点重绘
|
||||
}
|
||||
|
||||
// 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
|
||||
getDefaultAnchor() {
|
||||
let _a = this, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
|
||||
return [
|
||||
{ x: x + width / 2 - 24, y: y - 25, name: 'right', id: "".concat(this.id, "_1"), properties: { connectionType: 'source' }, onlyAsSource: true },
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取节点轮廓样式
|
||||
* 覆盖父类方法，设置 stroke 属性为 none，以适应特定的视觉效果
|
||||
* @returns {object} 节点轮廓样式
|
||||
*/
|
||||
getOutlineStyle() {
|
||||
const style = super.getOutlineStyle();
|
||||
style.stroke = 'none';
|
||||
style.hover.stroke = 'none';
|
||||
return style;
|
||||
}
|
||||
}
|
||||
|
||||
// 导出方法注册
|
||||
export function registerStartNode(lf) {
|
||||
lf.register({
|
||||
type: "start",
|
||||
view: StartNodeHtmlNode,
|
||||
model: StartNodeHtmlModel,
|
||||
effect: ['status'],
|
||||
events: {
|
||||
remove: (event) => {
|
||||
// 阻止默认的删除事件
|
||||
event.preventDefault();
|
||||
// 可以在此处添加自定义的删除逻辑，例如弹出提示框
|
||||
alert('此节点不可删除');
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -16,75 +16,19 @@
|
||||
<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 @click="zoom">
|
||||
<el-icon>
|
||||
<ZoomOut v-if="nodeZoom" />
|
||||
<ZoomIn v-else />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subTitle">工作流的起始节点，用于设定启动工作流需要的信息</div>
|
||||
</div>
|
||||
<div class="input__container" v-show="nodeZoom">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button
|
||||
:disabled="flowStore.disableForm"
|
||||
@click="addFormItem"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
ref="dynamicForm"
|
||||
label-position="top"
|
||||
label-width="auto"
|
||||
:disabled="flowStore.disableForm"
|
||||
>
|
||||
<FormItemRecursive
|
||||
formType="input"
|
||||
:current-list="formData.inputParams"
|
||||
prop-path="inputParams"
|
||||
:depth="0"
|
||||
:is-first-level="true"
|
||||
:endDepth="2"
|
||||
:parent-path="[]"
|
||||
@delete-item="deleteTopLevelItem"
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watch, reactive, toRaw, ref, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { Plus, ZoomOut, ZoomIn } from "@element-plus/icons-vue";
|
||||
import { useFlowStore } from "@/store/modules/flow";
|
||||
import { initNodeZoom } from "@/utils/flow";
|
||||
import NodeState from "../../components/NodeState.vue";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import FormItemRecursive from "./FormItemRecursive.vue";
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
@ -92,93 +36,12 @@ const props = defineProps({
|
||||
});
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const flowStore = useFlowStore();
|
||||
|
||||
const formData = reactive({
|
||||
inputParams: [
|
||||
{
|
||||
name: "terminalId",
|
||||
type: "string",
|
||||
desc: "机器人ip",
|
||||
disabled: true,
|
||||
required: true,
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const addFormItem = () => {
|
||||
formData.inputParams.push({
|
||||
name: "",
|
||||
type: "",
|
||||
desc: "",
|
||||
required: false,
|
||||
children: [],
|
||||
});
|
||||
emits("contentChange");
|
||||
};
|
||||
|
||||
const dynamicForm = ref();
|
||||
|
||||
const setNodeProperties = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
const data = toRaw(formData);
|
||||
lf.setProperties(props.model.id, {
|
||||
...props.properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
dynamicForm.value.clearValidate()
|
||||
}
|
||||
};
|
||||
|
||||
const nodeOperatingStatus = ref("NORMAL");
|
||||
const inputJsonData = ref({});
|
||||
const outputJsonData = ref({});
|
||||
|
||||
watch(
|
||||
() => props.properties,
|
||||
() => {
|
||||
if (props.properties.inputParams && props.properties.inputParams.length > 0) {
|
||||
formData.inputParams = props.properties.inputParams;
|
||||
nextTick(() => {
|
||||
initNodeZoom(props.model.id, props?.properties?.zoom ?? true, '.node__box', true)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
// 删除顶层表单项
|
||||
const deleteTopLevelItem = (fullPath) => {
|
||||
// 从顶层数据开始查找
|
||||
let currentLevel = formData.inputParams;
|
||||
|
||||
// 遍历路径（除最后一个索引，因为最后一个是要删除的项）
|
||||
for (let i = 0; i < fullPath.length - 1; i++) {
|
||||
const index = fullPath[i];
|
||||
// 进入下一层级
|
||||
currentLevel = currentLevel[index].children;
|
||||
}
|
||||
|
||||
// 最后一个索引是当前层级要删除的项
|
||||
const lastIndex = fullPath[fullPath.length - 1];
|
||||
currentLevel.splice(lastIndex, 1);
|
||||
emits("contentChange");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setNodeProperties();
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
nodeOperatingStatus.value = data.status;
|
||||
@ -207,36 +70,21 @@ onMounted(() => {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const validateForm = async () => {
|
||||
try {
|
||||
const result = await dynamicForm.value.validate();
|
||||
if (result) {
|
||||
return { valid: true, message: "验证通过" };
|
||||
} else {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
} catch {
|
||||
return { valid: false, message: "验证失败" };
|
||||
}
|
||||
};
|
||||
|
||||
const nodeZoom = ref(props?.properties?.zoom ?? true)
|
||||
const zoom = () => {
|
||||
nodeZoom.value = !nodeZoom.value
|
||||
initNodeZoom(props.model.id, nodeZoom.value, '.node__box')
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
emitter.off("setProperties");
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
validateForm,
|
||||
setNodeProperties
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -277,116 +125,6 @@ defineExpose({
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input__container {
|
||||
width: 100%;
|
||||
background-color: #fafbfc;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tag {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #1664ff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0c0d0e;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.addFormItem {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
margin: 12px 0;
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gSon-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
margin-left: 15px;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -4px;
|
||||
width: 10px;
|
||||
border-left: 1px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: transparent;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deleteBtn {
|
||||
margin-bottom: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addBtn {
|
||||
margin-bottom: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(.el-row) {
|
||||
align-items: end;
|
||||
|
||||
.el-input {
|
||||
--el-input-width: 120px;
|
||||
}
|
||||
|
||||
.el-select {
|
||||
--el-select-width: 120px;
|
||||
}
|
||||
|
||||
.el-cascader {
|
||||
--el-form-inline-content-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -24,8 +24,8 @@ export default defineConfig(({mode, command}) => {
|
||||
'typescript',
|
||||
],
|
||||
include: [
|
||||
// 确保其他依赖被优化
|
||||
'monaco-editor/esm/vs/language/typescript/monaco.contribution',
|
||||
// 确保其他依赖被优化
|
||||
'monaco-editor/esm/vs/language/typescript/monaco.contribution',
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user