shalu-agent-workflow/apps/web/src/features/setter/DatabaseSetter.vue

<!--
 * @Author: liuJie
 * @Date: 2026-01-25 22:08:04
 * @LastEditors: liuJie
 * @LastEditTime: 2026-01-25 23:05:13
 * @Describe: 数据设置器
-->
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { IconButton, Icon } from '@repo/ui'
import SelectTableModal from '@/features/selectTableModal/index.vue'
import { clone, isEqual } from 'lodash-es'

const props = withDefaults(
	defineProps<{
		data: any
	}>(),
	{
		data: {}
	}
)

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

const DEFAULT_DATA = {
	tableList: [],
	fieldList: [],
	limit: 100,
	sortList: [],
	conditionList: [],
	output: {
		outputList: []
	},
	exception: 'none',
	exceptionDefaultValue: {
		body: '',
		status_code: 0,
		headers: '{}'
	}
}

const formData = ref(clone(DEFAULT_DATA))

watch(
	() => props.data,
	(newVal) => {
		if (!isEqual(newVal, formData.value)) {
			formData.value = {
				...clone(DEFAULT_DATA),
				...(newVal || {})
			}
		}
	},
	{
		deep: true,
		immediate: true
	}
)

watch(
	() => formData.value,
	(value) => {
		emit('update', value)
	},
	{ deep: true }
)

const selectTableModalRef = ref<InstanceType<typeof SelectTableModal> | null>(null)

const exceptionOptions = [
	{ label: '无', value: 'none' },
	{ label: '默认值', value: 'default_value' },
	{ label: '异常分支', value: 'exception_branch' }
]

const columns = computed(() => {
	return (formData.value.tableList?.[0]?.columns || []).filter(
		(item: any) => !formData.value.fieldList.find((field: any) => field.name === item.name)
	)
})

const addDatabase = () => {
	selectTableModalRef.value?.open()
}

const onAddTable = (table: unknown) => {
	formData.value.tableList = [table]
}
</script>

