提交

web-admin/src/components/business/protocol-payment-detail-readonly/index.vue

@@ -17,7 +17,11 @@
       </div>
       <div class="view-kv">
         <dt>缴费状态</dt>
-        <dd>{{ payStatusLabel(String(detail?.payStatus || '')) }}</dd>
+        <dd>
+          <el-tag :type="payStatusTagType(String(detail?.payStatus || ''))" size="small">
+            {{ payStatusLabel(String(detail?.payStatus || '')) }}
+          </el-tag>
+        </dd>
       </div>
       <template v-if="showCustomer">
         <div class="view-kv">
@@ -109,6 +113,7 @@
     formatPaymentDueDate,
     payModeLabel,
     payStatusLabel,
+    payStatusTagType,
     protocolStatusLabel,
     transferTypeLabel
   } from '@/utils/protocol-payment-labels'

web-admin/src/components/business/system-view-dialog/index.vue

@@ -26,13 +26,53 @@
       </div>
 
       <!-- sections -->
-      <div v-for="section in sections" :key="section.title" class="view-section">
+      <div v-for="(section, si) in sections" :key="sectionKey(section, si)" class="view-section">
         <h3 v-if="section.title && section.titleStyle !== 'field'">{{ section.title }}</h3>
         <div v-else-if="section.title && section.titleStyle === 'field'" class="view-field-label">
           {{ section.title }}
         </div>
+        <template v-if="section.fieldGroups?.length">
+          <div
+            v-for="(group, gi) in section.fieldGroups"
+            :key="`${si}-fg-${gi}`"
+            class="view-field-group"
+            :class="{ 'view-field-group--spaced': gi > 0 }"
+          >
+            <h3 v-if="group.title && group.titleStyle === 'section'">{{ group.title }}</h3>
+            <div
+              v-else-if="group.title && group.titleStyle !== 'section'"
+              class="view-field-label"
+            >
+              {{ group.title }}
+            </div>
+            <dl
+              v-if="group.fields.length"
+              class="view-kv-grid"
+              :class="`view-kv-grid--cols-${gridColumns}`"
+            >
+              <div
+                v-for="field in group.fields"
+                :key="field.label"
+                class="view-kv"
+                :class="{ 'view-kv-span-2': field.span }"
+              >
+                <dt>{{ field.label }}</dt>
+                <dd>
+                  <el-tag v-if="field.tagType" :type="field.tagType" size="small">{{
+                    formatViewValue(field.value)
+                  }}</el-tag>
+                  <ul v-else-if="field.items?.length" class="view-plain-list">
+                    <li v-for="(item, idx) in field.items" :key="idx">{{ item }}</li>
+                  </ul>
+                  <template v-else>{{ formatViewValue(field.value) }}</template>
+                </dd>
+              </div>
+            </dl>
+            <p v-else-if="group.title" class="view-empty-hint">{{ group.emptyHint || '—' }}</p>
+          </div>
+        </template>
         <dl
-          v-if="section.fields.length"
+          v-else-if="section.fields.length"
           class="view-kv-grid"
           :class="`view-kv-grid--cols-${gridColumns}`"
         >
@@ -103,9 +143,20 @@
     tagType?: TagType
   }
 
+  export interface ViewFieldGroup {
+    /** 分组小标题；field=与 KV 字段 label 一致；section=绿条区块标题 */
+    title?: string
+    titleStyle?: 'section' | 'field'
+    fields: ViewField[]
+    /** fields 为空且存在 title 时的占位文案 */
+    emptyHint?: string
+  }
+
   export interface ViewSection {
     title: string
     fields: ViewField[]
+    /** 同区块内多组 KV（如任务信息 + 检测参数），与 fields 二选一 */
+    fieldGroups?: ViewFieldGroup[]
     /** section=区块绿条标题；field=与 KV 字段 label（dt）一致 */
     titleStyle?: 'section' | 'field'
     /** 插槽上方标题（可与 fields 同区块，避免额外分割线） */
@@ -170,6 +221,10 @@
     if (code == null || code === '') return ''
     return `${props.codeLabel ?? '编码'}：${code}`
   })
+
+  function sectionKey(section: ViewSection, index: number) {
+    return section.title ? `${section.title}-${index}` : `section-${index}`
+  }
 </script>
 
 <style scoped lang="scss">
@@ -304,7 +359,8 @@
   }
 
   .view-field-label + .view-section-slot,
-  .view-kv-grid + .view-field-label {
+  .view-kv-grid + .view-field-label,
+  .view-field-group + .view-field-label {
     margin-top: 0;
   }
 
@@ -312,6 +368,17 @@
     margin-top: 12px;
   }
 
+  .view-field-group--spaced {
+    margin-top: 12px;
+  }
+
+  .view-field-group .view-empty-hint {
+    margin: 0;
+    font-size: 13px;
+    color: #64748b;
+    line-height: 1.5;
+  }
+
   @media (max-width: 1100px) {
     .view-kv-grid--cols-4 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -389,6 +456,14 @@
       margin-bottom: 6px;
       font-size: 12px;
     }
+
+    .view-field-group--spaced {
+      margin-top: 8px;
+    }
+
+    .view-field-group .view-empty-hint {
+      font-size: 12px;
+    }
   }
 </style>