up

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "czemc-budget-execution-frontend",
       "version": "1.0.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@antv/g6": "^5.0.50",
         "@element-plus/icons-vue": "^2.3.1",

src/views/payment/IndirectPayment.vue

@@ -207,8 +207,8 @@
               <!-- 普通字段区域 -->
               <template v-if="section.fields && Array.isArray(section.fields)">
                 <el-form-item
-                  v-for="field in section.fields.filter(f => f.visible !== false && checkFieldDisplayConditions(f))"
+                  v-for="(field, fieldIndex) in section.fields.filter(f => f.visible !== false && checkFieldDisplayConditions(f))"
-                  :key="field.key"
+                  :key="`${sectionKey}-field-${field.key || 'field'}-${fieldIndex}`"
                   :label="field.label"
                   :prop="field.key"
                   :required="field.required"
@@ -556,8 +556,8 @@
                 >
                   <h4 class="round-title">第 {{ round.round }} 轮支付</h4>
                   <el-form-item
-                    v-for="field in round.fields.filter(f => f.visible !== false && checkFieldDisplayConditions(f))"
+                    v-for="(field, fieldIndex) in round.fields.filter(f => f.visible !== false && checkFieldDisplayConditions(f))"
-                    :key="field.key"
+                    :key="`${sectionKey}-round-${roundIndex}-field-${field.key || 'field'}-${fieldIndex}`"
                     :label="field.label"
                     :prop="field.key"
                     :required="field.required"
@@ -719,8 +719,8 @@
                   <table class="preview-kv">
                     <tbody>
                       <tr
-                        v-for="field in section.fields.filter(f => f.visible !== false && checkFieldDisplayConditions(f))"
+                        v-for="(field, fieldIndex) in section.fields.filter(f => f.visible !== false && checkFieldDisplayConditions(f))"
-                        :key="field.key"
+                        :key="`${sectionKey}-preview-field-${field.key || 'field'}-${fieldIndex}`"
                       >
                         <td class="preview-k">{{ field.label }}</td>
                         <td v-html="formatPreviewFieldValue(formData[field.key], field.element_type, field)"></td>
@@ -744,8 +744,8 @@
                       <table class="preview-kv">
                         <tbody>
                           <tr
-                            v-for="field in round.fields.filter(f => f.visible !== false && checkFieldDisplayConditions(f))"
+                            v-for="(field, fieldIndex) in round.fields.filter(f => f.visible !== false && checkFieldDisplayConditions(f))"
-                            :key="field.key"
+                            :key="`${sectionKey}-preview-round-${roundIndex}-field-${field.key || 'field'}-${fieldIndex}`"
                           >
                             <td class="preview-k">{{ field.label }}</td>
                             <td v-html="formatPreviewFieldValue(formData[field.key], field.element_type, field)"></td>
@@ -3158,6 +3158,60 @@ const sortConfigByGroupOrder = async (config) => {
   }
 }
 
+// 规范化模板字段 key，避免同一模板元素被配置多次时 key 冲突导致值串联
+const normalizeTemplateFieldKeys = (config) => {
+  if (!config || typeof config !== 'object') return config
+
+  const usedKeys = new Set()
+  let autoKeySeed = 1
+
+  const nextAutoKey = () => {
+    let candidate = `field_${autoKeySeed++}`
+    while (usedKeys.has(candidate)) {
+      candidate = `field_${autoKeySeed++}`
+    }
+    return candidate
+  }
+
+  const normalizeOneField = (field) => {
+    if (!field || typeof field !== 'object') return
+
+    let baseKey = String(field.key || '').trim()
+    if (!baseKey) {
+      baseKey = nextAutoKey()
+    }
+
+    let finalKey = baseKey
+    let seq = 2
+    while (usedKeys.has(finalKey)) {
+      finalKey = `${baseKey}__${seq}`
+      seq += 1
+    }
+
+    field.key = finalKey
+    usedKeys.add(finalKey)
+  }
+
+  Object.keys(config).forEach(sectionKey => {
+    const section = config[sectionKey]
+    if (!section) return
+
+    if (Array.isArray(section.fields)) {
+      section.fields.forEach(normalizeOneField)
+    }
+
+    if (Array.isArray(section.rounds)) {
+      section.rounds.forEach(round => {
+        if (Array.isArray(round?.fields)) {
+          round.fields.forEach(normalizeOneField)
+        }
+      })
+    }
+  })
+
+  return config
+}
+
 // 加载分类的模板
 const loadTemplateForCategory = async (categoryId) => {
   try {
@@ -3172,6 +3226,7 @@ const loadTemplateForCategory = async (categoryId) => {
         
         // 按照分组的 sort_order 重新排序配置
         config = await sortConfigByGroupOrder(config)
+        config = normalizeTemplateFieldKeys(config)
         templateConfig.value = config
         
         // 补充勾选清单的 options 数据

src/views/settings/CanvasSettings.vue

@@ -445,6 +445,7 @@ const normalizeFieldConfig = (config) => {
           field.key = field.label.toLowerCase().replace(/\s+/g, '_')
         }
       })
+      normalizeFieldKeysInList(section.fields)
     }
     
     // 处理 payment 区域的 rounds
