表单校验

wujingjing

2025-02-17 0f01c4bbce19fa8489a4e835c83cb9415549f681

 src/components/vue-flow/MainCanvas.vue

@@ -1,33 +1,49 @@
<template>
   <div class="relative h-full w-full" id="main-canvas" @drop="handleOnDrop" @dragover="handleOnDragOver">
      <VueFlow v-model="elements" :node-types="nodeTypes" :connection-mode="ConnectionMode.Strict">
         <template #node-start="startNodeProps">
            <StartNode ref="nodeRef" v-bind="startNodeProps" :isViewMode="isViewMode" />
         </template>
         <template #node-condition="conditionNodeProps">
            <ConditionNode ref="nodeRef" v-bind="conditionNodeProps" :isViewMode="isViewMode" />
         </template>
         <template #node-output_msg="outputNodeProps">
            <OutputNode ref="nodeRef" v-bind="outputNodeProps" :isViewMode="isViewMode" />
         </template>

         <template #node-end="endNodeProps">
            <EndNode ref="nodeRef" v-bind="endNodeProps" :isViewMode="isViewMode" />
         </template>

         <template #edge-custom="customEdgeProps">
            <CustomEdge v-bind="customEdgeProps" />
            <CustomEdge v-bind="customEdgeProps" :isViewMode="isViewMode" />
         </template>

         <template #node-agent="agentNodeProps">
            <AgentNode v-bind="agentNodeProps" :agentNames="agentNames" />
            <AgentNode ref="nodeRef" v-bind="agentNodeProps" :agentNames="agentNames" :isViewMode="isViewMode" />
         </template>
         <template #node-func="funcNodeProps">
            <FuncNode v-bind="funcNodeProps" :funcNames="funcNames" />
            <FuncNode ref="nodeRef" v-bind="funcNodeProps" :funcNames="funcNames" :isViewMode="isViewMode" />
         </template>

         <template #node-code="codeNodeProps">
            <CodeNode v-bind="codeNodeProps" />
            <CodeNode ref="nodeRef" v-bind="codeNodeProps" :isViewMode="isViewMode" />
         </template>
         <template #node-python_code="pythonCodeNodeProps">
            <PythonCodeNode ref="nodeRef" v-bind="pythonCodeNodeProps" :isViewMode="isViewMode" />
         </template>
         <template #node-text_resource="textResourceNodeProps">
            <TextResourceNode v-bind="textResourceNodeProps" />
            <TextResourceNode ref="nodeRef" v-bind="textResourceNodeProps" :isViewMode="isViewMode" />
         </template>

         <template #node-analysis="analysisNodeProps">
            <AnalysisNode v-bind="analysisNodeProps" :llmInfoList="llmInfoList" />
            <AnalysisNode ref="nodeRef" v-bind="analysisNodeProps" :llmInfoList="llmInfoList" :isViewMode="isViewMode" />
         </template>


         <template #node-LLM="llmNodeProps">
            <LLMNode v-bind="llmNodeProps" :llmInfoList="llmInfoList" />
            <LLMNode ref="nodeRef" v-bind="llmNodeProps" :llmInfoList="llmInfoList" :isViewMode="isViewMode" />
         </template>
         <Controls />
         <Controls :showInteractive="false" />
         <Background />
         <MiniMap pannable zoomable />
      </VueFlow>
@@ -39,46 +55,46 @@
import { Controls } from '@vue-flow/controls';
import { MiniMap } from '@vue-flow/minimap';

import type { Dimensions, Elements } from '@vue-flow/core';
import type { Dimensions, Elements, FlowProps } from '@vue-flow/core';
import { ConnectionMode, MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
import { markRaw, nextTick, ref, watch } from 'vue';
import { nextTick, onMounted, ref, watch } from 'vue';
import { Test_data } from './testData';
import CustomEdge from './ui/edges/CustomEdge.vue';
import AgentNode from './ui/nodes/AgentNode.vue';
import AnalysisNode from './ui/nodes/AnalysisNode.vue';
import CodeNode from './ui/nodes/CodeNode.vue';
import ConditionNode from './ui/nodes/ConditionNode.vue';
import EndNode from './ui/nodes/EndNode.vue';
import FuncNode from './ui/nodes/FuncNode.vue';
import LLMNode from './ui/nodes/LLMNode.vue';
import OutputNode from './ui/nodes/OutputNode.vue';
import PythonCodeNode from './ui/nodes/PythonCodeNode.vue';
import StartNode from './ui/nodes/StartNode.vue';
import TextResourceNode from './ui/nodes/TextResourceNode.vue';
import { NodeType, nodeTypeMap } from './vueFlowEnum';
import { VueFlowHelper } from './VueFlowHelper';
import TextResourceNode from './ui/nodes/TextResourceNode.vue';
import { onMounted } from 'vue';
import CustomEdge from './ui/edges/CustomEdge.vue';
import AnalysisNode from './ui/nodes/AnalysisNode.vue';

const props = defineProps(['flowJson', 'agentNames', 'funcNames','llmInfoList']);
const props = defineProps(['flowJson', 'agentNames', 'funcNames', 'llmInfoList', 'isViewMode']);

const nodeTypes = {
   start: markRaw(StartNode),
   end: markRaw(EndNode),
   condition: markRaw(ConditionNode),
   // LLM: markRaw(LLMNode),
   // output:markRaw(OutputNode),
   // agent: markRaw(AgentNode),
   [NodeType.Output]: markRaw(OutputNode),
   // LLM: markRaw(LLMNode),
   // code: markRaw(CodeNode),
   // knowledge: markRaw(KnowledgeNode),
   // api: markRaw(ApiNode),
   // [NodeType.Analysis]: markRaw(AnalysisNode),
};
const nodeTypes = {};
const elements = ref<Elements>();
const { findNode, nodes, addNodes, addEdges, project, vueFlowRef, onConnect, setNodes, setEdges, setViewport, fitView } = useVueFlow(
const {
   findNode,
   nodes,
   addNodes,
   addEdges,
   project,
   vueFlowRef,
   onConnect,
   setNodes,
   setEdges,
   setViewport,
   fitView,
   setInteractive,
} = useVueFlow(
   Object.keys(props.flowJson).length > 0
      ? props.flowJson
      : {
      : ({
            nodes: [
               {
                  id: '1',
@@ -89,7 +105,7 @@
               },
            ],
            edges: [],
        }
        } as FlowProps)
);

onConnect((params) => {
@@ -110,10 +126,14 @@

   // addEdges());
});
const initFlowStatus = () => {
   fitView();

   setInteractive(!props.isViewMode);
};
onMounted(() => {
   setTimeout(() => {
      fitView();
      initFlowStatus();
   }, 30);
});

@@ -169,6 +189,15 @@
      event.dataTransfer.dropEffect = 'move';
   }
}

const nodeRef = ref();
const validateForm = () => {
   // nodeRef.value.validateForm();
   console.log('🚀 ~ nodeRef.value:', nodeRef.value);
};
defineExpose({
   validateForm,
});
</script>
<style lang="scss">
@import '@vue-flow/core/dist/style.css';