463 lines
14 KiB
Vue
463 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<el-collapse v-model="activeNames">
|
|||
|
|
<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="dynamicFormRef"
|
|||
|
|
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)"
|
|||
|
|
:disabled="property?.disabled || false"
|
|||
|
|
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>
|
|||
|
|
<el-button
|
|||
|
|
:circle="true"
|
|||
|
|
size="small"
|
|||
|
|
@click="(e) => addFormItem(e, 'outputParams')"
|
|||
|
|
class="addFormItem"
|
|||
|
|
>
|
|||
|
|
<el-icon :size="14"><Plus /></el-icon>
|
|||
|
|
</el-button>
|
|||
|
|
</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>
|
|||
|
|
</el-collapse>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, watch, nextTick, onBeforeUnmount, onMounted } from 'vue'
|
|||
|
|
import { Plus, Minus } from '@element-plus/icons-vue'
|
|||
|
|
import FormItemRecursive from '../FormItemRecursive.vue'
|
|||
|
|
import * as monaco from 'monaco-editor';
|
|||
|
|
import { getInput } from '@/utils/flow'
|
|||
|
|
import { useQuote } from './useQuote.js'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
data: Object
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['save-success', 'save-error'])
|
|||
|
|
|
|||
|
|
const formData = reactive({
|
|||
|
|
nodeParams: [],
|
|||
|
|
outputParams: []
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const codeRef = ref()
|
|||
|
|
let editorInstance
|
|||
|
|
|
|||
|
|
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 = (type) => {
|
|||
|
|
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: ['{}'].join('\n'),
|
|||
|
|
language: type === 'code' ? 'javascript' : 'json',
|
|||
|
|
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
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const rules = reactive({})
|
|||
|
|
const outputRules = reactive({})
|
|||
|
|
const dynamicFormRef = ref()
|
|||
|
|
const outputFormRef = ref()
|
|||
|
|
const activeNames = ref(['1', '2'])
|
|||
|
|
|
|||
|
|
// 使用共享的 quote 逻辑
|
|||
|
|
const { quoteOptions, cascaderRefs, handleTypeChange, cascaderChange, visibleChange } = useQuote(props.data.id)
|
|||
|
|
|
|||
|
|
// 添加表单项
|
|||
|
|
const addFormItem = (e, type) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
const obj = {
|
|||
|
|
name: '',
|
|||
|
|
type: type === 'nodeParams' ? 'input' : 'string',
|
|||
|
|
required: false,
|
|||
|
|
children: [],
|
|||
|
|
input: ''
|
|||
|
|
}
|
|||
|
|
if (!formData[type]) formData[type] = []
|
|||
|
|
formData[type].push(obj)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除输入参数（非递归）
|
|||
|
|
const handleDelete = (index) => {
|
|||
|
|
formData.nodeParams.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除顶层输出参数（递归删除通过 FormItemRecursive 的 emit 处理）
|
|||
|
|
const deleteTopLevelItem = (fullPath, propPath) => {
|
|||
|
|
let currentLevel = formData[propPath]
|
|||
|
|
for (let i = 0; i < fullPath.length - 1; i++) {
|
|||
|
|
currentLevel = currentLevel[fullPath[i]].children
|
|||
|
|
}
|
|||
|
|
const lastIndex = fullPath[fullPath.length - 1]
|
|||
|
|
currentLevel.splice(lastIndex, 1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化数据
|
|||
|
|
const initData = () => {
|
|||
|
|
const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
|
|||
|
|
const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
|
|||
|
|
formData.nodeParams = nodeParams;
|
|||
|
|
formData.outputParams = outputParams;
|
|||
|
|
const codeParams = props.data.properties.nodeParams.find(item => item.name === 'code')
|
|||
|
|
if (codeParams) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
if (editorInstance) {
|
|||
|
|
setValue(codeParams.input)
|
|||
|
|
}
|
|||
|
|
}, 100)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存验证
|
|||
|
|
const validateAndSave = async () => {
|
|||
|
|
const targetObj = formData.nodeParams.find(item => item.name === 'code');
|
|||
|
|
if (targetObj) {
|
|||
|
|
// 存在：修改该对象的 input 属性
|
|||
|
|
targetObj.input = editorInstance.getValue();
|
|||
|
|
} else {
|
|||
|
|
formData.nodeParams.push(
|
|||
|
|
{ name: "code", type: "input", input: editorInstance.getValue() }
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let inputValid = true
|
|||
|
|
let outputValid = true
|
|||
|
|
if (dynamicFormRef.value) {
|
|||
|
|
await dynamicFormRef.value.validate((valid) => { if (!valid) inputValid = false })
|
|||
|
|
}
|
|||
|
|
if (outputFormRef.value) {
|
|||
|
|
await outputFormRef.value.validate((valid) => { if (!valid) outputValid = false })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存到 lf
|
|||
|
|
lf.setProperties(props.data.id, {
|
|||
|
|
...props.data.properties,
|
|||
|
|
...formData
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (hasErrors()) {
|
|||
|
|
emit('save-error')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (inputValid && outputValid) {
|
|||
|
|
emit('save-success')
|
|||
|
|
} else {
|
|||
|
|
emit('save-error')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
initEditor('code')
|
|||
|
|
initData()
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
defineExpose({ validateAndSave })
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
disposeEditor()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.deleteBtn {
|
|||
|
|
margin-bottom: 22px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code__container {
|
|||
|
|
display: flex;
|
|||
|
|
position: relative;
|
|||
|
|
text-align: initial;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 300px;
|
|||
|
|
margin: 12px 0;
|
|||
|
|
}
|
|||
|
|
</style>
|