602 lines
16 KiB
Vue
602 lines
16 KiB
Vue
<template>
|
||
<div class="node__container" :class="props.model.id">
|
||
<NodeState :state="nodeOperatingStatus">
|
||
<template #input>
|
||
<JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
|
||
</template>
|
||
<template #output>
|
||
<JsonViewer
|
||
v-if="props.properties.outputType === 'json'"
|
||
:value="outputJsonData"
|
||
copyable
|
||
boxed
|
||
sort
|
||
theme="light"
|
||
/>
|
||
<el-image
|
||
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"
|
||
/>
|
||
</template>
|
||
</NodeState>
|
||
<NodeTitle
|
||
:icon="props.properties.icon"
|
||
:nodeId="props.model.id"
|
||
:nodeProperties="props.properties"
|
||
:nodeType="props.properties.nodeType || 'NONE'"
|
||
:nodeName="props.properties.name"
|
||
:nodeDesc="props.properties.desc"
|
||
:zoom-state="nodeZoom"
|
||
@zoom="zoom"
|
||
/>
|
||
<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" 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: true,
|
||
message: '请输入参数值',
|
||
trigger: 'blur',
|
||
},
|
||
]"
|
||
: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-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>
|
||
</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 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,
|
||
properties: Object,
|
||
});
|
||
|
||
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 nodeOperatingStatus = ref("NORMAL");
|
||
const inputJsonData = ref({});
|
||
const outputJsonData = 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) => {
|
||
if (data.nodeId === props.model.id) {
|
||
nodeOperatingStatus.value = data.status;
|
||
let inputData = {};
|
||
let output = {};
|
||
try {
|
||
inputData = JSON.parse(data.paramsIn) || {};
|
||
output = JSON.parse(data.paramsOut) || {};
|
||
} catch (error) {
|
||
inputData = data.paramsIn || {};
|
||
output = data.paramsOut || {};
|
||
}
|
||
inputJsonData.value = inputData;
|
||
outputJsonData.value = output;
|
||
emits("contentChange");
|
||
}
|
||
});
|
||
|
||
emitter.on("contentChange", (data) => {
|
||
if (data.id === props.model.id) {
|
||
nodeOperatingStatus.value = "NORMAL";
|
||
inputJsonData.value = {};
|
||
outputJsonData.value = {};
|
||
emits("contentChange");
|
||
}
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
emitter.off("changeNodeState");
|
||
emitter.off("contentChange");
|
||
});
|
||
|
||
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>
|