mirror of
https://github.com/yudaocode/yudao-ui-admin-vue3.git
synced 2026-03-30 01:43:30 +00:00
fix: 修复复制组件时字段 ID 重复的问题,自动生成新的字段 ID
This commit is contained in:
@@ -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<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 }
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user