feat: flow更改
This commit is contained in:
parent
5be800e579
commit
d5ce6ee297
@ -7,8 +7,8 @@ VITE_APP_ENV = 'development'
|
|||||||
# 招商车研物联网平台/开发环境
|
# 招商车研物联网平台/开发环境
|
||||||
VITE_APP_BASE_API = '/dev-api'
|
VITE_APP_BASE_API = '/dev-api'
|
||||||
|
|
||||||
VITE_API_URL = http://192.168.0.201:13080
|
VITE_API_URL = http://192.168.1.201:13080
|
||||||
VITE_WS_URL = ws://192.168.0.201:13080/ws
|
VITE_WS_URL = ws://192.168.1.201:13080/ws
|
||||||
|
|
||||||
# explanation
|
# explanation
|
||||||
VITE_INSPECTION_TYPE = "inspection"
|
VITE_INSPECTION_TYPE = "inspection"
|
||||||
@ -61,3 +61,11 @@ export function flowStop(instId) {
|
|||||||
method: 'post'
|
method: 'post'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getArmStatus(params) {
|
||||||
|
return request({
|
||||||
|
url: '/api/arm/getPose',
|
||||||
|
method: 'get',
|
||||||
|
params: params
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -174,7 +174,6 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
console.log(34566)
|
|
||||||
emitter.off("deleteNode");
|
emitter.off("deleteNode");
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
348
src/views/flow/components/params/BasicNodeParams.vue
Normal file
348
src/views/flow/components/params/BasicNodeParams.vue
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<el-collapse v-model="activeNames">
|
||||||
|
<!-- 输入参数 -->
|
||||||
|
<el-collapse-item name="1" icon-position="left">
|
||||||
|
<template #title>
|
||||||
|
输入参数
|
||||||
|
<el-button :circle="true" size="small" @click="(e) => addFormItem(e, 'nodeParams')" class="addFormItem">
|
||||||
|
<el-icon :size="14">
|
||||||
|
<Plus />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<div class="form__container">
|
||||||
|
<el-button type="primary" v-if="['AGV_MOVE_TO_POINT', 'ALM'].includes(props.data.properties.action)" size="small" @click="openRobotForm(props.data.properties.action)">获取位置</el-button>
|
||||||
|
<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>
|
||||||
|
<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, formData, property.type)">
|
||||||
|
<el-option label="引用" value="quote" />
|
||||||
|
<el-option label="输入" value="input" />
|
||||||
|
</el-select>
|
||||||
|
<el-form-item v-if="property.type === 'input'"
|
||||||
|
:rules="testRule(property)"
|
||||||
|
: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, formData, 'nodeParams')" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form-item>
|
||||||
|
<el-button :icon="Minus" circle size="small" :disabled="property?.disabled || false"
|
||||||
|
@click="handleDelete(index)" class="deleteBtn" />
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
|
||||||
|
<!-- 输出参数 -->
|
||||||
|
<el-collapse-item name="2" icon-position="left">
|
||||||
|
<template #title>
|
||||||
|
输出参数
|
||||||
|
<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-dialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
title="获取位置信息"
|
||||||
|
width="360"
|
||||||
|
>
|
||||||
|
<el-form ref="robotFormRef" :model="robotForm" :rules="robotFormRules" label-width="auto">
|
||||||
|
<el-form-item label="终端ID" prop="terminalId">
|
||||||
|
<el-input v-model="robotForm.terminalId" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="设备ID" prop="deviceId">
|
||||||
|
<el-input v-model="robotForm.deviceId" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitRobotForm">确认</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, watch, nextTick } from 'vue'
|
||||||
|
import { Plus, Minus } from '@element-plus/icons-vue'
|
||||||
|
import FormItemRecursive from '../FormItemRecursive.vue'
|
||||||
|
import { getInput } from '@/utils/flow'
|
||||||
|
import { useQuote } from './useQuote.js'
|
||||||
|
import { getArmStatus } from '@/api/device/flow'
|
||||||
|
import { de } from 'element-plus/es/locale/index.mjs'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: Object
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['save-success', 'save-error'])
|
||||||
|
|
||||||
|
const formData = reactive({
|
||||||
|
nodeParams: [],
|
||||||
|
outputParams: []
|
||||||
|
})
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
() => {
|
||||||
|
initData()
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
// 保存验证
|
||||||
|
const validateAndSave = async () => {
|
||||||
|
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 (inputValid && outputValid) {
|
||||||
|
emit('save-success')
|
||||||
|
} else {
|
||||||
|
emit('save-error')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const robotFormRef = ref(null)
|
||||||
|
const robotFormRules = reactive({
|
||||||
|
terminalId: [{ required: true, message: '终端ID不能为空', trigger: 'blur' }],
|
||||||
|
deviceId: [{ required: true, message: '设备ID不能为空', trigger: 'blur' }]
|
||||||
|
})
|
||||||
|
const robotForm = reactive({
|
||||||
|
deviceId: '',
|
||||||
|
terminalId: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const testRule = (property) => {
|
||||||
|
if (property?.name === 'acceleration') {
|
||||||
|
return [
|
||||||
|
{ required: true, message: '请输入参数值', trigger: 'blur' },
|
||||||
|
{ validator: () => {
|
||||||
|
if (formData.nodeParams.find(param => param.name === 'acceleration')?.input > formData.nodeParams.find(param => param.name === 'velocity')?.input) {
|
||||||
|
return Promise.resolve()
|
||||||
|
} else {
|
||||||
|
return Promise.reject(new Error('加速度必须大于速度'))
|
||||||
|
}
|
||||||
|
}, trigger: 'blur' }
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
return [{ required: property?.required ?? true, message: '请输入参数值', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
|
||||||
|
const robotFormAction = ref()
|
||||||
|
|
||||||
|
const submitRobotForm = () => {
|
||||||
|
if (robotFormAction.value === 'AGV_MOVE_TO_POINT') {
|
||||||
|
|
||||||
|
} else if (robotFormAction.value === 'ALM') {
|
||||||
|
robotFormRef.value.validate(async (valid) => {
|
||||||
|
if (valid) {
|
||||||
|
try {
|
||||||
|
const response = await getArmStatus({ deviceId: robotForm.deviceId, terminalId: robotForm.terminalId })
|
||||||
|
if (response && response.data) {
|
||||||
|
dialogVisible.value = false
|
||||||
|
const { x, y, z, rx, ry, rz } = response.data
|
||||||
|
const testMap = {
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
z: z,
|
||||||
|
rx: rx,
|
||||||
|
ry: ry,
|
||||||
|
rz: rz,
|
||||||
|
deviceId: robotForm.deviceId
|
||||||
|
}
|
||||||
|
// 将获取到的位置信息设置到 formData 中
|
||||||
|
formData.nodeParams.forEach(param => {
|
||||||
|
if (testMap.hasOwnProperty(param.name)) {
|
||||||
|
param.input = testMap[param.name]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取位置信息失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openRobotForm = (action) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
robotFormAction.value = action
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ validateAndSave })
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
463
src/views/flow/components/params/CodeNodeParams.vue
Normal file
463
src/views/flow/components/params/CodeNodeParams.vue
Normal file
@ -0,0 +1,463 @@
|
|||||||
|
<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>
|
||||||
654
src/views/flow/components/params/HttpNodeParams.vue
Normal file
654
src/views/flow/components/params/HttpNodeParams.vue
Normal file
@ -0,0 +1,654 @@
|
|||||||
|
<template>
|
||||||
|
<el-form :inline="true" :model="httpNodeData" :rules="rules" class="http-form" ref="dynamicFormRef"
|
||||||
|
label-position="top" label-width="auto">
|
||||||
|
<el-collapse v-model="activeNames">
|
||||||
|
<el-collapse-item name="1" icon-position="left">
|
||||||
|
<template #title>
|
||||||
|
请求配置
|
||||||
|
<el-tooltip class="box-item" effect="dark" content="支持HTTP/HTTPS协议" placement="top">
|
||||||
|
<el-icon class="header-icon" style="margin-left: 6px">
|
||||||
|
<info-filled />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
<div class="form__container">
|
||||||
|
<div v-for="(property, index) in httpNodeData.config" :key="index">
|
||||||
|
<el-row>
|
||||||
|
<el-form-item :label="index === 0 ? '参数名' : ''" :prop="`config.${index}.name`" :rules="[
|
||||||
|
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||||
|
]">
|
||||||
|
<el-input :disabled="true" class="param-name" v-model="property.name" placeholder="请输入"
|
||||||
|
clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="index === 0 ? '参数值' : ''" :prop="`config.${index}.input`">
|
||||||
|
<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="`config.${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="`config.${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>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
<el-collapse-item name="2" icon-position="left">
|
||||||
|
<template #title>
|
||||||
|
Header配置
|
||||||
|
<el-button :circle="true" size="small" @click="(e) => addHttpNodeFormItem(e, 'headers')"
|
||||||
|
class="addFormItem">
|
||||||
|
<el-icon :size="14">
|
||||||
|
<Plus />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<div class="form__container">
|
||||||
|
<div v-for="(property, index) in httpNodeData.headers" :key="index">
|
||||||
|
<el-row>
|
||||||
|
<el-form-item :label="index === 0 ? '参数名' : ''"
|
||||||
|
:prop="httpNodeData.headers.length > index ? `headers.${index}.name` : undefined"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||||
|
]">
|
||||||
|
<el-input class="param-name" v-model="property.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="index === 0 ? '参数值' : ''"
|
||||||
|
:prop="httpNodeData.headers.length > index ? `headers.${index}.input` : undefined">
|
||||||
|
<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="`headers.${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="`headers.${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="handleHttpNodeDelete('headers', index)"
|
||||||
|
class="deleteBtn" />
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
<el-collapse-item name="3" icon-position="left">
|
||||||
|
<template #title>
|
||||||
|
Param配置
|
||||||
|
<el-button :circle="true" size="small" @click="(e) => addHttpNodeFormItem(e, 'params')"
|
||||||
|
class="addFormItem">
|
||||||
|
<el-icon :size="14">
|
||||||
|
<Plus />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<div class="form__container">
|
||||||
|
<div v-for="(property, index) in httpNodeData.params" :key="index">
|
||||||
|
<el-row>
|
||||||
|
<el-form-item :label="index === 0 ? '参数名' : ''"
|
||||||
|
:prop="httpNodeData.params.length > index ? `params.${index}.name` : undefined" :rules="[
|
||||||
|
{ required: true, message: '请输入参数名123', trigger: 'blur' },
|
||||||
|
]">
|
||||||
|
<el-input class="param-name" v-model="property.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="index === 0 ? '参数值' : ''"
|
||||||
|
:prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined">
|
||||||
|
<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="httpNodeData.params.length > index ? `params.${index}.input` : undefined">
|
||||||
|
<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="`params.${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="handleHttpNodeDelete('params', index)"
|
||||||
|
class="deleteBtn" />
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
<el-collapse-item name="4" title="Body配置" icon-position="left">
|
||||||
|
<template #title>
|
||||||
|
Body配置
|
||||||
|
<el-button
|
||||||
|
:circle="true"
|
||||||
|
size="small"
|
||||||
|
@click="(e) => addHttpNodeFormItem(e, 'body')"
|
||||||
|
class="addFormItem"
|
||||||
|
v-if="httpNodeData?.body?.type === 'form-data'"
|
||||||
|
>
|
||||||
|
<el-icon :size="14"><Plus /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<div class="form__container">
|
||||||
|
<el-select v-model="httpNodeData.body.type">
|
||||||
|
<el-option label="JSON" value="json" />
|
||||||
|
<el-option label="form-data" value="form-data" />
|
||||||
|
</el-select>
|
||||||
|
<div class="code__container" v-show="httpNodeData?.body?.type === 'json'">
|
||||||
|
<div ref="codeRef" style="width: 100%; height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="test" v-if="httpNodeData?.body?.type === 'form-data'">
|
||||||
|
<div v-for="(property, index) in httpNodeData.body.formData" :key="index">
|
||||||
|
<el-row>
|
||||||
|
<el-form-item
|
||||||
|
:label="index === 0 ? '参数名' : ''"
|
||||||
|
:prop="`body.formData.${index}.name`"
|
||||||
|
:rules="[
|
||||||
|
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<el-input
|
||||||
|
class="param-name"
|
||||||
|
v-model="property.name"
|
||||||
|
placeholder="请输入"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
:label="index === 0 ? '参数值' : ''"
|
||||||
|
:prop="`body.formData.${index}.input`"
|
||||||
|
>
|
||||||
|
<el-select
|
||||||
|
v-model="property.type"
|
||||||
|
class="param-type"
|
||||||
|
@change="handleTypeChange(index, 'httpBody')"
|
||||||
|
>
|
||||||
|
<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="`body.formData.${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="`body.formData.${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, 'httpBody')
|
||||||
|
"
|
||||||
|
@change="(value) => cascaderChange(value, index, 'httpBody')"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form-item>
|
||||||
|
<el-button
|
||||||
|
:icon="Minus"
|
||||||
|
circle
|
||||||
|
size="small"
|
||||||
|
@click="handleHttpNodeDelete('body', index)"
|
||||||
|
class="deleteBtn"
|
||||||
|
/>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
|
||||||
|
import { Plus, Minus } from '@element-plus/icons-vue'
|
||||||
|
import FormItemRecursive from '../FormItemRecursive.vue'
|
||||||
|
import * as monaco from 'monaco-editor';
|
||||||
|
import { getInput, transformHttpNodeData } 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: '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 dynamicFormRef = ref()
|
||||||
|
const activeNames = ref(['1', '2', '3', '4'])
|
||||||
|
|
||||||
|
// 使用共享的 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)
|
||||||
|
}
|
||||||
|
|
||||||
|
// HTTP 节点数据
|
||||||
|
const httpNodeData = ref({
|
||||||
|
body: {
|
||||||
|
bodyType: 'json',
|
||||||
|
json: '{}',
|
||||||
|
formData: []
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const addHttpNodeFormItem = (e, type) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (type === 'body') {
|
||||||
|
if (!httpNodeData.value.body.formData) {
|
||||||
|
httpNodeData.value.body.formData = [];
|
||||||
|
}
|
||||||
|
httpNodeData.value.body.formData.push({ name: "", type: "input", input: ""});
|
||||||
|
} else {
|
||||||
|
if (!httpNodeData.value[type]) {
|
||||||
|
httpNodeData.value[type] = [];
|
||||||
|
}
|
||||||
|
httpNodeData.value[type].push({ name: "", type: "input", input: ""});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleHttpNodeDelete = (type, index) => {
|
||||||
|
if (type === 'body') {
|
||||||
|
httpNodeData.value.body.formData.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
httpNodeData.value[type].splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
|
const initData = () => {
|
||||||
|
const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
|
||||||
|
const transformedData = transformHttpNodeData(nodeParams);
|
||||||
|
|
||||||
|
httpNodeData.value = transformedData;
|
||||||
|
if (httpNodeData.value.body.type === 'json') {
|
||||||
|
nextTick(() => {
|
||||||
|
initEditor('http');
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
if (editorInstance) {
|
||||||
|
setValue(httpNodeData.value.body.json || '{}')
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存验证
|
||||||
|
const validateAndSave = async () => {
|
||||||
|
let inputValid = true
|
||||||
|
if (dynamicFormRef.value) {
|
||||||
|
await dynamicFormRef.value.validate((valid) => { if (!valid) inputValid = false })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const nodeParams = []
|
||||||
|
nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
|
||||||
|
if (httpNodeData.value?.headers?.length > 0) {
|
||||||
|
nodeParams.push({ name: "headers", type: "input", input: "", children: httpNodeData.value.headers, disabled: true, required: true })
|
||||||
|
}
|
||||||
|
if (httpNodeData.value?.params?.length > 0) {
|
||||||
|
nodeParams.push({ name: "params", type: "input", input: "", children: httpNodeData.value.params, disabled: true, required: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
const bodyObj = {
|
||||||
|
name: "body", type: "input", input: "", children: [
|
||||||
|
{ name: 'bodyType', type: "input", input: httpNodeData.value.body.type, disabled: true },
|
||||||
|
{ name: 'json', type: "input", input: httpNodeData.value.body.type === 'json' ? editorInstance.getValue() : '' },
|
||||||
|
{ name: 'formData', type: "input", input: "", children: httpNodeData.value.body.formData }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
nodeParams.push(bodyObj)
|
||||||
|
|
||||||
|
// 保存到 lf
|
||||||
|
lf.setProperties(props.data.id, {
|
||||||
|
...props.data.properties,
|
||||||
|
nodeParams
|
||||||
|
})
|
||||||
|
|
||||||
|
if (httpNodeData.value.body.type === 'json') {
|
||||||
|
if (hasErrors()) {
|
||||||
|
emit('save-error')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inputValid) {
|
||||||
|
emit('save-success')
|
||||||
|
} else {
|
||||||
|
emit('save-error')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
initData()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
defineExpose({ validateAndSave })
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
disposeEditor()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.http-form {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-collapse {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
359
src/views/flow/components/params/SdAgentNodeParams.vue
Normal file
359
src/views/flow/components/params/SdAgentNodeParams.vue
Normal file
@ -0,0 +1,359 @@
|
|||||||
|
<template>
|
||||||
|
<el-form :inline="true" :model="sdAgentNodeData" :rules="rules" ref="dynamicFormRef" class="http-form"
|
||||||
|
label-position="top" label-width="auto">
|
||||||
|
<el-collapse v-model="activeNames">
|
||||||
|
<el-collapse-item name="1" title="请求配置" icon-position="left">
|
||||||
|
<div class="form__container">
|
||||||
|
<div v-for="(property, index) in sdAgentNodeData.config" :key="index">
|
||||||
|
<el-row>
|
||||||
|
<el-form-item :label="index === 0 ? '参数名' : ''" :prop="`config.${index}.name`" :rules="[
|
||||||
|
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||||
|
]">
|
||||||
|
<el-input :disabled="true" class="param-name" v-model="property.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="index === 0 ? '参数值' : ''" :prop="`config.${index}.input`">
|
||||||
|
<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="`config.${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="`config.${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, 'sdAgentConfig')" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form-item>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
<el-row>
|
||||||
|
<span style="margin-right: 24px">是否调用TTS接口</span>
|
||||||
|
<el-switch size="small" v-model="sdAgentNodeData.invokeTts" @change="handleTtsChange" />
|
||||||
|
</el-row>
|
||||||
|
<div v-if="sdAgentNodeData.invokeTts">
|
||||||
|
<div style="margin: 10px 0">TTS参数设置</div>
|
||||||
|
<div v-for="(property, index) in sdAgentNodeData.tts" :key="index">
|
||||||
|
<el-row>
|
||||||
|
<el-form-item :label="index === 0 ? '参数名' : ''" :prop="`tts.${index}.name`" :rules="[
|
||||||
|
{ required: true, message: '请输入参数名', trigger: 'blur' },
|
||||||
|
]">
|
||||||
|
<el-input :disabled="true" class="param-name" v-model="property.name" placeholder="请输入" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label="index === 0 ? '参数值' : ''" :prop="`tts.${index}.input`">
|
||||||
|
<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="`tts.${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="`tts.${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, 'sdAgentTts')" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form-item>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</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) => addSdAgentItem(e)" class="addFormItem">
|
||||||
|
<el-icon :size="14">
|
||||||
|
<Plus />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<div class="form__container">
|
||||||
|
<el-form :inline="true" :model="sdAgentNodeData" label-position="top" label-width="auto" :rules="outputRules"
|
||||||
|
ref="outputFormRef">
|
||||||
|
<FormItemRecursive formType="output" :current-list="sdAgentNodeData.outputParams" prop-path="outputParams"
|
||||||
|
:depth="0" :is-first-level="true" :endDepth="2" :parent-path="[]"
|
||||||
|
@delete-item="(path) => deleteSdAgentItem(path, 'outputParams')" />
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, watch, nextTick } from 'vue'
|
||||||
|
import { Plus, Minus } from '@element-plus/icons-vue'
|
||||||
|
import FormItemRecursive from '../FormItemRecursive.vue'
|
||||||
|
import { getInput, transformSdAgentNodeData } 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 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 sdAgentNodeData = ref({})
|
||||||
|
|
||||||
|
const voiceOptions = () => {
|
||||||
|
return [{
|
||||||
|
value: 'x4_xiaoyan',
|
||||||
|
label: 'x4_xiaoyan'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTtsChange = (val) => {
|
||||||
|
if (val) {
|
||||||
|
sdAgentNodeData.value.tts = []
|
||||||
|
if (!sdAgentNodeData.value.tts || sdAgentNodeData.value.tts.length === 0) {
|
||||||
|
sdAgentNodeData.value.tts = [
|
||||||
|
{ name: 'url', type: "input", input: "", disabled: true },
|
||||||
|
{ name: 'text', type: "input", input: "", disabled: true },
|
||||||
|
{ name: 'speed', type: "input", input: "", max: 100, disabled: true },
|
||||||
|
{ name: 'voice', type: "input", input: "", componentType: 'select', selectOptions: voiceOptions(), disabled: true },
|
||||||
|
{ name: 'volume', type: "input", input: "", componentType: 'number', max: 100, disabled: true }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const addSdAgentItem = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
sdAgentNodeData.value.outputParams.push({ name: "", type: "string", input: "" });
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteSdAgentItem = (fullPath, propPath) => {
|
||||||
|
// 从顶层数据开始查找
|
||||||
|
let currentLevel = sdAgentNodeData.value[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 initData = () => {
|
||||||
|
const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
|
||||||
|
const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
|
||||||
|
const transformedData = transformSdAgentNodeData(nodeParams);
|
||||||
|
sdAgentNodeData.value = {
|
||||||
|
...transformedData,
|
||||||
|
outputParams
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
() => {
|
||||||
|
initData()
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
// 保存验证
|
||||||
|
const validateAndSave = async () => {
|
||||||
|
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 })
|
||||||
|
}
|
||||||
|
|
||||||
|
const nodeParams = []
|
||||||
|
nodeParams.push({ name: "config", type: "input", input: "", children: sdAgentNodeData.value.config, required: true })
|
||||||
|
nodeParams.push({ name: "invokeTts", type: "input", input: sdAgentNodeData.value.invokeTts })
|
||||||
|
if (sdAgentNodeData.value.invokeTts) {
|
||||||
|
nodeParams.push({ name: "tts", type: "input", input: "", children: sdAgentNodeData.value.tts })
|
||||||
|
}
|
||||||
|
lf.setProperties(props.data.id, {
|
||||||
|
...props.data.properties,
|
||||||
|
nodeParams,
|
||||||
|
outputParams: sdAgentNodeData.value.outputParams
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
if (inputValid && outputValid) {
|
||||||
|
emit('save-success')
|
||||||
|
} else {
|
||||||
|
emit('save-error')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ validateAndSave })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.http-form {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.el-collapse {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
183
src/views/flow/components/params/StartParams.vue
Normal file
183
src/views/flow/components/params/StartParams.vue
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<el-collapse v-model="activeNames">
|
||||||
|
<el-collapse-item name="1" icon-position="left">
|
||||||
|
<template #title>
|
||||||
|
输入参数
|
||||||
|
<el-button :circle="true" size="small" @click="(e) => addFormItem(e, 'inputParams')" class="addFormItem">
|
||||||
|
<el-icon :size="14">
|
||||||
|
<Plus />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<el-form :inline="true" :model="formData" :rules="rules" ref="dynamicFormRef" 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>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, watch, nextTick } from 'vue'
|
||||||
|
import { Plus, Minus } from '@element-plus/icons-vue'
|
||||||
|
import FormItemRecursive from '../FormItemRecursive.vue'
|
||||||
|
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({
|
||||||
|
inputParams: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = reactive({})
|
||||||
|
const dynamicFormRef = ref()
|
||||||
|
|
||||||
|
const activeNames = ref(['1', '2'])
|
||||||
|
|
||||||
|
// 添加表单项
|
||||||
|
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 inputParams = JSON.parse(JSON.stringify(props.data.properties.inputParams || []))
|
||||||
|
formData.inputParams = inputParams;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
() => {
|
||||||
|
initData()
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
// 保存验证
|
||||||
|
const validateAndSave = async () => {
|
||||||
|
let inputValid = true
|
||||||
|
if (dynamicFormRef.value) {
|
||||||
|
await dynamicFormRef.value.validate((valid) => { if (!valid) inputValid = false })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存到 lf
|
||||||
|
lf.setProperties(props.data.id, {
|
||||||
|
...props.data.properties,
|
||||||
|
...formData
|
||||||
|
})
|
||||||
|
if (inputValid) {
|
||||||
|
emit('save-success')
|
||||||
|
} else {
|
||||||
|
emit('save-error')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ validateAndSave })
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
53
src/views/flow/components/params/useQuote.js
Normal file
53
src/views/flow/components/params/useQuote.js
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import { ref } from 'vue'
|
||||||
|
import { getInput } from '@/utils/flow'
|
||||||
|
|
||||||
|
export function useQuote(nodeId) {
|
||||||
|
const quoteOptions = ref([])
|
||||||
|
const cascaderRefs = ref([])
|
||||||
|
|
||||||
|
const handleTypeChange = (index, formData, type = 'default') => {
|
||||||
|
// 根据节点类型处理不同数据源
|
||||||
|
// 这里简化为通用逻辑,具体实现需根据实际数据结构调整
|
||||||
|
if (formData.nodeParams[index].type === 'input') {
|
||||||
|
formData.nodeParams[index].quote = ''
|
||||||
|
} else {
|
||||||
|
formData.nodeParams[index].input = ''
|
||||||
|
const option = getInput(nodeId)
|
||||||
|
if (option) quoteOptions.value = option
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const cascaderChange = (value, index, formData, field = 'nodeParams') => {
|
||||||
|
const selectedOptions = cascaderRefs.value[index]?.getCheckedNodes(true)
|
||||||
|
if (selectedOptions && selectedOptions.length) {
|
||||||
|
formData[field][index].quote = value
|
||||||
|
formData[field][index].quoteType = selectedOptions[0].data.type
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const visibleChange = (visible, index, currentQuote, formData, field = 'nodeParams') => {
|
||||||
|
if (visible) {
|
||||||
|
const option = getInput(nodeId)
|
||||||
|
if (option) {
|
||||||
|
quoteOptions.value = option
|
||||||
|
const currentValue = [...currentQuote]
|
||||||
|
if (cascaderRefs.value[index] && currentValue.length > 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
formData[field][index].quote = []
|
||||||
|
setTimeout(() => {
|
||||||
|
formData[field][index].quote = currentValue
|
||||||
|
}, 0)
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
quoteOptions,
|
||||||
|
cascaderRefs,
|
||||||
|
handleTypeChange,
|
||||||
|
cascaderChange,
|
||||||
|
visibleChange
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -307,7 +307,7 @@ export const collapseList = [
|
|||||||
], disabled: true, required: true },
|
], disabled: true, required: true },
|
||||||
{ name: "body", type: "input", input: "", children: [
|
{ name: "body", type: "input", input: "", children: [
|
||||||
{ name: 'bodyType', type: "input", input: "json", disabled: true },
|
{ name: 'bodyType', type: "input", input: "json", disabled: true },
|
||||||
{ name: 'json', type: "input", input: '{}' },
|
{ name: 'json', type: "input", input: '{"a": 123}' },
|
||||||
{ name: 'formData', type: "input", input: "", children: []}
|
{ name: 'formData', type: "input", input: "", children: []}
|
||||||
], required: true },
|
], required: true },
|
||||||
],
|
],
|
||||||
@ -386,7 +386,15 @@ function handler(params) {
|
|||||||
action: 'ALM',
|
action: 'ALM',
|
||||||
nodeType: 'EDGE',
|
nodeType: 'EDGE',
|
||||||
nodeParams: [
|
nodeParams: [
|
||||||
{ name: "deviceId", type: "input", input: "", disabled: true }
|
{ name: "deviceId", type: "input", input: "", disabled: true },
|
||||||
|
{ name: "x", type: "input", input: "", disabled: true },
|
||||||
|
{ name: "y", type: "input", input: "", disabled: true },
|
||||||
|
{ name: "z", type: "input", input: "", disabled: true },
|
||||||
|
{ name: "rx", type: "input", input: "", disabled: true },
|
||||||
|
{ name: "ry", type: "input", input: "", disabled: true },
|
||||||
|
{ name: "rz", type: "input", input: "", disabled: true },
|
||||||
|
{ name: "velocity", type: "input", componentType: 'number', input: 0, disabled: true },
|
||||||
|
{ name: "acceleration", type: "input", componentType: 'number', input: 0, disabled: true },
|
||||||
],
|
],
|
||||||
outputType: 'json'
|
outputType: 'json'
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user