<template>
	<el-scrollbar class="w-full">
		<el-collapse expand-icon-position="left" :model-value="['1', '2', '3', '4', '5', '6', '7']">
			<el-collapse-item name="1">
				<template #title="{ isActive }">
					<div class="flex items-center justify-between">
						<span>数据表</span>
						<IconButton
							size="large"
							v-show="isActive"
							icon="iconoir:plus"
							link
							@click.stop="addDatabase"
						/>
					</div>
				</template>
				<template v-for="table in formData.tableList" :key="table">
					<div
						class="px-12px flex items-center justify-between cursor-pointer mb-12px p-12px hover:bg-gray-100 border border-solid border-gray-300 rounded-8px"
					>
						<div class="left flex items-center gap-24px">
							<div class="icon w-40px h-40px bg-#ffb800 rounded-md grid place-items-center">
								<Icon icon="iconoir:database-solid" color="#fff" height="24" width="24" />
							</div>
							<div>
								<div class="text-#333 text-xs">{{ table.name }}</div>
							</div>
						</div>
						<IconButton icon="ep:delete" size="small" />
					</div>
					<div class="flex gap-4px">
						<el-tag
							v-for="column in table.columns"
							:key="column.name"
							type="info"
							effect="light"
							size="small"
							>{{ column.name }}</el-tag
						>
					</div>
				</template>

				<el-empty
					v-if="!formData.tableList.length"
					description="请添加一个数据表到此处"
					:image-size="40"
				/>
			</el-collapse-item>

			<el-collapse-item name="2">
				<template #title="{ isActive }">
					<div class="flex items-center justify-between">
						<span>查询字段查询字段</span>
						<el-dropdown popper-class="w-200px" placement="bottom-end">
							<IconButton size="large" v-show="isActive" icon="iconoir:plus" link @click.stop />
							<template #dropdown>
								<el-dropdown-item
									v-for="column in columns"
									:key="column.name"
									@click="formData.fieldList.push(column)"
									>{{ column.name }}</el-dropdown-item
								>
							</template>
						</el-dropdown>
					</div>
				</template>
				<div v-for="field in formData.fieldList" :key="field.name" class="flex gap-4px mb-12px">
					<span>{{ field.name }}</span>
					<el-tag type="info" effect="light">{{ field.type }}</el-tag>
				</div>
				<el-empty v-if="!formData.fieldList.length" description="请添加查询字段" :image-size="40" />
			</el-collapse-item>

			<el-collapse-item title="查询条件" name="3"> </el-collapse-item>

			<el-collapse-item name="5">
				<template #title="{ isActive }">
					<div class="flex items-center justify-between">
						<span>排序方式</span>
						<el-dropdown popper-class="w-200px" placement="bottom-end">
							<IconButton size="large" v-show="isActive" icon="iconoir:plus" link @click.stop />
							<template #dropdown>
								<el-dropdown-item
									v-for="column in formData.fieldList"
									:key="column.name"
									@click="
										formData.sortList.push({
											name: column.name,
											type: column.type,
											sort: 'asc'
										})
									"
									>{{ column.name }}</el-dropdown-item
								>
							</template>
						</el-dropdown>
					</div>
				</template>
				<div
					v-for="field in formData.sortList"
					:key="field.name"
					class="flex items-center gap-4px mb-12px"
				>
					<div class="flex-1 flex justify-between">
						<span>{{ field.name }}</span>
						<el-tag type="info" effect="light">{{ field.type }}</el-tag>
					</div>
					<el-select style="width: 120px" v-model="field.sort" placeholder="请选择">
						<el-option label="升序" value="asc"></el-option>
						<el-option label="降序" value="desc"></el-option>
					</el-select>
				</div>
				<el-empty v-if="!formData.sortList.length" description="请添加排序字段" :image-size="40" />
			</el-collapse-item>

			<el-collapse-item title="查询上限" name="6">
				<el-input-number
					v-model="formData.limit"
					:min="1"
					:max="1000"
					style="width: 100%"
					controls-position="right"
					placeholder="请输入查询上限"
				/>
			</el-collapse-item>

			<el-collapse-item title="输出" name="7">
				<el-collapse-item name="7-1">
					<template #title="{ isActive }">
						<div class="flex items-center justify-between">
							<span>outputList</span>
							<el-dropdown popper-class="w-200px" placement="bottom-end">
								<IconButton size="large" v-show="isActive" icon="iconoir:plus" link @click.stop />
								<template #dropdown>
									<el-dropdown-item
										v-for="column in formData.fieldList"
										:key="column.name"
										@click="
											formData.output.outputList.push({
												name: column.name,
												type: column.type
											})
										"
										>{{ column.name }}</el-dropdown-item
									>
								</template>
							</el-dropdown>
						</div>
					</template>
					<div
						v-for="field in formData.output.outputList"
						:key="field.name"
						class="flex items-center gap-4px mb-12px"
					>
						<span>{{ field.name }}</span>
						<el-tag type="info" effect="light">{{ field.type }}</el-tag>
					</div>
				</el-collapse-item>
			</el-collapse-item>
		</el-collapse>
		<div class="p-12px">
			<el-form-item label="异常处理" label-width="90px" label-position="left">
				<div class="w-full text-right">
					<el-select
						v-model="formData.exception"
						:options="exceptionOptions"
						style="width: 120px"
					/>
				</div>
			</el-form-item>
			<div v-if="formData.exception === 'default_value'">
				<div class="text-12px text-gray-500">当发生异常时，指定默认数据输出</div>
				<el-form-item label="body" label-position="top">
					<el-input v-model="formData.exceptionDefaultValue.body" type="textarea" rows="3" />
				</el-form-item>
				<el-form-item label="status_code" label-position="top">
					<el-input-number
						controls-position="right"
						v-model="formData.exceptionDefaultValue.status_code"
					/>
				</el-form-item>
				<el-form-item label="headers" label-position="top">
					<el-input v-model="formData.exceptionDefaultValue.headers" type="textarea" rows="5" />
				</el-form-item>
			</div>
			<div v-if="formData.exception === 'exception_branch'">
				<div class="text-12px text-gray-500">请在画布定义异常处理逻辑！</div>
			</div>
		</div>
	</el-scrollbar>

	<SelectTableModal ref="selectTableModalRef" @add="onAddTable" />
</template>