feat: code代码节点
This commit is contained in:
parent
1918528812
commit
090183a287
@ -1,26 +1,25 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
v-model="props.drawer"
|
||||
custom-class="custom-drawer-header"
|
||||
class="no-header-margin"
|
||||
: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-collapse v-model="activeNames">
|
||||
<el-collapse-item name="1" icon-position="left">
|
||||
<template #title>
|
||||
输入参数
|
||||
<el-button
|
||||
@click="addFormItem('inputParams')"
|
||||
:circle="true"
|
||||
size="small"
|
||||
@click="(e) => addFormItem(e, 'nodeParams')"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
<el-icon :size="14"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formData"
|
||||
@ -40,25 +39,24 @@
|
||||
@delete-item="(path) => deleteTopLevelItem(path, 'inputParams')"
|
||||
/>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
|
||||
<div v-if="['currentLoop', 'serviceNode'].includes(props.data.type)">
|
||||
<div class="input__container">
|
||||
<div class="title">
|
||||
<div class="left">
|
||||
<div class="tag"></div>
|
||||
<div class="text">输入</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item name="1" icon-position="left">
|
||||
<template #title>
|
||||
输入参数
|
||||
<el-button
|
||||
:circle="true"
|
||||
@click="addFormItem('nodeParams')"
|
||||
size="small"
|
||||
@click="(e) => addFormItem(e, 'nodeParams')"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
<el-icon :size="14"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
@ -167,28 +165,30 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form-item>
|
||||
<el-button
|
||||
:icon="Minus"
|
||||
circle
|
||||
size="small"
|
||||
@click="handleDelete(index)"
|
||||
class="deleteBtn"
|
||||
/>
|
||||
</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-collapse-item>
|
||||
<el-collapse-item name="2" icon-position="left">
|
||||
<template #title>
|
||||
输出参数
|
||||
<el-button
|
||||
@click="addFormItem('outputParams')"
|
||||
:circle="true"
|
||||
size="small"
|
||||
@click="(e) => addFormItem(e, 'outputParams')"
|
||||
class="addFormItem"
|
||||
>
|
||||
<el-icon :size="20"><Plus /></el-icon>
|
||||
<el-icon :size="14"><Plus /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<div class="form__container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
@ -210,9 +210,190 @@
|
||||
/>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
|
||||
<div v-if="props.data.type === 'code'">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item name="1" icon-position="left">
|
||||
<template #title>
|
||||
输入参数
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="这里输入的变量可以被下方的代码引用。"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="header-icon" style="margin-left: 6px">
|
||||
<info-filled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<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 v-if="property.name !== 'code'">
|
||||
<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-button
|
||||
:icon="Minus"
|
||||
circle
|
||||
size="small"
|
||||
@click="handleDelete(index)"
|
||||
class="deleteBtn"
|
||||
/>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="代码" name="2" icon-position="left">
|
||||
<div class="code__container">
|
||||
<div ref="codeRef" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="3" icon-position="left">
|
||||
<template #title>
|
||||
输出参数
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="这里定义的输出变量可以被后续节点引用。"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="header-icon" style="margin-left: 6px">
|
||||
<info-filled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<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>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">关闭</el-button>
|
||||
@ -223,9 +404,12 @@
|
||||
|
||||
<script setup>
|
||||
import FormItemRecursive from "./FormItemRecursive.vue";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
import { Plus, Minus } from "@element-plus/icons-vue";
|
||||
import { getInput, filterEmptyName } from "@/utils/flow";
|
||||
import { emitter } from "@/utils/eventBus";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import * as monaco from 'monaco-editor';
|
||||
import { nextTick, onUnmounted, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
drawer: Boolean,
|
||||
@ -242,6 +426,9 @@ const formData = reactive({
|
||||
|
||||
const rules = reactive({});
|
||||
|
||||
const codeRef = ref()
|
||||
let editorInstance
|
||||
|
||||
const handleClose = (done) => {
|
||||
const filteredObj = {
|
||||
inputParams: filterEmptyName(formData.inputParams),
|
||||
@ -276,7 +463,8 @@ const deleteTopLevelItem = (fullPath, propPath) => {
|
||||
currentLevel.splice(lastIndex, 1);
|
||||
}
|
||||
|
||||
const addFormItem = (type) => {
|
||||
const addFormItem = (e, type) => {
|
||||
e.stopPropagation();
|
||||
const obj ={
|
||||
name: "",
|
||||
type: type === 'nodeParams' ? 'input' : 'string',
|
||||
@ -337,6 +525,95 @@ const visibleChange = (value, index, quote) => {
|
||||
}
|
||||
};
|
||||
|
||||
const activeNames = ref(['1', '2'])
|
||||
|
||||
function hasErrors() {
|
||||
const model = editorInstance.getModel();
|
||||
if (!model) return false;
|
||||
|
||||
// 获取当前模型的所有标记
|
||||
const markers = monaco.editor.getModelMarkers({ resource: model.uri });
|
||||
// 检查是否存在错误级别标记
|
||||
return markers.some(marker => marker.severity === monaco.MarkerSeverity.Error);
|
||||
}
|
||||
|
||||
const initEditor = () => {
|
||||
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
||||
target: monaco.languages.typescript.ScriptTarget.ES2020,
|
||||
allowNonTsExtensions: true, // 允许非 ts 扩展名（.js）
|
||||
checkJs: true, // 对 .js 文件进行类型检查
|
||||
strict: true, // 启用所有严格检查
|
||||
noImplicitAny: false, // 禁止隐式 any
|
||||
noUnusedLocals: true, // 未使用的局部变量报错（可选）
|
||||
noUnusedParameters: true, // 未使用的参数报错（可选）
|
||||
});
|
||||
|
||||
// 确保语义验证开启（默认就是开启的，但可以显式设置）
|
||||
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
||||
noSemanticValidation: false, // 开启语义检查
|
||||
noSyntaxValidation: false, // 开启语法检查
|
||||
});
|
||||
|
||||
|
||||
editorInstance = monaco.editor.create(codeRef.value, {
|
||||
value: [`
|
||||
// 方法定义不能修改
|
||||
function handler(params) {
|
||||
// 返回值是一个可序列化成 json 的 dict 或 object
|
||||
const result ={
|
||||
type: 2,
|
||||
message: params.input
|
||||
}
|
||||
return result
|
||||
}`].join('\n'),
|
||||
language: 'javascript',
|
||||
fontSize: 14,
|
||||
lineNumbers: 'on',
|
||||
roundedSelection: true,
|
||||
scrollBeyondLastLine: false,
|
||||
formatOnPaste: true,
|
||||
formatOnType: true,
|
||||
quickSuggestions: true,
|
||||
suggestOnTriggerCharacters: true,
|
||||
// 自动完成
|
||||
suggest: {
|
||||
showWords: true,
|
||||
showFunctions: true,
|
||||
showVariables: true,
|
||||
showClasses: true,
|
||||
showModules: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 设置代码值
|
||||
const setValue = (value) => {
|
||||
if (editorInstance) {
|
||||
editorInstance.setValue(value)
|
||||
}
|
||||
}
|
||||
|
||||
// 销毁编辑器
|
||||
const disposeEditor = () => {
|
||||
if (editorInstance) {
|
||||
editorInstance.dispose()
|
||||
editorInstance = null
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.drawer,
|
||||
(newVal) => {
|
||||
if (newVal && props.data.type === 'code') {
|
||||
nextTick(() => {
|
||||
initEditor();
|
||||
});
|
||||
} else {
|
||||
disposeEditor();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
() => {
|
||||
@ -345,7 +622,17 @@ watch(
|
||||
} else if (['currentLoop', 'serviceNode'].includes(props.data.type)) {
|
||||
formData.nodeParams = props.data.properties.nodeParams;
|
||||
formData.outputParams = props.data.properties.outputParams;
|
||||
console.log('formData', formData)
|
||||
} else if (props.data.type === "code") {
|
||||
formData.nodeParams = props.data.properties.nodeParams;
|
||||
formData.outputParams = props.data.properties.outputParams;
|
||||
const codeParams = props.data.properties.nodeParams.find(item => item.name === 'code')
|
||||
if (codeParams) {
|
||||
nextTick(() => {
|
||||
if (editorInstance) {
|
||||
setValue(codeParams.input)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -354,47 +641,14 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
disposeEditor()
|
||||
})
|
||||
</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;
|
||||
}
|
||||
}
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.form__container {
|
||||
@ -421,6 +675,8 @@ watch(
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sub-properties {
|
||||
margin-left: 10px;
|
||||
.zw {
|
||||
@ -458,73 +714,26 @@ watch(
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.deleteBtn {
|
||||
margin-bottom: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form__container {
|
||||
.code__container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
text-align: initial;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
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>
|
||||
|
||||
<style lang="scss">
|
||||
/* 不加 scoped，全局生效 */
|
||||
.no-header-margin .el-drawer__header {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@ -306,7 +306,10 @@ export const collapseList = [
|
||||
{ name: "input", type: "input", input: "", required: true }
|
||||
],
|
||||
outputType: 'json',
|
||||
outputParams: [{ name: 'result', type: 'object', children: [], desc: 'js节点返回'}]
|
||||
outputParams: [{ name: 'result', type: 'object', children: [
|
||||
{name: 'type', type: 'number', desc: '占位属性'},
|
||||
{name: 'message', type: 'string', desc: '占位属性'}
|
||||
], desc: 'js节点返回'}]
|
||||
},
|
||||
{
|
||||
icon: microphoneSvg,
|
||||
|
||||
@ -144,16 +144,6 @@ class CodeNodeHtmlModel extends HtmlNodeModel {
|
||||
this.componentInstance = instance;
|
||||
}
|
||||
|
||||
// 验证表单
|
||||
async validateForm() {
|
||||
const result = this.componentInstance.validateForm()
|
||||
return result
|
||||
}
|
||||
|
||||
setCustomProperties() {
|
||||
this.componentInstance.setNodeProperties()
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置节点属性
|
||||
* 包括宽度、高度、文本编辑属性等
|
||||
|
||||
@ -40,196 +40,17 @@
|
||||
:nodeType="props.properties.nodeType || 'NONE'"
|
||||
: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?.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 v-if="property.name !== 'code'">
|
||||
<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"
|
||||
: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 class="code__container">
|
||||
<div ref="codeRef" style="width: 100%; height: 100%"></div>
|
||||
</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 { 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 "../common/FormItemRecursive.vue";
|
||||
import * as monaco from 'monaco-editor';
|
||||
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
@ -238,87 +59,6 @@ const props = defineProps({
|
||||
|
||||
const emits = defineEmits(["contentChange"]);
|
||||
|
||||
const codeRef = ref()
|
||||
let editorInstance
|
||||
|
||||
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 (hasErrors()) {
|
||||
console.log('编辑器中有错误')
|
||||
return
|
||||
}
|
||||
if (result && flag) {
|
||||
const data = toRaw(formData);
|
||||
const targetObj = data.nodeParams.find(item => item.name === 'code');
|
||||
if (targetObj) {
|
||||
// 存在：修改该对象的 input 属性
|
||||
targetObj.input = editorInstance.getValue();
|
||||
} else {
|
||||
data.nodeParams.push(
|
||||
{ name: "code", type: "input", input: editorInstance.getValue() }
|
||||
)
|
||||
}
|
||||
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
...properties,
|
||||
...data,
|
||||
zoom: nodeZoom.value
|
||||
});
|
||||
emits("contentChange");
|
||||
}
|
||||
} catch {
|
||||
console.log(12323)
|
||||
// dynamicForm.value.clearValidate();
|
||||
}
|
||||
};
|
||||
|
||||
const setNodeName = (name) => {
|
||||
const properties = lf.getProperties(props.model.id);
|
||||
lf.setProperties(props.model.id, {
|
||||
@ -333,203 +73,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: "input",
|
||||
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) {
|
||||
|
||||
// .filter(item => item.name !== 'code')
|
||||
formData.nodeParams = props.properties.nodeParams;
|
||||
const codeParams = props.properties.nodeParams.find(item => item.name === 'code')
|
||||
if (codeParams) {
|
||||
nextTick(() => {
|
||||
if (editorInstance) {
|
||||
setValue(codeParams.input)
|
||||
}
|
||||
})
|
||||
}
|
||||
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; // 允许默认粘贴行为
|
||||
}
|
||||
};
|
||||
|
||||
function hasErrors() {
|
||||
const model = editorInstance.getModel();
|
||||
if (!model) return false;
|
||||
|
||||
// 获取当前模型的所有标记
|
||||
const markers = monaco.editor.getModelMarkers({ resource: model.uri });
|
||||
// 检查是否存在错误级别标记
|
||||
return markers.some(marker => marker.severity === monaco.MarkerSeverity.Error);
|
||||
}
|
||||
|
||||
const initEditor = () => {
|
||||
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
||||
target: monaco.languages.typescript.ScriptTarget.ES2020,
|
||||
allowNonTsExtensions: true, // 允许非 ts 扩展名（.js）
|
||||
checkJs: true, // 对 .js 文件进行类型检查
|
||||
strict: true, // 启用所有严格检查
|
||||
noImplicitAny: false, // 禁止隐式 any
|
||||
noUnusedLocals: true, // 未使用的局部变量报错（可选）
|
||||
noUnusedParameters: true, // 未使用的参数报错（可选）
|
||||
});
|
||||
|
||||
// 确保语义验证开启（默认就是开启的，但可以显式设置）
|
||||
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
||||
noSemanticValidation: false, // 开启语义检查
|
||||
noSyntaxValidation: false, // 开启语法检查
|
||||
});
|
||||
|
||||
|
||||
editorInstance = monaco.editor.create(codeRef.value, {
|
||||
value: [`
|
||||
// 方法定义不能修改
|
||||
function handler(params) {
|
||||
// 返回值是一个可序列化成 json 的 dict 或 object
|
||||
const ret={
|
||||
result: {
|
||||
type: 2,
|
||||
message: params.input
|
||||
}
|
||||
|
||||
}
|
||||
return ret
|
||||
}`].join('\n'),
|
||||
language: 'javascript',
|
||||
fontSize: 14,
|
||||
lineNumbers: 'on',
|
||||
roundedSelection: true,
|
||||
scrollBeyondLastLine: false,
|
||||
formatOnPaste: true,
|
||||
formatOnType: true,
|
||||
quickSuggestions: true,
|
||||
suggestOnTriggerCharacters: true,
|
||||
// 自动完成
|
||||
suggest: {
|
||||
showWords: true,
|
||||
showFunctions: true,
|
||||
showVariables: true,
|
||||
showClasses: true,
|
||||
showModules: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 设置代码值
|
||||
const setValue = (value) => {
|
||||
if (editorInstance) {
|
||||
editorInstance.setValue(value)
|
||||
}
|
||||
}
|
||||
|
||||
// 销毁编辑器
|
||||
const disposeEditor = () => {
|
||||
if (editorInstance) {
|
||||
editorInstance.dispose()
|
||||
editorInstance = null
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emitter.on("changeNodeState", (data) => {
|
||||
if (data.nodeId === props.model.id) {
|
||||
@ -559,179 +102,24 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
|
||||
initEditor()
|
||||
emitter.on("setProperties", (data) => {
|
||||
if (data.id === props.model.id) {
|
||||
emits("contentChange");
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("changeNodeState");
|
||||
emitter.off("contentChange");
|
||||
disposeEditor()
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code__container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
text-align: initial;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user