feat: 更改流程

2025-09-24 08:59:23 +08:00 · 2025-09-24 08:59:23 +08:00 · fcdb5b05af
commit fcdb5b05af
parent ec2d020ae8
5 changed files with 415 additions and 324 deletions
--- a/src/utils/flow.js
+++ b/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)) {
+          return
+        }
+
        const obj = {
            value: item.id,
            label: item.properties.name,
+            children: [{
+              value: 'input',
+              label: '输入',
              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 = {
-            value: item.id,
-            label: item.properties.name + '（输出）',
+            }, {
+              value: 'output',
+              label: '输出',
              type: 'output',
              children: []
+            }]
+          }
+
+        if (item.properties.inputParams) {
+          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')
        }
-          const optionData = transformTree(item.properties.outputParams, obj.children, 'output')
-          obj.children.push(optionData)
        arr.push(obj)
-        }
      })
      return arr
    }
--- a/src/views/flow/components/TestRun.vue
+++ b/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: {
-                ...formData
-            }
+            terminalId,
+            runParams
        })
        if (res.code === 200) {
            emits('changeState', {
--- a/src/views/flow/config.js
+++ b/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}]
--- a/src/views/flow/nodes/common/serviceNode.vue
+++ b/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);
+      }
    }
  }
 };
--- a/src/views/flow/nodes/function/loop.vue
+++ b/src/views/flow/nodes/function/loop.vue
@ -1,39 +1,99 @@
 <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>
-            <el-form :inline="true" :model="formData" :rules="rules" ref="dynamicForm" label-position="top" label-width="auto" :disabled="flowStore.disableForm">
+        <el-form
+          :inline="true"
+          :model="formData"
+          :rules="rules"
+          ref="dynamicForm"
+          label-position="top"
+          label-width="auto"
+          :disabled="flowStore.disableForm"
+        >
          <div v-for="(property, index) in formData.nodeParams" :key="index">
-                    <el-row v-if="property.name !== 'loopType'">
-                        <el-form-item :label="index === 0 ? '参数名' : ''" :prop="`nodeParams.${index}.name`" :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]">
-                            <el-input :disabled="index === 0" v-model="property.name" placeholder="请输入" clearable />
+            <el-row>
+              <el-form-item
+                :label="index === 0 ? '参数名' : ''"
+                :prop="`nodeParams.${index}.name`"
+                :rules="[
+                  { required: true, message: '请输入参数名', trigger: 'blur' },
+                ]"
+              >
+                <el-input
+                  :disabled="index === 0"
+                  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" @change="handleTypeChange(index)">
+              <el-form-item
+                :label="index === 0 ? '参数值' : ''"
+                :prop="`nodeParams.${index}.type`"
+              >
+                <el-select
+                  v-model="property.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: 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
+                  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 v-model="property.quote" :options="quoteOptions" placeholder="请选择" @visible-change="visibleChange"/>
+                <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>
-                    <el-row v-else>
-                      <el-form-item :label="index === 0 ? '参数名' : ''" :prop="`nodeParams.${index}.name`" :rules="[{ required: true, message: '请输入参数名', trigger: 'blur' }]">
-                            <el-input :disabled="index === 0" v-model="property.name" placeholder="请输入" clearable />
-                        </el-form-item>
-                        <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-option label="普通" value="NORMAL" />
-                            <el-option label="单次和连续" value="MULTIPLE_CORPUS" />
-                            <el-option label="连续多条语料" value="CONTINUOUS_MULTIPLE_CORPUS" />
-                          </el-select>
-                        </el-form-item>
-                    </el-row>
          </div>
        </el-form>
      </div>
@ -45,11 +105,11 @@
  </div>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
-import NodeTitle from '../../components/NodeTitle.vue'
-import loop from '../../icon/loop.svg'
-import { useFlowStore } from '@/store/modules/flow'
-import { addNewEdge, getInput } from '@/utils/flow'
+import { ref, onMounted, nextTick } from "vue";
+import NodeTitle from "../../components/NodeTitle.vue";
+import loop from "../../icon/loop.svg";
+import { useFlowStore } from "@/store/modules/flow";
+import { addNewEdge, getInput } from "@/utils/flow";

 const props = defineProps({
  model: Object,
@ -58,108 +118,130 @@ const props = defineProps({
  nowTime: Number,
 });

-const flowStore = useFlowStore()
+const flowStore = useFlowStore();
 const formData = reactive({
-  nodeParams: [
-    { name: "loopNum", type: "input", input: null, quote: "" },
-    { name: "loopType", type: "input", input: 'NORMAL', quote: "" },
-  ]
-})
+  nodeParams: [{ name: "loopNum", type: "input", input: null, quote: "" }],
+});

-const quoteOptions = ref([])
+const quoteOptions = ref([]);
 const handleTypeChange = (index) => {
-  if (formData.nodeParams[index].type === 'input') {
-    formData.nodeParams[index].quote = ""
+  if (formData.nodeParams[index].type === "input") {
+    formData.nodeParams[index].quote = "";
  } else {
-    formData.nodeParams[index].input = null
-    const option = getInput(props.model.id)
+    formData.nodeParams[index].input = null;
+    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();

-    let flowNode = e.dataTransfer.getData('flowNode');
-    flowNode = JSON.parse(flowNode)
-    const point = lf.getPointByClient(e.clientX, e.clientY)
-    const { type, ...other } = flowNode
+  let flowNode = e.dataTransfer.getData("flowNode");
+  flowNode = JSON.parse(flowNode);
+  const point = lf.getPointByClient(e.clientX, e.clientY);
+  const { type, ...other } = flowNode;
  const node = lf.addNode({
    type,
    x: point.canvasOverlayPosition.x,
    y: point.canvasOverlayPosition.y,
    properties: {
      parentId: props.model.id,
-            ...other
-        }
-    })
+      ...other,
+    },
+  });

-    emits('addToGroup', node.id)
+  emits("addToGroup", node.id);
  setTimeout(() => {
-        addNewEdge(props.model.id)
-    }, 50)
-}
+    addNewEdge(props.model.id);
+  }, 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
-        })
-      }, 50)
+          ...data,
+        });
+      }, 50);
    }
  } 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
-      const option = getInput(props.model.id)
+      formData.nodeParams = props.properties.nodeParams;
+      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 {
@ -184,7 +266,7 @@ onMounted(() => {
    height: auto;

    .el-input {
-          width: 92px;
+      width: 240px;
    }

    .el-input-number {
@ -192,11 +274,11 @@ onMounted(() => {
    }

    .el-select {
-          width: 92px;
+      width: 120px;
    }

    .el-cascader {
-          width: 92px;
+      width: 240px;
    }
  }