提交

2026-05-19 23:12:56 +08:00
1 parent 93cd506a90
commit 3b875ec370
@@ -526,3 +526,122 @@ Web 管理端弹窗 SHALL 遵循规范：表单 `label-position="top"`；遮罩
 import { Plus, Close, Check, Search, RefreshLeft, Edit, Delete, View } from '@element-plus/icons-vue'
 ```

+### Requirement: 状态、结论与类型字段使用 Tag 标签展示
+
+`web-admin` 中所有列表表格和查看弹窗中的**状态**、**结论**、**类型**等枚举类字段 SHALL 使用 Element Plus `<el-tag>` 组件以彩色标签形式展示，SHALL NOT 以纯文本形式展示。具体规则如下：
+
+#### 1. 表格列中的 Tag 展示
+
+`el-table` 中所有状态/结论/类型列 SHALL 在 `<template #default="{ row }">` 内使用 `<el-tag>` 渲染，并通过 `:type` 属性区分语义色。SHALL NOT 使用自定义 `<span class="tag">` 或纯文本。
+
+**标准写法：**
+
+```html
+<el-table-column prop="status" label="状态" width="90" align="center">
+  <template #default="{ row }">
+    <el-tag :type="row.status === '1' ? 'success' : 'info'" size="small">
+      {{ row.status === '1' ? '正常' : '停用' }}
+    </el-tag>
+  </template>
+</el-table-column>
+```
+
+**多状态映射标准写法（使用辅助函数）：**
+
+```html
+<el-table-column prop="workOrderStatus" label="状态" width="100" align="center">
+  <template #default="{ row }">
+    <el-tag :type="statusTagType(row.workOrderStatus)" size="small">
+      {{ statusLabel(row.workOrderStatus) }}
+    </el-tag>
+  </template>
+</el-table-column>
+```
+
+```typescript
+function statusTagType(s: string): string {
+  const m: Record<string, string> = { ywc: 'success', ypz: 'warning', dpz: 'info' }
+  return m[s] || 'info'
+}
+```
+
+#### 2. 查看弹窗（SystemViewDialog）中的 Tag 展示
+
+使用 `SystemViewDialog` 组件（`src/components/business/system-view-dialog/index.vue`）时，状态/结论/类型字段 SHALL 在 `ViewField` 定义中传入 `tagType` 属性。组件检测到 `tagType` 后自动以 `<el-tag>` 渲染该字段值。
+
+**ViewField 接口扩展（已实现）：**
+
+```typescript
+export type TagType = 'success' | 'warning' | 'danger' | 'info' | '' | 'primary'
+
+export interface ViewField {
+  label: string
+  value: string | number | boolean | null | undefined
+  span?: boolean
+  /** 传入后以 el-tag 渲染，值为 el-tag 的 type 属性 */
+  tagType?: TagType
+}
+```
+
+**标准写法：**
+
+```typescript
+const viewSections = computed<ViewSection[]>(() => [
+  {
+    title: '任务信息',
+    fields: [
+      { label: '任务号', value: d.taskNo },
+      { label: '状态', value: statusLabel(d.status), tagType: d.status === 'ywc' ? 'success' : d.status === 'jxz' ? 'warning' : 'info' },
+      { label: '检测结论', value: conclusionLabel(d.conclusion), tagType: d.conclusion === 'tg' ? 'success' : d.conclusion === 'btg' ? 'danger' : 'info' },
+      // 普通字段不加 tagType，仍以纯文本展示
+      { label: '备注', value: d.remark || '—', span: true },
+    ]
+  }
+])
+```
+
+#### 3. 自定义查看弹窗中的 Tag 展示
+
+不使用 `SystemViewDialog` 的自定义查看弹窗（如 `ProtocolViewDialog`、`DonationViewDialog` 等）中的状态/结论字段 SHALL 同样使用 `<el-tag>` 展示。
+
+**标准写法：**
+
+```html
+<dd>
+  <el-tag :type="row.acceptConclusion === 'js' ? 'success' : 'danger'" size="small">
+    {{ acceptConclusionLabel(row.acceptConclusion) }}
+  </el-tag>
+</dd>
+```
+
+#### 4. Tag 类型语义色映射规范
+
+| Tag Type | 颜色 | 适用语义 | 示例 |
+|---|---|---|---|
+| `success` | 绿色 | 正常、启用、已完成、生效中、通过 | 正常/启用/已完成/接收/通过 |
+| `warning` | 橙色 | 进行中、待确认、已过期、预警 | 进行中/已排配/已过期/待确认 |
+| `danger` | 红色 | 异常、停用、已作废、拒绝、不通过 | 异常/已作废/拒绝/不通过 |
+| `info` | 灰色 | 待执行、待生效、未知、默认 | 待执行/待生效/停用/无结论 |
+| `primary` | 蓝色 | 特殊分类、来源类型、转出 | 转科研/转细胞存储/来源类型/菜单类型 |
+
+**对于启用/停用的状态字段**，SHALL 使用 `success`（启用）和 `info`（停用），SHALL NOT 使用 `danger` 表示停用状态。
+
+#### 5. 公共标签映射函数
+
+多个页面复用的状态标签映射 SHALL 抽取为公共工具函数（如 `utils/protocol-payment-labels.ts`、`utils/qc-labels.ts`），同时提供 `xxxLabel`（文本）和 `xxxTagType`（tag type）两个配套函数。仅单个页面使用的状态标签 SHALL 在页面 `<script setup>` 中定义。
+
+#### Scenario: 新增列表页包含状态列
+
+- **WHEN** 新增列表页的表格中包含状态、结论或类型字段
+- **THEN** 该列 SHALL 使用 `<el-tag>` 渲染，通过 `:type` 绑定语义色，SHALL NOT 使用纯文本或自定义 `<span class="tag">`
+
+#### Scenario: 新增查看弹窗包含状态字段
+
+- **WHEN** 新增 `SystemViewDialog` 查看弹窗，且 fields 中包含状态/结论/类型字段
+- **THEN** 该字段 SHALL 传入 `tagType` 属性，组件自动以 `<el-tag>` 渲染
+
+#### Scenario: Code review Tag 展示
+
+- **WHEN** PR 修改列表页或查看弹窗中的状态/结论/类型字段展示
+- **THEN** 审查者 SHALL 确认使用 `<el-tag>` 组件（表格列）或 `tagType` 属性（SystemViewDialog），SHALL NOT 出现纯文本状态展示或自定义 `<span class="tag">`
+