5

admin/src/views/parts/UserParts.vue

@@ -23,7 +23,7 @@
         <el-table-column label="模板内容">
           <template #default="{row}">
             <div v-if="row.attributesJson" style="display:flex; flex-wrap:wrap; gap:8px;">
-              <el-tag v-for="(v,k) in parseAttrs(row.attributesJson)" :key="k" type="info">{{ k }}: {{ v }}</el-tag>
+              <el-tag v-for="(item, idx) in getFormattedAttrs(row)" :key="idx" type="info">{{ item.label }}: {{ item.value }}</el-tag>
             </div>
           </template>
         </el-table-column>
@@ -69,11 +69,21 @@ const q = reactive({ kw: '' })
 const rows = ref<any[]>([])
 const visible = ref(false)
 const form = reactive<any>({})
+const templates = ref<any[]>([]) // 模板列表缓存
 const imagesConcat = computed({
   get(){ return (form.images||[]).join(', ') },
   set(v: string){ form.images = v.split(',').map(s=>s.trim()).filter(Boolean) }
 })
 
+async function loadTemplates(){
+  try {
+    const data = await get<any>('/api/product-templates')
+    templates.value = Array.isArray(data?.list) ? data.list : (Array.isArray(data)?data:[])
+  } catch(e){
+    console.error('Failed to load templates', e)
+  }
+}
+
 async function fetch(){
   const data = await get<any>('/api/admin/parts', { kw: q.kw })
   rows.value = Array.isArray(data?.list) ? data.list : (Array.isArray(data)?data:[])
@@ -82,7 +92,10 @@ function reset(){ q.kw=''; fetch() }
 function edit(row: any){ visible.value=true; Object.assign(form, JSON.parse(JSON.stringify(row))) }
 async function save(){ await put(`/api/admin/parts/${form.id}`, form); visible.value=false; await fetch() }
 
-onMounted(fetch)
+onMounted(async () => {
+  await loadTemplates()
+  await fetch()
+})
 
 function parseAttrs(json: any): Record<string, any> {
   try {
@@ -93,6 +106,24 @@ function parseAttrs(json: any): Record<string, any> {
     return {}
   }
 }
+
+// 根据 templateId 和 fieldKey 获取 fieldLabel
+function getFieldLabel(templateId: any, fieldKey: string): string {
+  if (!templateId) return fieldKey
+  const tpl = templates.value.find((t: any) => String(t.id) === String(templateId))
+  if (!tpl || !Array.isArray(tpl.params)) return fieldKey
+  const param = tpl.params.find((p: any) => p.fieldKey === fieldKey)
+  return param?.fieldLabel || fieldKey
+}
+
+// 获取格式化的参数标签列表
+function getFormattedAttrs(row: any): Array<{label: string, value: any}> {
+  const attrs = parseAttrs(row.attributesJson)
+  return Object.keys(attrs).map(k => ({
+    label: getFieldLabel(row.templateId, k),
+    value: attrs[k]
+  }))
+}
 </script>
 
 <style scoped>