diff --git a/src/components/FormCreate/src/useFormCreateDesigner.ts b/src/components/FormCreate/src/useFormCreateDesigner.ts index dff1333b..6682004e 100644 --- a/src/components/FormCreate/src/useFormCreateDesigner.ts +++ b/src/components/FormCreate/src/useFormCreateDesigner.ts @@ -9,6 +9,7 @@ import { import { Ref } from 'vue' import { Menu } from '@/components/FormCreate/src/type' import { apiSelectRule } from '@/components/FormCreate/src/config/selectRule' +import { generateUUID } from '@/utils' /** * 表单设计器增强 hook @@ -93,9 +94,60 @@ export const useFormCreateDesigner = async (designer: Ref) => { designer.value?.addMenu(menu) } + /** + * 修复重复的字段 ID 问题 + * 当复制组件时,自动为新组件生成新的字段 ID + * + * 对应 issue:https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICM22X + */ + const fixDuplicateFields = () => { + // 获取当前所有规则 + const rules = designer.value?.getRule() || [] + const fieldIds = new Set() + let hasChanges = false + + // 遍历所有规则,检测并修复重复的字段 ID + rules.forEach((rule: any) => { + if (rule.field) { + if (fieldIds.has(rule.field)) { + // 发现重复,生成新的ID + const oldField = rule.field + const newField = generateUUID() + console.log(`[FormCreate] 检测到重复字段ID: ${oldField}, 已自动更新为: ${newField}`) + rule.field = newField + hasChanges = true + } else { + fieldIds.add(rule.field) + } + } + }) + + // 如果有重复字段被修复,更新设计器 + if (hasChanges) { + designer.value?.setRule(rules) + } + + return hasChanges + } + onMounted(async () => { await nextTick() buildFormComponents() buildSystemMenu() + + // 监听设计器内容变化,自动修复重复字段ID + let isFixing = false // 防止无限循环 + watch( + () => designer.value?.getRule(), + async () => { + if (!isFixing) { + isFixing = true + await nextTick() + fixDuplicateFields() + isFixing = false + } + }, + { deep: true } + ) }) }