fix: 修复复制组件时字段 ID 重复的问题,自动生成新的字段 ID

This commit is contained in:
YunaiV
2025-11-22 11:16:27 +08:00
parent 5ebbc756c4
commit 33af5dd764

View File

@@ -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
*
* 对应 issuehttps://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICM22X
*/
const fixDuplicateFields = () => {
// 获取当前所有规则
const rules = designer.value?.getRule() || []
const fieldIds = new Set<string>()
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 }
)
})
}