@@ -467,6 +468,7 @@ const normalizeFieldConfig = (config) => {
               field.key = field.label.toLowerCase().replace(/\s+/g, '_')
             }
           })
+          normalizeFieldKeysInList(round.fields)
         }
       })
     }
@@ -755,12 +757,64 @@ const deleteElement = (index) => {
   }).catch(() => {})
 }
 
+const getUniqueFieldKey = (baseKey, editingIndex = null) => {
+  const normalizedBase = String(baseKey || '').trim()
+  if (!normalizedBase) return ''
+
+  const usedKeys = new Set()
+  currentSectionFields.value.forEach((field, idx) => {
+    if (editingIndex !== null && idx === editingIndex) return
+    const key = String(field?.key || '').trim()
+    if (key) {
+      usedKeys.add(key)
+    }
+  })
+
+  if (!usedKeys.has(normalizedBase)) {
+    return normalizedBase
+  }
+
+  let seq = 2
+  let candidate = `${normalizedBase}__${seq}`
+  while (usedKeys.has(candidate)) {
+    seq += 1
+    candidate = `${normalizedBase}__${seq}`
+  }
+  return candidate
+}
+
+const normalizeFieldKeysInList = (fields = []) => {
+  const usedKeys = new Set()
+  let autoKeySeed = 1
+
+  fields.forEach((field) => {
+    if (!field || typeof field !== 'object') return
+
+    let baseKey = String(field.key || '').trim()
+    if (!baseKey) {
+      baseKey = `field_${autoKeySeed++}`
+    }
+
+    let candidate = baseKey
+    let seq = 2
+    while (usedKeys.has(candidate)) {
+      candidate = `${baseKey}__${seq}`
+      seq += 1
+    }
+
+    field.key = candidate
+    usedKeys.add(candidate)
+  })
+
+  return fields
+}
+
 // 元素选择改变时的处理
 const onElementSelectChange = () => {
   const selectedElement = availableElements.value.find(e => e.id === elementForm.value.element_id)
   if (selectedElement) {
     elementForm.value.label = selectedElement.name
-    elementForm.value.key = `element_${selectedElement.id}`
+    elementForm.value.key = getUniqueFieldKey(`element_${selectedElement.id}`, editingElementIndex.value)
     
     // 根据元素的category和type设置element_type
     if (selectedElement.category === 'form_field') {
@@ -806,9 +860,12 @@ const saveElement = async () => {
     return
   }
   
-  if (!elementForm.value.key) {
+  const baseKey = String(elementForm.value.key || '').trim() || `element_${selectedElement.id}`
-    elementForm.value.key = `element_${selectedElement.id}`
+  const uniqueKey = getUniqueFieldKey(baseKey, editingElementIndex.value)
+  if (uniqueKey !== baseKey) {
+    ElMessage.warning(`字段键名重复，已自动调整为 ${uniqueKey}`)
   }
+  elementForm.value.key = uniqueKey
 
   const element = {
     key: elementForm.value.key,
@@ -1011,6 +1068,8 @@ const loadDefaultTemplateFromGroups = async () => {
           return field
         })
         
+        normalizeFieldKeysInList(fields)
+
         // 使用分组编码或ID作为配置的key，分组名称作为title
         const sectionKey = group.code || `group_${group.id}`
         config[sectionKey] = {
@@ -1135,6 +1194,8 @@ const saveFieldConfig = () => {
     return
   }
 
+  normalizeFieldKeysInList(currentSectionFields.value)
+
   // 如果区域有rounds结构（支付流程），更新rounds[0].fields
   if (section.rounds && Array.isArray(section.rounds)) {
     if (section.rounds.length === 0) {
@@ -1242,6 +1303,8 @@ const reloadGroupsOnly = async () => {
             return field
           })
           
+          normalizeFieldKeysInList(fields)
+
           newConfig[sectionKey] = {
             title: group.name,
             fields: fields,
@@ -1927,4 +1990,3 @@ onMounted(async () => {
   }
 }
 </style>
-