feat: 更改流程

src/utils/flow.js

@@ -13,45 +13,42 @@ export const getInput = (nodeId, isStrict = true) => {
     
     if (flag) {
       const arr = []
+      const filterNodes = ['sleep', 'stopLoop', 'subEnd', 'subStart', 'branch', 'end']
       data.nodes.forEach(item => {
         if (item.id === nodeId) {
           return
         }
 
-        if (item.properties.inputParams) {
+        if (filterNodes.includes(item.type)) {
-          const obj = {
+          return
-              value: item.id,
-              label: item.properties.name,
-              type: 'input',
-              children: []
-          }
-          const optionData = transformTree(item.properties.inputParams, obj.children, 'input')
-          obj.children.push(optionData)
-          arr.push(obj)
-        }
-        if (item.properties.nodeParams) {
-          const obj = {
-            value: item.id,
-            label: item.properties.name + '（输入）',
-            type: 'input',
-            children: []
-          }
-          const optionData = transformTree(item.properties.nodeParams, obj.children, 'input')
-          obj.children.push(optionData)
-          arr.push(obj)
         }
 
-        if (item.properties.outputParams) {
+        const obj = {
-          const obj = {
             value: item.id,
-            label: item.properties.name + '（输出）',
+            label: item.properties.name,
-            type: 'output',
+            children: [{
-            children: []
+              value: 'input',
+              label: '输入',
+              type: 'input',
+              children: []
+            }, {
+              value: 'output',
+              label: '输出',
+              type: 'output',
+              children: []
+            }]
           }
-          const optionData = transformTree(item.properties.outputParams, obj.children, 'output')
+
-          obj.children.push(optionData)
+        if (item.properties.inputParams) {
-          arr.push(obj)
+          transformTree(item.properties.inputParams, obj.children[0].children, 'input')
         }
+        if (item.properties.nodeParams) {
+          transformTree(item.properties.nodeParams, obj.children[0].children, 'input')
+        }
+        if (item.properties.outputParams) {
+          transformTree(item.properties.outputParams, obj.children[1].children, 'output')
+        }
+        arr.push(obj)
       })
       return arr
     }

src/views/flow/components/TestRun.vue

@@ -101,12 +101,12 @@ const confirm = () => {
         })
 
         const flowData = JSON.stringify(lf.getGraphData())
+        const { terminalId, ...runParams } = formData
         const res = await flowExecuteTrial({
             flowData,
             itemId: props.flowId,
-            runParams: {
+            terminalId,
-                ...formData
+            runParams
-            }
         })
         if (res.code === 200) {
             emits('changeState', {

src/views/flow/config.js

@@ -19,11 +19,6 @@ import audioSvg from './icon/audio.svg'
 
 import { v4 as randomUUID } from 'uuid'
 
-import { useFlowStore } from "@/store/modules/flow";
-
-const flowStore = useFlowStore();
-
-
 export const lfConfig = {
   idGenerator: () => {
     // 生成标准UUID并移除连字符
@@ -308,7 +303,7 @@ export const collapseList = [
         name: "单次对话语料",
         type: "serviceNode",
         desc: "测试语料-单次对话语料处理",
-        action: 'VI_CORPUS_WAKE',
+        action: 'VI_CORPUS_SINGLE',
         outputType: 'json',
         nodeParams: [{ name: 'testCorpus', type: "input", input: "",  disabled: true }],
         outputParams: [{ name: 'audioPath', type: 'string', desc: '语音路径', disabled: true}]

src/views/flow/nodes/common/serviceNode.vue

@@ -93,9 +93,10 @@
                   <el-cascader
                     :ref="el => { if (el) cascaderRefs[index] = el }"
                     v-model="property.quote"
+                    :checkStrictly="true"
                     :options="quoteOptions"
                     placeholder="请选择"
-                    @visible-change="visibleChange"
+                    @visible-change="(visible) => visibleChange(visible, index, property.quote)"
                     @change="(value) => cascaderChange(value, index)"
                   />
                 </el-form-item>
@@ -217,7 +218,6 @@ const setNodeProperties = async () => {
     
     if (result && flag) {
       const data = toRaw(formData);
-      console.log('data', data)
       const properties = lf.getProperties(props.model.id);
       lf.setProperties(props.model.id, {
         ...properties,
@@ -234,11 +234,28 @@ const nodeOperatingStatus = ref("NORMAL");
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 
-const visibleChange = (value) => {
+const visibleChange = (value, index, quote) => {
   if (value) {
     const option = getInput(props.model.id);
     if (option) {
       quoteOptions.value = option;
+      const currentValue = [...quote];
+      // 强制级联选择器重新处理选中值与选项的匹配
+      if (cascaderRefs.value[index]) {
+        // 等待DOM更新后再设置值，确保新options已生效
+        setTimeout(() => {
+          // 如果当前有选中值，重新设置一次以触发重新匹配
+          if (currentValue.length) {
+            formData.nodeParams[index].quote = [];
+            // 确保响应式更新
+            setTimeout(() => {
+              formData.nodeParams[index].quote = currentValue;
+            }, 0);
+          }
+          // 手动触发级联选择器的重新渲染
+          // cascaderRefs.value[index].updatePopper();
+        }, 0);
+      }
     }
   }
 };

src/views/flow/nodes/function/loop.vue

@@ -1,55 +1,115 @@
 <template>
   <div class="group__container" @mouseleave="setNodeProperties">
-    <NodeTitle :icon="loop" :nodeId="props.model.id" :nodeProperties="props.properties" :nodeName="props.properties?.name || '循环'" nodeDesc="循环执行一系列任务，直至输出所有结果" />
+    <NodeTitle
+      :icon="loop"
+      :nodeId="props.model.id"
+      :nodeProperties="props.properties"
+      :nodeName="props.properties?.name || '循环'"
+      nodeDesc="循环执行一系列任务，直至输出所有结果"
+    />
     <div class="loop__container">
-        <div>
+      <div>
-            <el-form :inline="true" :model="formData" :rules="rules" ref="dynamicForm" label-position="top" label-width="auto" :disabled="flowStore.disableForm">
+        <el-form
-                <div v-for="(property, index) in formData.nodeParams" :key="index">
+          :inline="true"
-                    <el-row v-if="property.name !== 'loopType'">
+          :model="formData"
-                        <el-form-item :label="index === 0 ? '参数名' : ''" :prop="`nodeParams.${index}.name`" :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]">
+          :rules="rules"
-                            <el-input :disabled="index === 0" v-model="property.name" placeholder="请输入" clearable />
+          ref="dynamicForm"
-                        </el-form-item>
+          label-position="top"
-                        <el-form-item :label="index === 0 ? '参数值' : ''" :prop="`nodeParams.${index}.type`" >
+          label-width="auto"
-                            <el-select v-model="property.type" @change="handleTypeChange(index)">
+          :disabled="flowStore.disableForm"
-                              <el-option label="引用" value="quote" />
+        >
-                              <el-option label="输入" value="input" />
+          <div v-for="(property, index) in formData.nodeParams" :key="index">
-                            </el-select>
+            <el-row>
-                            <el-form-item v-if="property.type === 'input'" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.input`">
+              <el-form-item
-                                <el-input-number v-model="property.input" :min="0" :controls="false" :step-strictly="true" placeholder="请输入" clearable />
+                :label="index === 0 ? '参数名' : ''"
-                            </el-form-item>
+                :prop="`nodeParams.${index}.name`"
-                            <el-form-item v-if="property.type === 'quote'" :rules="[{ required: true, message: '请选择参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.quote`">
+                :rules="[
-                                <el-cascader v-model="property.quote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange"/>
+                  { required: true, message: '请输入参数名', trigger: 'blur' },
-                            </el-form-item>
+                ]"
-                        </el-form-item>
+              >
-                    </el-row>
+                <el-input
-                    <el-row v-else>
+                  :disabled="index === 0"
-                      <el-form-item :label="index === 0 ? '参数名' : ''" :prop="`nodeParams.${index}.name`" :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]">
+                  v-model="property.name"
-                            <el-input :disabled="index === 0" v-model="property.name" placeholder="请输入" clearable />
+                  placeholder="请输入"
-                        </el-form-item>
+                  clearable
-                        <el-form-item :label="index === 0 ? '参数值' : ''" :rules="[{ required: true, message: '请输入参数值', trigger: 'blur' }]" :prop="`nodeParams.${index}.input`" >
+                />
-                          <el-select v-model="property.input" @change="handleTypeChange(index)">
+              </el-form-item>
-                            <el-option label="普通" value="NORMAL" />
+              <el-form-item
-                            <el-option label="单次和连续" value="MULTIPLE_CORPUS" />
+                :label="index === 0 ? '参数值' : ''"
-                            <el-option label="连续多条语料" value="CONTINUOUS_MULTIPLE_CORPUS" />
+                :prop="`nodeParams.${index}.type`"
-                          </el-select>
+              >
-                        </el-form-item>
+                <el-select
-                    </el-row>
+                  v-model="property.type"
-                </div>
+                  @change="handleTypeChange(index)"
-            </el-form>
+                >
-        </div>
+                  <el-option label="引用" value="quote" />
+                  <el-option label="输入" value="input" />
+                </el-select>
+                <el-form-item
+                  v-if="property.type === 'input'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请输入参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.input`"
+                >
+                  <el-input-number
+                    v-model="property.input"
+                    :min="0"
+                    :controls="false"
+                    :step-strictly="true"
+                    placeholder="请输入"
+                    clearable
+                  />
+                </el-form-item>
+                <el-form-item
+                  v-if="property.type === 'quote'"
+                  :rules="[
+                    {
+                      required: true,
+                      message: '请选择参数值',
+                      trigger: 'blur',
+                    },
+                  ]"
+                  :prop="`nodeParams.${index}.quote`"
+                >
+                  <el-cascader
+                    :ref="
+                      (el) => {
+                        if (el) cascaderRefs[index] = el;
+                      }
+                    "
+                    v-model="property.quote"
+                    :checkStrictly="true"
+                    :options="quoteOptions"
+                    placeholder="请选择"
+                    @visible-change="
+                      (visible) => visibleChange(visible, index, property.quote)
+                    "
+                    @change="(value) => cascaderChange(value, index)"
+                  />
+                </el-form-item>
+              </el-form-item>
+            </el-row>
+          </div>
+        </el-form>
+      </div>
     </div>
     <div>循环体</div>
     <div class="child__container" @drop="handleDrop" @dragover="handleDragover">
-        <slot></slot>
+      <slot></slot>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from "vue";
-import NodeTitle from '../../components/NodeTitle.vue'
+import NodeTitle from "../../components/NodeTitle.vue";
-import loop from '../../icon/loop.svg'
+import loop from "../../icon/loop.svg";
-import { useFlowStore } from '@/store/modules/flow'
+import { useFlowStore } from "@/store/modules/flow";
-import { addNewEdge, getInput } from '@/utils/flow'
+import { addNewEdge, getInput } from "@/utils/flow";
 
 const props = defineProps({
   model: Object,
@@ -58,157 +118,179 @@ const props = defineProps({
   nowTime: Number,
 });
 
-const flowStore = useFlowStore()
+const flowStore = useFlowStore();
 const formData = reactive({
-  nodeParams: [
+  nodeParams: [{ name: "loopNum", type: "input", input: null, quote: "" }],
-    { name: "loopNum", type: "input", input: null, quote: "" },
+});
-    { name: "loopType", type: "input", input: 'NORMAL', quote: "" },
-  ]
-})
 
-const quoteOptions = ref([])
+const quoteOptions = ref([]);
 const handleTypeChange = (index) => {
-  if (formData.nodeParams[index].type === 'input') {
+  if (formData.nodeParams[index].type === "input") {
-    formData.nodeParams[index].quote = ""
+    formData.nodeParams[index].quote = "";
   } else {
-    formData.nodeParams[index].input = null
+    formData.nodeParams[index].input = null;
-    const option = getInput(props.model.id)
+    const option = getInput(props.model.id);
     if (option) {
-      quoteOptions.value = option
+      quoteOptions.value = option;
     }
   }
-}
+};
 
-const rules = reactive({})
+const rules = reactive({});
 
-const emits = defineEmits(['bindRef', 'addToGroup', 'contentChange'])
+const emits = defineEmits(["bindRef", "addToGroup", "contentChange"]);
 
 const handleDragover = (e) => {
-    e.preventDefault()
+  e.preventDefault();
-}
+};
 
 const handleDrop = (e) => {
-    e.preventDefault()
+  e.preventDefault();
-    e.stopPropagation();
+  e.stopPropagation();
 
-    let flowNode = e.dataTransfer.getData('flowNode');
+  let flowNode = e.dataTransfer.getData("flowNode");
-    flowNode = JSON.parse(flowNode)
+  flowNode = JSON.parse(flowNode);
-    const point = lf.getPointByClient(e.clientX, e.clientY)
+  const point = lf.getPointByClient(e.clientX, e.clientY);
-    const { type, ...other } = flowNode
+  const { type, ...other } = flowNode;
-    const node = lf.addNode({
+  const node = lf.addNode({
-        type,
+    type,
-        x: point.canvasOverlayPosition.x,
+    x: point.canvasOverlayPosition.x,
-        y: point.canvasOverlayPosition.y,
+    y: point.canvasOverlayPosition.y,
-        properties: {
+    properties: {
-            parentId: props.model.id,
+      parentId: props.model.id,
-            ...other
+      ...other,
-        }
+    },
-    })
+  });
 
-    emits('addToGroup', node.id)
+  emits("addToGroup", node.id);
-    setTimeout(() => {
+  setTimeout(() => {
-        addNewEdge(props.model.id)
+    addNewEdge(props.model.id);
-    }, 50)
+  }, 50);
-}
+};
 
-const dynamicForm = ref()
+const dynamicForm = ref();
 
 const setNodeProperties = async () => {
   try {
-    const valid = await dynamicForm.value.validate()
+    const valid = await dynamicForm.value.validate();
     if (valid) {
-      const data = toRaw(formData)
+      const data = toRaw(formData);
       setTimeout(() => {
-        const properties = lf.getProperties(props.model.id)
+        const properties = lf.getProperties(props.model.id);
         window.lf.setProperties(props.model.id, {
           ...properties,
-          ...data
+          ...data,
-        })
+        });
-      }, 50)
+      }, 50);
     }
- } catch (error) {
+  } catch (error) {
-    dynamicForm.value.clearValidate()
+    dynamicForm.value.clearValidate();
- }
+  }
-}
+};
 
-const visibleChange = (value) => {
+const visibleChange = async (value, index, quote) => {
   if (value) {
-    const option = getInput(props.model.id)
+    const option = getInput(props.model.id);
     if (option) {
-        quoteOptions.value = option
+      quoteOptions.value = option;
+      const currentValue = [...quote];
+      // 强制级联选择器重新处理选中值与选项的匹配
+      if (cascaderRefs.value[index]) {
+        // 等待DOM更新后再设置值，确保新options已生效
+        setTimeout(() => {
+          // 如果当前有选中值，重新设置一次以触发重新匹配
+          if (currentValue.length) {
+            formData.nodeParams[index].quote = [];
+            // 确保响应式更新
+            setTimeout(() => {
+              console.log(1247);
+              formData.nodeParams[index].quote = currentValue;
+            }, 0);
+          }
+          // 手动触发级联选择器的重新渲染
+          // cascaderRefs.value[index].updatePopper();
+        }, 0);
+      }
     }
   }
-}
+};
+
+const cascaderRefs = ref([]);
+const cascaderChange = (value, index) => {
+  const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
+  formData.nodeParams[index].quote = value;
+  formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
+};
 
 watch(
   () => props.properties,
   () => {
     if (props.properties.nodeParams && props.properties.nodeParams.length > 0) {
-      formData.nodeParams = props.properties.nodeParams
+      formData.nodeParams = props.properties.nodeParams;
-      const option = getInput(props.model.id)
+      const option = getInput(props.model.id);
       if (option) {
-        quoteOptions.value = option
+        quoteOptions.value = option;
       }
     }
-  }, {
+  },
+  {
     immediate: true,
-    deep: true
+    deep: true,
   }
-)
+);
 
 onMounted(() => {
-  emits('bindRef', dynamicForm.value)
+  emits("bindRef", dynamicForm.value);
-})
+});
-
 </script>
 <style lang="scss" scoped>
 .group__container {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    min-height: 420px;
+  min-height: 420px;
-    background: #fff;
+  background: #fff;
-    padding: 12px;
+  padding: 12px;
-    cursor: default;
+  cursor: default;
-    border-radius: 12px;
+  border-radius: 12px;
-    border: 2px solid white;
+  border: 2px solid white;
-    box-shadow: 0 5px 15px 0#00000008;
+  box-shadow: 0 5px 15px 0#00000008;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    position: relative;
+  position: relative;
 
-    .title {
+  .title {
-        height: 40px;
+    height: 40px;
+  }
+
+  :deep(.loop__container) {
+    height: auto;
+
+    .el-input {
+      width: 240px;
     }
 
-    :deep(.loop__container) {
+    .el-input-number {
-        height: auto;
+      width: 92px;
-
-        .el-input {
-          width: 92px;
-        }
-
-        .el-input-number {
-          width: 92px;
-        }
-
-        .el-select {
-          width: 92px;
-        }
-
-        .el-cascader {
-          width: 92px;
-        }
     }
 
-    .child__container {
+    .el-select {
-        min-height: 100px;
+      width: 120px;
-        flex: 1;
-        background-color: #f6f8fa;
-        border-radius: 8px;
     }
 
-    .el-row {
+    .el-cascader {
-        align-items: end;
+      width: 240px;
-      }
+    }
+  }
+
+  .child__container {
+    min-height: 100px;
+    flex: 1;
+    background-color: #f6f8fa;
+    border-radius: 8px;
+  }
+
+  .el-row {
+    align-items: end;
+  }
 }
 </style>