shalu-agent-workflow/apps/web/src/nodes/src/loop/setter.vue

<script lang="ts" setup>
import Condition from '@/nodes/_base/condition/index.vue'
import LoopVar from './components/LoopVar.vue'
import { IconButton } from '@repo/ui'
import { useSetterModel } from '../_shared/useSetterModel'

import type { LoopData } from './index'
import type { ConditionType } from '@/nodes/Interface'

const props = defineProps<{
	data: LoopData
}>()

const emit = defineEmits<{
	update: [data: LoopData]
}>()

const formData = useSetterModel<LoopData>(props, emit)

const handleAddLoopVar = () => {
	formData.value.variables.push({
		name: '',
		describe: '',
		type: 'string',
		value: ''
	})
}

const handleRemoveLoopVar = (index: number) => {
	formData.value.variables.splice(index, 1)
}

const onUpdateConditions = (conditions: ConditionType[]) => {
	formData.value.break_conditions = conditions
}

const onUpdateOperator = (operator: 'and' | 'or') => {
	formData.value.logical_operator = operator
}
</script>

<template>
	<el-scrollbar class="w-full box-border p-12px">
		<el-form label-width="50px">
			<el-form-item label="" label-position="top">
				<div class="w-full flex items-center justify-between beautify">
					<label class="text-14px font-bold text-gray-700">循环变量</label>
					<IconButton icon="lucide:plus" link @click="handleAddLoopVar" />
				</div>
				<div
					v-for="(variable, index) in formData.variables"
					:key="variable.name"
					class="w-full mt-12px"
				>
					<div class="w-full flex items-start gap-12px">
						<LoopVar class="flex-1" :variable="variable" />
						<IconButton icon="lucide:trash-2" link @click="handleRemoveLoopVar(index)" />
					</div>
				</div>
			</el-form-item>

			<el-form-item label="" label-position="top">
				<div class="w-full flex items-center justify-between beautify">
					<label class="text-14px font-bold text-gray-700">过滤条件</label>
				</div>
				<Condition
					:conditions="formData.break_conditions"
					:operator="formData.logical_operator"
					@update:conditions="onUpdateConditions"
					@update:operator="onUpdateOperator"
				/>
			</el-form-item>

			<el-form-item label="" label-position="top">
				<div class="w-full flex items-center justify-between beautify">
					<label class="text-14px font-bold text-gray-700">最大循环次数</label>
				</div>
				<div class="w-full flex gap-12px">
					<el-input-number v-model="formData.loop_count" :min="1" :max="100" />
					<div class="flex-2/3">
						<el-slider v-model="formData.loop_count" :min="1" :max="100" />
					</div>
				</div>
			</el-form-item>
		</el-form>
	</el-scrollbar>
</template>