| | |
| | | <img src="/@/components/vue-flow/ui/assets/images/icon_Start.png" class="h-4 w-4" alt="Start icon" /> |
| | | <div class="flex flex-col gap-y-1"> |
| | | <p v-if="!titleIsEdit" class="text-xl font-bold text-gray-500" @click="titleIsEdit = true">{{ data.title }}</p> |
| | | <el-input v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input> |
| | | <el-input v-elInputFocus="false" v-else v-model="data.title" @blur="() => (titleIsEdit = false)"></el-input> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="flex-auto gap-y-2 flex-col flex nodrag"> |
| | | <div v-for="(item, index) in conditionGroupList" class="flex-column gap-3 relative group/conditionGroup"> |
| | | <div class="flex-auto !overflow-x-auto gap-y-2 flex-col flex nodrag"> |
| | | <div v-for="(item, index) in conditionGroupList" :key="item.id" class="flex flex-col gap-3 relative group/conditionGroup"> |
| | | <div class="flex-items-center justify-between"> |
| | | <div class="text-lg font-bold">如果</div> |
| | | <div class="flex-items-center gap-3"> |
| | | <div class="text-lg font-bold">{{ item.conditions ? '如果' : '否则' }}</div> |
| | | <div class="flex-items-center gap-3" v-if="item.conditions"> |
| | | <el-select v-model="item.operator" class="w-[130px]"> |
| | | <el-option |
| | | v-for="item in Object.keys(conditionOperatorMap)" |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="flex-column gap-y-2"> |
| | | <div v-for="(subItem, subIndex) in item.conditions" class="ml-5 flex-items-center gap-x-2 group/conditionItem"> |
| | | <el-tree-select |
| | | filterable |
| | | class="w-[120px] flex-0" |
| | | v-model="subItem.left_var" |
| | | :data="treeReferOptions" |
| | | node-key="id" |
| | | :clearable="true" |
| | | :accordion="false" |
| | | :expandNode="false" |
| | | :check-strictly="false" |
| | | placeholder="选择变量" |
| | | > |
| | | </el-tree-select> |
| | | <div class="flex flex-col gap-y-2" v-if="item.conditions"> |
| | | <div v-for="(subItem, subIndex) in item.conditions" class="ml-5 flex-items-center gap-x-2 group/conditionItem pr-8"> |
| | | <el-input filterable class="w-[120px] flex-0" v-model="subItem.left_value" placeholder="输入变量"> </el-input> |
| | | <el-select v-model="subItem.comparison_operation" class="flex-0 w-[120px]" placeholder="选择条件"> |
| | | <el-option |
| | | v-for="item in Object.keys(compareOperationMap)" |
| | |
| | | ></el-option> |
| | | </el-select> |
| | | |
| | | <el-select v-model="subItem.right_value_type" class="flex-0 w-[90px]" placeholder="请选择"> |
| | | <!-- <el-select v-model="subItem.right_value_type" class="flex-0 w-[90px]" placeholder="请选择"> |
| | | <el-option v-for="item in Object.keys(varTypeMap)" :key="item" :value="item" :label="varTypeMap[item]"></el-option> |
| | | </el-select> |
| | | </el-select> --> |
| | | <template v-if="isShowRight(subItem)"> |
| | | <el-input |
| | | v-if="subItem.right_value_type === VarType.Input" |
| | | v-model="subItem.right_value" |
| | | class="w-[180px]" |
| | | placeholder="输入值" |
| | | > |
| | | </el-input> |
| | | |
| | | <el-input |
| | | v-if="subItem.right_value_type === VarType.Input" |
| | | v-model="subItem.right_value" |
| | | class="w-[120px]" |
| | | placeholder="输入值" |
| | | > |
| | | </el-input> |
| | | |
| | | <el-tree-select |
| | | v-else |
| | | filterable |
| | | class="w-[120px] flex-0" |
| | | v-model="subItem.right_value" |
| | | :data="treeReferOptions" |
| | | node-key="id" |
| | | :clearable="true" |
| | | :accordion="false" |
| | | :expandNode="false" |
| | | :check-strictly="false" |
| | | placeholder="选择变量" |
| | | > |
| | | </el-tree-select> |
| | | <el-tree-select |
| | | v-else |
| | | filterable |
| | | class="w-[120px] flex-0" |
| | | v-model="subItem.right_value" |
| | | :data="treeReferOptions" |
| | | node-key="id" |
| | | :clearable="true" |
| | | :accordion="false" |
| | | :expandNode="false" |
| | | :check-strictly="false" |
| | | placeholder="选择变量" |
| | | > |
| | | </el-tree-select> |
| | | </template> |
| | | |
| | | <span |
| | | class="ywifont ywicon-shanchu text-red-400 invisible group-hover/conditionItem:visible cursor-pointer" |
| | |
| | | </div> |
| | | <el-button class="w-fit mt-3" type="primary" @click="addConditionItem(item)">添加条件</el-button> |
| | | </div> |
| | | <Handle :id="item.id" type="source" :position="Position.Right" /> |
| | | </div> |
| | | |
| | | <div class="flex-column gap-3 relative"> |
| | | <div class="flex-items-center justify-between"> |
| | | <div class="text-lg font-bold">否则</div> |
| | | <!-- <el-select class="w-[130px]"> |
| | | <el-option |
| | | v-for="item in Object.keys(conditionOperatorMap)" |
| | | :key="item" |
| | | :value="parseInt(item)" |
| | | :label="conditionOperatorMap[item]" |
| | | ></el-option> |
| | | </el-select> --> |
| | | </div> |
| | | |
| | | <div class="flex-column"> |
| | | <el-button @click="addConditionBranch" class="w-fit mt-3" type="success">添加分支</el-button> |
| | | </div> |
| | | <Handle :id="otherHandleId" type="source" :position="Position.Right" /> |
| | | <el-button v-else @click="addConditionBranch" class="w-fit mt-3" type="success">添加分支</el-button> |
| | | <Handle class="!right-0 !-translate-y-4" :id="item.id" type="source" :position="Position.Right" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- <Handle :id="handleId" type="source" :position="Position.Right" /> --> |
| | | </div> |
| | | |
| | | <!-- <div> |
| | | <span>起始</span> |
| | | |
| | | <Handle type="source" :position="Position.Right" /> |
| | | </div> --> |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | |
| | | import { computed } from 'vue'; |
| | | import { VueFlowConstant } from '../../VueFlowConstant'; |
| | | import { ConditionHelper, VueFlowHelper } from '../../VueFlowHelper'; |
| | | import { compareOperationMap, VarType, conditionOperatorMap, varTypeMap } from '../../vueFlowEnum'; |
| | | import { CompareOperation, VarType, compareOperationMap, conditionOperatorMap, varTypeMap } from '../../vueFlowEnum'; |
| | | import { LLMNodeData, LLMNodeEvents } from './index'; |
| | | import { deepClone } from '/@/utils/other'; |
| | | defineProps<NodeProps<LLMNodeData, LLMNodeEvents>>(); |
| | |
| | | const { findNode } = useVueFlow(); |
| | | const referenceOptions = ref([]); |
| | | const otherHandleId = VueFlowHelper.genId(); |
| | | |
| | | const isShowRight = (item) => { |
| | | const yes = ![CompareOperation.empty, CompareOperation.notEmpty].includes(item.comparison_operation); |
| | | return yes; |
| | | }; |
| | | |
| | | const treeReferOptions = computed(() => { |
| | | const result = []; |
| | | for (const item of referenceOptions.value) { |
| | |
| | | groupName: item?.data.title ?? item?.label, |
| | | options: [], |
| | | }; |
| | | const varList = VueFlowHelper.getFieldValue(item.data,'var_list'); |
| | | const varList = VueFlowHelper.getFieldValue(item.data, 'var_list'); |
| | | if (varList) { |
| | | varList |
| | | .filter((item: any) => Boolean(item.name)) |
| | |
| | | }); |
| | | |
| | | const data = ref(node.node.data); |
| | | const conditionGroupList = ref(VueFlowHelper.getFieldValue(data.value,'condition')); |
| | | |
| | | const conditionGroupList = ref(VueFlowHelper.getFieldValue(data.value, 'condition')); |
| | | const titleIsEdit = ref(false); |
| | | |
| | | function handleClickAddBtn() { |
| | |
| | | function handleClickDeleteBtn(index: number) { |
| | | data.value[VueFlowConstant.GROUP_PARAMS_KEY].splice(index, 1); |
| | | } |
| | | const { removeNodes, nodes, addNodes } = useVueFlow(); |
| | | const { removeNodes, removeEdges, addNodes } = useVueFlow(); |
| | | |
| | | function handleClickDuplicateBtn() { |
| | | const { type, position, data } = node.node; |
| | |
| | | const clickDeleteBtn = () => { |
| | | removeNodes(node.id); |
| | | }; |
| | | |
| | | const removeRelativeHandleEdge = (handleId: string) => { |
| | | const edges = node.connectedEdges.value.filter((item) => item.sourceHandle === handleId || item.targetHandle === handleId); |
| | | removeEdges(edges); |
| | | }; |
| | | const addConditionBranch = () => { |
| | | const conditionGroup = ConditionHelper.getDefaultConditionGroup(); |
| | | conditionGroupList.value.push(conditionGroup); |
| | | // 不能删除其他分支 |
| | | conditionGroupList.value.splice(-1, 0, conditionGroup); |
| | | }; |
| | | |
| | | const delConditionBranch = (index) => { |
| | | const group = conditionGroupList.value[index]; |
| | | |
| | | conditionGroupList.value.splice(index, 1); |
| | | removeRelativeHandleEdge(group.id); |
| | | if (conditionGroupList.value.length === 0) { |
| | | addConditionBranch(); |
| | | } |