From 37535ab838b1d8d1a4b61db41afb3b77d2101311 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 20 三月 2025 17:03:36 +0800
Subject: [PATCH] 添加 RPA 节点
---
src/components/vue-flow/ui/nodes/N8nNode.vue | 93 ++++++++++++++++++++++++++++++----------------
1 files changed, 60 insertions(+), 33 deletions(-)
diff --git a/src/components/vue-flow/ui/nodes/N8nNode.vue b/src/components/vue-flow/ui/nodes/N8nNode.vue
index ba247b9..9eac73f 100644
--- a/src/components/vue-flow/ui/nodes/N8nNode.vue
+++ b/src/components/vue-flow/ui/nodes/N8nNode.vue
@@ -13,7 +13,7 @@
<!-- codeInput.params[0].value -->
<el-form-item prop="group_params.0.params.0.value.value" labelWidth="0">
<el-select
- class="!w-[220px] flex-0"
+ class="!w-full flex-0"
filterable
:disabled="isViewMode"
placeholder="宸ヤ綔娴�"
@@ -24,29 +24,38 @@
</el-select>
</el-form-item>
</FieldLayout>
- <FieldLayout :title="flowInput.name" v-if="Object.keys(flowInput.params[0].value.value).length > 0">
+ <FieldLayout :title="flowInput.name" v-if="flowInput.params[0].value.length > 0">
<!-- codeInput.params[0].value -->
- <FieldLayout level="2" :title="item" v-for="(item, index) in Object.keys(flowInput.params[0].value.value)" :key="index">
- <el-form-item :prop="`group_params.1.params.0.value.value.${item}`" labelWidth="0">
- <el-input
- filterable
- class="w-[120px] flex-0"
- v-model="flowInput.params[0].value.value[item]"
- :readonly="isViewMode"
- placeholder="鍙傛暟鍚�"
- ></el-input>
+ <FieldLayout level="2" :title="item.key" v-for="(item, index) in flowInput.params[0].value" :key="index">
+ <template #right>
+ <el-radio-group
+ v-model="item.type"
+ :disabled="isViewMode"
+ @change="handleTypeChange(item)"
+ size="small"
+ class="input-type-radio"
+ >
+ <el-radio-button label="input">杈撳叆</el-radio-button>
+ <el-radio-button label="macro">瀹�</el-radio-button>
+ </el-radio-group>
+ </template>
+ <el-form-item v-if="item.type === 'input'" :prop="`group_params.1.params.0.value.${index}.value`" labelWidth="0">
+ <el-input filterable class="w-full flex-0" v-model="item.value" :readonly="isViewMode" placeholder="鍊�"></el-input>
+ </el-form-item>
+ <el-form-item v-if="item.type === 'macro'" :prop="`group_params.1.params.0.value.${index}.value`" labelWidth="0">
+ <el-input filterable class="w-full flex-0" v-model="item.label" :readonly="isViewMode" placeholder="瀹�"></el-input>
</el-form-item>
</FieldLayout>
</FieldLayout>
<FieldLayout :title="flowOutput.name">
<!-- codeOutput.params[0].value -->
- <el-form-item prop="group_params.2.params.0.value.value" labelWidth="0">
+ <el-form-item prop="group_params.2.params.0.value.label" labelWidth="0">
<el-input
filterable
- class="w-[120px] flex-0"
- v-model="flowOutput.params[0].value.value"
- placeholder="鍙傛暟鍚�"
+ class="w-full flex-0"
+ v-model="flowOutput.params[0].value.label"
+ placeholder="瀹�"
:readonly="isViewMode"
></el-input>
</el-form-item>
@@ -61,14 +70,14 @@
import { Handle, Position, useNode } from '@vue-flow/core';
import { onMounted, ref } from 'vue';
import { VueFlowHelper } from '../../VueFlowHelper';
-import { NodeType, ParameterType } from '../../vueFlowEnum';
-import CodeEditor from '/@/components/input/codeEditor/index.vue';
+import { NodeType } from '../../vueFlowEnum';
// import CodeEditDialog from './components/CodeEditDlg.vue';
+import item from 'element-plus/es/components/space/src/item';
import FieldLayout from './components/FieldLayout.vue';
import NodeBasicLayout from './components/NodeBasicLayout.vue';
import type { LLMNodeData, LLMNodeEvents } from './index';
import { validateForm } from './utils';
-import { textTypeMap } from '/@/components/input/codeEditor/types';
+
const props = defineProps<
NodeProps<LLMNodeData, LLMNodeEvents> & {
isViewMode?: boolean;
@@ -81,13 +90,10 @@
};
const workflowValueChange = (value: string) => {
- console.log('馃殌 ~ workflowValueChange ~ workflow:', value);
const flow = getFlowByID(value);
- console.log('馃殌 ~ workflowValueChange ~ flow:', flow);
const nodes = flow.nodes;
const webhookNode = nodes.find((item) => item.type === 'n8n-nodes-base.webhook');
- console.log('馃殌 ~ workflowValueChange ~ webhookNode:', webhookNode);
- flowInput.value.params[0].value.value = {};
+ flowInput.value.params[0].value = [];
if (!webhookNode) {
return;
}
@@ -97,18 +103,15 @@
if (path) {
// Parse path parameters from path string
const pathParams = path.match(/\/:([^\/]+)/g)?.map((p) => p.substring(2)) || [];
- console.log('馃殌 ~ pathParams:', pathParams);
+ flowInput.value.params[0].value = pathParams.map((item) => {
+ return {
+ key: item,
+ type: 'macro',
+ label: '',
+ value: '',
+ };
+ });
// Update input parameters with path params
- if (pathParams.length > 0) {
- const inputValue = flowInput.value.params[0].value.value || {};
- pathParams.forEach((param) => {
- if (!inputValue[param]) {
- inputValue[param] = '';
- }
- });
- flowInput.value.params[0].value.value = inputValue;
- }
- console.log('馃殌 ~ flowInput.value.params[0].value.value:', flowInput.value.params[0].value.value);
}
};
const emit = defineEmits<{
@@ -135,4 +138,28 @@
validateForm: validateForm(formRef) as any,
});
});
+
+const handleTypeChange = (item: any) => {
+ // 娓呯┖涔嬪墠鐨勮緭鍏ュ��
+ if (item.type === 'macro') {
+ item.value = ''; // 鍒囨崲鍒板彉閲忔ā寮忔椂娓呯┖杈撳叆鍊�
+ } else {
+ item.label = ''; // 鍒囨崲鍒拌緭鍏ユā寮忔椂娓呯┖鍙橀噺鍊�
+ }
+};
</script>
+
+<style scoped>
+.input-type-radio {
+ margin: 0 8px;
+}
+
+:deep(.el-radio-button__inner) {
+ padding: 2px 8px;
+}
+
+:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+ background-color: var(--el-color-primary);
+ border-color: var(--el-color-primary);
+}
+</style>
--
Gitblit v1.9.3